- Lifestyle magazine websites typically feature a prominent masthead or logo at the top of the page, with menus and buttons below. Articles are arranged in grids or sections with images, titles, and descriptions. Prominent articles may span multiple rows. A mix of typefaces, colors, sizing and placement are used to structure content and draw the eye. Ads are typically centered or aligned alongside content in scrolling boxes. Websites investigated include Esquire, Life and Style, GQ, Vanity Fair and more to understand common patterns and conventions.

1. L I F E S T Y L E
M A G A Z I N E S
W E B S I T E S
C O D E S A N D
C O N V E N T I O N S

2. E X A M P L E S O F L I F E S T Y L E M A G A Z I N E
W E B S I T E S
• Seventeen
• Esquire
• Life and style
• GQ
• Readers digest
• Vogue
• Vanity fair

3. H E A R S T ' S E S Q U I R E W E B S I T E
• The 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. Large title is displayed at the bottom of the thumbnail, and
is aligned centre.
• below, this is the menu bar which features a menu pattern and a small masthead aligned to the left with
links to different categories. Found next to it aligned to the right or a subscribe button highlighted by red
capsule and a sign in button below. This is an additional box with a room for a small advertisement, a
line centre, most of the advertisements on the page or online centre. However, there are a few ads that
are aligned, left and scroll sections of the page Articles are arranged in rows and crates with grids
ranging in from size 2×2 to 4×4 with a row typically containing four articles. A mixture of type faces are
used throughout the page below. The menu bar is one article which is a line centre and takes up the
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 5 of his article was arranged in advice column,
taking up the width of the page.

5. L I F E A N D S T Y L E
• 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 t
• 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 using 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. S E V E N T E E N
• Hearst's seventeen website
• The most, I just 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 or a subscribe button highlighted by a light, pink capsule and a sign in button.
• The pages split into different sections highlights by changes in background colour from light, grey or black
• The light grey section contain for articles organised in a grid for the scrolling advertisement next to them
• The black section contain one large article, taking up the width of the page with a line to centre ad
• boxes separating them
• The section, each have a title at the top aligned to the left
• The most how do use is a serif typeface. However, the rest of the text on the page is sans serif

9. R E A D E R S D I G E S T
• 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

11. G Q - W E B S I T E
• The masthead is located in the top left with only a slim green bar located above it it is in the thick
• and bold type face. The menu button is the subscribe button and a location picker. Are all found on the top road opposite the logo in a smaller narrower and less
bold font .
• Hello, this is a row with links. ( which are aligned to the left.) two different topics covered by the magazine with articles relating to them under which is found an
empty row defined by single light grey line these are aligned left
•
• The titles of each section are aligned left
• The top story section is composed of 2/2. The right half features room for up to 6 articles found in two rows with there being to possible size variations for the
articles play. The thumbnails for the articles are there topic title, author and date the life section of this area contains one large thumbnail for an article which
beach is the same information. This article move on the desktop while scrolling down the page filling the left half of the section section underneath. This is a
section featuring the latest articles from GQ which remain in line with the articles above , although there is a narrow and with the gaps between these articles
remain consistent with those above a small section containing light, grey row is then used to break up the page with both of font anthem now was here being far
smaller than others seem previously, these articles have the description place to the right, the titles on the different sections are separated for the articles through
the use of thin black lines. The page does not use any Serif fonts

13. VA N I T Y F A I R
• 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