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
Identify the critical 20 percent of content hunted for 80 percent of the time and make it readily available.
People perceive more aesthetic designs as easier to use than less-aesthetic designs, whether they are easier or not.
Elements in a design should be aligned with one or more elements. This creates a sense of unity, cohesion and stability.
Similar parts are expressed in the same way. Social media is an opportunity to show consistency.
A method of creating imagery, emotions and understanding of events through an interaction between storyteller and audience.
Combine many units of information into a limited number of chunks to aide in short-term memory.
- 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?
People judge books by their covers. Help people become oriented to the design by minimizing barriers, placing lures progressively, etc.
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
Mobile First, by Luke Wroblewski (book) ABookApart.com
Universal Principles of Design, by Lidwell, Holden and Butler (book) Rockport Publishers
Added by Mark, 3:15pm
- Sara Soueidan – SVG expert (among other things)
- “University Websites” venn diagram on XKCD
- WP Touch & Jetpack Mobile Theme – Acceptable but not great mobile-friendly plugins (i.e. doesn’t require overhauling theme)
- These two CSS-Tricks articles blew my mind! You can use blend modes in CSS, And you can use multiple blend modes!
- Two very interesting articles by Frank Chimero about the nature of the web. I found these articles really exciting and inspiring. “What Screens Want” and “The Web’s Grain.”
Some More Relevant Articles About Usability Issues
- NNGroup on Interaction Costs
- NNGroup on Banner Blindness and Sliders
- ShouldIUseACarousel.com – For fun but also includes links to some stats showing decreasing use of each slide. (I had said 5% clicked slide. Scratch that. Only 1% clicked on any slide.)
- Me on Text and Image alignment.
Some Dev-Friendly Theme Shops Recommended on the Post Status slack channel
- The Theme Foundry
- Automattic on Creative Market
- Professional Themes on Creative Market
- Array Themes