print and web design trends 2012

© 2012 GLOBAL POINT USA INC. All Rights Reserved. Reproduction of this document and its contents without the expressed permission of GLOBAL POINT USA INC. is prohibited

JULY 2012

| CREATE & COMMUNICATE |

NEW YORK | ST. PETERSBURG | HAMBURG | MOSCOW

T. 212. 675.6760 F. 212.675.6780www.globalpointny.com 27 West 24th Street, Suite 701 New York, NY 10010, USA

Tuesday, July 17, 2012

http://www.globalpointny.com



JULY 2012 T. 212. 675.6760 F. 212.675.6780www.globalpointny.com 27 West 24th Street, Suite 701 New York, NY 10010, USA

GLOBAL POINT NY

TRENDS INPRINT & WEB

DESIGN

JULY 2012






THE DESIGNER’S DEBATE

DO YOU THINK PRINT IS DEAD?

Oh, definitely! All hail the DIGITAL AGE!

Totally not! With everything going digital, Print has INCREASED IN

VALUE AND APPRECIATION






DESIGN IN PRINT & WEB






TABLE OF CONTENTS

DESIGNIN PRINT

ARTISAN AUTHENCITY

BRAND CAMOUFLAGE

ONGOINGLY ORGANIC

BURSTS OF COLOR

LABEL ADDICTION

TRADITIONAL PRINTING

TYPOGRAPHIC BACKGROUNDS

EDITORIAL

INFOGRAPHICS

WEB DESIGN






ARTISAN AUTHENCITY

• SIMPLICITY

• VERSATILITY

• COST-EFFECTIVE

• PERSONALITY

With giant multinational brands stripping any

sense of variation out of the products they

sell, consumers are consciously seeking out an independent, artisan aesthetic for a

refreshing change.

PRINT






• STANDING OUT

• ORGANIC

• NEVER AWKWARD

The monogram logo not only makes a

comeback in print but also on the web.

However, it’s reason for usage differs.

ARTISAN AUTHENCITY

WEB


http://saltsurf.com/

http://saltsurf.com/



http://www.mercyonline.co.uk/

http://www.mercyonline.co.uk/

http://siteinspire.com/

http://siteinspire.com/

http://ze-studio.com/

http://ze-studio.com/

http://brilliantcornersofpopularamusements.com/

http://brilliantcornersofpopularamusements.com/



• NO FRILLS

• SEAMLESS

• INVISIBLE

• TIMELESS

Last year, we saw an onslaught of

handwritten logos that made it known that

they should be the first thing you are looking at. Straying away from convention, brands

are now questioning the necessity of having

the logo called out.

BRAND CAMOUFLAGE

PRINT






• BIG TYPE

• UNCONVENTIONAL NAV

• MELDING LOGO + HEADER

Breaking out of tradition, the web is also

trying to break out of the typical logo and

horizontal navigation template

BRANDCAMOUFLAGE

WEB




http://www.neversleepbook.com/

http://www.neversleepbook.com/

http://www.establishednyc.com/main/index.php

http://www.establishednyc.com/main/index.php

http://fabulousbeast.net/

http://fabulousbeast.net/

http://wearemanic.com/








































































• RAW MATERIALS

• JUST LIKE HOME

• SUSTAINABILITY

• NOSTALGIC SIMPLICITY

With the growing awareness of how

consumerism plays a large part in global

pollution, designers are continuing to find aesthically pleasing ways to minimize waste

and contribute to creating healthy,

productive environments.

PRINT

ONGOINGLYORGANIC






• JOURNAL

• ENDLESS SCROLLING

• CATEGORIZING

Content is organically sized and tiled like a

jigsaw puzzle that goes on endlessly.

ONGOINGLYORGANIC

WEB




http://pinterest.com/globalpointny/

http://pinterest.com/globalpointny/

http://www.dunhill.com

http://www.dunhill.com

http://dynamit.us/

http://dynamit.us/

http://www.dazeddigital.com/satellitevoices/

http://www.dazeddigital.com/satellitevoices/



• CONTRAST

• ABOVE THE CROWD

• LESS IS MORE

• DUOTONE

With all the surrounding clutter and

excessiveness around us, sometimes it’s

just better to say it like it is: loud, clear, and as it is.

BURSTS OF COLOR

PRINT






• DYNAMIC HIGHLIGHTING

• RGB > CMYK

• USE SPARINGLY

Unlike print, where “cost” follows closely

behind the word “color”, designers are given

