Every web developer inevitably runs into situations where they need to make visual design decisions, whether they like it or not.

Maybe the company you work for doesn’t have a full-time designer and you need to implement the UI for a new feature on your own. Or maybe you’re hacking on a side-project and you want it to look better than yet-another-Bootstrap-site.

It’s easy to throw your hands up and say, “I’ll never be able to make this look good, I’m not an artist!” but it turns out there are a ton of tricks you can use to level up your work that don’t require a background in graphic design.

Here are seven simple ideas you can use to improve your designs today.

1. Use color and weight to create hierarchy instead of size

A common mistake when styling UI text is relying too much on font size to control your hierarchy.

“Is this text important? Let’s make it bigger.”

“Is this text secondary? Let’s make it smaller.”

Instead of leaving all of the heavy lifting to font size alone, try using color or font weight to do the same job.

“Is this text important? Let’s make it bolder.”

“Is this text secondary? Let’s use a lighter color.”

Try and stick to two or three colors:

• A dark (but not black) color for primary content (like the headline of an article)
• A grey for secondary content (like the date an article was published)
• A lighter grey for ancillary content (maybe the copyright notice in a footer)

Similarly, two font weights is usually enough for UI work:

• A normal font weight (400 or 500 depending on the font) for most text
• A heavier font weight (600 or 700) for text you want to emphasize

Stay away from font weights under 400 for UI work; they can work for large headings but are too hard to read at smaller sizes. If you’re considering using a lighter weight to de-emphasize some text, use a lighter color or smaller font size instead.

2. Don’t use grey text on colored backgrounds

Making text a lighter grey is a great way to de-emphasize it on white backgrounds, but it doesn’t look so great on colored backgrounds.

That’s because the effect we’re actually seeing with grey on white is reduced contrast.

Making the text closer to the background color is what actually helps create hierarchy, not making it light grey.

There are two ways you can reduce contrast when working with colorful backgrounds:

1. Reduce the opacity of white text

Use white text and lower the opacity. This lets the background color bleed through a bit, de-emphasizing the text in a way that doesn’t clash with the background.

2. Hand-pick a color that’s based on the background color

This works better than reducing the opacity when your background is an image or pattern, or when reducing the opacity makes the text feel too dull or washed out.

Choose a color that’s the same hue as the background, adjusting saturation and lightness until it looks right to you.

3. Offset your shadows

Instead of using large blur and spread values to make box shadows more noticeable, add a vertical offset.

It looks a lot more natural because it simulates a light source shining down from above like we’re used to seeing in the real world.

This applies to inset shadows like you might use on wells or form inputs too:

If you’re interested in learning more about shadow design, the Material Design Guidelines are a fantastic primer.

4. Use fewer borders

When you need to create separation between two elements, try to resist immediately reaching for a border.

While borders are a great way to distinguish two elements from one another, they aren’t the only way, and using too many of them can make your design feel busy and cluttered.

The next time you find yourself reaching for a border, try one of these ideas instead:

1. Use a box shadow

Box shadows do a great job of outlining an element like a border would, but can be more subtle and accomplish the same goal without being as distracting.

2. Use two different background colors

Giving adjacent elements slightly different background colors is usually all you need to create distinction between them. If you’re already using different background colors in addition to a border, try removing the border; you might not need it.

3. Add extra spacing

What better way to create separation between elements than to simply increase the separation? Spacing things further apart is a great way to create distinction between groups of elements without introducing any new UI at all.

5. Don’t blow up icons that are meant to be small

If you’re designing something that could use some large icons (like maybe the “features” section of a landing page), you might instinctively grab a free icon set like Font Awesome or Zondicons and bump up the size until they fit your needs.

They’re vector images after all, so the quality isn’t going to suffer if you increase the size right?

While it’s true that vector images won’t degrade in quality when you increase their size, icons that were drawn at 16–24px are never going to look very professional when you blow them up to 3x or 4x their intended size. They lack detail, and always feel disproportionately “chunky”.

If small icons are all you’ve got, try enclosing them inside another shape and giving the shape a background color:

This lets you keep the actual icon closer to its intended size, while still filling the larger space.

If you have the budget, you could also use a premium icon set designed to be used at larger sizes, like Heroicons or Iconic.

6. Use accent borders to add color to a bland design

If you’re not a graphic designer, how do you add that dash of visual flair to your UI that other designs get from beautiful photography or colorful illustrations?

One simple trick that can make a big difference is to add colorful accent borders to parts of your interface that would otherwise feel a bit bland.

For example, along the side of an alert message:

…or to highlight active navigation items:

…or even across the top of your entire layout:

It doesn’t take any graphic design talent to add a colored rectangle to your UI, and it can go a long way towards making your site feel more “designed.”

