Project 1: Structure, System, Form

Renee Chang
communications-design-mini-yr2
9 min readOct 21, 2021

--

GQ Magazine

After looking through the many different magazine options, we decided to choose the GQ magazine. We liked how the GQ magazine had the US edition and UK edition, so we could compare the different and similar design elements. I also thought it was unique from the other magazines because the GQ magazines are known for targeting men for their audience. Thien decided to focus on the print GQ magazine while I analyze the GQ websites they have for different platforms whether that it was for the computer, phone, tablets, etc.

Thien and I did some research and we answered the questions that Professor Vicki provided. Answering these questions helped us understand our magazine in a design sense as well as help us write our hypothesis.

Link to research questions

Mission Statements

US: GQ is the flagship of men’s fashion and style in America. To be GQ is to be forward-looking, progressive and cutting-edge. For over 60 years, GQ has been the home to the most elevated and respected photography, design, reporting and writing in the men’s space. Today, GQ is also a digital, social, video and experience powerhouse — a community where readers gather to be inspired and exchange ideas around style, creativity and culture. As masculinity evolves and men’s fashion has moved to the center of the global pop-culture conversation, GQ’s authority has never been broader or stronger.

UK: GQ is the world’s leading men’s magazine. Since its launch in 1988, GQ has evolved into the Britain’s most contemporary, stylish men’s magazine and has won more than 50 awards for its magazine, website, social media and video content. Dedicated to bringing its multi-platform audiences the very best in investigative journalism, fashion, comment, lifestyle and entertainment, GQ has additionally created a raft of outstanding events, headlined by the annual GQ Men of the Year.

Hypothesis

US GQ uses a 3 column grid with dynamic typography, saturated color palette, and experimental placement with images to create a masculine atmosphere. UK GQ uses a spacious 3 column grid with simple and sharper typography, minimalist color palette, and confined images to create a masculine atmosphere. Like the print magazine, GQ UK’s website is also more simple and minimalistic. Because of cultural differences, we feel that the US and UK use different design elements to create the same idea of masculinity. While both magazines use structured paragraphs, the US plays more with dynamic typography. The images in the UK magazine is much more confined within a box while the US magazine has pictures overlapping each other. The color palette and photographs are more saturated in the US magazine compared to the UK magazine.

We decided to analyze four different subtopics. I will be analyzing the last two subtopics.

  • Weeknd feature on US and UK (print)
  • Weeknd feature on US vs Matt Damon feature on US (print)
  • US Print Feature vs US Website Feature (Afropop King)
  • Macro comparison of US Website and UK Website

GQ US Website vs UK Website

I decided to compare the homepage of the GQ US website and GQ UK website like how Thien is comparing the GQ US print magazine and GQ UK print magazine. This is comparing the two from a macro perspective such as grid, content, color, and responsive design.

Columns

Using Adobe Illustrator, I was able to see the layout of the columns on the homepages for the US website and UK website. I noticed that in the US Website, each section of the homepage varies on their layout. They also have no space between the columns unlike the UK website. I feel that having invisible margins causes the website to look very clustered whereas the UK website looks more spacious. The US website seems like it has another grid layout within a column which is something that Professor Andrew mentioned. Knowing that, I realized the US website is much more complex compared to the four column grid that the UK website uses.

US Website on left and UK Website on right

Color

The two websites use different accent colors which I thought was very shocking since they are the same company/brand. The US website GQ title uses a beige/brown color and also uses a red color to highlight specific things. However, the US website also has much more advertisements and is not as minimalistic compared to the UK website. The UK website uses a lime green for an accent on their website, but keeps their title black. Other than the streak of lime green on the top, there sees to be no color GQ uses in their UK website. This backs up our hypothesis that the UK is very minimalistic with their color palette while the US uses saturated colors in their color palette.

US Website on the top and UK website on the bottom

Content

Unlike magazines where people have to actually flip through the pages, the websites have headings for different categories so people can simply click to their interest. The categories on the websites are different which is very interesting. I believe that this is based off of what people in the US and UK are more interested in that GQ knows from data research. I also noticed that the US website uses the word “style” while the UK websites uses “fashion” when they have the same type of content.

