Print and Web Design Trends 2012

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

| CREATE & COMMUNICATE |

NEW YORK | ST. PETERSBURG |
© 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 HAMBURG | MOSCOW

Tuesday, July 17, 2012


GLOBAL POINT NY

TRENDS IN
PRINT & WEB
DESIGN
JULY 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



THE DESIGNER’S DEBATE
DO YOU THINK PRINT IS DEAD?

Oh, deﬁnitely! 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
ARTISAN AUTHENCITY

BRAND CAMOUFLAGE

ONGOINGLY ORGANIC

DESIGN BURSTS OF COLOR WEB
IN PRINT DESIGN
LABEL ADDICTION

TRADITIONAL PRINTING

TYPOGRAPHIC BACKGROUNDS

EDITORIAL

INFOGRAPHICS




PRINT

ARTISAN
AUTHENCITY
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.

• SIMPLICITY
• VERSATILITY
• COST-EFFECTIVE
• PERSONALITY




WEB

ARTISAN
AUTHENCITY
The monogram logo not only makes a
comeback in print but also on the web.
However, it’s reason for usage differs.

• STANDING OUT
• ORGANIC
• NEVER AWKWARD




PRINT

BRAND
CAMOUFLAGE
Last year, we saw an onslaught of
handwritten logos that made it known that
they should be the ﬁrst thing you are looking
at. Straying away from convention, brands
are now questioning the necessity of having
the logo called out.

• NO FRILLS
• SEAMLESS
• INVISIBLE
• TIMELESS




WEB

BRAND
CAMOUFLAGE
Breaking out of tradition, the web is also
trying to break out of the typical logo and
horizontal navigation template

• BIG TYPE
• UNCONVENTIONAL NAV
• MELDING LOGO + HEADER




PRINT

ONGOINGLY
ORGANIC
With the growing awareness of how
consumerism plays a large part in global
pollution, designers are continuing to ﬁnd
aesthically pleasing ways to minimize waste
and contribute to creating healthy,
productive environments.

• RAW MATERIALS
• JUST LIKE HOME
• SUSTAINABILITY
• NOSTALGIC SIMPLICITY




WEB

ONGOINGLY
ORGANIC
Content is organically sized and tiled like a
jigsaw puzzle that goes on endlessly.

• JOURNAL
• ENDLESS SCROLLING
• CATEGORIZING




PRINT

BURSTS OF
COLOR
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.

• CONTRAST
• ABOVE THE CROWD
• LESS IS MORE
• DUOTONE




WEB

BURSTS OF
COLOR
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.

• DYNAMIC HIGHLIGHTING
• RGB > CMYK
• USE SPARINGLY




PRINT

LABEL
ADDICTION
Labels don’t necessarily have to seal an
opening anymore.

• PERSONALISED
• TEXTURE
• AU NATUREL




WEB

LABEL
ADDICTION
Unlike print, web design is intangible. There
is no way around that. Or is there?

• THE ILLUSION
• RETRO
• CREATING DIMENSION




PRINT

TRADITIONAL
PRINTING
Letterpress is still going strong, and applied
on virtually any kind of collateral today.

• RUGGED GOOD LOOKS
• DARK & LIGHT SIDE
• PRINT FRIENDLY
• TACTILE APPEAL




WEB

TRADITIONAL
PRINTING
We love it so much, we even try to apply it’s
charming qualities onto the screen.

• ENTIRELY CSS
• USE SPARINGLY

HELPFUL TOOLS
— Webfonts Showcase
A 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.




PRINT

INFORMATIONAL
TYPOGRAPHIC
BACKGROUNDS
Copy doesn’t have to be boring text that
nobody ever reads.

• DESIGN YOUR INFO
• SAY MANY THINGS
• FUN FACTS




WEB

INFORMATIONAL
TYPOGRAPHIC
BACKGROUNDS
Hello Webfonts. Hello HTML 5. Hello future.

• I CAN HIGHLIGHT THIS?!
• IF ICONS CAN HAVE FUN...

HELPFUL TOOLS
— Complementing Google Fonts
Google font combinations you can use immediately,
without spending time on trial and error.




PRINT

EDITORIAL
sophisticated small type, pocket-sized
brochures, exaggerated white space...
where did they go?

• BIG TYPE
• OVER-SIZE FORMATS
• COLORED PAPER
• TYPE/ IMAGE OVERLAYS




WEB

EDITORIAL
Content heavy sites are adjusting their
perception to how they deliver articles to
your screen.

• ON THE COVER
• EDITORIAL HOMAGE
• IMAGE/TYPE SIZE
• SOCIAL FOLLOWING




PRINT

INFOGRAPHICS
Infographics is truly a balance of art +
information. Too abstract, information
gets lost. Too informational, the reader
loses interest.

• GRAPHS MADE INTERESTING
• PICTOGRAMS
• ON ANY MEDIA
• TYPE/ IMAGE OVERLAYS




WEB

INFOGRAPHICS
Condensed information exempliﬁed in
imagery and made interactive... how fun!

• ANIMATED
• YOU LEAD THE STORY
• STORYTELLING




LET’S
GET
TECHNICAL




TABLE OF CONTENTS
RESPONSIVE WEB DESIGN

GRID SYSTEMS

LET’S GET
VERTICAL SCROLLING
TECHNICAL
SCALEABLE BACKGROUNDS

COLLAGING INFORMATION




WEB
TECH

RESPONSIVE
WEB DESIGN
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 HELPFUL TOOLS
websites for the decade to come.
— Responsive News Blog
Responsive Web Design Blog

• BALANCED EVERYTIME — Tuts+
Responsive web design tutorials
• STAYING IN BRAND & Articles

— More Examples
• THUMB BUTTONS Gallery of Responsive Web
Design Examples




WEB
TECH

GRID SYSTEM
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.

• STABILITY & STRUCTURE
•ALTERNATIVE TO HELPFUL TOOLS
— Grid Calculator:
RESPONSIVE DESIGN Generate a grid for you.

— JQuery Masonry:
• USER-FRIENDLY Arranges items vertically and
horizontally according to a grid.

• FLUIDITY — Slammer :
Application that overlays a grid
anywhere




WEB
TECH

VERTICAL
SCROLLING
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.

• SCROLLING TO A POINT
• SUBTLE “PARALLEX EFFECT”
• STORYTELLING




WEB
TECH

SCALEABLE
BACKGROUNDS
This is nothing new... but the variations of
how designers are using it is.

• BACKGROUND VIDEOS
• LIVE FEED
• BACKGROUND FRAMING
• SLIDESHOW VERSATILITY




WEB
TECH

COLLAGING
INFORMATION
These websites try to submerse their
audience into the brand by simulating
reality.

• WHITE SPACE
• USING REAL OBJECTS
• OFF THE BEATEN PATH
• HANDWRITING




WE
PRINT ARE WEB
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 ﬁnding 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.



Print and Web Design Trends 2012

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Print and Web Design Trends 2012