The State of Web Design
Everything Old Is New Again
April 25th 2013
Maria D’Amato & Joel Parr

Back to the Old School
Device-Independence with Responsive Design
Process: Art, Copy & Code
The New Creative Team
Embrace the Medium
Flat vs. Skeuomorphic Design

Web Fundamentals
What do we mean by “Old School”
in terms of the web?
• Constructed using the original building blocks of
the World Wide Web: HTML for structure and CSS
for layout & styling
• Web browsers: cross-platform by design
• Embraced the limitations of the medium by
responding to different computers, screen sizes
and browsers
• Tabular, gridded and powered by the primary
content, i.e. Typography
• Sparing, careful use of adornment such as
images and animation. Little video or advertising
Amazon.com

Web Fundamentals
What do we mean by “Old School”
in terms of the web?
• Constructed using the original building blocks of
the World Wide Web: HTML for structure and CSS
for layout & styling
• Web browsers: cross-platform by design
• Embraced the limitations of the medium by
responding to different computers, screen sizes
and browsers
• Tabular, gridded and powered by the primary
content, i.e. Typography
• Sparing, careful use of adornment such as
images and animation. Little video or advertising
Amazon.com
CNN.com

Web Fundamentals
What do we mean by “Old School”
in terms of the web?
• Constructed using the original building blocks of
the World Wide Web: HTML for structure and CSS
for layout & styling
• Web browsers: cross-platform by design
• Embraced the limitations of the medium by
responding to different computers, screen sizes
and browsers
• Tabular, gridded and powered by the primary
content, i.e. Typography
• Sparing, careful use of adornment such as
images and animation. Little video or advertising
Amazon.com
CNN.com
NY Times

Web Fundamentals
What do we mean by “Old School”
in terms of the web?
• Constructed using the original building blocks of
the World Wide Web: HTML for structure and CSS
for layout & styling
• Web browsers: cross-platform by design
• Embraced the limitations of the medium by
responding to different computers, screen sizes
and browsers
• Tabular, gridded and powered by the primary
content, i.e. Typography
• Sparing, careful use of adornment such as
images and animation. Little video or advertising
Amazon.com
CNN.com
NY Times
Shell.com

What Happened Next?
We got creative...

What Stands Out?
• Very image heavy
• Freeform in structure
• Small, fixed width content area,
centered in middle of screen
• What little text there is, often laid
out as an image
• Why? Very few “websafe” fonts
• Aesthetics over usability
• But still cross platform and built
using HTML and CSS

What Stands Out?
• Very image heavy
• Freeform in structure
• Small, fixed width content area,
centered in middle of screen
• What little text there is, often laid
out as an image
• Why? Very few “websafe” fonts
• Aesthetics over usability
• But still cross platform and built
using HTML and CSS
Look familiar?

What Stands Out?
• Very image heavy
• Freeform in structure
• Small, fixed width content area,
centered in middle of screen
• What little text there is, often laid
out as an image
• Why? Very few “websafe” fonts
• Aesthetics over usability
• But still cross platform and built
using HTML and CSS
Look familiar?
Canon.com

What Stands Out?
• Very image heavy
• Freeform in structure
• Small, fixed width content area,
centered in middle of screen
• What little text there is, often laid
out as an image
• Why? Very few “websafe” fonts
• Aesthetics over usability
• But still cross platform and built
using HTML and CSS
Look familiar?
Canon.com
Still online (!)

Web Usability: The Dark Years
• We abandoned the building blocks
of the web with reliance on plugins
such as Flash and QuickTime
• We can’t even use the normal
browser functionality like
scrollbars, the back button and
copying & pasting text
• Bandwidth-heavy “Immersive”
animation, intro screens & videos
• Aesthetics won the day

Web Usability: The Dark Years
• We abandoned the building blocks
of the web with reliance on plugins
such as Flash and QuickTime
• We can’t even use the normal
browser functionality like
scrollbars, the back button and
copying & pasting text
• Bandwidth-heavy “Immersive”
animation, intro screens & videos
• Aesthetics won the day

