The document describes conventions and design patterns commonly found on lifestyle magazine websites. It provides examples of popular lifestyle magazines and analyzes the website structure of Hearst's Seventeen, Esquire, GQ, Life & Style, Hello!, People, Country & Town House, Vogue, Vanity Fair, and Reader's Digest. Common elements include mastheads, menu bars, article layout in rows and columns, section separators, and strategically placed advertisements. Color, sizing, and positioning are used to draw attention to important content.

1. Lifestyle Magazine Websites
Codes & Conventions
Z. Yot

2. Lifestyle Magazine Websites – Popular
Examples
 Seventeen
 Esquire
 GQ
 Life & Style
 Hello!
 People
 Country & Town House
 Reader’s Digest
 Vogue
 Vanity Fair

3. Hearst's Seventeen -
Website
 The masthead is found at the top of the page and is aligned centre
 Below this is the menu bar which features a menu button and a small
masthead aligned to the left, with links to different categories found
next to it. Aligned to the right are a subscribe button, highlighted by a
light pink capsule, and a sign in button
 The page is split into different sections, highlight by changes in
background colour from light grey to black
 The light grey section contain four articles organised in a grid with a
scrolling advertisement next to them
 The black section contain one large article taking up the width of the
page, with aligned centre ad boxes separating them
 The section each have a title at their top aligned to the left
 The masthead uses a serif typeface, however the rest of the text on the
page is sans-serif

4. Hearst's Esquire -
Website
 This page breaks a common convention by having a large article thumbnail displayed at
the top of the page, instead of the masthead, or menu bar
 A large title is displayed at the bottom of the thumbnail and is aligned centre
 Below this is the menu bar which features a menu button and a small masthead aligned
to the left, with links to different categories found next to it. Aligned to the right are a
subscribe button, highlighted by a red capsule, and a sign-in button
 Below this is an additional box with room for a small advertisement, aligned centre
 Most of the advertisements on the page are aligned centre, however, there are a few ads
that are aligned left and scroll with sections of the page
 Articles are arranged in rows and grids with grids ranging in size from 2x2 to 4x4, with a
row typically containing four articles
 A mixture of typefaces are used throughout the page
 Below the menu bar is one large article which is aligned centre and takes up a whole
row, with a thumbnail, title and description
 Articles are grouped by different topics
 One section is dedicated to political writer Charles P. Pierce featuring five of his articles
arranged in a wide column taking up the width of the page

5. GQ - Website
 The masthead is located in the top left with only a slim green bar located above it, it is in a thick and bold typeface
 The menu button, a subscribe button, and a location picker are all found on the top row opposite the logo in a
smaller, narrower, and less bold font
 Bellow this is a row with links (which are aligned left) to different topics covered by the magazine with articles
relating to them, under which is found an empty row defined by a single light grey line, these are aligned left
 After this blank row is an order now button, serving as a call to action, being placed in the centre of the page
 Beneath this There is a top stories section with this label being written in the same typeface as previous labels, but
found in a far larger and bolder font
 The titles of each section are aligned left
 The top stories section is composed of two halves, the right half features room for up to six articles found in two
rows, with there being two possible size variations for the articles, below the thumbnails for the articles, are their
topic, title, author and date. The left section of this area contains one large thumbnail for an article, with features
the same information, this article moves on the desktop when scrolling down the page filling the left half of this
section
 The section underneath this is a section featuring the latest articles from GQ which remain in line with the articles
above, although these are narrower in width. The gaps between these articles remain constant with those above
 A smaller section contained in a light grey row is then used to break up the page with both the font and
thumbnails here being far smaller than the others seen previously, these articles have their description placed to
their right
 The titles of the different sections are separated for the articles through the use of thin black lines
 The page also does not use any serif fonts

6. Life & Style - Website
 The masthead of this magazine is aligned to the left of the centre of the
page and is found at the top with nothing above it
 The search button, subscribe button, login button, and download
button, as well as links to different categories and links to social media
are all found below the logo in a row, under which is found an
advertisement box, the fonts for these are far smaller than for the logo,
highlighting its prominence on the page
 Below this is a large thumbnail for one article, with a caption box cutting
into it, to the lower right of this is another advertisement
 Underneath these articles are arranged in light grey bordered boxes with
their titles underneath, these boxes vary in size with up to three being
found in a row, with even some taking up a whole row. Some boxes
contain multiple articles depending on the article's importance. There
are three rows like this before another advertisement box.
 Below the advertisement box one article is highlighted through the use
of a box which is larger than those above it and is coloured bright pink
to accent it and help it stand out.
 A serif font is also used throughout the website as well as for the “&”
symbol on the logo

7. Hello! - Website
 A mean bar is located at the top of the screen with a menu
button, a login button, a region selector and a subscription
button contained in a box
 The masthead is located under this and is centre aligned, with
a row below this being used to provide links to different
categories
 The subscribe button is contained in a red box
 Article thumbnails are arranged in rows with titles underneath
them
 One thumbnail is displayed prominently towards the top of
