Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design is in the Details

juliajamieson
September 10, 2013

Design is in the Details

Type & Design Concepts for Developers

juliajamieson

September 10, 2013
Tweet

More Decks by juliajamieson

Other Decks in Design

Transcript

  1. testing setting expectations transitions feedback readability validation & errors Design

    is also: load times workflows sense of place data & integration servers url structure mantic ode
  2. testing setting expectations transitions feedback readability validation & errors Design

    is also: load times workflows sense of place data & integration servers url structure mantic ode product design
  3. Instead of thinking about designers who code or developers who

    design, think about it as becoming an irreplaceable teammate.
  4. ux design print ia html/css/js strategy user interface pm design

    [ Master your own craft. Then, work adding the right skills as you improve.
  5. fe dev type ia native back end PM ux computer

    science [ Master your own craft. Then, work adding the right skills as you improve.
  6. Designers + Developers. The new copywriter & art director duo.

    Photo Credit: https://www.facebook.com/cwversusad
  7. Critique: Frequently With a Developer Start Positively 1 2 3

    Be specific Be Objective Ask Questions 4 5 6
  8. Let’s talk about how this will work responsively. Have you

    thought about how you’d like this to transition?
  9. Let’s talk about how this will work responsively. Have you

    thought about how you’d like this to transition? Why did you break the grid here, and no where else?
  10. Let’s talk about how this will work responsively. Have you

    thought about how you’d like this to transition? Why did you break the grid here, and no where else? Did you purposely make this type bigger, or is it a mistake?
  11. Why typography? Good typographic choices can mean the difference between

    a highly usable, beautiful product & a mediocre product.
  12. cap height x-height baseline Skgefa counter eye bowl cap height

    x-height baseline counter eye bowl aperture Skgefa aperture
  13. cap height x-height baseline counter eye bowl cap height x-height

    baseline counter eye bowl aperture Skgefa aperture Skgefa
  14. cap height x-height baseline counter eye bowl cap height x-height

    baseline counter eye bowl cap height x-height baseline counter eye bowl cap height x-height baseline counter eye bowl aperture aperture aperture Skgefa Skgefa Skgefa aperture Skgefa
  15. Article Title Article Title Vestibulum id ligula porta felis euismod

    semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Type: Tone of Voice & Texture
  16. Article Title Article Title Vestibulum id ligula porta felis euismod

    semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Type: Readability & Texture
  17. Type: Hierarchy Article Title Vestibulum id ligula porta felis euismod

    semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. October 20, 2013
  18. ARTICLE TITLE Vestibulum id ligula porta felis euismod semper. Cras

    mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Type: In Practice (and breaking)
  19. 1. The idea of responsive web design is that the

    experience of a site always look and feel the same regardless of the media query. Layout & Responsive Web Design
  20. 1. The idea of responsive web design is that the

    experience of a site always look and feel the same regardless of the media query. 2. The further away your object (particularly body text) is from the reader, the larger it needs to be. This is why it works to have larger body text on a desktop, smaller on a tablet, and smallest on a phone. Layout & Responsive Web Design
  21. 1. The idea of responsive web design is that the

    experience of a site always look and feel the same regardless of the media query. 2. The further away your object (particularly body text) is from the reader, the larger it needs to be. This is why it works to have larger body text on a desktop, smaller on a tablet, and smallest on a phone. 3. Readability is more important than having a layout that is always as wide as the viewport. Layout & Responsive Web Design
  22. Ultimately, better collaboration comes through a shared understanding of the

    different competencies required to build a website. Instead of viewing ourselves in terms of discrete roles, we should instead look to emphasize our range of abilities, and work with others whose skills are complementary. –Paul Robert Lloyd working together.
  23. attributions + resources Code School, Fundamentals of Design http://design.codeschool.com/levels/1 Design

    by Numbers - https://medium.com/p/2e5fd2f262e4 Learning to See, information Architects http://ia.net/blog/learning-to-see/ Logo, Bullshit and Co., http://ia.net/blog/logo-bullshit-co-inc/ How to Work with Designers https://medium.com/the-year-of-the-looking-glass/6c975dede146 The Anatomy of Type http://typeanatomy.com/ Thinking with Type http://www.thinkingwithtype.com/ Claudio Guglieri http://www.skillshare.com/classes/design/Create-Typographic-Layouts-for-Content-Heavy-Web- sites-and-Apps/1397042906/