Seeing The Light: Web Standards
• At the same time as Flash accessibility &
usabilities were worked around, the web
standards movement focused on content
and semantics of HTML & CSS
• Driven by accessibility and usability, not
aesthetics
• Text content prioritized over images and
animation
• But, often still fixed width with small text
• And still a world of desktop (and laptop)
computers... The CSS Zen Garden - 2005

The Mobile Web c.2006
• Small screen versions of sites for
WAP phones & PDAs
• Text-only “portal” sites for viewing
on your phone
• Physical keyboards ruled
• Very few touch-capable devices &
no “good” touch-capable devices
• The full web hadn’t gone mobile

2007: Everything Changed
• Our mobile efforts quickly looked antiquated
• No longer a need for WAP versions of sites
• The iPhone introduced a new medium for the web
• Portrait and landscape with free rotation
• Touch input with swiping
• Pinch to zoom
• Web Applications

Enter Responsive Design
Back to the fluid basics of the web

Responsive Design
• Takes advantage of advances in the basic web technologies
and a return to the days of fluid, content-driven sites
• Clarity, usability, accessibility and semantics
• And now, available across every imaginable device
• HTML5 & CSS3 give us Media Queries to detect screen sizes
and the ubiquity of modern web browsers allows us to respond
in ever more seamless ways

Wait, what?

Wait, what?

Wait, what?
Develop Once

Wait, what?
Develop Once
Different Devices

Wait, what?
Develop Once
Different Devices
One Codebase

Wait, what?
Develop Once
Different Devices
One Codebase
Cheaper & Easier

How Does It Work?
• Basic principle: Everything within the site should be “fluid”
and able to move around depending on the device.
• CSS Media Queries let us detect the size of the screen size and
reformat our layout to both suit the device and be true to the
hierachy of our content
• We can define when to show things, hide things, make things
line up, drop things down & move things around

Show me!

Content Choreography
“The concept of permanently placing content on a web page for a
single browsing width or resolution is becoming a thing of the past.”
- Trent Walton
http://trentwalton.com/2011/07/14/content-choreography/

Making Responsive Happen
• Requires planning and thinking throughout the web project
• Must be considered as part of the Information Architecture
• Essential to consider in the design phase. Sketching can help
• Comes to life through prototyping for different device sizes
• Realized through development
• Some terms you may have heard...

Adaptive Design & Responsive Design
Responsive Design (layout) is a subset of Adaptive Design (a
broader set of technically-focused practices)
Mobile First
Starting your thinking, content strategy, design and
development with mobile devices as the base to build upon.
Responsive Images
How can assets like images adjust themselves to different
sizes, resolutions (e.g. Retina displays) and bandwidth?

Further Reading
• Responsive Web Design
http://alistapart.com/article/responsive-web-design
• Mediaqueri.es
http://mediaqueri.es
• Trent Walton’s Blog
http://trentwalton.com/category/articles/
• This Is Responsive
http://bradfrost.github.io/this-is-responsive/

Process: Art, Copy & Code *
A new process for multi-screen, multi-device design
• To build responsively we need to work responsively
• Considering many different screen sizes, layouts and device capabilities within a
single website requires a new way of thinking
• Reorganizing the team: Design (Art), Writing (Copy) and Development (Code)
• Thinking iteratively and prototyping for success
* Google
http://www.artcopycode.com

Why Art, Copy & Code?
“We’re in the midst of a second creative revolution, driven by
technology. Code is being added to the core creative process,
enabling new forms of brand expression and engagement.”
- Google
http://www.artcopycode.com

20 Years ago
We borrowed some ideas...

Waterfall
• The way we make websites comes from a desktop software
development process devised in the 70s/80s
• The linear model with work phased into separate stages:
research, plan, design, develop, launch, assess
• All geared towards a big, monolithic goal: The Launch
• Does this work when trying to move quickly and consider
many different use cases and devices?

So Many Screens, So Little Time
• This process works, it just depends on the type of project
• For modern, multi-device projects there might be a better way
• Considering such a range of phones, tablets, desktops and large screens
can seem overwhelming. Do we try and design & build different layouts
for each and create static mockups of every different configuration?
• Having such a grand overview would be great, but it’s simply not
possible. There isn’t enough time or money
• Borrowing from Silicon Valley startup culture, we can move quicker and
be smarter