Have a hard time picking colors? Try choosing from a constrained palette like Dribbble’s color search to avoid feeling overwhelmed by the endless possibilities of a traditional color picker.

7. Not every button needs a background color

When there are multiple actions a user can take on a page, it’s easy to fall into the trap of designing those actions based purely on semantics.

Frameworks like Bootstrap sort of encourage this by giving you a menu of semantic styles to choose from whenever you’re adding a new button:

“Is this a positive action? Make the button green.”

“Does this delete data? Make the button red.”

Semantics are an important part of button design, but there’s a more important dimension that’s commonly forgotten: hierarchy.

Every action on a page sits somewhere in a pyramid of importance. Most pages only have one true primary action, a couple of less important secondary actions, and a few seldom used tertiary actions.

When designing these actions, it’s important to communicate their place in the hierarchy.

• Primary actions should be obvious. Solid, high contrast background colors work great here.
• Secondary actions should be clear but not prominent. Outline styles or lower contrast background colors are great options.
• Tertiary actions should be discoverable but unobtrusive. Styling these actions like links is usually the best approach.

“What about destructive actions, shouldn’t they always be red?”

Not necessarily! If the destructive action isn’t the primary action on the page, it might be better to give it a secondary or tertiary button treatment.

Save the big, red, and bold styling for when that negative action actually is the primary action in the interface, like in a confirmation dialog:

Enjoy this post? We just released a book!

Refactoring UI takes everything we know about design and bundles it into one comprehensive package, including a book, screencasts, a component gallery, custom designed assets, and more.

Over 6000 people have picked it up so far, and the feedback has been amazing.

Alex Peck on Twitter

Just finished reading the book from https://t.co/Rd9o9ZLh3U Solid gold from @adamwathan and @steveschoger. Pound for pound one of the most useful design books. Just got a spot in my all-time top-five.

If you’re interested, head over to RefactoringUI.com/book to learn more and download a sample.

7 Practical Tips for Cheating at Design was originally published in Refactoring UI on Medium, where people are continuing the conversation by highlighting and responding to this story.

Laravel.io is a forum and community portal for developers who use the Laravel PHP framework.

They recently launched a brand new version of the site, but being a volunteer-driven open source project, finding the resources to put together a really polished design can be tough.

We asked and got the go ahead to try our hands at a bit of a facelift, so let’s see what we can do to take the UI up a notch!

The Current Design

We’re going to be working on the design of the forum itself. Here’s what the existing design looks like:

Layout and structure-wise the site is off to a good start, but there’s definitely room for improvement in some of the visual design details.

We’re not interested in reinventing the brand here or redesigning the site from scratch; instead let’s see what we can do with just small cosmetic changes to try and bring this design to the next level.

Reducing the Page Title Size

The first thing we’re going to look at on this page is the large “Forum” title under the main nav.

You might have recognized that this site is using Bootstrap, which is a great framework for building responsive websites quickly and reliably.

Out of the box, Bootstrap provides default sizes for heading tags like h1 through h6. This can be helpful for document-style content like blog posts or documentation pages, but it can encourage some bad decisions in application UIs.

Since “Forum” is the page title, semantically it probably makes sense for it to be an h1. But even if it should be an h1, does the page title really need to be the biggest text on the page?

Check out this screenshot from the Baremetrics dashboard:

In this design the “Metrics Overview” page title text is the same size as “Monthly Recurring Revenue” (16px in this case).

It still does the job of labelling the page really well, but because it’s smaller, it gets out of the way a little bit and helps highlight the more important content on the page, which are the (42px!) revenue stats themselves.

Tip: In an application UI, don’t blindly choose the size of your headings based on hierarchy without considering content priority.

Reducing the size of the “Forum” heading from 39px to 24px as well as reducing the vertical padding does a lot to de-emphasize the page title and bring more attention to the thread list where it belongs:

Relocating the Search Field

Right now the search field sits just above the “Create Thread” button, which gives the false impression that they are somehow related:

At first glance you might think the input field is for the title of the thread you want to create, or that the button is actually the submit button for the search.

Let’s separate the two elements by moving the search field into the same header area as the “Forum” page title:

This makes it clear that the button and search field are not part of the same form, and also puts the search in a more conventional location, making it a bit easier for users to discover.

To make it even more obvious that it’s a search field, we’ve also added a magnifying glass icon to help visitors recognize that it’s a search field without having to read the placeholder text.

Restyling the Nav Bar

The bold green in the existing nav is the same color as the “Create Thread” button, which impacts the design in a couple of ways:

1. The nav is stealing a lot of overall attention, since it’s the same color as the primary call-to-action.
2. It’s competing directly with the “Create Thread” button, making the button stand out less than we probably want it to.

