There are a few website types that I’ve always wanted to design, but never had the chance. An online magazine for men is definitely on that list. Besides the fact that I’m a man and subjects like style and grooming interest me, I’m also a designer. Websites of this kind are filled with truckloads of content: short texts, long articles and tonnes of photos. It’s a challenge to make them look good.

I decided to take on this challenge.

I decided to use theGQ.com website as a base. I’m a big fan of GQ Magazine. I think that the front version of GQ is one of the best-designed mainstream magazines out there. But, I find their website rather bad. Perfect challenge.

You can check the complete redesign here. Then, make sure to read the story!

The problem with online magazines …

I have a few problems with content-rich websites. First, they somehow lack structure, it’s hard to quickly scan through them. They also feel somehow unfinished, designed without a care for details. And well, in the case of GQ, I feel that the ads could be placed better.

Making it better or a handful of tips on how to design better websites.

1. Navigation

The main UX issue I had was related to the website navigation. The GQ Website is divided into a few main sections, all of them are shown on the main menu. Yet, when you go deeper it occurs, that every section has some subcategories. You find this out only after opening a section page. Well, I believe that it should be shown in the main menu, at the start. That’s why I’ve decided to design a two-level menu.

I used different typefaces, text colours and font sizes to establish a visual relation (and hierarchy) between them.

Use different typefaces, type colours and sizes to establish a clear hierarchy between elements.

2. Distinction (Scale)

When you open a GQ website, you’re instantly attacked by content overload (top news banner). Despite some efforts to establish some kind of information hierarchy (different thumbnail sizes), it’s really hard to figure out what news is the most important. Why? because they all blend into one.

One huge stain of confusion. I feel like there’s not enough difference in scale to make it count. You could also use a spatial space effect to make a difference.

Don’t be afraid to pull out the most important things. Use the scale. If the scale difference is not big enough it won’t make your design cleaner, it’ll only bring more confusion.

3. Breath

There’s one other thing that makes the first experience somehow painful — the lack of a white space. As you can see all the thumbnails blend together because there is no space between them.

Some additional spacing between would help to make everything easier to scan by eye. Although older news is much smaller than the latest news, it looks as though it’s been placed on top of it. Thanks to a shadow underneath them, it looks like they’re on a top layer.

Thoughtful use of shadows can create illusion of spatial space. You can create additional meaning to content by creating this kind of illusion.

4. White Space Doesn’t Mean a Hole

White space has to be designed. It’s as important a design element as typography or colours. You can’t just leave a hole.

It has to be big enough to create some space between elements but small enough to still maintain the feel of unity between them. You don’t want your design to look like the image above.

White space is one of the most powerful and useful tools in a designer’s arsenal. Use it to create a breath between your design elements. It’ll help you to build a hierarchy and distinguish different elements from each other making your design cleaner and more usable.

5. Contrast

The subjects of distinction and hierarchy are recurring themes. That’s because I want to show you several ways of dealing with them.

Look at the screen above. See something? The main menu is white. The background is white. It all blends into one. There’s not enough distinction between the two. The easiest way to manage this and to distinguish navigation elements from content — and they need to be distinguished as they serve a completely different purpose — is by colour contrast. Look at the example below.

Navigation pops out from the content. It doesn’t blend, there’s no confusion. In the end, it’s easier to read.

Contrast helps you to build a hierarchy and improve readability of your website. Play with it — make it bigger when you need to differentiate design components (for example menu from the content) make it slightly lesser if you don’t want something to pop out (less important text like publishing date).

6. Contrast Vol. 2: Greyness

When you look at the news feed (above, point 6), you’ll see that all the texts look the same. Articles with thumbnails, news without them, it’s all black on white, all the same. Putting scale and breadth aside, you can make it more readable by using a more distinguished “greyness level”. I played with contrast levels and it created some space around the articles (titles) and, in the end, a more structured look and feel.

Remember that too much contrast is bad when it comes to typography. It’s easier to read dark grey text on white than black on white. Using different contrast values will help you to establish harmony and pop out the most important things.

7. Making the Grid

You need to create a good grid system. It’ll not only help you with translating your design for other devices (smartphone/tablet/desktop) but it’ll also help you keep everything looking structured and tidy. Because I chose a twelve column grid I was able to create both 2/3/4 columns section layouts.

Using a grid system helps you keep everything clean, tidy and organized. It’ll also help you with designing responsive versions and make talking to developers much easier. I personally prefer using the Bootstrap system.

8. Breaking the Grid

I’ve also tried to make the overall reading experience better. Apart from typography treatments (contrast, scale, typefaces) I played with the layout. The text paragraph is straight and readable. It already looked like the current GQ site, so there was not too much to change. But, I decided to break the grid a little. Although still following its constraints, I broke the straight layout in few places, for example with image grid shown before. You must be careful with this kind of treatment. They need to come with a purpose. But if you manage to do this correctly, the effect will be awesome.

If you feel good when it comes to defining grids, know the purpose and how to use it, then it’s time to play with it. Try to break it to create more visual appeal, but remember: there has to be a purpose for that.

9. Typography

There’s a strong possibility that if you stick to one typeface in your design you won’t have enough room to play. Establishing prominent hierarchy is one of the most important goals for a designer. Using different typefaces can help you achieve that, in good style. Look at this Article Thumbnail component for instance.

I’ve used a bold elegant typeface for the title and a more “technical” one for additional info like author and publishing date. There’s a distinction and hierarchy here. In the end, it’s much easier to scan (because of typefaces and white space) through compared to the example from GQ’s current website. Besides, it helps you create the desired look and feel of the design. You can learn more about pairing typefaces here.

Using more than one typeface is a good idea. Using more than two can be risky. Distinguished typography helps you to create hierarchy. It’s very important, your user needs to know what is the most important thing on your website, at once.

10. Mobile

I’ve designed mobile as a smooth transition from a desktop experience. It’s quite easy if you’re using a good grid system. Basically, everything shrinks into one column. You can either design it to take space from edge to edge or provide some breath around the edges.

I decided to go with side margins here to keep the look and feel more consistent. I’ve cut some things from the design. You have less space on mobile and not all of the information is so important. I’ve also gone with Hamburger-like menu system.

You must also think about what is most important for a user browsing your website on mobile. You have limited space. There’s a chance that information about the author is less important than an image.

You should pass on breaking the grid too. Think about typography, it has to be big enough. Keep in mind that there won’t be enough space to show the whole menu at once. For me, the hamburger menu is the best option

Hope you’ll find these tips useful.

You can check the complete redesign here. Cheers!

Thank you for reading,

Tom is a Founder and Creative Lead at Hologram, a Founder of Blinq, and a teacher at Envato Tuts+

Do you like my story? Share or recommend it please, I’ll be very grateful!

All of the logos, trademarks and most of the photos are the property of Conde Nast and GQ Magazine.