If you’ve been around for a while then you probably remember those corny “site under construction” animations used back in the late ’90s. We all loved those, didn’t we?
Anyway, web design has surely come a long way since then. And so did web animation. Nowadays, it’s no longer corny. More so, it seems that it has finally found its own place among other design mechanisms and tools.
So let’s have a look at how to use animated motion effectively and what place it has in the modern web design space.
The role of motion for modern web
This might sound surprising at first, but when it comes to the core benefits that good motion animation can bring, nothing has changed over the last decade. Mainly because human brains still work more or less the same, regardless of the design trend that’s currently the most popular one.
For instance, it’s been proven that animation helps us get a grasp on what’s happening on the screen and what’s the most important element that we should pay attention to. Why? It’s just how we work. Thousands of years of evolution made us who we are, and made us pay attention to motion. Otherwise, we wouldn’t be able to survive a predator’s attack back when we were living in caves.
So quite interestingly, even in the era of flat design and minimalism, motion still has its place and it indeed can (and should) be used to enrich user experience and make our designs more understandable.
The only thing that has changed is the form in which we should use it effectively. From a technical point of view, good animation in 2015 looks nothing like the animations from the late ’90s or early 2000s.
Responsive design is of course nothing new, however in the increasingly device and screen size fragmented world we are creating, it will continue to be an important trend. To some it might seem like old news, however many companies, large and small, are still behind the curve in terms of implementing responsive solutions. Expect lots of demand for responsive redesigns of existing sites. Excellent resources exist online such as Brad Frost’s This is Responsive, which details, for example, responsive solutions for navigation patterns. As a web designer in 2015, responsive web design is a bare minimum and a best practice. If you want to read more on responsive design, I wrote a blog series on the topic.
From skeuomorphic to flat to somewhere in between…
One of the great new features in the October 2014 release of Adobe Dreamweaver CC 2014 is the addition of five starter templates: About page, Blog post, eCommerce, Email, and Portfolio. Each of these templates provides a responsive structure to build a new web page that will look great whether it is opened on a mobile device, a tablet, or a PC. The About page, Blog post, and eCommerce templates are built with media queries. The Email template is built with tables, and the Portfolio template is built with Fluid Grids. This is a very positive step toward simplifying the process for those less comfortable with building a responsive design from scratch.
You can create a new page based on one of the Starter Templates by using either the File menu or the Welcome Screen. Although the screens are different, the results will be the same.
The possibilities for web design are endless. The industry is evolving and designers are looking beyond the frame to incorporate the narrative and visual components of film and television into their designs. Never before have so many beautiful websites existed, doubling as works of art and fully immersive user experiences.
We talked to three designers from award winning studios around the world to find out which websites they’re loving right now, and to learn how other web designers can incorporate these innovations into their own designs.
“I really love how the overall aesthetic principles of the site lend themselves to an old film or map from the era,” he says. “They have combined a perfectly matched vintage color palette with just enough subtle graininess to create an awesome product. The site seamlessly blends modern technology with archive WW2 footage to craft a very unique and memorable experience for their users.”
Designed by Warsaw’s Bright Media, Kemp says Warsaw Rising’s main goal is to educate through entertainment, a trend he expects will be huge in the coming years.
Designers can learn a lot from this site, Kent says.
The stylish and contemporary UI does not detract from the vintage theme
The design invites users to walk through the narrative, rather than having to flip from page to page
It’s also been optimized for web flawlessly, loading quickly despite being visual and interactive
“All of these elements make this piece remarkable,” Kemp says.
It takes talent, time and innovation to turn someone’s vision into something tangible, to take an idea down from the clouds and translate it into an experience. While practice will certainly make you a better web designer, there are things you can start doing right now that will immediately help you improve your designs.
1. Take out a pen and a pad of paper.
Web designers spend a lot of time building things in applications such as Dreamweaver and Photoshop, but sometimes the best way to hash out an idea is the good old-fashioned way. Don’t be afraid to write notes and organize information on paper beforehand so you have a better idea of how to approach the design later. Drawing or sketching your ideas can help you pull together concepts, layout ideas, and experiment with styles, all while simultaneously allowing you to see your designs through the lens of a different medium. And if you use smart technology like the Creative Cloud connected notebook you can save time by importing your sketches directly into the program using an app.
These days, the number one thing that’s required of web designers working on anything (that’s anything) is to make sure that their creation “has this flat feel about it.” In other words, the term “flat design” has become almost synonymous with “good design.”
But is flat design just a temporary trend, or is it here to stay and we’ll be designing flat websites for years to come? Can it be, perhaps, the new standard of web design?
Let’s find out.
To help me solve this mystery, I’ve invited 10 designers and web design experts to share their input on one big question:
Is flat design something that’s here to stay, or will it fade to make room for another, completely new trend?
Our team continues to streamline and improve Dreamweaver. It has a modern UI, edit capabilities in Live View, CSS Designer and a 64-bit architecture. That’s not all though, it gets even better. It also has a complete integration of Extract which empowers users to easily go from PSD comp to code.
Extract enables web designers and developers to build web and mobile content from a Photoshop comp directly in Dreamweaver, bridging the gap between Photoshop and Dreamweaver, and reducing the need to go back and forth between the two.
The latest release of Dreamweaver CC has not only introduced new features, but also has major improvements to existing ones such as the CSS Designer and the Element Quick View. We’ve created a couple of videos to provide an overview of these features and the enhancements we’ve made in Dreamweaver CC.
This video provides an overview of the CSS Designer panel and highlights the improvements to it. In this video you’ll learn how to:
Start a page design with the CSS Designer.
Work with the CSS Designer visual controls.
Use the panel’s workflow enhancements.
You’ll also take a look at how Live View integrates with the CSS Designer feature, making web design easier than ever.
Today we’re excited to announce the 2014 release of Dreamweaver CC! This latest version will improve your productivity and streamline your web design process, making it quicker for you to build and edit your web and mobile projects.
Can’t wait to get your hands on it? Download Dreamweaver CC now.
The Dreamweaver team is conducting a customer feedback survey. The objective of this survey is to connect with you, our users, and figure out from as many of you as possible what’s working in Dreamweaver and what isn’t.
Your feedback is important to us. Participation in this survey is voluntary and your responses are completely anonymous.