Redesigning Laravel.io

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

Relocating the Search Field

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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 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.

Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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

Finishing touches

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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

Putting important content first

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:

Image for post
Image for post

De-emphasizing secondary content

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:

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

Clearer comments

Image for post
Image for post

A more subtle default avatar

The one we’re using here is from Zondicons:

Image for post
Image for post

Collapsing borders

Image for post
Image for post

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:

Image for post
Image for post

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

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

Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

De-emphasizing the tag 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:

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

Tweaking the button position

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

Reversing the Layout

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:

Image for post
Image for post

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

Image for post
Image for post

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!

Image for post
Image for post

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

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

Refactoring UI

Learn UI design through case studies on improving…

Adam Wathan & Steve Schoger

Written by

A developer/designer duo doing their best to help people build awesome stuff.

Refactoring UI

Learn UI design through case studies on improving user-submitted projects with specific tactics and actionable advice.

Adam Wathan & Steve Schoger

Written by

A developer/designer duo doing their best to help people build awesome stuff.

Refactoring UI

Learn UI design through case studies on improving user-submitted projects with specific tactics and actionable advice.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store