DEV Community

Eddie
Eddie

Posted on

CSS - Keep it simple! 3 core concepts for a professional look

You don't need much to create a professional, clean looking web application. Just follow these three principles and basic techniques in each category and you'll be well on your way to making professional looking user interfaces. Today, we will be looking at the following core concepts:

  1. Spacing
  2. Contrast
  3. Subtlety

Spacing

Spacing covers things like padding, margin, line-height, and letter-spacing. Giving your elements breathing room and space increases readability and cleanliness.

Padding

The amount of padding works hand-in-hand with your chosen font size and line spacing. In this example, I am using padding: 30px;, but as you can see, each line of text seems a bit crowded.

Line Height

The next example includes line-height: 1.5em. Notice how much more readable it is? If I used a smaller font size, then I would probably also reduce the line height, and possibly the padding.

Contrast

Contrast is important for legibility and accessibility. It covers things like difference in color between text and background. It also covers differences in font weight: bold, semi-bold, thin.

Color Contrast

Let's see what happens if we reduce the contrast between the text and background color.

Now let's meet in the middle between black (#000) and medium gray (#999). Below, I am using color: #333;, which reduces the contrast just slightly enough to help reduce eye strain.

Font weight contrast

The headline h2 element provides a contrast between itself and the text below using font weighting.

Notice that there is extra space above the h2? It is there because by default, h2 adds additional margins above and below it. Since we have padding: 30px; all around out box, the extra margin above the h2 is no longer necessary. Let's follow our spacing concept and remove that.

Subtlety

Any complementary styles should be subtle. Let's use border as an example.

Subtle borders

Below, we added a black border, but the contrast between the border and the box's background color seems a bit too strong. We want the focus to be on the content and the black border is taking some of the focus away.

Let's go for a lighter color for the border.

Smoothness

In some cases, you may want your user inteface to be a bit smoother. Let's smooth out the corners of our box a bit using border-radius.

Add subtle interactions

Let's say that we want to indicate to the user that the box is clickable. Let's change the mouse cursor and add a shadow effect to our box when a user hovers the mouse over it, but make sure we are subtle about it!

...and let's add some smoothness to it by adding a transition time between states. We will add transition: 0.3s; to our container style.

Universal Applicability

The three concepts are universal. Here's a dark version.

...and here's an alternative light version.

Summary

See? It doesn't take much to completely change the look and feel of our user interface. Subtle changes can make all the difference. We didn't use any crazy filters or styles. We kept it simple and applied three core concepts - Spacing, Contrast, and Subtlety.

I'm on Twitter @eddieaich

Top comments (9)

Collapse
 
utkarsh profile image
Utkarsh Talwar

Great post, Eddie! I shared it in our Telegram newsletter/channel for devs. πŸ‘‰πŸΌ Link

Collapse
 
eaich profile image
Eddie

Thanks!

Collapse
 
maxdevjs profile image
maxdevjs

What! There is even a Telegram channel? Joined πŸ‘

Collapse
 
utkarsh profile image
Utkarsh Talwar

Welcome to the channel! πŸ˜„

Collapse
 
theague profile image
Kody James Ague • Edited

On mobile when I touch the box it turns light blue, the light blue box does not have rounded corners to match the original box. Is it possible to match these up?

Collapse
 
eaich profile image
Eddie

Kody, I'm not sure how to do that actually. I believe that behavior specifically is controlled by the CSS property webkit-tap-highlight-color. It became activated because the container in the examples above have cursor: pointer; attribute. I'm not sure if that attribute has any related ones that control border-radius.

Collapse
 
theague profile image
Kody James Ague

Ok was just curious if it was possible. Might do a little research later with the info you provided so far and see what can possibly be done. πŸ‘πŸ»πŸ‘πŸ»

Collapse
 
maxdevjs profile image
maxdevjs

Awesome article, well explained!

Collapse
 
elanandkumar profile image
Anand Kumar

Great article. Simple yet very useful.
Thanks.