It can be tempting to go over the top with web animation when you have the skills. At the same time, animation can be easy to forget about when you’re working on more down-to-earth projects. But I believe simple animation can work in just about any web design and really bring it to life. I’ve found five great examples of animation in web design that are subtle, classy and effective.
For the last year I’ve spent countless hours training graphic designers to work on the web. That’s included writing a book targeted at this audience called The Designer’s Web Handbook (out April 30!), teaching a web course at my old school, the University of Missouri St. Louis, speaking at the HOW Interactive Design Conference, and writing and teaching interactive design courses through HOW Design University.
My goal though all of this has been to teach people how the web works, how to design for the web, how to codeand ultimately how to the make the most of working with the medium. Amid all of this, I keep coming back to one confounding question: Are designers really prepared to go all in?
A huge trend that started a number of years ago was the single-page web site. This approach packs all of the information into one page. It started off as a way to create a simple design, focused on rapid communication, often used as a simple e-commerce portal or an efficient portfolio page. But it’s evolved into an art form all its own.
Yes, I am a bit obsessed with one page design, this is the culmination of my interest in it and you can read the full article on HOWInteractiveDesign.com.
llustration is an incredibly versatile tool that can find many different uses in design. And when it comes to web design we can find an extremely wide variety of implementations.
Today I want to dig into some key ways that this tool has been put to work so we can draw new ideas to inspire and challenge the designs we produce.
Let’s begin someplace I seldom do, with a basic definition: Illustrated: 1) To make clear; 2) To make clear by giving or by serving as an example or instance; 3) To provide with visual features intended to explain or decorate.
Though I’ve observed the trend of wood in web design for years, somehow I never grow tired of it. (Both of my Web Designer’s Idea Books feature sections on the topic.) But why is that? What is it about this approach that draws me in? I think the answer is simple: We connect with wood in an organic, tangible way that takes us outside the digital world.
One of the most compelling ways to give a website a warm, inviting atmosphere is to incorporate textures. There are a couple reasons to do this. First of all, it can be really helpful to disconnect from the technical nature of the web. Say you’re a web design agency and you find that one of the things you do best is engage non-technical clients. Using fabric textures in your site design can be a great way to reinforce this message. Or if the site’s focus or product is related to fabrics in some way—think fashion, lifestyle, home goods, crafting—the theme can help communicate the purpose...
Alan Pipes’ new book, How to Design Websites, aims to help designers understand the fundamental elements, tools and principles required to design and build basic websites. He’s done a good job of condensing a ton of information into a relatively digestible format, but this book isn’t for everyone
Using smartphones and tablets in web designs not only looks attractive, it also quickly conveys a message of being cutting-edge and mobile friendly. (You don’t have to drink the Cupertino Kool-Aid to recognize that the iPhone and iPad are really beautiful.) We’ve picked out some great examples of agencies’, apps’ and mobile services’ websites to illustrate how using mobile devices as design elements can work...
CSS3 brings changes to how designers and web developers work with backgrounds, and considering that background images and colors are fundamental structural elements of websites, improvements in this area have a huge impact. With CSS3 we can now have code-based gradients in addition to the traditional solid colors. You can also assign multiple background images to a single HTML element. Another new option allows developers to scale background images with CSS tags...