Grungy Gentleman was striving to be a prevalent and respected online magazine, but wanted a completely different web presence than GQ, Esquire, or Details. Since they were a growing blog with no design direction, I had free creative reign over the new branding and site structure. What came out was a completely interactive and responsive site that makes ample room for brand features and advertising without causing an eyesore.
Agency: Doejo
Project Role: Art Director & Designer
Research & Strategy, Art Direction, Branding, Logo Design, UI/UX & Web Design
— 2011
Fashionable, trendsetting men, with a little edge, come to the site looking for men's fashion, trends, and exclusive collaborations.
Based on the name, Grungy Gentleman, I wanted to create a mark that was a bit rough, yet refined. What came from that exploration were strong logo variations that could be used together or independently. Based on the logo direction, a variety of web elements were created.
The online publication introduced its own fashion line. As you can see, the logo mark is versatile and recognizable enough to be used as a patch on this sharp baseball jacket.
The goal was to bring the pleasure of reading a magazine online, so GG needed typefaces that could bridge that gap. Gotham was chosen for headlines because of its sturdy, geometric characters. Georgia was chosen for body copy because it's a beautiful serif typeface that reads well on all screen types and works well for long-form body copy.
Working with the angled look of the category tags, custom web elements were created for use throughout the site.
Before starting on the website, we explored some of the well-known men's publications doing something that GG aspired to. GQ, Esquire, and Details all had a similar web presence. This allowed us to see how we could differentiate the new GG site.
When we began the Grungy Gentleman redesign, this was the website. The site had a large audience, but lacked an engaging user experience. Banner ads took up prime real-estate, copy was hard to read, and the overall design direction was confusing and inconsistent.
Site Goals:
• Responsive
• Cohesive Branding
• Engaging User Experience
• UI/UX Clarity
The visual direction of the branding and the GG articles helped to guide the site design and interactions. The responsive site cohesively incorporates the new branding as well as creates an enjoyable reading experience — one very similar to picking up an actual magazine.
Large, gridded images were used to bring features to life. The header was used to display the latest feature, while the rest of the grid contained paid ads, social media, and a patchwork of featured categories.
Grungy Gentleman had a ton of ad relationships in place already, so it was a challenge to see how we could incorporate them into the new design without haplessly putting them in random places.
We decided to seamlessly incorporate them into the site design, much like a magazine would. There were three different ad sizes that could be purchased and easily added to the design without compromising the experience.
In order to provide a better user experience, we needed to hone the categories and navigation. We took titles like "The Grunge" and "Mixtapes" and turned them into more recognizable categories.
After assessing the current articles on the site — and discussing the future of the publication, we determined that there were 6 different buckets that each fell into. We used those categories to create color-coded tags for articles, making it visually easy for users to "see" categories.
Each landing page in the navigation is populated by articles tagged with that specific category tag. The homepage is a collection of featured articles from all categories.
Article landing pages had the ability to have a large image carousel header or a single image or video. Each article was created to have an editorial feel with a big focus on imagery.
Images within articles have the ability to feature "hot-spots" which allow points to be placed on the x/y coordinates of the image. These offer a pop-up link to an item's web page or to be used to notate specific information on each item within a photo.
This works great for articles that feature curated articles of clothing.