Project 1: Grids
With Spoorthi Cherriviralla
Magazine: Fast Company
Time Frame: 3 days
Hypothesis
Fast Company writes for progressive business leaders, entrepreneurs, professionals invested in the fields of technology, business, and design innovation. It uses a minimalistic, professional and mostly Serif typeface. There is an emphasis on consistency within headers, overall layout, vertical text placement, typefaces in order to make sure there is a proper structure and order to the whole piece. In all issues there are three sections: Next, Recommender, and the Features sections, all of which have a 12 column grid structure for the print and mobile version have one consistent column through out. The use of colour is mostly black and white, with bright colours for accents and vignettes which addresses the professional look that the magazine goes for. It also uses large proportioned photographs which are staged and calculated.
Audience and Context
The first step that we went through was researching the audience. I realised that this is important in terms of literal designing (and not only the content) because the way it is designed can have a major impact on appealing to the specific audience. This could include the roles of typographic elements and imagery for example to perform that task about appealing to the prospective audience.
From the initial research that Spoorthi and I did, we found out that the magazine aims to target people in the industry of technology, business and design.
We also thought about life style and interests to try and add context. Looking at the website’s media kit gave us a fair idea that this magazine is trying to reach out to business leaders and entrepreneurs. They want to reach out to future leaders.
Next we started to think a little about context in terms of publication and accessibility. It is sold in both print and online formats. There is a subscription system.
Learning about Grids
Vicki later taught us about grids. And then, during Lab Andrew taught us about apply the grids to a web page. We learnt how to create a gridding system on illustrator after taking a screen shot on the web.
Initially I though that the grid system was a 4 columns structure however looking lower at the website and taking from the clues that they gave there, I realised that the home page took a 12 column grid structure as Vicky told us it would be.
Content & Structure
We first looked at the layout in terms of the content and the pages for the whole print magazine. There are proper ends and beginnings to each section and all of this helps the readers better understand the magazine if they are quickly scanning through it. In terms of the content that the general sections have, the features focus on the main content in terms of articles on design, business and new and upcoming articles. Recommender sections are more general and exit strategy are graphical sections with quick tips.
The number of articles per section, the layout and the design elements are very similar across issues. Most of the feature cater to making sure everything is easy to read. Next articles are typically are 1 spread long, more than 250 words, covering different topics, with dense bodies of text. Recommenders are usually short. Each one is around a page long without condensed text (<250 words). Features are typically longer, 5–6 pages (>250 words)
Exit Stategy is just one page with very little text (graphics heavy). The majority of content is long, which aligns with their purpose to be an informative business magazine.
On the web there is a menu section with types of articles like Co-design, tech, Work Life, News (which has current affairs) and other categories. This helps their audience who are in the working class, opportunistic people help get to what kind of articles they want to read more easily.
Design and Structure
Over all the colour scheme is relatively minimalistic. There is a Professional, Rigid, organised structure across the issues. Each “Feature article” has content related attributes and design elements. Establishes a reliable, minimalistic, professional tone with a lot of consistency across different articles. The design is consistent with the minimalistic colour schemes (mostly black and white) with a few accented bright colours), headers, location of text, typography, use of lines and stroke weight. On the web the responsive design helps organise content based on the screen size and this thus makes text and content quite easy to navigate through on both the computer and the phone. The web and mobile version are designed for scrolling mechanism and has accessible menu structure.
Next Sections
As you can see the next section includes similar headers on each page with consistent typography. For the header and the n. It has Same font as the rest of the fast company heading typography. There are simple colours, used only white and black — the text is easy to understand, not overwhelming. Black and White colours and type create a very professional tone and the blue is used for accent text. Takes advantage of white space and uses it to show what the title is. The grid is a 12 column grid and it is consistent through the magazine.
In terms of the photography and the graphics, the first spread has one purposeful image of ‘Jaime’, which establishes a professional tone. The colours of the photo are similar to the rest of the magazine — grays and whites, very clean and cohesive. Photo gestures towards text (their eyes point to header, shoulder lines up with text) which supports the layout. The second spread has more graphical elements and these are also minimalistic in terms of colours. The second spread in general has an inverted colour scheme.
As you can see on the web it is just generally a 3 rigid column structure and we noticed that it is the no matter the kind of article. This would be for the scrolling mechanism. The colour scheme is similar to the print and relatively there are lesser graphics. This would be because it is harder to read graphics on a smaller device like a phone.
This next article also has a similar three column grid structure. So there is a need for consistency here as well which adheres to the kind of crowd they are looking at. The photography is staged and simple. This second one uses illustrations which has a sketch like quality.
In terms of the typography for there are 4 main fonts: header serif font (“n.”)(URW Antiqua), narrow san serif header font (“Next”)(Vista Sana/ Omnes), san serif article header (Futura PT. Heavy/ Mont Heavy), serif body (Novel Pro, Light & Bold). The articles are written in Serif Fonts (only paragraph and article header use sans serif), perhaps because serif is easy to read in print. This is true for both web and print for this magazine.
The article headers are geometric san serif. Vicki told us this. They have a very price and rigid structure that is very geometric and symmetrical. The same font is used at the beginning of each paragraph. The boldness and the fact that it is san serif it helps the reader differentiate the title from the body of the text.
This is a little different on the web
On the web the article titles are different. They have a serif font that is really bold. I thought that this helps makes the title memorable for the reader.
Recommender Sections
In terms of the print version, the recommenders are much shorter and only one page long. They have varied content. It uses the same 12 column grid structure. There is a clear distinction between this section and the previous one. There are different layouts for every page, but each page has the same design elements. Less text-heavy with several visuals (illustrations, lines, and boxes) and quotes compared to the “Next” Section. Every page has 4 columns with quotes/ short descriptions with headers. There is a White background with the same Serif font. Header includes “r” in the same font as the other “next” and “recommender” headings.
On the web the recommender section is different.
It has the same consistent three column grid. It does not have the large images as on the print version. The font type is same as the Next section. The number of images used are lesser than the print version. They are much shorter though than the other sections.
The images that are used are much more informal. This could be because the information provided is very informal.
Features
The features in the print version have a 3 column grid or a 12 column grid as you can see. However they are very similar grid structures. Features have very different styles compared to the rest of the magazine. They consist of longer articles and spreads that are around 5–6 pages. They have consistent visual elements throughout the pages (fading blurring text).
In terms of the colours, there are a few colours and there is lots of text (only yellow being used in the illustration).The illustration fits the tone of the colors and the magazine — it is very factual and diagrammatic. The image is also very large similar to the other components in the magazine.Yellow in the image attracts a lot of interest — attracts your eye to it immediately. There is also a clear distinction between this section and the previous one.
In terms of typography. This what we found:
- Header font: San Serif (Similar to Futura Maxi Pro — especially with the curve of the letter G) — similar to the header fonts used in the other areas of the magazine
- Sub-header: Serif (Similar to Helvetica Monospaced) — appears more technological and boxy, aligns with the purpose of the articles
- Body Text font: Serif (similar to Amariya Regular)
In features there is also a lot of imagery involved in terms of the graphical elements.
This imagery supports the content of the feature. This adds to the professionalism of the article because even the imagery subtle and very supportive to the content of the article.
Here is the feature article on the web
On the web, as you can see there is still the same three column grid. It is very text heavy with one big image under the tile and another one wedged in between the article. The typography is similar to the other articles.
On the Iphone
Here are my analysis from the articles on the Iphone. There is one single grid column that adheres for it’s need to keep scrolling down.
Conclusion
In conclusion, all the elements in both the web print in version, adhere to wanting their readers to be able to easily read through articles, and have a very professional look to it. There is a lot of importance to consistency and order in terms of the grids, the colour choices, the imagery, the typography and the photography.