the page with the logo displayed on it, with a caption
highlighted in a red box
 There are some boxes on the page containing multiple
articles
 A sans-serif font is used throughout the page
 Advertisements are mainly found on the right, and centre of
the page

8. People - Website
 The masthead is found at the top of the page and is
aligned left, below it is the pages menu bar
 To the left of the page there is a column of their most
recent articles with a thumbnail and a caption with
their topic, and title
 Here articles are arranged in a mixture of columns
and rows
 The use of coloured blocks and different border
designs are used to highlight certain articles,
allowing them to stand out
 The page also features a variety of different sections
separated by underlined titles, or by colourful blocks
or lines
 The fonts used are all sans-serif

9. Country & Town
House - Website
 The masthead is displayed at the top of the page and is aligned left, with
a serif font
 In the same row as the masthead is the menu bar, with a by now button
highlighted by a red box
 Two key articles take up a large portion of the page, with the first having
a large and centre aligned subscribe button below it
 Articles are arranged in rows with the page sectioned into different
topics separated by titles which are underlined by a thin grey divider
 Both sans-serif and serif fonts are used widely throughout the page
 Coloured boxes are used to highlight more important articles
 Few ads are displayed on the page
 Extra digital content separate from the magazine is also shown, with the
website providing a variety of different podcasts
 All articles are centre aligned and organised in rows

10. Vogue - Website
 The masthead is centred at the top of the page, in a large and slim serif
typeface, with nothing above it
 The menu button, a subscribe button, and a location picker are all found on the
top row, in the far-right corner, these buttons feature text in a smaller and
bolder font than the main logo
 Bellow this is a row with links to different topics covered by the magazine with
articles relating to them, these are aligned enter, under which is found an empty
row defined by two thin backlines
 After this blank row is there is a top stories section with this label being written
in a thin typeface and has a small grey bar above it
 The top stories section is composed of two halves, the right half features six
articles found in two rows, with there being two possible size variations for
these articles, below the thumbnails for the articles, are their topic, title, author
and date. The left section of this area contains one large thumbnail for an
article, with features the same information, this article moves on the desktop
when scrolling down the page filling the left half of this section
 The sections underneath this are focused on specific topics, with one on fashion,
and another on news, the thumbnails for these articles are smaller than for the
ones above, but the spacing between them remains consistent
 All the titles for different sections feature a small grey bar above them to
separate them from the content above and are aligned left

11. Readers Digest -
Website
 At the top of the page is a menu bar written in a bold sans-serif font, the
subscribe button is coloured red causing it to stand out from the other
buttons, and it is also the first button in the row
 The masthead is centred below this in a larger serif font under which is a
button to claim free content from the magazine with both the logo and
button being aligned centre
 A menu with the magazine’s different categories is found beneath this in
a bold sans-serif font which is large than that Is used in the top menu
 The articles of the magazine are surrounded by a large advertisement
box which moves as the reader scrolls surrounding the page boarders
 Important buttons are highlighted with bold colours
 Larger articles are made prominent on the page by the use of bold
colours or size with articles being arranged in rows, each with four
articles, with one main article taking up a whole row at the top of the
page

12. Vanity Fair - Website
 The masthead is found at the top of the page in a bold red colour. It is aligned centre
and uses a sans-serif font
 Across from this, aligned right is a small red singing button, as well as a search button
marked by a small, black magnifying glass symbol.
 Below the masthead is a row, separated from the page by thin grey lines. In this row,
there are links to different topics covered by the magazine
 Under this is an advertisement box which is aligned centre. Beneath this advertisement
box is another row, this time separated by two thin black lines, with and Vanity Fair logo,
and information about a spring sale, with a call to action in the form of a link to
subscribe today
 The top section of the page is for general articles which vary in size and are arranged in
two columns. Her articles are separated by more thin black lines, with articles each
having a thumbnail, tag, description, and author displayed.
 To the right of this section is a column titled top stories which displays four stories with
only their title and author displayed
 After this articles are organized into different sections, With only the titles being
separated, once again through this use of thin black lines. Her articles are found in rows,
with the section’s title being aligned centre
 Red accents are used throughout the page to add contrast
 Throughout the page a mixture of both serif and sans-serif typefaces
 Advertisement boxes on the page that are either aligned centre or aligned right and
scroll with the page

13. Codes & Conventions - Website
 The masthead should be displayed clearly at the top of the page and should be aligned left or centre
 The pages menu bar should be above, below or in line with the masthead
 The subscribe button should be highlighted by a colour box or capsule towards the top of the page
 There should be easy-to-access links to different topics covered by the magazine
 Articles should be arranged in either rows or columns
 More important articles should be larger than others taking up a large portion of the page
 Articles should have shot descriptions or captions under them to provide more information outside the thumbnails
 Articles should be sorted into different sections, with large titles, aligned left or centre
 Thin black lines should be used as dividers to separate certain content
 Advertisement boxes should be aligned centre or right, and moving boxes can be used to make the pages more dynamic
 Accent colours can be used to add contrast to certain parts of the page