April 2015 Meeting Minutes

Trends in web design: 2015

The tension continues between media delivery platform and software experience framework!!

The headings are rough categories—heed repetition. In almost all cases this is a situation of the “The toe bone’s connected to the foot bone, The foot bone’s connected to the ankle bone, The ankle bone’s connected to the leg bone . . .” The web is a slippery connected thing.

Design for business trends

  • Bury the social media icons in footer: social is the hook not the main event
  • Ditch slideshow: users miss this additional content—they do not stay for the show!
  • State purpose of website at top (This is STILL not done consistently)
  • Find out what visitors need to know and give them that—immediately
  • A limited color palette has more power to connect—more color takes more energy to process
  • Obvious and fewer navigation labels are most successful
  • Accessibility for all—or, as many kinds of users as possible http://mrwweb.com/doing-your-part-presentation-two-short-assistive-technology-videos/
  • Responsive design will keep evolving—native apps will require responsiveness for wearables
  • Privacy concerns will become more acute for forms and eCommerce—new encryption methods, new visual displays
  • Remove sidebars: they are distracting to the main content and affect engagement/actions
  • Distinct header images are passé
  • Headers contain logo and functional elements now
  • Multi-column formats are growing with wider and wider desktop screens
  • Optimize for 1024 × 768 (or 960 x 650)

Design process trends

  • Digital-first branding: start with the customer’s experience online as the primary touchpoint
  • Design in grayscale first, then add color: prevents “overdesign”
  • Use Keynote for interactive wireframes 
(add favorite tool here)
  • Designing in the browser will continue 
to gain steam
  • Step away from the computer. 
Plan, plan, plan and draw, draw, draw
  • Use mood boards, Pinterest 
or a paper collage to establish visual tone
  • Use the squint test to find focal points and understand the scanning experience
  • Free slavishness to the rectangle (boxiness)
  • Add web fonts to brand identity guidelines, and include clear hierarchy
  • Use fonts that have hinting built-in (instructions for outlined fonts to improve their rendering on a grid of pixels)
  • Use of SVGs (scalable) images instead of rasterized images that degrade on new generation devices
  • A tight collaboration between writer and designer is needed to respond to multi-device, simplification landscape

Visual experience trends

  • Flat design: forget the interface and fall in love with the content
  • Tiled, modular, masonry grid, or card content adapts to responsive well
  • Scroll events, scroll-animated events, hide and reveal—scrolling is the new clicking
  • Animated logotypes (gifs or algorithms)
  • Big cinematic images, video loops and custom photography and illustration
  • Preloader creativity is back (because of the big cinematic images)
  • Seamless touch movements that aide in storytelling
  • Largescale typography that dominates the screen
  • Information graphics will continue to pack lots of information in a small space
  • Microinteractions that delight based on one task (lightbox pop-ups)
  • Centered max width approach comes back because of scalability to responsive—use with caution
  • Desktop views of minimized design may look look stark or lacking in detail—learn to live with the consequences

Design usability trends

  • Plan content for distracted users: Lookup/find, Explore/play, Checkin/status, and Edit/create are the main mobile behaviors
  • Navigation experiments will continue, from hamburger icon, flyouts, sideswipes, fixed sliding, etc
  • Touch gestures make hover (drop-down or pop-ups) obsolete for interactions and navigation
  • Get fluent in pinch, spread, tap, drag, flick and other gestures as a designer
  • Make buttons big enough for one thumb
  • Be conscious of one-thumb reach area—reach area is getting larger with “phablets”
  • Increase font size and contrast for one eyeball
  • Always use generous margins around text and other elements so one eyeball knows what to scan, to touch with no errors
  • Minimize all design and content to essential actions
  • Mini IAs at top of page or information scent devices—cues related to the desired outcome—sticky navs, related content, etc
  • Performance and speed will continue to be priority—mobile especially, with slow connections and variable data plans—simple designs load quicker
  • Form design has new constraints—design mobile-optimized labels, improve input types, attributes and masks
  • The fold still exists and still applies but the location shifts with devices—users scroll when there is reason to—scrolling is an extra action

Universal design principles that still apply in spite of all this mobile disruption

80/20 rule

Identify the critical 20 percent of content hunted for 80 percent of the time and make it readily available.

Aesthetic-Usability effect

People perceive more aesthetic designs as easier to use than less-aesthetic designs, whether they are easier or not.

Alignment

Elements in a design should be aligned with one or more elements. This creates a sense of unity, cohesion and stability.

Consistency

Similar parts are expressed in the same way. Social media is an opportunity to show consistency.

Storytelling

A method of creating imagery, emotions and understanding of events through an interaction between storyteller and audience.

Chunking

Combine many units of information into a limited number of chunks to aide in short-term memory.

Cost-Benefit

  • How much do I have to read to figure out what it is about?
  • How long do I have to wait?
  • How many steps do I have to take?

Entry point

People judge books by their covers. Help people become oriented to the design by minimizing barriers, placing lures progressively, etc.

A Dao of Web Design

It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.
—John Allsopp, A List Apart

Sources

Mobile First, by Luke Wroblewski (book) ABookApart.com

Universal Principles of Design, by Lidwell, Holden and Butler (book) Rockport Publishers

Type on Screen, Edited by Ellen Lupton (book) Princeton Architectural Press (Website)

Hubspot Blog: We Design Tips

99Designs.com: Top Web Design Trends 2015

NNGroup.com: Page Fold Manifesto

NNGroup.com: Mobile Usability Update

Added by Mark, 3:15pm

Miscellany

Some More Relevant Articles About Usability Issues

Some Dev-Friendly Theme Shops Recommended on the Post Status slack channel

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s