the luxury of an unlimited color palette. Easily abused, this is another proven

example that less is still more.

BURSTS OF COLOR

WEB

BURSTS OF COLOR




http://mikemcquade.com/

http://mikemcquade.com/

http://madebyquan.com/

http://madebyquan.com/

http://www.edward-steichen-award.lu/

http://www.edward-steichen-award.lu/

http://methoddesignlab.com/

http://methoddesignlab.com/



• PERSONALISED

• TEXTURE

• AU NATUREL

Labels don’t necessarily have to seal an

opening anymore.

LABELADDICTION

PRINT






• THE ILLUSION

• RETRO

• CREATING DIMENSION

Unlike print, web design is intangible. There

is no way around that. Or is there?

LABELADDICTION

WEB




http://www.blogenbois.fr/

http://www.blogenbois.fr/

http://www.henry-realestate.com/

http://www.henry-realestate.com/

http://www.georgebadea.com/

http://www.georgebadea.com/

http://www.visualrepublic.net

http://www.visualrepublic.net




PRINT

• RUGGED GOOD LOOKS

• DARK & LIGHT SIDE

• PRINT FRIENDLY

• TACTILE APPEAL

Letterpress is still going strong, and applied

on virtually any kind of collateral today.







WEB

• ENTIRELY CSS

• USE SPARINGLY

We love it so much, we even try to apply it’s

charming qualities onto the screen.

HELPFUL TOOLS

— Webfonts ShowcaseA great microsite demonstrating creative use of

web fonts across various sites. The best part? It

shows you most popular (bestseller) fonts in the

sidebar, so you know what’s really hot right now.




http://gerrenlamson.com/

http://gerrenlamson.com/

http://www.questionablecharacters.com/

http://www.questionablecharacters.com/

http://flightoftheconchords.co.nz/

http://flightoftheconchords.co.nz/

http://www.amazeelabs.com/en

http://www.amazeelabs.com/en

http://webfonts.info/

http://webfonts.info/



• DESIGN YOUR INFO

• SAY MANY THINGS

• FUN FACTS

Copy doesn’t have to be boring text that

nobody ever reads.

INFORMATIONAL TYPOGRAPHICBACKGROUNDS

PRINT






INFORMATIONAL TYPOGRAPHICBACKGROUNDS

WEB

• I CAN HIGHLIGHT THIS?!

• IF ICONS CAN HAVE FUN...

Hello Webfonts. Hello HTML 5. Hello future.

HELPFUL TOOLS— Complementing Google FontsGoogle font combinations you can use immediately,

without spending time on trial and error.




http://www.griplimited.com/

http://www.griplimited.com/

http://www.thisistommy.com/

http://www.thisistommy.com/

http://www.itsthejumpoff.com/

http://www.itsthejumpoff.com/

http://lawineagency.com/

http://lawineagency.com/

http://designshack.net/articles/css/10-great-google-font-combinations-you-can-copy/

http://designshack.net/articles/css/10-great-google-font-combinations-you-can-copy/



• BIG TYPE

• OVER-SIZE FORMATS

• COLORED PAPER

• TYPE/ IMAGE OVERLAYS

sophisticated small type, pocket-sized

brochures, exaggerated white space...

where did they go?

EDITORIAL

PRINT






EDITORIAL

WEB

• ON THE COVER

• EDITORIAL HOMAGE

• IMAGE/TYPE SIZE

• SOCIAL FOLLOWING

Content heavy sites are adjusting their

perception to how they deliver articles to

your screen.




http://www.newbabylon.com.au/




http://www.interviewmagazine.com

http://www.interviewmagazine.com

http://review.ltdmag.com/

http://review.ltdmag.com/

http://www.vogue.com/

http://www.vogue.com/



• GRAPHS MADE INTERESTING

• PICTOGRAMS

• ON ANY MEDIA

• TYPE/ IMAGE OVERLAYS

INFOGRAPHICS

PRINT

Infographics is truly a balance of art +

information. Too abstract, information

gets lost. Too informational, the reader loses interest.






• ANIMATED

• YOU LEAD THE STORY

• STORYTELLING

Condensed information exemplified in

imagery and made interactive... how fun!

INFOGRAPHICS

WEB




http://www.edlundart.com/pages/is-the-internet-awake.html

http://www.edlundart.com/pages/is-the-internet-awake.html

http://swellca.st/locations/perth-surf-report-forecast

http://swellca.st/locations/perth-surf-report-forecast

