User-First Web Design

What does it take to design a great website? You might think that you need to be an HTML/CSS/JavaScript expert, but those languages are used to create poorly-designed websites all the time. Even if you don’t know how to do fancy stuff with code, you can still create beautiful, efficient, and memorable websites as long as you design with the user experience in mind.

One of the first things you want to think about before building a website is what sort of message you want to convey depending on whatever your site is going to be for. Are you designing for something fun? Sophisticated? Artistic? Serious? Having a good idea of how you want your website to “feel” makes it easier to choose what sorts of colors, fonts, and images you want to use later on.

User-friendliness is another very important thing to take into consideration when you think about the user experience. You want to make sure that visiting your website is an easy and enjoyable experience and that the visitor gets all the information you want them to have.

A website needs to be easy to read. Choose a color scheme that’s easy on the eyes; if you expect the user to be looking at or reading things on your website for a long time, consider using darker colors. I don’t understand why so many sites out there default to a white background when that basically means the user is staring into a lamp. If you’re using a background image for text, make sure it’s minimal enough for the text to be the focus. Also, make sure that your font is big enough to read.

When people visit websites, they generally view them as though they are reading a book: starting at the top-left corner, moving right, then down, then right, and so on. We can use this pattern to determine where we want to place elements on a page. Two common layouts that follow this pattern are the “F” pattern layout and the “Z” pattern layout.

The “F” pattern layout is a layout designed to look like the letter “F”. It starts at the top-left corner, goes right, and then the top-left corner goes down and then right. Your standard two-column layout is a good example of the “F” pattern.

The “Z” pattern layout is similar to the “F” pattern layout, except that instead of moving down from the top-left corner after it moves to the right, it moves down from the right diagonally, like the letter “Z.” A grid layout or a single-column layout with left-to-right elements in each row is a good example of the “Z” pattern.

It’s also important to make sure that the elements on your page are organized clearly. Group related items together, and make use of headers to define exactly what each element is supposed to be. Make important items bigger, in a different color, or with some other style change so they stand out.

Unless you deliberately want to throwback to Geocities in the 90s as a nostalgic design choice, every page should have the same layout and color scheme. Otherwise, your site will look unprofessional. Another thing that makes websites look unprofessional is improper alignment. Most likely, your website will be designed as a grid of some kind, and if an element’s alignment deviates from that grid, it will also make your page look messy and inconsistent.

Some websites use tons of different colors, fonts, and fancy effects. Other sites are very minimal and hardly seem to be designed at all. People can have strong opinions as to which of these directions to go is best, but both over-designed and under-designed websites have problems. An over-designed website can be confusing, distracting, and take longer to load. Under-designed layouts are boring. It’s important to have a good balance of aesthetics and efficiency. You can use fun colors as long as there aren’t too many of them. Find a decorative font that you love, but limit it to headers. Put that scrolling animation on your page, but make sure it doesn’t get in the way of your content.

If you want lots of views on your website, it needs to be accessible for as many people as possible. Not everyone has the same screen size. Many people these days are primarily viewing websites on mobile devices, which have much smaller screens than computers. You want to use responsive design techniques to make sure your layout fits on every screen. Some people are sight-impaired and might not even be using a screen at all, so you should take how the website will be interpreted with a screen-reader into account as well. What if you want your grandma to see the awesome new website you just made but she still insists on using Internet Explorer on Windows 98? Honestly, in that case, you should probably just show her on your own computer, but the point I’m trying to make is that everyone has different browser preferences that handle certain aspects of websites differently, and while you may not agree with everyone’s choices, all the important content of your site should at least be viewable across different platforms.

Efficiency and user-friendliness aren’t the only aspects important to the user’s experience of a website. If you want your visitors to remember your site and keep coming back, you have to make your design stand out. You can find a site out there for just about anything, but so many of them look the same. If you’re sick of seeing website after website jumping on a particular trend, use those designs as examples of what NOT to do. Sometimes, rules are meant to be broken; challenging yourself to make something unconventional work is the best way to create a unique design. Find a way to work in a color or font that you thought you’d never, ever use. Incorporate CSS properties that you don’t see used often or that you need more practice with. Try to design something readable and aesthetically pleasing that’s not based off a grid. Web design is an art form, and the more innovative you can be, the better your designs are.

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.