US Website
UK Website

Responsive Design

When clicking on the first category which is Style for the US website and Fashion for the UK website, I realized that viewers are allowed to select more specific categories on the UK website. This is convenient since they don’t have to scroll through the very long page like the US website. You can tell by the length of the scroll bar that is highlighted in the page below. This follows the idea of how simple the design of GQ UK is. Even the way they think about the user experience is more straightforward. The UK creates a minimalistic experience for the readers that can choose what category within fashion, so they don’t need to scroll through all the features like the US website.

US website on the left and UK website on the right

The US website also has small guide cues in the red color throughout the page where they try to emphasize certain things. Not only is this a saturated color, but it creates an atmosphere of cluster because of the sudden change in font and distraction of the color. Our hypothesis has the idea that the UK is much more simplistic compared to the US, and I feel that this is a strong example of our hypothesis. Not only are the UK’s website design elements more simplistic, but I feel that their goal for readers is more simple than the US website. The US website tries to lure readers into subscribing and reading their best feature which is something that the UK website doesn’t really do.

US website on the top and UK website on the bottom

GQ US Feature on Print vs US Feature on Website

Diving more deep into the idea of design elements that GQ uses, I also compared a specific feature on the GQ US print magazine and on the GQ US website. This is viewing it from a micro perspective. Although the content is the same, the design choices of this feature are very different. I noticed the difference in layout, typography, and hierarchy. I feel that although they are different, there’s a reason to why they were presented differently. Magazines and websites convey content in a different manner which needs different types of design thinking.

Layout

Looking at the spacing of the text, the text in the print magazine is much more compressed. This is probably because they’re trying to fit all the content in a page while on the website, they can freely add as much as they want. I also noticed that there is a lot of space on the sides of the text on the website. I believe that this is because if the text were to fill up the whole page from left to right, it would be uncomfortable for the reader to read.

There is also much more content of the text before the photograph in the magazine compared to the website. I think that this is because there’s so much to fit in a small space in the magazine that the text is much more compressed and everything is very tight together.

Print Magazine on the left and Website on the right

Typography

The print magazine and website both include the same quote, however, it can be seen that the font on the print magazine is more creative. There is much more movement and dynamic to the quote compared to the website. It is also emphasized before on the print magazine since it takes up half of the page, while it is a slighter bigger font than the content text on the website. I think that the reason for this design choice is to catch the reader’s view flipping through pages. From my personal experience, when I read a magazine, I don’t look at every single page, instead I flip through the pages very quickly. Because the magazine print text is so small, it doesn’t really catch my eye while I flip through the pages, however, having an eye-catching font with movement like that can instantly catch my attention, causing me to stop and read what it says. I see that having this design element in the print magazine is necessary for a magazine.

Print Magazine on the left and Website on the right

Hierarchy

“The King of Afropop” is the title of this feature. Both pictures below are what the reader sees from the beginning, so the picture on the left is the first page of the feature and the picture on the right is the first thing they see on the website. It can be seen that the magazine emphasizes the title with the same dynamic typography mentioned above unlike the website. The title takes up most of the space of the page while the title on the website doesn’t stand out as much. The magazine also decided to add the title on top of the photograph while the title on the website is underneath the photograph. This can be seen that the magazine prioritizes the title over the photograph which is opposite to the website.

I believe that this was designed for the same reason as I mentioned in the typography section. People using the website clicked on this feature from the many other features because of the title which is why the title on the actual page does not have to be emphasized as much. Unlike the website, people flip through the magazine, and so the title must be more emphasized to let people know what this feature is about.

Print Magazine on the left and Website on the right

Conclusion

While analyzing and carefully thinking about the design elements in GQ’s print magazine vs. website and US GQ vs. UK GQ, I feel that there is always a reason for each design decision. Design elements such as color, layout, hierarchy, typography, etc., must adapt to the environment it is going to be in because print magazines and websites are so different. Same goes for the design choices made in the US and UK websites. Culture difference is a big factor that designers must consider when creating something. Although US GQ and UK GQ both strive to provide the same idea of masculinity in their content, the presentation in the end is different in some ways.

--

--