A Different Approach
In order to work more efficiently, we should:
1. Ask “how many static versions of different derivations do we need to design?”
2. Planning and designing shouldn’t be done in a vacuum
3. Think in terms of modules
4. Set deliverable expectations
5. Allow interaction (through prototyping) as soon as possible
6. Think iteratively

When Do We Get To The “Design” Stage?
“We deploy a cross functional team, all working in close
collaboration with our client partner to define, prototype,
and evolve the system together. This collaborative,
multidisciplinary team [...] is, in fact, the design team.”
- Michael Piliero, Free Association
http://freeassociation.is/blog/when-do-we-get-to-the-design-stage

Iteration & Prototyping
1. Research with responsive design and development in mind
2. Design modularly in conjunction with development and prototype early ideas
3. Use whatever tools are easiest and most effective for the individual process
4. Evaluate our prototypes, look at metrics and feedback
5. Start the loop again, addressing issues and/or adding features
When thinking responsively, the lines between design and
development become blurred. Working iteratively involves:

Further Reading
• The Lean Startup
http://theleanstartup.com/
• Trent Walton’s Blog: Reorganization
http://trentwalton.com/2013/04/10/reorganization/
• Teehan+Lax & Medium: A Place for Sharing Ideas and Stories
http://www.teehanlax.com/story/medium/
• Prototyping tools
http://www.smashingmagazine.com/2013/03/07/creating-wireframes-and-
prototypes-with-indesign/
http://www.edenspiekermann.com/en/blog/espi-at-work-the-power-of-keynote

Embrace the Medium
Skeuomorphic vs. Flat Design

User Interface Fundamentals
• The graphical user interface, or GUI, is understood as the
use of graphic icons and a pointing device to control a
computer
• The desktop metaphor is a user interface system that treats
the users’ computer monitor as if it was the users’ physical
desktop, upon which objects, such as documents and
folders, can be placed
• The Macintosh, released in 1984, was the first commercially
successful product to use a desktop metaphor: files looked
like pieces of paper, and file directories looked like file
folders. There was a set of desktop accessories like a
calculator, notepad and alarm clock, and to delete files the
user dragged them to a trash can icon.
How did we get here? This is not my beautiful desk.

What happened next?
You get a metaphor, and you get a metaphor, and you get a metaphor...

Skeuo-what?
• A skeuomorph is an object designed to imitate another
material or technique; this imitation serves little or no purpose
to the new object, but was essential to the original
• With the advent of the iPhone skeuomorphism truly took off
• it was a completely new kind of device, and realism was a
way to make people feel at ease with their new device
• Since the calendar looked like a physical calendar it was easy
to understand it’s function

A design is not wholly skeuomorphic unless it
copies the material, shape and function of the
original object.
Apple’s newsstand app for iPhone and iPad is
the epitome of skeuomorphic design. It copies
it’s shape from an actual newsstand, it’s faux
wooden texture mimics texture, and it
functions like a shelf with magazines being
placed on the racks; on top of this the
magazines open as they would in real-life.
Quintessential Skeuomorph

Skeuomorphic Pros
Familiarity
• Users feel more comfortable with familiar things; by relating to a real-world object
users feel more at ease with an interface task.
Engagement
• By replicating a real-world object we can also replicate a users feelings about it
Communicating
• visual metaphors help build understanding; this is especially useful when
introducing new interface concepts or new technologies

Skeuomorphic Cons
Anti-Innovation
• When borrowing elements from a design’s previous incarnation, you often bring
along it’s limitations, even when those limitations have no reason to exist anymore
Misleading Behavior
• Making something look like a physical object, but not work like a physical object
creates confusion: if it looks like a book, but doesn’t function like a book it’s bad
user experience
Design
• Realism done wrong can morph into kitch; even in real-life fake wood and leather
can look tacky

Sometimes skeuomorphism is used without reason
creating a confusing experience and poor design.
Apple’s Find My Friends app uses leather texture,
stamps, and stitching; while these elements may look
nice and are fun to create in Photoshop they serve no
purpose other than decoration.
Apple’s Contacts App was designed to imitate
a traditional address book. It mimics the
shape, material and function of the original
object and is therefore truly skeuomorphic.

