Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Sculpting Text: Easing the Pain of Designing in the Browser

6.209 visualizaciones

Publicado el

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

Publicado en: Diseño

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

×