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 Text: Easing the Pain of Designing in the Browser

6,066 views

Published on

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

Published in: Design

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

×