Ah, design. The most subjective and hard to articulate part of the website creation process for every single one of my customers. Many people know less what they do like and more what they don’t.
If you’re a web developer, design might not be your strongest suit. But no matter what your personal style is, there are some simple things you can do to not only improve the look of the designs you’re creating, but also help to improve your UX. The best part is, these design tips can fit in with any type of website.
1. Point Images Towards the Copy
Take a look through my own website. Do you notice that the eyeline of every single person used throughout my website is largely pointed towards the copy? Even the body language I ensure is pointed inwards instead of off-screen.
It’s a small, subliminal thing but absolutely helps the user keep scrolling through my verbose copy and also tells their eyes where to go. Pointing your images in towards the copy helps to point your customer’s eyes in as well, gearing them to read instead of getting lost offscreen. We have a natural ability to follow where someone’s eyes are (think of the creepy paintings that seem to follow you as you move), so use this to your advantage!
Masters at this also work to have the body language point in and just a little down, which helps encourage scrolling as well.
If you’re working with a solopreneur or personally branded company where your client is the face, encourage them to schedule a photoshoot and have their photographer take pictures of them and their team facing multiple ways so that you have more options for facing to the left, right, or just a little down, depending on your website’s design.
If you’re using stock photos, try to choose images that point the way that you want them to. Don’t flip them in Photoshop to fit your needs, as you can be reversing text and other things that can look a little bit off.
2. Be Careful with Color Choices
I had students once ask me how many colors they should use on their website. With most professionally-done brands, you’d typically have 2-3 main and maybe up to 3 accent colors. While all those colors are great, avoid using too many on a website.
For most, I’d recommend using 3-4 maximum on a website to avoid looking like a circus or inside of a rainbow. Done well it can work great to include more (especially if there’s a purpose to those colors), but typically I’d say 3 brighter colors and a neutral for those non-graphic designers like myself.
You also want to ensure that whatever background color you use, whether white itself or a dark black like my own, that you’re using a font color that has a high enough contrast to be legible by a variety of seeing abilities. Especially those with low vision or color blindness, you want to ensure that it’s legible no matter who’s viewing your website. Black text on a white background is safe, for instance, or vice versa, but you can also use a Contrast Check tool to make sure you’re within an acceptable range.
Also be wary of using text on background images. A quick fix would be to add a little bit of a drop shadow to the text to make it stand out and improve the contrast (like you’ll see on my blog headlines), but any images with heavy patterns can be hard visually to read on.
3. Leave Plenty of White Space
Let your text and images breathe! In the past as a developer, I and other dev colleagues were often accused of “choking” the text or design pieces.
White space or open space (for darker websites, different colors, patterns, etc) not only helps to let elements breathe and balance, it can also help to lead the user from one topic to another. White space also prevents your website from looking overly busy, which in turn can cause a lot of confusion for your users on where they should go next. That open space is really important to keep people moving and clear on their path through your website.
White space is also important for a good mobile experience. Remember that people are navigating your website not with a tiny mouse pointer, but instead using their thumbs of varying shapes and sizes to click and get around. Leaving plenty of white space, especially around clickable elements, makes that easier and helps prevents accidental clicks that annoy and frustrate people (not just me, right???).