LA 10.4 – Layout – Pace and Contrast

Compare the design (in terms of pace and contrast) of an online magazine, blog or website to that of a printed magazine, book or journal (task 10.3 Layout – Basic Principles of Layout).

  1. What differences can you see between the kinds of design strategies used in the two formats?
  2. Write down your findings and upload it to WordPress.

Ideally, I would have used the same magazine in this task as in the previous learning activity, but as I cant find any other online version of Kamille than pdf online versions (ISSU), I choose to use another magazine. Therefore, I have chosen to work with another professional and famous, international woman magazine – Cosmopolitan. Their website can be found here: https://www.cosmopolitan.com/

cosmopolitan_top_
Top of main/ start page

AS this is an online magazine, they need to use the space different than in printed magazines. The reader also reads and navigates different online. Hence, it’s based on a completely different grid system.

The name of the magazine is written very small in the top left corner and it disappears as you scroll down. On the top of the start page you find a main story «Barrettes are back and trendier than ever» – covering the screen from left to right with story title and pictures and illustrations. Below the main story is a navigation bar; hamburger menu icon – COSMOPOLITAN – STYLE – BEAUTY – LOVE – POLITICS – HOROSCOPES… SUBSCRIBE – NEWSLETTER – search icon and language/ country preference icon.

Below this navigation bar they horizontally present the five top/ main stories with numbers, pictures and story titles. You can click on them to navigate directly to the stories.

cosmopolitan_top_story
Navigation bar and top five stories in the main story

If I click on any of these stories, it overwrites the current page and the navigation bar is still kept on the top of the page. Below the navigation bar you can still see the top five stories, presented the same way as on the main/ first page. This makes it easy to navigate around the top stories. This top-story menu is kept tight with to space between the pictures, probably to make maximum use of the page width.

Between the horizontal line with the five top you can see a big add (here for jewelries). I notice this is a Norwegian website I have been visiting recently and this makes me believe the website is partially financed with advertises – customized for the reader (by her browser history). This is very different from the possibilities as with the advertises in the printed magazines.

cosmopolitan_navigation_bar-top_stories
Navigation bar and five top stories on the main/ start page

As I continue to read the top story and scroll down, I find  a poll inside the story «Thoughts on nostalgic trends?». This is not possible the same way in the printed magazines. I click on it and it gives me the current status – quite cool and entertaining.

cosmopolitan_story_poll
A poll inside the online magazine – giving the reader a current status, and links to three other stories on the right hand side of the page

I notice that the text in the story is based on a one-column, but the page width contains links to three more stories «More from style» on the right hand side of the page. These stories are presented with big pictures and the story title below the picture. In the story body text, you find links to earlier stories in Cosmopolitan. If you click on any of these links, they’ll open the story in a new window. In the printed magazine, you rarely find this kind of links to earlier stories in the magazine.

cosmopolitan_runway
Pictures presented in slideshow view

Further down on the page in the main story, they show runway pictures of models wearing hair barrettes from different designers. This is a slideshow presentation, and the reader have to click to see the next picture.

cosmopolitan_irl
Pictures from popular Instagram accounts showing hair barrettes used IRL (In Real Life)
cosmopolitan_clickablelinks
Clickable links in the story to some popular Instagram accounts

Below the runway they have a IRL (In Real Life) section, showing popular Instagram photos/ accounts with people wearing hair barrettes.

At this point, as I have scrolled half way down the page, the top navigation bar is still showing, but the space on the right hand side of the story is kept clear of content.

cosmopolitan_hairbarrettes_shops
A buying-guide for hair barrettes, linked directly to the shops

The stories continues with links, prices and pictures to buy different hair barrettes categorized in different styles. This is often showed in woman magazines as well, but online you have the possibility to take the reader directly to the shops.

cosmpoliotan_relatedstories
Related stories below the main story

As the story finishes of, there is a new poll; How do you feel about the trend now? Followed by a hair-related video «Braid Up». The next elements are two «Read next» stories, one about jelly nails and one about shampoos. Everything is related to the story I have just read. Further below is a section of eight sponsored stories.

cosmopolitan_morefromstyles
More from styles – links to more Cosmopolitan stories

I’m getting closer to the bottom of the page and a section «More from styles» appears, showing a grid of 10 Cosmopolitan stories, all clickable and replaces the picture I’m currently seeing.

cosmopolitan_footer
The bottom of the page

At the bottom of the page, they present links to more hair-related articles, their SoMe links as icons (Facebook, Twitter, Pinterest, Instagram, You Tube and Tumblr) below the Magazines name. In four columns, there are 16 links to navigate around the website: Newsletter, Digital Editions, About Us, Press Room, Contact Us, Community Guidelines, Advertise Online, Cosmo Books, Work For Cosmo, Customer Service, BestProducts, Subscribe, Other Hearst Subscriptions, Give a Gift, Events & Promotions, Giveaways .

The page ends with information about the publisher Hearst.

cosmopolitan_mainpage_stories

Back to the start/ main page, there are loads of loads of stories as I scroll down the page. The grid is mainly two-column based; text about the article to the left (category, date published, title, ingress, preamble and writer) and a picture to illustrate the story to the right.

The page grid is basically structured with the same amount of white space at the left and the right side of the page as given in the top navigation bar.  Below I’ll show pictures of how the website looks, to show the main structure:

cosmopolitan_mainpage1cosmopolitan_mainpage2cosmopolitan_mainpage3cosmopolitan_mainpage4cosmopolitan_mainpage5cosmopolitan_mainpage6

skjermbilde (48)skjermbilde (49)skjermbilde (50)

My main findings

Some of the main differences between the kinds of design strategies used in the two formats are:

  • There are obviously no page numbers in the online magazine
  • The online magazine make use of the interactive possibilities
  • The online magazine seems to be based on a simpler gird system
  • There is a lot of pictures and short and little text on the main page in the online magazine. I believe this is a strategy to quickly get the readers attention. (You have less time catching the readers attention online than on print). Greater chance that the viewer clicks away from your site.
  • The online magazine links to other articles related to the topic you are reading about. In printed magazines you rarely see this.

Resources

Lesson

  • «Overview of Layout» – lesson from Noroff School
  • «Layout Part 1» and «Layout part 2» – video lessons from Noroff School
  • «InDesign CC2017 Essential Training» – Lynda course with David Blatner

Litterature

  • Graphic Design School: A Foundation Course for Graphic Designers Working in Print, Moving Image and Digital Media, Unit 2 (page 32-61), Fundamentals of Composition.

Websites

 


Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut /  Endre )

Google-bilde

Du kommenterer med bruk av din Google konto. Logg ut /  Endre )

Twitter-bilde

Du kommenterer med bruk av din Twitter konto. Logg ut /  Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut /  Endre )

Kobler til %s