Smashing eBook 7 - Professional Web Design Volume 2

280 Pages·21.048 MB·English

by  Folle, Andrew

Imprint
Published in March 2011
Smashing Media GmbH, Freiburg, Germany
Book Cover Design: Fabian Ziegler
Editing: Thomas Burkert
Proofreading: Brian Goessling
Concept: Sven Lennartz, Vitaly Friedman
Founded in September 2006, Smashing Magazine delivers useful and
innovative information to Web designers and developers. Smashing
Magazine is a well-respected international online publication for
professional Web designers and developers. Our main goal is to support
the Web design community with useful and valuable articles and resources,
written and created by experienced designers and developers.
ISBN: 978-3-943075-09-0
Version: March 29, 2011
Smashing eBook #7│Professional Web Design, Volume 2 │ 2
Table of Contents
Preface
The Current State of Web Design
Web Design Trends
Responsive Web Design: What It Is and How to Use It
A Showcase Of Responsive Web Design
Persuasion Triggers in Web Design
Why We Should Start Using CSS3 and HTML5 Today
HTML5: The Facts And The Myths
The User Is The Anonymous Web Designer
The Design Matrix: A Powerful Tool for Guiding Client Input
A Design Is Only As Deep As It Is Usable
Web Designers, Don’t Do It Alone
Why Design-By-Committee Should Die
Design Better and Faster with Rapid Prototyping
When a Thousand Words Is Worth a Picture
The Authors
Smashing eBook #7│Professional Web Design, Volume 2 │ 3
Preface
We’re seeing better interaction design and more aesthetically pleasing
designs. And we’re seeing more personal, engaging and memorable sites,
too. But what exactly is making the difference? What new directions is Web
design heading in today? What new techniques, concepts and ideas are
becoming important?
This eBook describes existing and upcoming trends and explains how the
Web design might evolve in the coming months and years. It also touches
on what Web designers should be ready for to keep abreast of new
challenges and opportunities.
The articles are the best about professional Web design that have been
published on Smashing Magazine in 2010 and 2011. They have been
carefully edited and prepared for this eBook. Some screenshots and links
were removed to make the book easier to read and print out.
— Thomas Burkert, Smashing eBook Editor
Smashing eBook #7│Professional Web Design, Volume 2 │ 4
The Current State of Web Design
Vitaly Friedman
Web design is a fickle industry. Just like every other form of artistic
expression, Web design has undergone a continuous and surprisingly fast
evolution. Once a playground for enthusiasts, it has now become a mature
rich medium with strong aesthetic and functional appeal. In fact, we are
experiencing what could be the golden era of Web design — or at least the
best period thus far. We have powerful new tools at our disposal (CSS3,
HTML5, font-embedding, etc.), a plethora of freely available resources, a
strong design community and also (if you needed any more!) reliable
support of Web standards in the major browsers.
We’re seeing better interaction design and more aesthetically pleasing
designs. And we’re seeing more personal, engaging and memorable sites,
too. But what exactly is making the difference? What new directions is Web
design heading in today? What new techniques, concepts and ideas are
becoming important? In this article, we present some observations on the
current state of Web design. We describe existing and upcoming trends
and explain how Web design might evolve in the coming months and years.
We’ll also touch on what we as Web designers should be ready for to keep
abreast of new challenges and opportunities.
Smashing eBook #7│Professional Web Design, Volume 2 │ 5
Design For Delight
As designers, our job is to communicate ideas effectively. For every
particular message, we create a context in which the message would work
best, guiding users to achieving their tasks, gaining their trust or convincing
them of whatever we’re communicating. Of course, there are endless ways
to create this context. One of them is to design for visual aesthetics,
surprise, joy, happiness — design for delight; design to be memorable and
remarkable.
Attractive things work better and help focus and keep the user’s attention.
Memorable design increases excitement for products and brands, leading
to increased engagement. In fact, a strong, reliable emotional relationship
between your clients and their audience could be the best thing that ever
happens to your career.
Although the vast majority of brands are still silent, passive and impersonal,
we’ve observed more websites trying hard to engage our senses, whether
through a strong aesthetic appeal, through witty animations in the content
block or simply through a little extra attention to small design elements on
the “About” page. Such designs are beautiful to look at, fun to navigate but,
most importantly, memorable — for the simple reason that they are
different. By adding delightful personal touches to your designs, you stand
out from the crowd and give visitors something to talk about and share
with friends and colleagues. And that’s a good start.
You can elicit delight in a variety of settings: on your maintenance mode
page, on the 404 error page, in your pre-loader, and everywhere else. The
idea is to surprise visitors by giving them something pleasant to talk about.
Smashing eBook #7│Professional Web Design, Volume 2 │ 6
Bounty Bev
Bounty Bev is a beverage company with a beautiful one-page design. Apart
from its subtle hover effects and animations, the website has some nice
extras: if you scroll down the page manually with the mouse wheel, a small
pop-up appears asking you if you need a lift. The typography is strong and
memorable, and the design is playful. Simple, clear and personal, the
website leaves a strong positive impression.
www.bountybev.com
Smashing eBook #7│Professional Web Design, Volume 2 │ 7
Analog.coop
Analog provides a very personal experience to visitors. When you visit the
page, it displays where you are located and tells you the members of the
team who are closest to you (in our case, Alan and Jon, who are about 500
miles away in Bristol). The website has a couple of nice Easter eggs that are
not visible at first glance. You might want to play around with the header
and the photos of team. The page is just fun to explore.
analog.coop
Smashing eBook #7│Professional Web Design, Volume 2 │ 8
Billy Tamplin
On his blog, Billy Tamplin focuses on the small victories in his life. Each post
records a personal achievement, displaying a custom-designed merit badge
and an explanation of the conquest. Billy uses this metaphor throughout
the website, speaking of “super Web abilities” (Agile CSS, PHP-prepared,
IE6-reinforced, etc.) and “heroic design strengths” (human-friendly aim,
keen creative detail, etc.). He also has a personal portfolio on the website.
Notice how well the color scheme fits the theme. The design is simple and
beautiful, and the “achievement” twist is unusual and memorable.
billytamplin.com
Smashing eBook #7│Professional Web Design, Volume 2 │ 9
MIX
MIX labs, a community blog for designers and Web developers, doesn’t
have hidden features, appealing animations or striking hover effects.
Instead, it has a consistent, visually appealing design: can you spot where
and how often colorful circles are repeated throughout the website? The
design emphasizes the content and has a personal touch. Simply beautiful.
visitmix.com
Smashing eBook #7│Professional Web Design, Volume 2 │ 10