Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SCULPTING 
TEXTEASING THE PAIN OF DESIGNING IN THE BROWSER 
STEPHEN HAY
PHOTOSHOP
http://store.copicmarker.com/
COMPS FROM THE MARKER ERA (HARRY BORGMAN) 
http://storyboardcentral.blogspot.com/2009/08/harry-borgman-harry-comp-man.html
Designing in the browser 
doesn't mean designing 
in the browser. 
It means making your 
comps for the browser.
PAIN POINTS
“I'm faster and more 
comfortable in Photoshop.”
WTF— 
DAMMIT MOM, I SAID 
YOU NEED TO ADD AN 
ALPHA CHANNEL! 
You were not born 
knowing Photoshop.
10 
7,5 
5 
2,5 
0 
Photoshop Code 
Effectiveness
“I don't see the creativity 
in code. ”
CASEY REAS, CREATOR OF PROCESSING
One of the biggest problems 
we have with designing in 
the browser is that many 
designers think about 
layout first. 
WE...
We need to think about 
structured content first. 
PSSST! HTML IS STRUCTURED CONTENT. 
(WHEN DONE RIGHT, OF COURSE)
Take actual content, structured 
with HTML, and start building 
upon it, incrementally, 
cumulatively. That is the way of ...
“ One technique I've used for years is to “design in text”... not 
necessarily describing everything in textual form […] 
...
Unstyled HTML has benefits.
Because of the focus on 
content and structure, 
irrelevant or inappropriate 
content is easy to spot.
The linear form of structured 
content helps prepare us for 
the smallest screens and 
those environments with the 
least ...
When you create a plain 
HTML document, you have 
created a web page that is 
“mobile-ready”.
Structured content takes the 
focus off of containers.
What if we approached 
responsive design in the 
spirit of additive sculpture? 
WHAT IF WE WENT FROM SIMPLE TO COMPLEX?
TIP #1 
Focus on small screens first.
TIP #2 
Focus on color & type first. 
MAYBE IMAGES AS WELL. BUT NOT LAYOUT (YET).
TIP #3 
Use a tool that makes it easy 
to sketch in code. 
JSBIN, CODEPEN, ETC.
TIP #4 
Use your browser’s 
developer design tools.
TIP #5 
Sketch before coding. 
DO THIS BEFORE EVERY BREAKPOINT.
TIP #6 
Expand your browser window 
until your design looks like 
$#!%. Time for a breakpoint. 
CONTENT & DESIGN, NOT DEVI...
TIP #7 
Avoid ski ballet.
THANK YOU! @stephenhay 
Linus by Charles Schulz. Image: https://www.etsy.com/listing/84806498/oversized-vintage-linus-pean...
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Upcoming SlideShare
Loading in …5
×

26

Share

Download to read offline

Sculpting Text: Easing the Pain of Designing in the Browser

Download to read offline

My talk for Smashing Conference in Whistler, BC, December 10, 2014.

Related Books

Free with a 30 day trial from Scribd

See all

