Designing for today's web:

WORKING IN A POST-PSD WORLD

POST-PIXELFUCKING WORLD

Expert Pixelfucker (and beer drinker)

Give users the easiest access to the

best content.

here it is

Give users the easiest access to the

best content.

Give users the easiest access to the

best content.

THIS SHIT IS HARD.

WE’RE STILL FIGURING IT OUT.

• Content strategy

• Responsive design

• Mobile first design

• Style tiles

STAGES OF MY DESIGN PROCESS

content strategy

STAGES OF MY DESIGN PROCESS

design prototype

STAGES OF MY DESIGN PROCESS

visual style

STAGES OF MY DESIGN PROCESS

surprise & delight

OR, IF WE’RE BEING HONEST

?

CONTENT STRATEGY

Give users the easiest access to the best content.

≠A static template full of placeholder

text that works in one browser?

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

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."

FROM PIXELS TO PEOPLE

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.”

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.

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

problem statement

solution breakdown in three steps

product video

expert testimonial

TOTALLY MODULAR,

DUDE!

problem statement

solution breakdown in three steps

product video

expert testimonial

good designs happen with

CONVERSATIONS

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

DESIGN PROTOTYPE

CHARLES EAMES

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

Give users the easiest access to the

best content.

content creators and designers

WORK IN PARALLEL.

MAKE YOUR MOCKUP IN

MARKUP.

NO MORE “DEVICE.PSD” FILES

IPHONE.PSD IPAD.PSD DESKTOP.PSD

no more interaction.psd’s

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.”

PHOTOSHOP DESIGNS GET MONKEY JESUS-ED

BUILD DESIGNS IN THE ENVIRONMENT WHERE THEY WILL ULTIMATELY LIVE.

WORK THAT WIREFRAME.

but wait. what about

STYLE?

Loop in stakeholders early and often.

Get feedback, minus the hovering art director*

*hoveringartdirectors.tumblr.com

GOOD CONTENT GETS LOST WITH BAD TYPOGRAPHY.

Good content gets lost with

bad typography.

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.

GET BETTER AT TYPE QUICKLY

• Combining Typefaces by Tim Brown

• On Web Typography by Jason Santa Maria

• Upping Your Type Game by Jessica Hische

TYPE-A-FILE.COM

AND NOW, A BIG OL’ TANGENT.

MOBILE FIRST

RESPONSIVE DESIGN

WHY MOBILE FIRST?

• It’s good for business

• It’s good for users

• It’s good for you

• 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

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.”

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.”

Easy access to the best content.

WHY NOT MOBILE FIRST?

• We have to learn new best practices.

• We have to reinvent our process.

• Clients don’t always buy it.

THIS SHIT IS HARD.

VISUAL STYLE

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

SORRY BRO.

developers and designers

WORK IN PARALLEL.

good designs happen with

CONVERSATIONS

SYNTHESIZE BRAND GOALS

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

IF YOUR SITE WAS A CAR, WHAT

WOULD IT BE AND WHY?

IF YOUR SITE WAS CITY, WHAT

WOULD IT BE AND WHY?

SEMANTIC DIFFERENTIAL SURVEY

modern or classic?

serious or fun?

wine or beer?

barack or george?

THIS IS ONLY MODERATELY USEFUL,

BUT CLIENTS FREAKING LOVE IT.

BRIDGE THE GAP BETWEEN WIREFRAMES AND MOCKS.

WIREFRAME STYLE TILE style tilePSD MOCKUP

All the cool kids are doing it.

“Style tiles are a catalyst for discussions around the preferences and goals of the client.”

SAMANTHA WARREN, HTTP://STYLETIL.ES/

clearleft.com/thinks/visualdesignexplorations/

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)

TAKE YOUR DESIGN AS FAR AS YOU CAN

IN CSS.

PERSON I WANT TO MURDER

But it look so flat.

“FLAT” IS THE NEW F-WORD

WHY I EMBRACED “FLAT” DESIGN

• More “honest” design

• Looks way fucking better on retina

• Smaller websites

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?

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.

BE PICKY WITH YOUR

PIXELFUCKING

1.3MB VS.

423.8KB

SURPRISE & DELIGHT

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

THIS IS THE ICING ON YOUR SUPREMELY DELICIOUS CAKE.

Don’t worry, it’s almost lunchtime.

Being a web designer just got a fuck of a lot

harder.MORE AWESOME.

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.”

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.”

THANKS! @owltastic