orphix media

Blog

DESIGN. WEB. TECH

6 Simple Tips for Web Design Mastery

DESIGN

6 UI Tips For Improving Your Website's Design

24th March 2018

1. Lose the borders

Next time you add a border to an element, ask yourself if your really need it.

Often times a box shadow is enough to give you the visual separation you're looking for.

border:1px solid #999;

Modal

×

border:none;
box-shadow:0px 2px 12px
rgba(0,0,0,0.27);

Modal

×

2. The Subtle Gradient

If the first thing that comes to mind when you hear 'gradient' is bright red and yellow Microsoft Word Art, this ones for you.

Take a look at Stripe.com. Stripe's front-end design is highly regarded in the web design industry, and one of the things that really sets them apart is their use of subtle gradients.

A subtle gradient is simply a gradient that transitions between two colours that aren't too far apart to begin with.

A great resource for finding and creating subtle gradients is: uigradients.com.

Not a plug!

Stripe.com's usage of the subtle
gradient.

Stripe's use of the 'subtle gradient' effect.

Next time you're adding a block of colour to your design, try adding the property:

background: #36D1DC; /* Fallback */
background: -webkit-linear-gradient(to top, #5B86E5, #36D1DC);
background: linear-gradient(to top, #5B86E5, #36D1DC);

3. The Soft Box-Shadow

If I could only give one tip it would be this - Sort out your box-shadow. The purpose of a box-shadow property is to suggest depth in an otherwise 2D design

Though not all box-shadows are made equal. Compare the two following box-shadow properties:

box-shadow:0px 0px 12px #000;

0px 2px 12px rgba(0, 0, 0, 0.27);

Toning down the color to a ~27% black, and adding a 2px vertical offset makes all the difference.

4. Lighter, not just smaller

It's completely logical to think that if you want to de-emphasize an element, you should make it smaller. However, going too small on the font-size can make your content tough to read for visually impaired users.

Next time you want to de-emphasize, try making the text slightly lighter. This achieves the same effect, but also looks much better to the eye.

Take the following two examples:

Hello Clarice

It's nice to see you again.

Hello Clarice

It's nice to see you again.

This is a simple way to create a visual hierarchy.

5. Red for destructive

Highlighting destructive action buttons in red, as well as presenting an additional 'Are you sure?' dialog is an effective way of preventing users from making misclicks - Especially if there is data deletion on the line.

Also, the cancel button should rarely have the same visual weight as the action button.

Do's

Modal

×

SUBMIT

Cancel

Modal

×

DELETE

Cancel

Dont's

Modal

×

DELETE

Cancel

Modal

×

DELETE

Cancel

6. Shadow your text

It's a simple truth; if you want to make white text visible on any background, add a black border. But unless it's on a facebook meme, it's not going to fit in with anyones design aesthetic.

Instead, try adding a subtle text-shadow to your text to make it both more readable, and pleasing to the eye.

No text shadow

Hello

×

text-shadow:0px 1px 2px rgba(0,0,0,0.4)

Hello

×

WHO WE ARE

Orphix Media are a Canberra based Web Design team, focusing on delivering effective websites for local Canberra businesses, increasing traffic and employing techniques to turn this traffic directly into clients.

GET IN CONTACT
info@orphixmedia.com