Simple Web Design Tips for Good Results

There are an infinite amount of ways to design a website. With that in mind, there are also infinite ways to mess it up too. There are two main methods to avoid falling in the second category – learn the fundamentals of design and apply them accordingly. You also need to be experienced enough to have learned what works well and what doesn’t.

All designers take different learning paths and are often at different stages of their journey. If you’re reading this, hopefully, you are also trying to further improve your work and produce better designs.

Unfortunately, there is no way to fit all the needed knowledge into 1500 words. Instead, we will just target a few tips to make you rethink how you can approach UX/UI elements. Ideally, this way of thinking can also be applied to other areas of your design work.

Start With a Good Understanding of the Product/Site

It’s extremely hard to do design when you don’t fully understand the content/website. Now, you don’t have to study medicine in order to do a medical website, that isn’t the goal. However, you should know just how a user would access any of the information that she/he might require.

If you want to design a music-making app, first you should grab a few existing ones, play around with them to get a feel for them, read about the theory behind it, and how certain elements function.

Ideally, you should be working with your client, who should also be very into the project and want to help you implement a better UX for their users.

However, if you lack a fundamental understanding of what the site is about and what problem it solves, you could cripple the user experience or force yourself to follow existing solutions and just re-skin them (which sometimes works).

For websites, you should have the sitemap in front of you in order to work on proper navigation and make decisions about which elements would be a good fit for certain landing pages. If you do a “chocolate factory” design, you could visually present the process of making it or do an info dump. It all depends on the goals of the site.

All this information is something you need beforehand in order to have a higher success rate. Considering how complicated this is, it could happen to you if you are a beginner freelance designer, so it’s best to ask a lot of questions right from the start. If you work in a team, don’t forget to consult with your team members on content, UX, purpose and more.

Design-Specific Tips and Tricks:

Now, let’s see some specific UI/UX tips that you can utilize in your next design:

1 – Contrast!

It’s so easy to mess up the contrast on a site. A quick way to spot a less experienced designer would be to check the overall contrast. See this example:

See how light the text is everywhere? The green buttons with white text, the light gray text?. Let’s compare it to a more contrasting UI:

A big portion of the font is black (or nearly black) with just less important information slightly grayer. The green is darker, which now allows white text on top.

The tip here is – when you work with text start with Black on white or white on black. As you add more elements and you need to separate with visual hierarchy, try first bolding or changing font-size. Only after that, if it doesn’t work go with color changes, but ideally no more than 30-40% difference (generally opacity is set to 70%).

2 – Consistent White Space

Another common mistake would be to have inconsistent spacing around elements. In fact, it’s so common that most designers continue struggling with this after years of work and it’s quite understandable – we move boxes with the mouse. It’s easy to slip a bit and move it a pixel or two to the side. Or you might not have trained your eye well enough yet to spot that difference directly.

In the following example, look at how the different components have different white spaces around them. Some are cluttered together, some are spaced out a lot. It doesn’t look very coherent visually.

By contrast, here is an example with more or less similar amount of content/type of components but with a more consistent look:

There are various ways to achieve this, but most of the time it doesn’t work with just measuring. It’s often a “feel” when you look at it. Does it look balanced? If you have boxes, you can always measure something like 30px from the sides, 30px under title, 15px under subtitle etc. And it’s a good approach! But with bigger visual elements like the titles or images, you might want to increase that a bit to make up for the heavier element.

3 – Color

Another fundamental component of a good design. Colors must work well together. One easy way to approach websites is to stick to a single primary color and keep the rest monochromatic.

The following example follows all three suggestions so far – Good contrast, balance and use of color:

One easy way to start with colors is to follow some well received color schemes from sites like https://colorhunt.co/ or get inspiration from Dribbble for combinations. Working with the color wheel is helpful to figure out the combinations, but often it takes a little additional touch from the designers to nail down the best combinations. Color wheels often don’t produce the perfect colors to apply in a design.

Example from Adobe’s color wheel:

A nice green color in the middle but kinda hard to use the results on the left/right side.

4 – Stick to a Style Throughout the Site

Building the feel of a website is one of the designer’s main jobs. Although the idea of “pretty” is very hard to define, especially since people often have a different view of what is nice and what isn’t. . Instead of worrying about this, focus on consistency and stick with style.

What does that mean? Well, let’s design a button. We set font-size, the font, color, background, spacing etc. And we get something like this:

Now, if we are to add an image and a title we can achieve something like this maybe:

See the corners. All perfect 90deg corners, no rounding. Now, that means that our design will mostly follow sharp corners. And it looks more consistent if the image has these perfect corners too. Just like if we add inputs, they would all have these sharper corners too. Let’s add one more element:

We’ve added a grid of boxes on top right and bottom left corners. These could’ve been circles, but in order to maintain the sharp look, we’ve set them to squares. The same thinking should be maintained across the whole site. If you start changing elements, then you might start losing the feel of it, which in turn would result in an inconsistent design and weaken the brand.

Here is the same design from above but with rounded look:

It’s the same, but it feels so much different now.

5 – Design With Components

Components exist in all modern design tools like Figma and Adobe XD. They are there for a very good reason – developers implement sites in a way that they can be reused as much as possible.

If you make an element like the one above, you want to just “copy-paste” it on another page and it will simply work. No need to code it again with slight differences. As a designer, ideally you would want to reuse your components in a similar fashion.

If you do a homepage with 3 posts in a row, maybe you can just reuse the same post from the homepage. This saves you time, saves the developer time and keeps the design consistent for users.

Imagine you are doing a section heading. If you need to have 8 sections with a heading, would you design it every time or you would copy-paste the previous? Ideally, you want to reuse it. But what if you have to change it from centered to left aligned? Maybe change a bit the size, maybe the color? The tip from this is to try and NOT do that. Try to keep it as the original. If you really need different views (aside from left/centered/right aligned), try to make one variation only. Not five or ten of them.

In Summary:

To achieve good results you need a strong understanding of the design fundamentals like color, contrast, white space, balance, visual hierarchy, order and more. When you design with that in mind and focus on usability, consistency and style, and even if it’s not a “WOW!” design, it will be solid on all fronts and function well, which often produces better results for a brand in the long term.