Content focused design

This was a project we undertook internally as the design and UX team at Time Inc. We wanted to each come up with our own solutions for designing a site design that was beautiful, clean and clear. This was in response to having to design every site around a set display of ad formats that could rarely (if ever!) be moved from the same positions across all the Time Inc. sites — a process that tended to result in very similar looking sites.

I chose to approach this by placing the most importance on the site content, aiming for decent line lengths and clear layout first and foremost, then fitting the ads around the content rather than the other way around. The idea was that instead of trying to force users to notice advertising purely by cramming them into as high a position as possible, the adverts would be placed in positions where they would be noticed naturally while the user absorbed the content. This would inevitably involve a degree of user testing and sensible decision making (not to mention a lot of reasoning with the ads department!).

Below is an example of an article page. The site would be responsive, using the full width of the user’s browser, but maintaining a sensible maximum width for the main content. The spare space beside the content would be used for secondary content where necessary, such as the article meta data and tags and the double mpu advert, which flows into the content as the browser width decreases.

responsive article page
Responsive article page. Content is the central focus with advertising and extra content being placed for exposure without interfering.

For the photo gallery the full browser width could be used to create as informative and usable experience as possible. Elements would be compressed and removed as browser width shrinks across devices, leaving only the most UX important parts.

responsive gallery page
Responsive gallery page. Focus is on the image and the gallery controls. A gallery is a user action and not another chance to brute force ad impressions.

Dropdeadstyle is a fake brand I made up purely for this project as a young, trendy fashion brand. Because the target market for this fictional brand would be young and web-savvy I decided to completely replace a regular navigation menu with a mobile-style menu button with slide out menu. The idea was that it would be compact, require less dev time and still be familiar with the site’s users. Of course this method would not be appropriate for all demographics, but I felt it fit here.

responsive menu
Responsive navigation menu. Slide-in menu from the right hand side. Clear, uncluttered and simple to use.

I left Time Inc. before this could be fully tested and realised on any sites, but used it as the starting point for a Trusted Reviews redesign and will also use elements from this for my own projects! Hopefully it’ll have some impact in the remaining design & UX team and I’ll see some of it on a Time Inc. site in the future!