A talk from 2013 about designing in the browser, content strategy, responsive design, and style tiles.

1. Designing for today's web:
WORKING IN A
POST-PSD WORLD
POST-PIXELFUCKING
WORLD

2. Expert Pixelfucker (and
beer drinker)

3. Give users the
easiest access to the
best content.

4. here it is

5. Give users the
easiest access to the
best content.

6. Give users the
easiest access to the
best content.

7. THIS SHIT IS HARD.

8. WE’RE STILL FIGURING IT OUT.
• Content strategy
• Responsive design
• Mobile first design
• Style tiles

9. STAGES OF MY DESIGN PROCESS
content strategy

10. STAGES OF MY DESIGN PROCESS
design prototype

11. STAGES OF MY DESIGN PROCESS
visual style

12. STAGES OF MY DESIGN PROCESS
surprise & delight

13. OR, IF WE’RE BEING HONEST
?

14. CONTENT STRATEGY

15. Give users the easiest
access to the best content.
≠
A static template full of placeholder
text that works in one browser?

16. LOREM (I DON’T REALLY GIVE A SHIT) IPSUM

17. CONTENT STRATEGY WILL MAKE OR BREAK
YOUR PROCESS, KAREN MCGRANE
"Web content: it's the
meat in the sandwich, not
the icing on the cake."

18. FROM PIXELS TO PEOPLE

19. MARK BOLTON,
“STRUCTURE FIRST, CONTENT ALWAYS”
“We’d really like to understand the type
and structure of the content for this
project. Don’t worry, you don’t have to
write anything yet, just help us
understand.”

20. They have a problem, we have a solution.
Get people to sign up for the service.
We understand their goals and struggles.
They can trust us to offer the right solution.

22. CONTENT INVENTORY
• Clear text describing the problem
• Steps we take to provide a solution
• Break down of our technology
• Video from our product creators
• Prominent testimonial from expert

23. problem statement
solution breakdown in three steps
product video
expert testimonial

24. TOTALLY
MODULAR,
DUDE!

25. problem statement
solution breakdown in three steps
product video
expert testimonial

26. good designs happen with
CONVERSATIONS

27. IT SOUNDS LIKE A LOT OF WORK
(but it actually makes your job easier)

28. DESIGN PROTOTYPE

29. CHARLES EAMES
“Design is a plan for
arranging elements
in such a way as
best to accomplish a
particular purpose.”

30. Give users the
easiest access to the
best content.

31. content creators and designers
WORK IN PARALLEL.

32. MAKE YOUR
MOCKUP IN
MARKUP.

33. NO MORE “DEVICE.PSD” FILES
IPHONE.PSD IPAD.PSD DESKTOP.PSD

34. no more interaction.psd’s

35. JEFFREY ZELDMAN,
CSS3 FOR WEB DESIGNERS
“Websites are not the same as pictures
of websites. When one person designs
in Photoshop and another converts the
design to markup and CSS, the coder
must make guesses and assumptions
about what the designer intended.”

36. PHOTOSHOP DESIGNS GET
MONKEY JESUS-ED

39. BUILD DESIGNS IN
THE ENVIRONMENT
WHERE THEY WILL
ULTIMATELY LIVE.

40. WORK THAT
WIREFRAME.

43. but wait. what about
STYLE?

44. Loop in
stakeholders
early and often.
Get feedback,
minus the
hovering art
director*
*hoveringartdirectors.tumblr.com

45. GOOD
CONTENTGETS
LOSTWITHBAD
TYPOGRAPHY.

46. Good content
gets lost with
bad typography.

47. OLIVER REICHENSTEIN,
WEB DESIGN IS 95% TYPOGRAPHY
Ask yourself, which text is functional,
which text is passive, systematize them...
create an interface, the rest will add up
automatically. Until you have resolved the
readability issues, don’t even think about
changing colors, thickening lines, pushing
pixels, choosing pictures.

48. GET BETTER ATTYPE QUICKLY
• Combining Typefaces by Tim Brown
• On Web Typography by Jason Santa Maria
• Upping Your Type Game by Jessica Hische

49. TYPE-A-FILE.COM

50. AND NOW,
A BIG OL’
TANGENT.

51. MOBILE FIRST
RESPONSIVE DESIGN

52. WHY MOBILE FIRST?
• It’s good for business
• It’s good for users
• It’s good for you

53. • Heavy mobile data
users are projected to
triple to one billion this
year.
• Mobile internet
adoption has outpaced
desktop internet
adoption by 8x.
• Amazon: over $1
billion spent via mobile
devices in the past 12
months
• Twitter: 40% of tweets
sent via mobile, 16% of
new users start on
mobile
FOR THE BUSINESS PEOPLE
VIA HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1117

