Mind Benders, Day 1

Each time I attend An Event Apart I come away challenged and motivated. Here are my personal takeaways from the first day of the 2016 An Event Apart show in Seattle, Wash. If they help in any way give me a shoutout on Twitter (@jaywintermeyer). I’d love to see what you’re doing.

 

Jeffrey Feldman – Designing With Web Standards in 2016

24ways.org is a resource for quality web articles that will challenge the way you think.

A few design principles to guide your next project.

  • Focus on content and structure first.
  • Remove distractions.
  • Design system to serve content.
  • Make style serve the content and brand.
  • Remove each detail from your design until it breaks.
  • Design for the user, not the artist.

Yesenia Perez-Cruz – Designing Deliberately

“Performance is a design feature not a technical concern.”

  1. Prioritize site goals and cut extraneous cruft.
  2. Fast does not equal boring.
  3. Provide core content first, then layer on enhancement, touch support, enhance csss web fonts, images, etc.
  4. Begin with performance in mind. Set a performance budget then ask what value every element provides to a page.

Take guardian.com‘s lazy load example and see how they work to get a site representation on the screen in under two seconds.

Check out Brad Frost’s performance budget builder.

If items are too heavy:

  • optimize the feature
  • remove the future or portions
  • don’t add

“One of the benefits of using system fonts in web design is that it feels more more native to users.”

If you’re overbudget, how do you simplify the type system?

  • Look for ways where you only use font’s for one specific purpose or a few places.
  • Can you look for lighter fonts that look similar. (lighter=different font but not as heavy.)
  • Do you need web fonts on small screens? Can you consolidate heading fonts and colors. Audit the details.

“Design consistency isn’t pixels. Design consistency is purpose.”

Goal: Have just enough design without cruft to slow thing down.

  • Create type pattern
  • Create color palette with meaning.
  • Find a way way to deliver a sizable representation of a web page’s content very quickly, even if page is content heavy
  • Document your decisions into a style guide.

Check out CURBED design for brand representation ideas across differing devices and platforms.

Test site pages in reader view to make sure your source order is set properly to make sense.

Jen Simmons – Revolutionize Your Page: Real Art Direction on the Web

“Art Direction is about making conscious design decisions and implementing them.”

Spend some time looking at editorial design for a real world look at art direction outside the web world.

Explore box-sizing: border-box

labs.jensimmons.com

Feature queries are your friend. – Explore.

CSS Shapes Editor – check it out!

 

Derek Featherstone – Extreme Design

  • Group closely related items
  • Use layout to create the right chunks.
  • Use pattern to lead the eye to appropriate action.
  • Use the straw test to find layout and design challenges for people with low-vision.

“An understanding of the differing needs of the young and the old results in the design that is truly universal.”

How would you design for Dory?

  • Design to give clues for people with no memory.
  • Assume people will forget.
  • Design of motion in one direction.
  • Design for hands-free operation.

Minimum Viable Interaction:
Can someone move through your site if they only read the headings or just the links?