Jeremy Osborn (left) and Andrew Miller (right) are the dynamic duo behind Gymnasium, our free online school for creative, digital and marketing professionals. With almost four decades of experience between them, spanning design, digital creative and user experience, we think there are no better ambassadors to speak about the current state and future of web design. Which is exactly what they did on their recent European tour of Aquent and Vitamin T clients.
We caught up with them over a few croissants and cappuccinos so we could share their knowledge with the rest of the world.
What are the most important developments occurring in web design today?
Andrew: With the move toward responsive design, we are at a curious time where our needs have eclipsed our current workflow and toolset. Amid the deluge of shiny objects (i.e. new tools and apps) that promise to solve our woes, there are some remarkable themes emerging, such as:
Rapid prototyping as the central component of the design process
A content-first design approach
Self-documenting design workflows
Why is responsive such a hot topic?
Jeremy: We are approaching an “event horizon” in which more people will be accessing the Internet through their mobile devices than desktop computers. Companies both large and small are realizing this and looking for strategies to stay relevant to their customers. This opens up tremendous opportunities for anyone involved in the craft of web design, but numerous challenges as well.
What is the difference between adaptive and responsive design?
Andrew: I have, hopefully, a pretty simple way to describe the difference between adaptive design and responsive design.
Adaptive design is an approach where you create multiple versions of a web site, each designed for a specific device type. For example, a phone user will go to a URL like http://aquent.com and be redirected to a version of the site that is designed to fit on a phone, something like http://m.aquent.com (notice the "m" for mobile). There may also be a version of the site for tablets, where you’d see a url like http://t.aquent.com. Each version of the site might have layout, typography, navigation and other UI components that are optimized specifically for that device.
Responsive design is an approach where you create a single version of the website that magically reformats itself to fit the device. For example, the same website that is a 3 column layout with dropdown/flyout menus (that interact when you roll over them) will appear as a single column with navigation that is better suited to touch interaction.
There are pros and cons to both approaches from a business standpoint as well as with content strategy, SEO, design workflow, performance, usability, etc. With the large number of sites that are not yet mobile friendly, there are still many businesses who need to decide on an approach. And with the ranking algorithm changes that Google made in April which lowers the rank of any mobile-unfriendly sites, they need to do something soon.
Why is prototyping becoming a central component in the design process?
Jeremy: In traditional workflows, the prototype was often a specific deliverable used for testing users or to demonstrate the flow/functionality to stakeholders. Prototypes were built from static design artifacts (wireframes, comps) and revisions that resulted from feedback from testing/demonstrating would have to be reflected in those static design deliverables as well as the prototype (usually to appease the stakeholders). The prototype in this case is an endpoint, a result. Designers could think statically and their ideation could happen in a static fashion.
Responsive web design requires designers to think more dynamically and to understand how their layout will flow on a myriad of devices (even those that don't exist yet). Just as they might have used a rough sketch to work out ideas before committing them to wireframes, comps, etc., designers can start with a low fidelity prototype that can evolve. A prototype can expose problematic navigation patterns or content structure far more effectively than any static depiction.
What is a self-documenting design workflow?
Andrew: This is definitely deep into geek territory, but this idea is connected to Lean UX principles of less documentation for documentation's sake. It's about the development and use of tools that basically generate their own documentation. An example of this would be a script that can run automatically and generate a style guide directly from CSS. So if you change the color of all primary navigation elements (ideally by changing a single value or variable), the style guide updates itself. For those who can do the "design in the browser" thing, there are several really cool ways to do this. For example, there are ways to do this with plugins for Sketch where a designer can make changes to their work and those changes are reflected in other documentation automatically. The point being, if you set things up to do this ahead of time, you can avoid having to waste time/resources on creating documentation.
What can we look forward to in the future in web design?
Jeremy: Increased specialization. UX designers playing a starring role. Companies focusing on making their websites faster. Best practices emerging for mobile UI such as complex navigation, data tables and images.
Andrew: Even more devices. Integrated multi-screen and multi-device experiences (this is happening... but we're still doing primitive stuff with it).
Screenless experiences will also be a big development. UX presupposes a "screen," but interfaces can be as minimal as a single light that changes color, a single button. We now have devices that can communicate meaningful information in non-visual ways, like the Apple Watch which has the ability to signal a phone call, a text, etc. by changing the pattern of buzzing. There are bicycle handlebars that can alert the rider by buzzing the appropriate grip if there is a car in a blind spot. The purview of UX needs to be expanded on both sides of the screen/device size spectrum, from super-ultra-mega HD screens to watches to something even smaller.
Andrew Miller is the Program Director for Aquent Gymnasium. Bringing over 18 years of UX design experience to the role, Andrew has worked on web and application projects for some of the world's biggest brands.
Jeremy Osborn is Academic Director for Aquent Gymnasium and also the instructor for Gymnasium's recent course "Responsive Web Design: Promote Yourself Responsively." He has been active as a designer, educator, and writer in the creative technology industry for more than 20 years.