Anyone that has ever used word processing software has the ability to arrange content on a page. Most non-designers will be familiar with headers and footers and a select few will even know what the term "body text" means, and most beginners will not know what a "pull quote" is used for. When it comes to being a design professional, page layouts and the use of typography can become far more complicated, so it is important to have knowledge of advanced layout and typographical terms which can visually transform and improve any design if implemented appropriately. We take a look at 10 Advanced Web Design Layout & Typographic Elements as well as analysing some creative examples.
To accompany a headline and to give a short introduction to the forthcoming content, a designer will often use a standfirst which consists of one or two sentences so to not give too much away but to grab the readers attention and to encourage them to read the whole content. An effective standfirst should be set in type that is larger than the main body of text but smaller than the main headline. Articles are becoming a more prominent feature of web content which is why standifrsts are becoming more recognisable and commonplace.
37 Signals – a simple method of encouraging the user to continue reading the content.
Andy Rutledge – the contrast in size to the header causes intrigue.
Wilson Miner gives the summary emphasis by placing it into its own column.
The Morning News makes good use a typical magazine styling.
Webstock uses a similar approach but set in italics for added emphasis.
Quotations come ina variety of forms, be it pull quotes, citations or block quotes, each are used to highlight important excerpts of content. The rise of the blog article has seen the pull quote make the jump from the world of print on to the digital screen. effective usage and styling of quotations can grab the reader’s attention from the main body of text, which is commonly achieved by being set in a larger typeface in comparison.
Whooray Records – here the pull-quote is centre-stage.
Quotations Book – multiple quotations unified by colour.
David Ville – a quotation set in a larger point size to the body text.
Valencias Consulting displays a testimonial as the first piece of content.
Kupferwerk – in a style borrowed from the world of print.
Alternatively known as fields, modules are formed by the horizontal and vertical dividers which form the grid. These individual units of space provide the designer with the possible proportions for images, headlines or other layout elements high in the page hierachy. Modular based grids are seen as rigid and give the content of the page a clear sense of order.
Burger King – modules employed for a unique method of navigation.
Typeneu uses all of the available grid space.
Work Club – a more familiar use of modular based layout.
Hello Monday uses modules to display image.
Fudge – an interesting layout that draws the eye to the featured content.
In web design, typography is often overlooked. A new trend to give type added distinction is to add intricate illustration and decoration. This can be achieved by either integrating the typography into the background styling or by giving it a unique characteristic as a design feature
Hypr illustrate their typographic logo differently for each page.
Comcast Town – type set in a 3D user interface.
Starbucks Coffee At Home – added decoration is made visible via roll-overs.
Skima – type as part of a fantasy landscape.
Art Concept – large decorated type as the main focal point.
Matt Mullenweg uses important information incorporated into in illustration.
The Single-Column Grid
The usage of single-column grids is seen prominently on blogs. Viewed as a means to effectively give emphasis to simplistic content, the single column does not distract the viewer from the main content, which can be a problem with content heavy sites that uses many columns for layout. Naturally, the single column requires that the user has to scroll to read all of the available information.
Mancub – familiar stacked content in a single column.
Iemai – a single column to represent continuous content.
Teh C Peng – a larger than average column.
Cabana uses a retro, very narrow column.
Clemente – images is used to define the column dimensions.
When the first letter of text is set in a much larger size it is referred to as a drop capital. A drop capital is commonly aligned with the top of the column and can be the same height of several lines of text. When aligned to the base of the first line it is referred to as a "Standing Capital". The drop capital doesn’t have to be set in the same typeface or colour as the main copy in order to gain attention. This typographic style first came to light in ancient scriptures where Drop Capitals were heavily illustrated and decorated. Today, more and more designers are using drop capitals in the design of websites to mimic the world of print in a digital environment.
What Katie Does uses a subtle drop-capital that adds unique detail.
Darren Hoyt – aligned to three lines of body text.
Estate Black – a larger drop-capital aligned to 5 lines.
Rodriguez Velasco uses colour to further enhance the design element.
Great Works – to symbolise the brand image.
We are used to seeing the typical layout of a website aligned to the top centre of the page or with very small top margin. Designers are pushing the boundries by using extreme margins or different styles of alignment to give more of a sense of rebellion against the norm. Flash plays a major factor in the usage of this design element due to its capability of maximising the available screen area.
Orange Label gives the strapline room to breathe.
End Communications – here the content is displayed before the navigation.
OLA Interactive Agnecy content aligned to the bottom of the page.
Vivified – content right-aligned.
Ayaka Ito allows maximum space for illustration as opposed to content.
Extreme Display Type
Any text that is set in a larger size to the body text is deemed to be classed as display type. In some cases designers have taken display type to the extreme, by setting it in an enormous size and in some cases featuring it as the main focal point. An effective usage is for creative straplines or unique messages that can instantly grab a visitors attention.
Big Cartel use extreme display type for their strapline.
Carsonified – larger type to communicate a unique message.
ESPN Magazine – the type-based logo is given greatest prominence.
dConstruct – essential event details set in a large size.
IAAH – uses larger set type in abundance.
Content is said to be king, after all the purpose of a website is to display information. Visitors to websites, especially creative folk, often overlook the content on offer and focus upon the style. The perfect way to marry the two principles is to use creatively typography solely as the design element, which can encourage the user to read the content whilst still forming an aesthetically pleasing solution.
Quipsologies cleverly uses different typefaces to guide the eye around the page.
YOU – ultra-minimalistic to force the viewer to read.
Joshua Distler arranges typography into given coloured categories.
Sold-Out uses type only to display a wealthy number of links.
The Grid System practices what it preaches.
Breaking The Rules
With the rise of accessibility issues and the increased implementation of standards, particularly in CSS & HTML, you could argue that more restrictions than ever are placed upon todays web designers. However, as web design trends continue to be overlooked and the use of templates seems to be gradually increasing, the challenge to break outside of the structured grid has been laid down for todays creative web designer.
Basil Gloo gets inside a unique layout.
Davor Vanejik uses a staggered layout as opposed to inline.
Jeremy Levine – navigation that puts complete focus upon the content.
The Horizontal Way surprises the user with an allternative scrolling approach.
BootB – innovative navigation that certainly breaks the grid.