http://futureofcarsharing.com/

http://futureofcarsharing.com/

http://www.nytimes.com/interactive/2011/06/19/nyregion/how-many-households-are-like-yours.html

http://www.nytimes.com/interactive/2011/06/19/nyregion/how-many-households-are-like-yours.html



LET’SGET

TECHNICAL






TABLE OF CONTENTS

LET’S GETTECHNICAL

RESPONSIVE WEB DESIGN

VERTICAL SCROLLING

SCALEABLE BACKGROUNDS

GRID SYSTEMS

COLLAGING INFORMATION






• BALANCED EVERYTIME

• STAYING IN BRAND

• THUMB BUTTONS

Day by day, the number of devices,

platforms, and browsers that need to work

with your site grows.Responsive web design represents a

fundamental shift in how we’ll build

websites for the decade to come.

HELPFUL TOOLS

— Responsive News BlogResponsive Web Design Blog

— Tuts+Responsive web design tutorials

& Articles

— More ExamplesGallery of Responsive Web

Design Examples

WEBTECH

RESPONSIVEWEB DESIGN




http://www.starbucks.com/

http://www.starbucks.com/

http://unmatchedstyle.com/cssoff/

http://unmatchedstyle.com/cssoff/

http://blog.responsivenews.co.uk

http://blog.responsivenews.co.uk

http://webdesign.tutsplus.com

http://webdesign.tutsplus.com

http://mediaqueri.es/

http://mediaqueri.es/



GRID SYSTEM

• STABILITY & STRUCTURE

• ALTERNATIVE TO RESPONSIVE DESIGN

• USER-FRIENDLY

• FLUIDITY

Grids have survived centuries for good reason.

Traditionally used in print work to create a

systematic structure to designing layouts, they work just as well (or even better) digitally.

HELPFUL TOOLS— Grid Calculator:Generate a grid for you.

— JQuery Masonry:Arranges items vertically and

horizontally according to a grid.

— Slammer : Application that overlays a grid

anywhere

WEBTECH




http://colly.com/

http://colly.com/

http://colly.com/

http://colly.com/

http://www.gridsystemgenerator.com/

http://www.gridsystemgenerator.com/

http://masonry.desandro.com/

http://masonry.desandro.com/

http://ringce.com/slammer

http://ringce.com/slammer



• SCROLLING TO A POINT

• SUBTLE “PARALLEX EFFECT”

• STORYTELLING

We all know what a webpage does. It scrolls up

and down. Snooze. Similar to paper, it is just a

canvas. Surely, we can do something, to make it a little more amazing. Print has it’s plethora of

fanciful effects (embossing, spot UV, die-

cut, ...etc) The web designer’s solution: Vertical

Scrolling.

VERTICALSCROLLING

WEBTECH




http://davegamache.com/craftsmanship/



http://jessandruss.us/

http://jessandruss.us/

http://lostworldsfairs.com/atlantis/

http://lostworldsfairs.com/atlantis/

http://www.editsquarterly.com/

http://www.editsquarterly.com/



SCALEABLEBACKGROUNDS

• BACKGROUND VIDEOS

• LIVE FEED

• BACKGROUND FRAMING

• SLIDESHOW VERSATILITY

This is nothing new... but the variations of

how designers are using it is.

WEBTECH




http://www.rfrmjewelry.com/index.php

http://www.rfrmjewelry.com/index.php

http://damienhirst.com/

http://damienhirst.com/

http://www.theblacksparrow.co.nz/

http://www.theblacksparrow.co.nz/

http://www.beyonce.com/

http://www.beyonce.com/

http://www.31philliplim.com/%23

http://www.31philliplim.com/%23



• WHITE SPACE

• USING REAL OBJECTS

• OFF THE BEATEN PATH

• HANDWRITING

These websites try to submerse their

audience into the brand by simulating

reality.

COLLAGINGINFORMATION

WEBTECH




http://giraffe.net/classic

http://giraffe.net/classic

http://islandcreekoysterbar.com/

http://islandcreekoysterbar.com/

http://gnosh.co.uk/

http://gnosh.co.uk/



WEBPRINT

WEARE

HERE






THE TRUTH

WHAT IF BOTH PARTIES WERE RIGHT?

True, everybody is wired in to some extent today, but does it have to be an either/or debate?

Designers today are finding many ways to bridge the gap between traditional and digital by taking the

many things we love about the Tangible and applying it to the world wide web.


