WIRED Magazine: Structure, System, Form
Project Overview: Conduct rapid research to identify content themes and audience personas; identify and understand key components of a visual system; summarize your discoveries.
Introduction
My team and I were assigned to review Wired magazine to better understand their visual systems and content management. We examined how grid systems are used to arrange text and images, how typeface is used to segregate content and evoke certain emotions, how color is handled in textual and graphic elements, and how these design decisions come together to create Wired’s design language. We also considered why these decisions were made to cater to Wired’s mission statement and target audience. Specifically, we compared the design languages across the web and print editions of Wired.
Hypothesis:
Using trendy and often experimental design elements, Wired’s print edition hopes to appear cutting-edge and to promote the ideas of tomorrow, while their web edition has a design that errs on the side of conservativism to appear more news-oriented. This can also be seen in their content management decisions. In both versions, however, Wired promotes innovation trends in the fields of technology, business, and culture using trendy yet authoritative design elements that appeal to a specific target audience of primarily young, educated, urban males.
I. Understanding Wired
Understanding Wired’s mission statement, target audience, and purpose.
Wired is a magazine built on sharing the ideas of the future: future scientific innovations, future technology, business plans of the future. They pride themselves on sharing the ideas of tomorrow.
Mission statement:
Wired is where tomorrow is realized. It is the essential source of information and ideas that make sense of a world in constant transformation. The WIRED conversation illuminates how technology is changing every aspect of our lives — from culture to business, science to design. The breakthroughs and innovations that we uncover lead to new ways of thinking, new connections, and new industries.¹
Wired intends to share new ideas primarily in the fields of business and technology. This content focus appeals primarily to a specific audience demographic: young, educated, urban males.
Wired’s audience is primarily those of an affluent status. Particularly in the print editions, readers are highly educated and have a high percentage of professionals. Readers also have a high median household income of nearly six-figures.
Interestingly, the print editions of Wired have a younger readership than the web editions. While this initially seemed counter-intuitive, the content featured in the print magazine offers more experimental feature stories that detail more in-depth narratives, and we theorized that these more unconventional stories would draw an audience of younger, more open-minded and curious readers.
In addition, the circulation rates heavily focus on urban areas. The New York Metro area and California have by far the highest readership stake². Both of these areas are heavily urban, liberal, and have a high tech-industry. In fact, Wired itself is located in San Francisco, California, an area known for technology and innovation with Silicon Valley’s close proximity.
Combined with the male-heavy and young readership, these urban areas support the “innovation of tomorrow” mission that Wired values. Specifically, the print edition of Wired is particularly innovative in its content. It highlights experimental stories that break the status-quo, a topic that would encourage this specific audience. The web version, on the other hand, is a more conservative and traditional medium, which draws a more neutral audience: slightly lower income, higher percentage of women, and lower educated, although it still stresses technology and innovation.
II. Content Management
Analyzing the the publication’s content and considering differences on the print and web editions of Wired.
Print Publication Structure
Wired’s print magazine has a consistent structure across issues. It follows a logical progression of stories with consistent naming schemes:
Start → Work Smarter → Gear Special → Featured Story
Start and Work Smarter are both collections of smaller stories. They focus on highlighting up and coming trends and new ideas in the tech and business industry, respectively. Following Work Smarter is Gear Special, a section dedicated to featuring new tech products. Each issue focuses on different types of tech; the July/August issue our team studied featured “luxury” gear. The Featured Story appears near the end of the publication and tells an in-depth issue-specific story about business, culture, or science. Our issue’s Feature Story covered the future of MRNA vaccine research. Due to it’s journalistic depth, this story takes up the majority of the publication’s length and receives the most attention in the magazine’s marketing, particularly on the cover itself.
Web Editions
Rather than organizing the website through a logical progression of stories as is seen in the print editions, articles are sorted through seven categories:
- Backchannel
- Business
- Culture
- Gear
- Ideas
- Science
- Security
This structure is definitely due to the natural differences of the two mediums: a magazine, which the user must flip through the pages in a forced page-by-page order, compared to a website which offers infinite categorical links and subsections that the user can interact with on their own progression.
Within these categories are news articles tagged with that specific topic. The articles tend to be shorter and more news-oriented. They follow a slightly more traditional content matter than the print edition’s stories. When we searched the website for the articles featured in the print edition, they were not present on the website. The only piece found in both editions of Wired was the cover story from the July/August issue. This shows how much the two editions differ: they don’t even have overlapping content. This idea begins to reveal some of the key differences between the two editions, which can be further explored in the visual design decisions made by the Wired team.
III. Grids
Analyzing the grid structures found across Wired layouts.
Wired’s print magazines feature grids that are accentuated throughout the issue. Color blocks are often placed behind text to highlight the columns and modules that text is laid on.
A consistent element of Wired’s print language is the lack of gutters between images and text blocks. Text boundaries are directly coincident with image blocks. In addition, gutters between text columns are marginal. This creates the effect of very tight elements with sections separated by bodies of white negative space.
While the grids in spreads are highly visible, they aren’t necessarily consistent. To create a more dynamic visual language, column widths are variable and in some cases change in and out of consistency. While they follow a general scale pattern, individual columns are often slightly wider or thinner.
In addition, some elements exit the grid structure to create a more dynamic and engaging spread. This visual interest is very effective in adding an element of unpredictability throughout the spread structure.
This grid system can be seen throughout the issue:
Web
The Wired website follows a much stricter, more consistent grid structure. The home page of Wired.com is a 9-column grid with block widgets that fit exactly within a long, scrolling page. While each of the widgets’ widths vary, they vary according to the 9-columns.
Wired.com articles also follow a very simple grid structure. The page is split into two main columns: text body and sidebar.
This grid system is simple, consistent, and minimal. Elements follow the grids exactly, with no variation.
IV. Typography
Considering the typography featured throughout Wired.
The Wired magazine’s main typeface used in the body of articles is a conservative serif used to enhance readability. Subheadings are a traditional rounded sans-serif. These main typefaces make up the majority of Wired’s text — both body and headings:
However, some unique typefaces appear throughout the magazine, often dependent on the style of the section. One more experimental typeface is the chisel calligraphic-like font that is used for main headings:
This font is used to segregate sections within the issue and is used sparingly. However, the font is stylistically varied throughout (as seen above: stroke and fill are added or removed, color is played with, etc.).
Type placement is also played with throughout the spreads for an engaging effect. See the way that the initial letter of these articles are separated and enlarged:
Finally, the visual hierarchy/order of article features are often shifted in an unconventional way. For example, in this spread, the title of the article (“Dark Kitchens Get a Light-Bulb Moment”) appears in the lower half right of the page, rather than the upper left as is conventional in Western layouts. If anything, the large “D” initial letter takes visual precedent over the title:
This unconventional typographic scheme offer two incentives for Wired: the traditional body and headings make the articles readable and authoritative, yet the uniqueness in hierarchy, layouts, and typefaces make the spreads appear dynamic and experimental.
V. Color & Imagery
Analyzing how color and imagery are used in Wired.
Both the web and print versions of Wired use a conventional black and white color scheme as their default theme. This white background with black text is authoritative and reliable, building trust towards the information being presented among readers. It also provides an undistracting style of display, allowing the information itself, and the unique design decisions made for layout, draw more attention.
However, one unique color choice made by the Wired team is their choice of high contrast, high saturation images used in spreads. This makes for a bold and exciting visual language used throughout the issue. This is especially apparent in this spread:
Notice the high saturation image, featuring lots of color, set against a spread of black and white (and, in this case, a pink accent color).
Because of the general consistency of this color scheme throughout the magazine, color can be used to separate certain sections from the rest to highlight them. The Gear Special section capitalizes off a sudden shift to black and gold to highlight the section. This color scheme also supports the theme of the topic: luxury gear. The Featured Story in our issue also shares a sudden color alteration. In this section, the colors go away all together, and the entire section is in black and white. These color shifts that differ from the rest of the magazine help to highlight these special sections, as well make the reading experience more engaging and interesting.
The web edition also follows a traditional color scheme, with a white background and black text. However, outside of images and videos embedded into articles, accent colors are used sparingly, if at all. This makes the articles read more static and conventional than the print version, despite the capabilities that a web browser can bring to graphic abilities. The Wired team decided to keep the web articles simple and clear, especially compared to the magazine’s design.
VI. Pulling it all together
Combining the individual design decisions to understand Wired’s intentions.
The perfect example of how Wired combines its grids, layouts, typography, color, and imagery decisions compare between its print and web editions is in the Featured Story of the July/August issue we studied:
The Featured Story is one of the few articles from the print magazine that appears in both the print and web editions. It’s the same story — but the way it’s presented in the each version is completely different. It’s obvious that the formatting is being directed towards different target audiences and for different purposes.
Typeface
the first thing a reader notices about the magazine spread is the dramatic, distorted title on the left page. This alteration of the basic sans-serif typeface used throughout the issue is bold and engaging. The web edition, on the other hand, maintains the conventional web typeface without breaking any boundaries of attention.
Title
Even the title of the articles themselves differ. The print edition: The MRNA Boom, compared to the web edition: The mRNA vaccine revolution is just beginning. The magazine’s headline is significantly more attention grabbing, while the web’s title is more information-based and feels less dramatic.
Grid
While the print edition’s grid system is quite tame compared to other articles present in the issue, the two-columns separated by an engaging line graphic is significantly bolder compared to the one long-run column found in the web edition.
In analyzing these differing characteristics, a few adjectives keep coming up to describe each of the editions:
Print: bold, experimental, engaging
Web: conventional, information-oriented, static
The design decisions that lead to these characteristics are very intentional considering the target audiences and purposes of each edition. The print magazine is oriented towards the open-minded, curious, younger professional reader, who is looking for a more exciting and ground-breaking experience. The web edition, on the other hand, is geared more towards a neutral audience — more for the average person. This can also be seen represented in the distribution and viewership numbers of each version: the print magazine has a circulation of 2.7 million readers, while the website has a viewership of 20 million. The print edition’s design and content decisions are intentionally geared towards this more niche audience with its boldness, while the website is kept neutral for its more broad viewership. Wired’s design decisions are seen to be intentional, clear, and — most importantly — effective in promoting the innovation and cutting edge persona it hopes to embody.
