How to make sure you don’t get lost in your web design process
Designers usually follow a process when designing a website. Some start with the intro, some create websites based on the sitemap or the navigation, while others build it up from a wireframe or story-flow. There isn’t a right or wrong way of doing this. There are benefits to each of these processes. A great designer is one who is versatile and is able to take advantage of any process.
However, we all know that design is not a process that sits on set railroad tracks. We research, we get inspiration, we explore along the way. As a result, we very often get side-tracked. We get lost in experimenting with an idea or trying a new look and feel. We forget about the factors that make or break a website.
I don’t want to talk about the importance of wireframes or color palettes. I want to share some of the small but important details designers often bypass when designing a website. To me these elements help differentiate a useful and carefully thought-out design from just another cool design.
1. The Call to Action (CTA)
What is the most important thing I want my users to do after visiting my site? Buy a product, contact us for a service, subscribe to a mailing list? Is my call to action clear and easy to understand?
Now that I have my call to action at the most prominent place on the page, what if the users scroll 3 section down, do they still know what I am asking them to do? Aristotle’s advice might be applicable here: “Tell them what you are going to tell them, tell them, then tell them what you told them.” Users need to be reminded what to do. It doesn’t matter how beautiful your design is, if your user is not encouraged to act on something, your work will forever be just a show piece.
The usual placements for CTA are the intro section, middle of the page, on the navigation, or right before the footer. I usually make sure my CTA appear in at least 2 of those places.
2. Does this thing always have to be where it usually is?
Remember when site navigation was always on the top? Well, now they can be anywhere, bottom, side, hidden, or floating. The same thing should be considered for other elements, such as email subscriptions, social media icons, search boxes, and, of course, calls to action.
Most of the time it makes sense to place them wherever people usually find them on other sites. That creates an ease of access when users need to quickly find things. However, in my opinion, web elements are most effectively used when they are put at the right place, whether it’s driven by content or user flow.
Here are a few examples of unusual but effective element placements:
Navigation right in the intro image: http://www.sagmeisterwalsh.com/
Logo at the bottom: https://trends2015.hautehorlogerie.org/#!/en
Side footer: http://www.mrassociates.org/
Look at how they treat navigation and social media: http://teamleschameaux.fr/
Rotating CTA http://www.intellectsoft.net/case-studies/jaguar-land-rover/jaguar-talk
3. The animation
Web animation is awesome and you should be proud of yourself if you are able to create a web page full of animations. However, I’ve seen so many sites getting carried away with things moving around.
Animation should closely tie into the design and, most importantly, the content being presented. There is no point in adding random animations just to show the client that you have an awesome front-end team.
10 Years of Git web page animation
This 10 years of Git page has lots of fancy animations, thought I think they make sense. All of the animated characters are closely related to the events. On the other hand, the pre-coded animations that come with many web design templates are made for all use cases. They are very generic. They’re cool on the first visit, but after the second and third visit, people get annoyed by them, because they don’t add more depth to the content.
Here is a tip: ask yourself if the intent of the content will change or become less interesting if the animation is removed. Ask yourself if the animation helps users understand the content better or navigate the site better.
Another criteria to consider is the animation pace. You don’t want one section where elements animate at 0.3 seconds and the section right after it to have graphics softly floating at 0.8 seconds. Animations need to be consistent in term of pace and style, unless the variation is intentional, based on the content and their context.
4. How do you want users to feel when they interact with your site?
You might argue that the look and feel of a site is driven by the brand style guide. I don’t disagree with that, though it’s only one part of the equation. We should think of website as a 3-dimensional product, in which the third dimension is interaction and experience. Brand style guides can help you with a 2d look and feel, but it cannot define the feel of this third dimension.
For example: when you’re designing a boutique female clothing e-commerce site, aside from the pastel color palette, san serif typeface, and a minimalist design, how do you want your users to feel when they click the “quick view” button?
Maybe you immediately think of a really cool pop-up interaction that you can “borrow” from the last webpage you saw. However, you have to ask yourself, would it fit with the subtle aesthetic that the brand is aiming for? Would a simple fade-in interaction be better?