Sculpting Text: Easing the Pain of Designing in the Browser

  1. 1. SCULPTING TEXTEASING THE PAIN OF DESIGNING IN THE BROWSER STEPHEN HAY
  2. 2. PHOTOSHOP
  3. 3. http://store.copicmarker.com/
  4. 4. COMPS FROM THE MARKER ERA (HARRY BORGMAN) http://storyboardcentral.blogspot.com/2009/08/harry-borgman-harry-comp-man.html
  5. 5. Designing in the browser doesn't mean designing in the browser. It means making your comps for the browser.
  6. 6. PAIN POINTS
  7. 7. “I'm faster and more comfortable in Photoshop.”
  8. 8. WTF— DAMMIT MOM, I SAID YOU NEED TO ADD AN ALPHA CHANNEL! You were not born knowing Photoshop.
  9. 9. 10 7,5 5 2,5 0 Photoshop Code Effectiveness
  10. 10. “I don't see the creativity in code. ”
  11. 11. CASEY REAS, CREATOR OF PROCESSING
  12. 12. One of the biggest problems we have with designing in the browser is that many designers think about layout first. WE NEED TO STOP DOING THAT.
  13. 13. We need to think about structured content first. PSSST! HTML IS STRUCTURED CONTENT. (WHEN DONE RIGHT, OF COURSE)
  14. 14. Take actual content, structured with HTML, and start building upon it, incrementally, cumulatively. That is the way of progressive enhancement, and it’s the nature of the Web.
  15. 15. “ One technique I've used for years is to “design in text”... not necessarily describing everything in textual form […] essentially what is the message that needs to be ” communicated if I was only able to provide the user with unstyled HTML? – Bryan Rieger
  16. 16. Unstyled HTML has benefits.
  17. 17. Because of the focus on content and structure, irrelevant or inappropriate content is easy to spot.
  18. 18. The linear form of structured content helps prepare us for the smallest screens and those environments with the least capabilities.
  19. 19. When you create a plain HTML document, you have created a web page that is “mobile-ready”.
  20. 20. Structured content takes the focus off of containers.
  21. 21. What if we approached responsive design in the spirit of additive sculpture? WHAT IF WE WENT FROM SIMPLE TO COMPLEX?
  22. 22. TIP #1 Focus on small screens first.
  23. 23. TIP #2 Focus on color & type first. MAYBE IMAGES AS WELL. BUT NOT LAYOUT (YET).
  24. 24. TIP #3 Use a tool that makes it easy to sketch in code. JSBIN, CODEPEN, ETC.
  25. 25. TIP #4 Use your browser’s developer design tools.
  26. 26. TIP #5 Sketch before coding. DO THIS BEFORE EVERY BREAKPOINT.
  27. 27. TIP #6 Expand your browser window until your design looks like $#!%. Time for a breakpoint. CONTENT & DESIGN, NOT DEVICES, SHOULD DETERMINE BREAKPOINTS.
  28. 28. TIP #7 Avoid ski ballet.
  29. 29. THANK YOU! @stephenhay Linus by Charles Schulz. Image: https://www.etsy.com/listing/84806498/oversized-vintage-linus-peanuts-postcard Crocobear image: http://www.reddit.com/r/HybridAnimals/comments/2ldzqq/the_requested_crocobear/ Phil Hawksworth by Luke Wroblewski: https://www.flickr.com/photos/lukew/10453062745/in/set-72157636814608894 Baby images: http://www.morguefile.com/archive/display/910824 and http://www.morguefile.com/archive/display/907077 Full Casey Reas interview: https://www.youtube.com/watch?v=_8DMEHxOLQE
  • JaquelineReyuk

    Apr. 23, 2017
  • brewstersparrow

    Jan. 3, 2017
  • NomieCivino

    Dec. 31, 2016
  • DavidCrooks6

    Dec. 25, 2016
  • billymercedes

    Dec. 21, 2016
  • tristanbailey1

    Nov. 8, 2015
  • justinschmidt802

    Sep. 19, 2015
  • Funstacy

    Apr. 30, 2015
  • keitakawamoto

    Apr. 30, 2015
  • worldwidewiz

    Jan. 20, 2015
  • inkase

    Jan. 19, 2015
  • nitewol

    Jan. 18, 2015
  • lucid212

    Jan. 15, 2015
  • svvoloshin

    Jan. 15, 2015
  • pcrpby

    Jan. 13, 2015
  • mirani101

    Jan. 8, 2015
  • Dynamic10

    Dec. 24, 2014
  • taivare

    Dec. 23, 2014
  • mickeyhawk

    Dec. 19, 2014
  • upgr0uth

    Dec. 18, 2014

My talk for Smashing Conference in Whistler, BC, December 10, 2014.

Views

Total views

6,651

On Slideshare

0

From embeds

0

Number of embeds

129

Actions

Downloads

155

Shares

0

Comments

0

Likes

26

×