Small things that will have big impacts with minor effort

Perhaps you’re new to web design, or perhaps you have many years of experience but need to brush up. You might even have a development background but want to polish one of your projects a bit, or simply built your own WordPress site.

This guide is meant to give a few tips on how to prevent your site from looking like yet-another-website.

It’s easy to throw in the towel and go, “I simply don’t have the ability to make this look good. I’m not a damned designer!” but it turns out there are many tricks you can use to make a big impact that don’t require a design degree.

Here are 5 simple ideas you can use to improve your designs right away.

1. Spruce up (or down) your buttons!

When users are presented with multiple options it’s easy to simply design those actions based on whether their effect is a positive or negative action.

Seems familiar, right?

It’s a completely understandable & legitimate option. This is how we’ve designed traffic lights, warning labels, and even buttons on many of the physical tools we use every day.

One thing that isn’t happening in the above image is the importance, or hierarchy, of each element — they both look like they have the exact same priority, which is hardly ever the case.

If this were a purchasing funnel you would, of course, be more interested in having your users clicking continue, not cancel.

Every action on your site should be divided into a hierarchy of importance, and that hierarchy should then be visualized accordingly:

A simple example of how you can use fill, color, and border (or lack thereof) to create visual hierarchy

Sometimes a negative, or destructive/restrictive, button can also be at the top of your hierarchy of importance. In this case you would want to highlight that action and have the “non-negative” action as the least important:

Sometimes a destructive action will be the main action

2. Separating elements

When you need to create a separator between elements the easiest option would be something like a line, or border, right? However you’re not looking for easy, you’re looking for great.

Instead of simply adding a line separator try using negative space. Sometimes it’ll be enough simply removing those pesky lines & borders, but other times you might need to increase the amount of space between elements.

Doing so will make it easier for the eye to scan the area and will also not look as though the 2 elements are completely independent.

Using lines to separate these elements increases the time it takes to scan the page and adds noise where it isn’t necessary — using just text instead of a bordered box also helps the hierarchy

3. Drop Shadows

There are a few ways you could make an element pop, the classical way is to use a border — a drop shadow can give a similar result, but will often look neater and less intrusive.

This elegant, yet extremely simple, approach creates a more “easy-on-the-eye” result while still looking great and popping out.

A classic: the login fields.

4. Background … & Background?

This one is really simple and can be done without too much headache (I hope that’s the case for the other 4 points, but this one especially so).

In order to separate 2 areas or elements, simply differentiating the color on them can have a far neater & more powerful effect than using lines or other forms of separators.

Seeing the 2 color backgrounds creates a natural separation that is easy for the eye, and thus easy for navigation.

5. For fonts sake …

Fonts. What’s not to love? They can be used for a broad variety of things, ranging from simple decorative to extremely functional: posters to create a feeling, increasing conversions, highlighting areas, and simply making your site look different.

Let’s first look at the different types of fonts:

1) Serif: a serif is a small line or stroke at the end of a letter or symbol, typically the feet, but sometimes the head, of most letters.
Serif fonts: Georgia, Times New Roman, Cambria

2) Sans-Serif: “Sans-serif” literally means “without serif” — these fonts don’t have the small lines or feet. For that reason, they’re generally thought to look more modern, streamlined, and “clean”.
Sans-Serif fonts: Helvetica, Montserrat, Gotham

It’s commonly said that serifs make long passages, especially in print, easier to navigate visually, as they help move your eyes along the lines of text. However, because serifs are usually small and thin, they often didn’t display as well on pixel-based screens, sometimes looking distorted and “noisy” rather than clear and crisp, but as screens have improved this is less of a concern.

3) Script: Scripts are what we might think of as cursive- or handwriting-style fonts. They generally have connecting letters. You’ll find that script fonts come in many different styles, from elegant, to fun & casual, to hand-drawn.
Script fonts: Alex Brush, Great Vibes, Sofia

4) Decorative or Display: These fonts are often great for large statements, logos, posters, but generally regarded as straining to the eye in longer passages, and sometimes straight up nonsense.
Display fonts: Algerian, Curlz, Gigi, Umbra

When using fonts in web design you’ll most likely be using the Serif & Sans Serif families. It’s important to not mix too many different fonts and to use each type carefully.
Google has a wide variety of free fonts, also for web & app use. Best of all is that they are easy to implement and are universally supported.

As a rule, I try and stick with 2 fonts, and extremely seldom will use 3, typically for the more artsy projects like a poster or banner.

This might seem a bit much today, but in the days of MySpace there was no such thing as “too many fonts”

A more detailed guide explaining the characteristics of fonts, and different use cases, written by another Medium writer:


Source link: 5 “hacks” to drastically improve your designs – UX Collective


Por favor digite seu comentário!
Por favor, digite seu nome aqui

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.