The Problem with Skeuomorphism
Web Design...It’s for the Internet
• Skeuomorphism is not a web-first
approach
• These skeuomorphic designs take up
excess memory, and often under-utilize
screen real-estate in order to mimic the
original object.
• In great design form follows function
• in the early years of a new method it
can be helpful to mimic the forms of
the past, but at some point the
transition should occur and form
should be based on current methods
Visual Metaphors Have an
Expiration Date
• While the reel-to-reel imagery used in the old
Apple playlist app was beautifully designed,
the thing that it mimicked has quickly gone
out of the public’s visual vernacular.

The Reaction
Natively Digital

What is Flat Design?
• A minimalistic style of interface that emphasizes usability over aesthetics
• It focuses on the screen, a two-dimensional space, and does not employ gradients,
bevels or shadows to simulate a three dimensional world
• Ornamental elements are viewed as unnecessary clutter which distracts from user
experience
• Flat design often relies on bright contrasting colors and clean simple illustrations to
guide the user’s eye
• Large Typography is characteristic of flat design

Microsoft’s Metro user interface
launched the flat-design trend.
Microsoft embraced a completely
different interface style with Metro;
leaving behind the shadows, highlights,
gradients and textures of iOS apps and
replacing them with large squares of flat
color with large typography reminiscent
of Swiss design.
Flat design resonates with designer's
love of minimalism, embodied by the
famous Antoine de Saint-Exupery that
“perfection is achieved not when there
is nothing left to add, but when there is
nothing left to take away.”
Quintessential Flat Design

Flat Design Pros
• Flat Design reverts back to the most basic principles of design to move a users’ eye
around the page
• Flat Design forces a designer to really take notice of typography and layout (an area
where web-design has lagged behind traditional design)
• Flat is better for responsive
• flat colors and live text are easier to reconfigure to different browser sizes than
images and textured elements.

Flat Design Cons
• Flat Design is trendy and therefore likely to be overused
• Taking minimalism too far can have a negative impact on usability (the very thing
flat designers should be placing at the forefront of their considerations)
• Users have come to rely on subtle clues to make their way through an interface:
buttons have a slight gradient and round corners, form fields have soft inner
shadows, and navigation bars float over other content; remove all of these clues and
every element is placed at the same level leaving the potential for confusion

The Future
Don’t I Know You From Somewhere

There is Another Way
So far the flat vs skeu debate has also loosely been a Microsoft
vs Apple debate. An alternate to both can be found in Google.

With the recent release of their newer mobile apps, Google has begun pushing
a style that is becoming know as ‘almost-flat’ or ‘skeuominimalism.’ This new
style uses elements like shadows and gradients in a tasteful, subtle way. It
offers the best of both worlds: realism’s subtle hints at function with the
purity and simplicity of flat design.

New MySpace is a good example of
almost flat design: with buttons that
appear flat until rollover reveals a
traditional ‘click-me’ gradient.
Even Facebook, which has been largely flat and gradient
free since 2004 us using drop shadows to separate
overlays and drop downs from the rest of the page.

Apple has started to move away from
skeuomorphic design. As Jony Ive’s, Senior
Vice President of Industrial Design at Apple
and sometimes referred to as the next Steve
Jobs, influence spreads Apple’s UI design
moves to a more middle ground as can be
seen in the redesign of the Podcast app.

Let’s Wrap This Up
Good digital design is user centric.
Each of these paradigms has benefits and appropriate uses; to
decide which is best for a project think first about the user: who
they are, their level of knowledge, and what is being asked of them.

Further Reading
• Daring Fireball
http://daringfireball.net/2013/01/the_trend_against_skeuomorphism
• Branch Conversation Dealing with Flat Design:
http://branch.com/b/how-flat
• Fast Co. Design:
http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-
uis
• Tumblr of the best/worst of skeuomorphism
http://skeu.it/
• UX Blogs
http://ui-patterns.com/blog
http://boxesandarrows.com/
http://37signals.com/svn