Web Design Tips

One of the most important things you can do with design is to learn the fundamentals. Getting through some of the core concepts of design will unlock so much and allow you to improve your designs.

Alignment

One of those things is alignment. Alignment is key for making a design feel planned and stable. There’s a lot of chaos if you start to shift things around and the entire design isn’t as satisfying.

Try to align everything on the page with something else vertically and horizontally if you can. Baselines should match up for text. This is tougher to do for the web, but there are a lot of solutions for how to achieve this.

Nav menus should align on the baseline and then on the sides, matching up with the content below.

It’s important because it helps your eyes flow down the page.

Contrast

Contrast is just the difference between items in size, color, or even shape. If everything is too balanced and all the same size, shape, and color, your eye isn’t drawn anywhere. This is why big headings work well to get your attention and tell you what the page is about. Bright punchy colors can do the same on an otherwise plain, monotone design.

You can also have a lot of contrast with whitespace. By leaving a small bit of text by itself, surrounded by empty space, you create tension and contrast.

You still want your designs to have a sense of balance, which is why big headlines are often balanced by graphics. Think of it like a see-saw, you need to keep things weighted evenly or your design can feel lopsided.

Grouping like items

Another thing is the grouping of like items. People can understand the relationship between things if they’re arranged together on a page. Login and sign-up buttons are an example. Keeping them together makes sense as they both deal with your account.

Placing an edit button right next to a document implies that you’re able to edit that document. Placing it on the other side of the page leaves you wondering what the edit button is for.

Communicate clearly

Make sure you’re communicating clearly with your designs. If you’re not using common icons to design your site with, you’re going to need some extra explaining. Don’t make users click to learn that you swapped something clever for your hamburger menu icon.

There’s a rule that says people spend far more time using other apps and sites than they do yours, so make sure you’re using their past knowledge to help them navigate your design.

User test early and often

The sooner you can get a prototype in the hands of someone, the better. You’ll see things you had a misconception about and be able to clear those up. You don’t know how others will see it, and you’ll learn so much about how other people use websites by watching them interact with yours.

Giving them prompts like “You want to look at my portfolio work and see if I’ve done any web design,” allows them to solve the problem how they would normally. Don’t guide them too much, just give them a goal.