54. MATT MARQUIS, @WILTO
“Mobile users want to see our
menu, hours, and delivery
number. Desktop users definitely
want this 1mb png of someone
smiling at a salad.”

55. JOE HEWITT, FACEBOOK
VIA HTTP://STATIC.LUKEW.COM/MOBILEFIRST_LUKEW.PDF
“My goal was initially just to make a
mobile companion, but I became
convinced it was possible to create a
version of Facebook that was actually
better than the website.”

57. Easy access to
the best content.

58. WHY NOT MOBILE FIRST?
• We have to learn new best practices.
• We have to reinvent our process.
• Clients don’t always buy it.

59. THIS SHIT IS HARD.

60. VISUAL STYLE

61. DO I GET TO OPEN
PHOTOSHOP YET?
YEAH, NOT REALLY.
SORRY BRO.

62. developers and designers
WORK IN PARALLEL.

63. good designs happen with
CONVERSATIONS

64. SYNTHESIZE BRAND GOALS
• FYI, James Victore’s badass talk makes
me feel really lame about using the
phrase “synthesize brand goals.”

65. IF YOUR SITE WAS A CAR, WHAT
WOULD IT BE AND WHY?

66. IF YOUR SITE WAS CITY, WHAT
WOULD IT BE AND WHY?

67. SEMANTIC DIFFERENTIAL SURVEY
modern or classic?
serious or fun?
wine or beer?
barack or george?

68. THIS IS ONLY
MODERATELY USEFUL,
BUT CLIENTS
FREAKING LOVE IT.

69. BRIDGE THE GAP BETWEEN
WIREFRAMES AND MOCKS.
WIREFRAME STYLE TILE style tilePSD MOCKUP

70. All the cool kids
are doing it.

71. “Style tiles are a catalyst
for discussions around the
preferences and goals of
the client.”
SAMANTHA WARREN,
HTTP://STYLETIL.ES/

72. clearleft.com/thinks/
visualdesignexplorations/

74. GET IN THE BROWSER ASAP
• Do the colors work on every monitor?
• How does it feel on different devices?
• Make rapid color tweaks with HSL.
• http://hslpicker.com/
hsl (hue, saturation, lightness)

75. TAKE YOUR DESIGN
AS FAR AS YOU CAN
IN CSS.

76. PERSON I WANTTO MURDER
But it look so flat.

77. “FLAT”
IS THE NEW F-WORD

78. WHY I EMBRACED “FLAT” DESIGN
• More “honest” design
• Looks way fucking better on retina
• Smaller websites

79. ALLEN GRINSHTEIN
VIA HTTP://LAYERVAULT.TUMBLR.COM/POST/
32267022219/FLAT-INTERFACE-DESIGN
Designing honestly means recognizing that
things you can do with screens and input devices
can’t be done with physical objects — more
importantly that we shouldn’t try copying them...
Can you imagine your pristine iPhone built into
the body of an antique telephone handset?

80. JOHN GRUBER
VIA HTTP://DARINGFIREBALL.NET/2013/01/
THE_TREND_AGAINST_SKEUOMORPHISM
The trend away from skeuomorphic special effects in UI
design is the beginning of the retina-resolution design era.
Our designs no longer need to accommodate for crude
pixels. Glossy/glassy surfaces, heavy-handed transparency,
glaring drop shadows, embossed text, textured material
surfaces — these hallmarks of modern UI graphic design style
are (almost) never used in good print graphic design.

81. BE PICKY
WITH YOUR
PIXELFUCKING

82. 1.3MB
VS.
423.8KB

85. SURPRISE & DELIGHT

86. FINALLY, SOMETHING THAT WILL GET ME ON
THE DRIBBBLE POPULAR PAGE.

91. THIS IS THE ICING ON
YOUR SUPREMELY
DELICIOUS CAKE.
Don’t worry, it’s almost lunchtime.

92. Being a web designer
just got a fuck of a lot
harder.
MORE AWESOME.

93. STEVE KRUG,
DON’T MAKE ME THINK
“The problem is there are no simple “right”
answers for most web design questions (at
least not for the important ones). What works
is good, integrated design that fills a need —
carefully thought out, well executed, and
tested.”

94. CHARLES EAMES
“Here is one of the few effective keys to
the design problem — the ability of the
designer to recognize as many of the
constraints as possible — his willingness
and enthusiasm for working within
these constraints.”

95. THANKS!
@owltastic