It also just looks super “Bootstrap”, so it would be nice to come up with a treatment that feels a bit more bespoke.

Choosing a new background color

It would be nice to avoid introducing a brand new color if we can, so let’s see what the nav would look like using some of the existing colors on the site:

Of these three options, I think white looks the nicest and definitely doesn’t compete for attention with any of the more important content on the page.

Let’s roll with that!

Adding a hint of color

The white looks pretty clean and modern, but it would be nice to give it a hair more personality.

The full-background active state is still looking really Bootstrap, so maybe we can bring a bit of that personality back by trying something different there.

Take a look at the approach Twitter uses for their nav:

The accent border and colored text adds a bit of that brand color back without being overwhelming, and still feels really clean and simple.

Let’s borrow that treatment, adding a short 2px bottom border to the active nav item and changing the text color to match:

Tip: Little accent borders are a simple way to add some color to an otherwise bland design.

The green bottom border looks nice, but the green text is a bit hard to read.

Using the same dark text color as the inactive nav items looks better, but it would be nice if there was some difference between active and inactive items:

Instead of trying to find a new color to emphasize the active text, let’s try de-emphasizing the inactive text by using a lighter font color:

This approach also creates a good opportunity for a hover state, where we use a darker text color for the inactive items when under the mouse cursor.

Tip: Instead of making text darker or bolder to emphasize it, try de-emphasizing the surrounding text by making it thinner or lighter.

The text looks a lot better now, but that bottom border feels a bit disconnected, like it’s just floating in space.

One way to fix that is to add a subtle bottom border to the whole nav, just like the one under the page title:

This helps to anchor that accent border and make it clear that it’s connected to the navigation item above.

Finishing touches

Laravel.io recently got a new logo so let’s incorporate that into the header:

The new logo is pretty bold and makes the left side of the nav feel a lot heavier than the right. This isn’t inherently bad or anything, but let’s see what it would look like if we tried to balance things out a bit by centering the navigation items:

This looks pretty nice and also distances the design a bit more from the standard Bootstrap layout, which helps things feel more custom and intentional.

Let’s take a look at the thread list next.

The Thread List

The first thing that stands out here is all of the green link text:

When you’re including a link in a block of otherwise non-link text, it’s important to make sure that the link stands out and looks clickable, and Bootstrap optimizes for that case by making links colored by default.

In this case though, just about everything in the thread list is a link and using a treatment designed to make links “pop” in paragraph text is really overbearing.

A common approach you’ll notice on sites that are almost entirely links is to just use a bolder version of the normal body text color, like YouTube does for example:

Let’s give that a try in our thread list, making thread titles a bold dark grey, and the preview text a lighter grey at the regular font weight:

Tip: On link heavy sites, don’t try to make every link “pop” with a bright color.

Putting important content first

Right now, the top of each thread card has a grey header with meta data such as the last person to reply and the relevant tags for that post.

Being the first piece of content you see in each card is making the header area compete for attention with the thread title, and also makes the thread list a bit harder to scan.

Let’s try moving that header area to the bottom of each card to try and emphasize the thread titles a bit more:

De-emphasizing secondary content

This is an improvement for sure, but the grey background in the footer is still grabbing a lot of attention and hurting the scanability of the list.

The only thing the grey background is doing for us is helping to separate the meta data area from the thread title and preview.

Let’s try dropping the background and seeing if we can achieve that separation another way:

Dropping the background is definitely an improvement overall, but without that background color change the “replied x minutes ago” text is definitely competing with the thread preview now.

Let’s drop the font size on the meta data by a few pixels and use a slightly lighter color and see if that helps:

This feels like an improvement, but the green username links are getting a little hard to read.

A quick contrast check confirms that the light green on white doesn’t pass the WCAG 2.0 accessibility guidelines, so let’s use a darker green instead:

That looks a lot better, and I think we could even get away with less white-space between the thread preview and meta data area now:

This lets us cram just a little bit more information onto the screen, and given that the audience for the site is developers, the extra density will probably be appreciated.

Repositioning the tags to reduce distraction

Right now the dark topic tags in the bottom right corner of each card pull your eye away from the thread title a bit; they make your eyes jump from corner to corner as you scan down the thread list.

One change we can make to help this is to move the tags closer to the left side of the card:

By putting the tags closer to the thread title, they have to compete for attention more directly. Since the title has more emphasis, it wins out and makes the tags a little less distracting.

Inverting the tag colors

If we wanted to de-emphasize the tags even more, we could also switch the dark background for a light one:

Clearer comments

Let’s also de-emphasize the comment count a bit by removing the dark background, and while we’re at it, add an icon to make it a little more clear what the number means:

A more subtle default avatar

