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

Desigining Today's Web

April 16, 2015

Desigining Today's Web

Slides from the Build Right Designing Today's Web Workshop presented at Converge SE 2015, Columbia, SC.


April 16, 2015

More Decks by jeremyloyd

Other Decks in Design


  1. What We Wanted to Talk About ‣ Typography ‣ Hierarchy

    ‣ Layout ‣ Examples ‣ Other awesome nerdy design stuff
  2. Topics ‣ Designing for Speed ‣ Design Pairing ‣ Designing

    Systems ‣ Designing Client-Proof Layouts ‣ Anything Goes
  3. What We Wanted to Talk About ‣ Typography ‣ Hierarchy

    ‣ Layout ‣ Examples ‣ Other awesome nerdy design stuff
  4. This happens when designers control every aspect of the visual

    experience, not the full browser experience
  5. “How is this a design problem? I want my sites

    to look good! Developers can make it fast, right?”
  6. “But here’s the thing: the web is far more fragile

    than we might like to admit. It’s fraught with uncertainty—a connection could be dropped, or a network’s latency could be too high—which means entire elements of our designs might never reach our users.” – Ethan Marcotte
  7. “Sometimes you’ll make choices that favor performance; other times, you’ll

    make choices that favor aesthetics. The key is using all the information available to you to make the right decision for you and your site.” – Lara Hogan
  8. Carousel Red Flags • Push back on priority • What

    alternate solutions can we offer? Design Reviews
  9. Image However, don’t push back: • If it’s “too difficult”

    • “Dumb idea” • Subjectively don’t like it • Can’t offer alternatives Social Design Reviews
  10. Design Development Mockup designs in code • Run performance tests

    on early designs • Designer & Developer pair up to refine/address problem areas Get into code early!
  11. 1. What is a performance budget? 2. What is this

    project’s budget? • Cite goals/requirements 3. Why are we using this? 4. How we add new features • (optimize, remove, or don’t add) 5. Every template’s weight 6. Image optimization guide Define for them:
  12. “The weight of a font kit is arguably more important

    to a site’s performance versus other heavy hitters (like images), because fonts are loaded on every single page.” – Alternatives to Popular Web Typefaces for Better Performance
  13. Alternatives Speedy Fonts Futura: 268kb • book • book italic

    • bold • bold italic Speedy Fonts Brandon Grotesque: 133kb • book • book italic • bold • bold italic
  14. “Is the extra 135kb worth the aesthetic change?” “Does the

    heavier font kit better represent the brand?”
  15. Image Quality Quality 60: 213kb Quality 60 + blurred: 152kb

  16. Pick your favorite site, or choose one from awwwards.com. Run

    it through webpagetest.org & sketch/list out ideas for ways the design could be faster. EXERCISE
  17. What is Design Pairing? Periodic sessions during a project where

    designer and developer sit together and collaborate.
  18. Make a list of things that are hindering you from

    pairing effectively with developers. DISCUSSION
  19. We can control every last pixel placement on the page*

    At every breakpoint *LOL we know this never actually happens
  20. Reducing the amount of styles we use reduces the amount

    of CSS, 
 optimizing performance
  21. It’s a means to an end. Whatever tool you prefer,

    we still aim to 
 get into code ASAP
  22. “Epicenter design focuses on the true essence of the page

    — the epicenter — and then builds outward.” https://gettingreal.37signals.com/ch09_Epicenter_Design.php
  23. ‣ Buttons ‣ “View All” vs. “Read More” ‣ Type

    Hierarchy ‣ Similar modules—can they be the same with slight modifications?
  24. “Focusing on creating healthy front-end modules instead of complete pages

    can help break complex page layouts into reusable solutions.” – Dave Rupert
  25. “Once you have your styles for the site established, plugging

    them into the homepage should be a breeze. You will likely find yourself only writing a couple new styles.” – Marshall Norman

    A NAV FOOTER CONTENT A B C NAV FOOTER CONTENT HERO A template 1 template 2 template 3

    A NAV FOOTER CONTENT A B C NAV FOOTER CONTENT HERO A home template template 1 template 2 template 3
  28. * Example screenshot mockups This is a screenshot of the

    same module from the homepage. Does not need designed!
  29. “Responsive deliverables should look a lot like fully- functioning Twitter

    Bootstrap-style systems custom tailored for your clients’ needs.” –Dave Rupert
  30. Jump into Typecast, choose “Type On Screen” template and play

    around with typography styles for your own personal blog (or for a ConvergeSE blog) EXERCISE
  31. “We may pride ourselves on building a great product, but

    it’s ultimately up to the client to see it succeed or fail. 
 Even the best website can become neglected, underused, or messy without a little education and training.”
  32. Work with clients after the 
 project is launched to

 success and refine to meet 
 their needs. (the web is never done) WHAT WE CAN DO:
  33. Keeping in mind the styles you created in Typecast, sketch

    a “client-proof” page layout given these content needs: Blog image, article title, author, date, excerpt Featured Blog treatment EXERCISE