01 Multi-Device User Behavior
How many different devices do you use on a typical day? Be honest. Maybe it’s morning emails on a laptop, or a quick tinder-swipe in the grocery line. The reality of the situation is that most modern consumers live from screen to screen. A 2016 study performed by Google found that 57% of consumers use more than one type of device in an average day. Multi-device behavior has completely transformed the way users interact with digital brands and how we design to accommodate that behavior.
02 The Age of Responsive
Developing websites that work on an endless multitude of screens is no easy task. There are desktops and tablets and phones...oh my!!! In terms of available technology, responsive design provides the most cost-efficient solution to this problem. Every site I’ve launched in the past 5 years has been developed on a responsive framework, it’s simply the industry standard. So if it’s so effective, what’s the problem? Speaking from experience, I can say that designing on a grid is formulaic and can reduce spontaneity in the design process. The result of a systematic approach to design is an industry saturated with similar looking sites. I think most designers would agree when I say: in the age of responsive, web design has become a little predictable.
03 Thinking Spatially
Breakthroughs in movement and animation have the potential to reshape design trends and responsive workflows. Many responsive sites look similar because they rely on modular page compositions. Flat structures are extremely limiting in terms of layout possibilities. Sometimes I look at a website and think, why am I looking at a flat page on an interactive screen? More unique experiences can be created by introducing motion principles and exploring viewport space in innovate ways. Thinking spatially with tactics like progressive disclosure, contextual scrolling, multi-dimensional movements and prototyping can be extremely effective.
04 Contextual Scrolling
Contextual scrolling is achieved by locking the position of certain elements in the viewport while others exit the screen on scroll. Maintaining relevant information can contextualize content and make cohesive experiences for users. Utilizing scroll behavior to drive the transition between moments can create unique and engaging experiences.
05 Multi-Dimensional Movements
Multi-dimensional movements are created by layering design elements in z-space. Utilizing scroll behavior and applying different speeds of motion creates implied spatial depth and appealing visual treatments.
06 Progressive Disclosure
Progressive disclosure is a method that involves revealing information in a sequential order to streamline user interactions. This is one of the most successful methods of spatial design, and one that performs well time and time again in user testing. Remember, you don’t have to think of your sites in terms of pages! Oftentimes thinking about designs in terms of flows can create stronger experiences.
A prototype is a replication of a design in it’s final, interactive form. Prototyping is essential to the spatial design process. Thinking about motion early in concepting phases can allow designers to explore more ideas and move away from standard layouts. Prototypes can be created in a variety of ways: HTML, animated videos, and applications such as Principle.
08 The Future of Responsive
Applying spatial techniques to design processes can create highly effective solutions that simultaneously work within responsive frameworks. As designers and leaders we are constantly looking to push the limits of available technology to create new and innovative products. The possibilities of spatial environments are infinite and the future of digital design will rely on evolving responsive frameworks to utilize that potential.
Trista Yard, Associate Design Director, will be speaking on this topic at the 2018 SXSW Festival. Get details here.