Finally, let’s replace the default Gravatar image with something more subtle; there’s no point in calling attention to the profile photo of a user who’s never uploaded one.

The one we’re using here is from Zondicons:

Collapsing borders

Let’s look at the new card design with the rest of the page:

An added benefit of using a single background color for each card is that we don’t need to keep each card separate anymore; it’s still really clear what content belongs to what card even if they all share borders:

This lets us fit even more information on the page, and also makes the thread list feel more like a unified component.

Changing the site background color

This is really starting to come together, but I think the different sections on the page could use a bit more distinction.

An easy way to accomplish this is to use a slightly darker background color to help the white page sections stand out more clearly:

Here we’ve kept the header area white, treating it like its own page section, and also extended the bottom border under the “Forum” page title to full width so we didn’t have an awkward partial border.

The Tags Sidebar

Reducing the title size

Much like the page title that we addressed at the beginning, the “Tags” heading could serve to be a lot smaller:

Let’s reduce it from 26px all the way down to 12px and give it a more subtle color so it doesn’t steal so much attention from the tag list itself:

Right now this is probably a little too small/subtle to feel like a heading, but let’s try to address that with a few other ideas.

Let’s switch the font weight from regular to bold, capitalize the text, and also add a little bit of letter spacing to make sure it’s easy to read:

This gives the heading a bit more authority while still letting us keep the text fairly small and subdued.

Tip: When using all-caps, increase the letter-spacing a bit to improve legibility.

Removing unnecessary borders

I don’t think that border under the “Create Thread” button is doing much for us now that we’ve changed the background color of the page, so let’s remove it:

De-emphasizing the tag list

The high contrast of the dark selected state over the bright white background makes the current tag list design compete pretty aggressively with the thread list.

Since the tag list is meant to be secondary content, it’s worth exploring how de-emphasizing it would impact the overall design.

An easy way to make the tag list stand out less is to remove the background (and borders) entirely, and place the text directly on the page background:

This already looks a lot better, but let’s try making the selected state a bit more subtle as well.

Instead of inverting the text color and using a dark background, let’s try increasing the contrast of the selected item by making the background a little bit lighter and bumping the font weight from regular to bold:

It’s still easy to tell which tag is selected, but now the thread list feels even more like the focus of the page which seems like a win.

Condensing the list items

Technical audiences love the density of sites like Hacker News, so let’s compress the sidebar a bit by reducing the space between each item and using less padding on the selected state:

Tweaking the button position

Something about the button position feels a bit “off”, but it’s not immediately obvious what’s causing it:

It’s perfectly aligned with the top of the thread list which seems “correct”, so what could the problem be?

Well if you imagine an invisible container around the sidebar column, the button would be pushed right to the top of that container with no padding.

The thread list column does have a bit of padding which at least to my eyes makes these two columns look a little uneven.

Let’s drop the left column down a bit and see if that helps:

This definitely looks better to me, even if it seems like a counter-intuitive placement at first.

Reversing the Layout

In the current layout, the “Create Thread” call to action and tag list are on the left, and the thread list is on the right.

An advantage I like about this layout is that it puts the thread titles pretty close to center, which feels pretty natural when your scanning the page.

Just for kicks though, let’s try swapping the columns and seeing if there’s anything we like better about that layout:

In this version, the thread titles are aligned against the left edge of the page which doesn’t feel quite as nice as being in the center, but it does still feel pretty good.

There are two other things about this layout worth mentioning:

1. The “Create Thread” button feels a bit further away, putting more attention on the thread list. This is probably a good thing, since the thread list is the focus of the page.
2. The tags list is nicely aligned against the thread list. This is really just a superficial aesthetic thing, but I do think it looks good.

There’s never a single “right” design for a site, so a lot of the time you just need to go with what looks better to you.

In this case, I think this reversed layout looks great, so let’s commit to that change.

Before and After

Here’s our final before and after:

All in all we made just over 20 small, iterative tweaks, but the final result is a design that feels a lot more custom and polished.

Best of all, none of these changes really required any innate design or artistic “talent”; just knowing what issues to look for and how to fix them can take your designs a long way.

Enjoy this post? We just released a book!

Refactoring UI takes everything we know about design and bundles it into one comprehensive package, including a book, screencasts, a component gallery, custom designed assets, and more.

Over 6000 people have picked it up so far, and the feedback has been amazing.

Alex Peck on Twitter

Just finished reading the book from https://t.co/Rd9o9ZLh3U Solid gold from @adamwathan and @steveschoger. Pound for pound one of the most useful design books. Just got a spot in my all-time top-five.

If you’re interested, head over to RefactoringUI.com/book to learn more and download a sample.

Redesigning Laravel.io was originally published in Refactoring UI on Medium, where people are continuing the conversation by highlighting and responding to this story.