Web Design 101: Embrace the Content. 10 Tips How to Design Content Rich Websites.

Tom Koszyk
Jan 14, 2016 · 8 min read
Image for post
Image for post

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.

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.

Image for post
Image for post
New main menu

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.

Image for post
Image for post
Current GQ.com

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.

Image for post
Image for post
Redesigned main banner

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.

Image for post
Image for post

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.

Image for post
Image for post
Proper use of a white space.

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.

Image for post
Image for post
Image for post
Image for post
Menu and content relationship.

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Playful typography.

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.

Image for post
Image for post

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.



Design in the digital age

Interaction / Product / User Experience / User Interface /…

Tom Koszyk

Written by

Founder and Lead Creative at Hologram: Digital Design Studio. Music addicted typography lover and video gamer. http://www.hologramdesign.co

Design in the digital age

Interaction / Product / User Experience / User Interface / Design

Tom Koszyk

Written by

Founder and Lead Creative at Hologram: Digital Design Studio. Music addicted typography lover and video gamer. http://www.hologramdesign.co

Design in the digital age

Interaction / Product / User Experience / User Interface / Design

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

Get the Medium app