Last year in What changed this year in web design (and what's next), there was a lot of hype about transitional interfaces, more designers tackling coding and new devices coming to market that would continue to challenge our approaches and processes in responsive design. The Watch isn't on anyone's wrist yet but there as still been a leap forward in how we create and share information.
This year also explored a lot of questions about the present and future of web design. Should there be a web design museum? Why don't designers take Android seriously? And even, is web design dead? Short answer, it's not, but it is a different landscape. Here's a look at all of the newness in each aspect of that landscape.
CSS is evolved into a completely differently thing entirely. It's now the driving force for layout, animation and has a significant effect on performance.
- CSS Blend Modes - Applying Photoshop-like blend modes in CSS is still a bit "bleeding-edge" but once supported, will add another versatile tool to the CSS arsenal.
- CSS Triggers - A definitive resource for what work is asked of the browser when CSS properties change.
- CSS Regions Matter - A layout tool for semantic regions, still an experimental feature but this article does a good job of proving their worth.
- Understanding CSS 3D Transforms - 3D interaction in a 2D space.
- CSS Shapes 101 - Allows for styling around a geometric shape to create more variety in design, a welcome alternative to the current boxy-ness of responsive grids.
- Enduring CSS and CSS Audits: Taking Stock of Your Code - A great guide to conducting your own CSS audit, something that will greatly improve the maintainability of your CSS.
That brings me to my favorite section. These companies shared how they write CSS on large projects. Spoiler: Modular, reusable components and design patterns, preprocessors, and a commitment to performance. Medium's write-up is especially interesting, especially its use of a z-index scale, font scale and color scale.
Something moving on the screen has attention-grabbing superpowers when used with meaning. Animation in web design has been a step slow in the past but is finally catching up. Whether you are creating CSS keyframe animations from scratch or using an app like CSS Toolkit to realize your vision, you're now able to create robust animations with CSS and even use CSS in place of jQuery in some instances. This is only the beginning.
See the Pen Cloudy Spiral CSS animation by Hakim El Hattab (@hakimel) on CodePen.
On both large and small projects, having a front-end style guide that keeps track of modular, reusable styles has quickly become a best practice. You won't find anything more comprehensive than Website Style Guide Resources, an open-source guide to all things style guide. Including articles, books, podcasts, conference talks, tools, and lots of examples to explore. Here are a few highlights from the group:
Our user experiences are a reflection of our organization’s structure. If we want content and design to feel integrated, we need to integrate our organization. — "Content and Design Are Inseparable Work Partners", Jared Spool
- UX Thought of the Day - Constant motivation for how a commitment to UX can transform your website and how you assemble your team.
- UX Crash Course: 31 Fundamentals - The basics, explained.
- First Time User Experiences - A look at different ways sites choose to onboard their users.
- If You Can’t See The UXer In The Room, You Are The UXer
- How to Tell the User's Story
- Intake Center - An excellent resource for starting new projects, by defining your content strategy first.
- UX for the Enterprise - A lean approach to enterprise work.
- Cohesive UX - A great explanation to unifying UX and a variety of screens.
Products and Tools
Not only does has the web design process evolve constantly, so do the tools we use to create. From new code editors to prototyping tools, these products have the capability to transform a workflow.
Lightweight, modern IDEs, that are open-source and "hackable".
Responsive and Prototyping
- Macaw - A web design tool for the code-savvy. A learning curve, but a very unique, efficient approach to building sites.
- Framer - A prototyping tool that allows you to decide on interactions up front.
- Extract - An Adobe toolset that translates Photoshop files into CSS, pretty reliably.
For more, check out my Product Hunt collection on Front-end Development.
There's nothing quite like opening up a process and seeing how others worked. A lot of sites were redesigned in the past year and these write-ups give great insight on the why and the how behind modernizing these brands and their sites.
AirBnb's approach to their redesign was holistic and transformative. Even if some had a little bit too much fun with their logo.
The privacy-championing search engine, DuckDuckGo, redesigned their service to reduce clutter and separate themselves from those other guys.
Huge Inc., a digital agency headquartered in Brooklyn, is on the forefront of design and thought, the most compelling aspect of their new site being the full-screen overlay menu, a responsive-friendly approach to navigation.
The New Yorker
The iconic magazine redesigned its site as well, its biggest win being its focus on typography (and of course optimizing their advertising strategy).
TIME's implementation of continuous scroll gives a more immersive browsing experience and allows users get to more information in a shorter period of time. A strategy adopted by several media organizations since.
The Harvard Law Review
This redesign updated their brand and had a huge emphasis on performance, since the publication does not publish images alongside its content, there was a unique challenge here to create a visually impressive look but let the words be the main course.
Responsive overview images from Am I Responsive?.
More Great Write-ups
In need of a better solution for serving up different images in different contexts, the
<picture> element was born, but with less than 1/4 support in modern browsers, it's important to know what you can do now:
- Golden Ratio + Modular Scaling + Responsive
- Layout Math with CSS: Understanding calc()
- An Auto-Enforceable SCSS Styleguide
Let's face it, our users are attention-wanderers. Doing a task, reading an article, or navigating an app needs to be fast. One of the most impressive things I read all year was Improving Smashing Magazine's Performance: A Case Study that shows how paying attention to the small stuff can make a monumental difference. There were a ton of great articles and resources that help define how the web design industry looked at performance, particularly on responsive websites.
- RWD Bloat Part I and RWD Bloat Part II
- How to Make a Performance Budget
- "RWD Is Bad for Performance" Is Good for Performance
- Designing for the Slow Web
Material Design deserves its own section
Google's design initiative created a new design language that allowed it to integrate all of its products and give back to the community by releasing its own design principles to help prioritize and guide decision-making. It's by no means the only way to do things but it is a cohesive resource. I'd suggest reading Max Weiner's How Not To Freak Out About Material Design if you're creating a project using Google's design approach.
Material Design explained
Hey, so does the Hamburger icon
There's a healthy discussion going on right now on whether or not the ☰ icon is effective. Do users know what it is? Luckily, there's split testing for that from James Foster on Exis Web, with varying results:
See the Pen CSS Animated Hamburger Icon by Elijah Manor (@elijahmanor) on CodePen.
And some more thinking on how such a UI pattern can catch on so rapidly and be improved over time:
There's no better way to learn something than to create with it. These examples are some of the most creative experiments that were shared in the past year.
If you haven't gotten to play with Patatap yet, take a few minutes and check it out. It's a portable animation and sound kit you control with your keyboard. Unless you're my mom, which which case you'll just be "getting a gray screen."
AprilZero, for instance, a personal project from Anand Sharma to take a truly exhaustive look at the quantified self including "realtime location, physical activity, travel history, photos, pulse, weight, blood levels" and way more, is just awesome.
Other fun experiments
And then there's 2015
If Carnac the Magnificent (Johnny Carson, everybody!) held a Macbook Pro up to his forehead and tried to predict the upcoming year, here's what he might see. Actually this is an upcoming documentary about the web, The Future Is Next, but it's probably the same thing: