It’s easy to get caught up in the private world of web design, spending too much time playing with the latest CSS tricks, or flipping through the coolest design showcases. You start forgetting that your work isn’t all about being on the cutting edge and snagging a web design award or two. The reality is that the latest and greatest design trends are irrelevant, and sometimes even alienating, to the majority of audiences. Unfortunately, that kind of work is often only appropriate for an audience of other designers, and those projects are rare.
So take a step back from trying to one-up your peers, and consider the basics. At the heart of design lies the famous maxim that form follows function. Make sure your work is holding true to that principle by making sure of these three things:
You can still be innovative while working with a more sedate style.
The interests of your target audience should always be the overriding consideration in determining the style of your site. However, that doesn’t necessarily mean that say, a flight tracker site has to look dry or function traditionally to accommodate its audience. While Adioso has an elegant, modern design, it remains relatively simple by highlighting usability above all other aspects. The layout and styling focus more on elevating the search tool rather than adding “flash” to the design.
Use split testing to understand what your audience responds to.
It’s not hard to find out what kind of people you’re designing for; you can use tools like Google Analytics or pop-up polls to get a sense of your demographics. But after that initial research, it’s still really helpful to continue refining the design, honing in even more on the interests and reactions of your audience.
With split testing (also called A/B testing), you can compare even the most trivial changes to find a difference in success rate. By creating multiple versions of a web page, you can submit side-by-side comparisons for testing with live traffic. Monitoring actions like clicks or sign-ups for a period of time often show a conclusive preference for one page over the other. Then you can take these results and refine them further.
It seems like just one factor in web design shouldn’t have such a monumental impact on your users. But just a couple extra seconds in load time can have astonishing ramifications on user responses and conversion rates. In fact, about 30% of consumers will start to abandon a website after 5 seconds of loading time. And most of that lag is the result of front-end design decisions.
There are many effective methods you can use to increase site speed.
In order to improve on your site speed, first determine exactly how slow your pages are with a site speed test. Then employ a combination of tactics, like:
- Simplifying design elements, like reducing drop shadows, images, and other fancy effects and flourishes. Not only can this help your site’s speed, but it can also help give that that’s becoming very popular as an aesthetic choice.
- Using CSS Sprites to display images, or creating icon fonts for common UI elements.
- Denoting the height and width of your HTML image tags, so that they can load in their own time, without holding up the rest of the page.
Designers are used to questioning the conventions with everything they work on. But for the web, which is still a confusing world for many users, some of these conventions need to be stuck with for now, such as:
- A search bar that’s easily identified, usually located at top right
- Breadcrumbs for complex navigational paths
- A consistent and easily-identified UI system, like the use of pink elements on this site, which signals important information
Aesthetic frills are meant to fill in the spaces left over by solid functionality, not the other way around.
A designer’s work has almost endless flexibility when it comes to producing a beautiful result, but far less flexibility in terms of usability. Starting out with a structure that appeals to and works with your audience ensures that your site is just as attractive to a user as it is to another designer.