Improve Your Website Design without Making It Harder to Use
Sometimes, when it comes to designing websites, less can be more. With a few quick improvements you can make your website pop and improve usability at the same time. It’s usually the subtle little things that make a good web design a great design. Those same little things often get overlooked when planning a design. Below are some examples of simple but effective things that will help elevate your design and make your site have that pop.
One thing that is often overlooked as an area of improvement in your design is scrolling. Macs by default have pretty scroll bars that hide when not in use, but Windows users get big chunky scroll bars that can interrupt the design of your site. Thankfully, there are a number of jQuery libraries available to bring the Mac style scroll bar to your Windows users. We like to use Perfect Scrollbar on many of our projects, but there are dozens available each with slightly different features. Control of the scrollbar can give your design a little bit more purity with your initial vision.
In addition to the scrollbar, the scrolling action itself can be improved. If you are using any anchor based navigation like on a single page site, you should use jQuery to animate and smooth out the scrolling. This allows the user to see that they are being transported within the current page rather than being taken to a completely different page. Speed and smoothness can be adjusted based on content and need. It's a subtle effect but can make the whole navigation a more enjoyable experience.
Adding imagery to your site may seem like a more obvious design choice than what’s been mentioned so far. Although it seems like a no brainer, there are a few things to think about before throwing images everywhere. The images you choose affects the user and their experience. Compelling images will establish trust and generate emotion for the user. Each image should have a purpose. They should align with the values of your company as well as provide a visual representation of the content. If the image does not have relevance, it can be overlooked or ignored.
Using background images can create a sense of atmosphere. It is important to know what you want your site to feel like before you place a background image. If users are confused by the image, they may end up leaving your site. Also be sure there is enough contrast with the text overlaying it. It can be hard to read if the text does not stand out on the image.
Make sure your images are optimized for the web before placing them. Large images can slow down your site and lead to a negative experience for the user. Add image descriptions as well in order to enable good SEO.
A simple way to clean up the look of your site, as well as add interest is adding iconography. Iconography uses art and symbols to convey the meaning of a subject. The icons being used should accurately represent the content in order for the user to understand the information being presented. If the icon doesn’t accomplish this, it could confuse them.
Make sure the icons being used have a similar style. Use the same colors and line thickness. If the icons are in a flat style, make sure the other icons also have that same style. Multiple styles can be confusing as well as make your site look unprofessional.
It is important to keep in mind that it is possible to overuse icons. Don’t use icons to represent all of the information on your site. Icons should be used to help the user understand the content rather than overwhelm them.
Iconography can be especially effective in menus, on text heavy pages, and when calling attention to various types of virtual products and other objects that are conceptual but not necessarily photographable.
Picking the right colors does a lot more than just make your site look attractive, you’re also creating a memorable brand. Your site should have one main brand color as well one to two accent colors. Your brand color should create an emotion with your user since this color represents your company. If your company is already branded, you should be using the primary logo colors on your site.
Your main brand color should be used for things like main headers, buttons, and to highlight important information. Accent colors should be used for subheaders and to highlight secondary information.
Think of your target audience before picking colors for your website. You should never pick a color strictly based off of your own preference.
You may not realize it, but typography is incredibly important for your site. The right font can attract and hold your audience's attention. It also helps the readability of the content presented to them. Different font sizes naturally helps create a hierarchy of information which in turn helps the reader digest your content. Like colors, it also helps with brand recognition. Overall, picking a clean, readable font can help retain your site visitors and effectively present the information you want them to take away from your site.
A Planned Navigation
The gateway to your website is the navigation, so it’s important to put thought and planning into the design of it. There are plenty of small design tweaks that go a long way for navigation. One example is making sure you have some kind of active state for the menu item of the page or category that the user is currently on. This provides instant context to the user and also adds a little extra flare.
If your site is fairly content dense and has long scrolling pages, then a sticky nav might make sense to use. This can give your users an instant path to the next relevant thing they want to see on your site. It’s also a nice looking effect when designed well. Just make sure that it stays out of the way of the content, but is still easy to find.
On smaller screen sizes collapsing the menu into a single button activated flyout is usually a good idea, but don’t just cram everything from your nav behind a menu button. A good practice is to consider the main objective of your site, and keep access to the most important areas of your site outside of the mobile menu. There is generally enough room even on the smallest screens to have an important call to action alongside a mobile menu button.
CSS Transitions and Animations
Another easy way to add some flare to your site is to sprinkle in CSS transitions where it makes sense. If you have any rollover effects using CSS properties, you can easily add a css transition to make the effect more impactful and less abrupt. Use them whenever you are changing colors, sizes, positions, and rotations. These transitions are also great when you are revealing off screen areas such as menu dropdowns, accordions, offcanvas areas, and overlays.
CSS animations are very similar to transitions, but they usually occur without a user action to prompt them. These are best when used for subtle things and can easily be overdone, so be careful when planning for animations in your designs. When done well, they can certainly provide that extra pop you are looking for. CSS animations can really spice up the boring old image slider by animating images and text in between slide changes. They can be used to improve UI by adding animations for actions like adding something to a cart or making a selection on a screen.
Editor's note: This post was originally published in June 2018 and has been updated for accuracy and comprehensiveness.