My Content Management report on ‘Online Communities & Forums’ is now available on my coursework website.
The presentation slides are on Speakerdeck.
Revised elevator pitch, moodboard and initial mockups now on my coursework website:
Feedback welcome as always.
Typography – 5 websites
Last week we looked at examples of print as static, animated and interactive.
Here are some websites to discuss next week –
An original approach to positioning of text and rollover effects.
Type that demands a user response
Good use of typography to communicate the brand.
Good spacing for legibility.
Four fonts used on the home page – too many?
No rollover effects on main menu – does there need to be?
An app with text which animates with music in response to the user.
Typography draws on historical design to create a brand theme.
Two examples of animation with text used for link rollovers.
Grids in Web Design
Beaird, J. (2007) The Principles of Beautiful Web Design. Australia: Site Point Pty. Ltd.
Boulton, M. (2009) A Practical Guide to Designing for the Web. UK: Mark Boulton Design Ltd.
Boulton, M. 2009, “Five Simple Steps to Designing Grid Systems” (online) available at http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1
Brauckmuller, C. 2010, “Grid Based Web Design, Simplified” (online) available at http://designinformer.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/
Friedman, V. 2007, “Designing with Grid-Based Approach” (online) available at http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
Hodge, S. 2008, “Grid Based Design: Six Creative Column Techniques” (online) available at http://www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/
Miller, B. (2011) Above the Fold. Canada: HOW Books.
Miner, W. 2007, “Setting Type on the Web to a Baseline Grid” (online) available at http://www.alistapart.com/articles/settingtypeontheweb/
Reichenstein, O. 2007, “The Future of News: How to Survive the Media Shift” (online) available at http://www.informationarchitects.jp/en/the-future-of-news-how-to-survive-the-new-media-shift/
Rutter, R. 2006, “Compose to a Vertical Rhythm” (online) available at http://24ways.org/2006/compose-to-a-vertical-rhythm
Snell, S. 2008, “Newspaper Web Design: Trends and Examples” (online) available at http://www.smashingmagazine.com/2008/11/11/newspaper-website-design-trends-and-examples/
Vinh, K. (2011) Ordering Disorder: Grid Principles for Web Design. California: Peachpit.
Grids in web design
In this critical essay, I will first explore the origins and principles of the grid in design, then discuss why and how grids are used by web designers. I will then evaluate the use of grids for the design of online newspapers, making observations of several newspaper websites. I chose to focus on newspapers because they are so historically rooted in the grid as a design tool and because the volume and complexity of their content is challenging for the web designer. (I didn’t realise how challenging until I got halfway through this essay) I will evaluate the impact of the grid layout on the organisation and visual hierarchy, user experience, and image and branding.
The origins and principles of the grid in design
The design grid goes back a long way in the history of art and design and today we are surrounded by its legacy in architecture, landscape, fine art, graphic design and now screen based media design. The design principles behind the use of the grid in art and design go back to mathematical theories of ratio and proportion. The much used ‘rule of thirds’ is derived from Pythagoras’ theory of ‘The Golden Ratio’, or ‘Divine Proportion’. Renaissance artists used this fascinating rule that is found in nature to create aesthetically pleasing compositions. Today, these rules are taught and applied universally by designers.
The Dutch painter Piet Mondrian (1872–1944) explored proportion, harmony and rhythm through his famous grid paintings.
“I believe it is possible that, through horizontal and vertical lines constructed with awareness, but not with calculation, led by high intuition, and brought to harmony and rhythm, these basic forms of beauty, supplemented if necessary by other direct lines or curves, can become a work of art, as strong as it is true.” (Piet Mondrian)
The web designer’s grid
The web designer’s grid is used to create beauty and to enhance the function of the website. The grid acts as a framework to contain all the elements of a web page, whilst enabling the designer to place all the elements into chosen spaces. Through this process of placing elements into the grid, the designer can focus on creating symmetry or asymmetry, harmony, balance, emphasis and unity. The space between elements is as important as the positioning of the elements themselves, as it allows the layout to ‘breathe’ and creates flow between elements. As well as meeting aesthetic requirements, the web designer’s grid is used to address the technical, business and content requirements of the website.
The grid is made of units which are then grouped into columns. A region is a horizontal portion of the grid which is made up of 1 or more columns. Portions of each region can then be divided up horizontally into fields. One suggested approach is to use the golden ratio again to divide the height of the grid into fields. This can be calculated by dividing the width of the page (960) by 1.618 = 593, so that the page could be divided vertically into fields of 593px each. However, this idealistic approach would rarely be practical for accommodating images and written content of varying size and length.
Web design grids are most commonly made of 12 or 16 columns. These numbers allow for the designer to easily apply the rule of thirds and to create symmetry.
The grid and the design process
A typical (but flexible) web designer’s workflow when working with grids:
- Research and plan the content, constraints and requirements of the website
- Create wireframes
- Preparatory design – pencil sketches and calculation of units, columns and baselines
- Comps / mock-ups
At this essential stage in the design process, the designer must consider whose workflow will also be affected by the chosen grid layout:
- The user: The grid should guide and inform, but not dictate the user’s decisions. The grid should inform the user of the hierarchy of importance and organisation and location of the information it contains.
- The designer: A well planned grid allows the designer to place content into a space which accommodates it well, whilst creating visual balance and aesthetic beauty.
- Content creators: They need to know where and how their content will fit into the pages and may need to supply images of a certain size
- Coders: A well designed grid will be logical and systematic for a coder to work with.
Khoi Vinh (2011) argues that the design of a web page grid should always begin with defining the function, problems and constraints of the page. By first solving the practical problems and allowing for the inevitable constraints of the web page, the designer can then continue to design the page within the grid, paying attention to aesthetic desires. “Form follows function”, as somebody once said.
The typical problems and constraints that a web designer will consider when beginning to design the layout grid are usually technical, business and content related.
Khoi Vinh illustrates a blog design case study where he begins with the constraint of an advertisement unit of 336px wide. He calculates the number of columns that the page can be divided into in order to accommodate the advertisement, then continues to divide the page into regions and fields to accommodate the rest of the content. At first, this seems like a very mundane starting point and far from the lofty design theories of Pythagoras and the golden ratio, but actually his logical approach serves to solve problems first, so that the designer is then free to explore aesthetic possibilities.
The illustration below shows how in this case study, Vinh uses the constraint of the advertising unit to calculate the ideal number of columns for the page and establish the first region of three columns width. With this first region in place, he can then focus on how other content will relate to this in size and position. Mark Boulton (2009) supports this approach: “These elements (advertising units) are constants. The size of these elements are fixed, and will not change over time so they are a safe starting point for us to design the grid around.”
The baseline grid is as essential as the vertical columns. Designers plan a baseline grid to ensure that typography is spaced in such a way that legibility is optimised.
When setting the baseline grid the designer must consider:
- How the baseline grid will guide the line height of text. The line height should always be as high as the main body text, eg text that is written in font size 13pt needs at least a 13pt line height.
- The human eye most comfortably reads between 50 and 80 characters per line (opinions differ). The ‘line measure’ sets the number of characters per line and must take this into consideration.
- Space between headings and main text – you may choose to base the size of margins on the baseline grid, perhaps differing between ‘heading1’ and ‘heading2’ headings.
- Paragraph spacing – you may choose to leave one or two of your baseline grid lines between each paragraph.
- Use of white space to allow the layout to ‘breathe’ and sometimes to emphasise.
- Best fit for the chosen typeface, font weight and style.
- The desired size of headings in proportion to main body text.
Online newspaper website grids
Online newspapers are a particularly challenging genre of website for designers. This is because they are so content heavy and so frequently updated. They also require quite complex information hierarchy and organisation of content, with articles often categorised in several ways, such as most recent, most viewed, or editor’s choice. In addition to this, there are now social media links and user generated content to fit in.
Mark Boulton cites the three threats and three opportunities that the design agency iA identified in their article, The Future of News’ (Reichenstein, O. 2007).
- Lower reading experience
- Losing journalistic quality
- Severing cultural roots
- Optimised reading experience
- Improved democracy
- Historic development
Khoi Vinh’s trial and error process starting with the constraint of the advertising unit is one good approach for designing a newspaper grid, since standard sized advertising units are almost always used on newspaper pages.
Other constraints and considerations which may determine the layout of columns, regions and fields for a newspaper are:
- The visual hierarchy given to articles; for example, will a single large and dominant region be reserved for the main headline stories?
- Is there a fixed standard size for the front featured photograph?
- Which content must be ‘above the fold’? Usually main headline articles, image and navigation.
- Will articles be organised into lists of most recent, editor’s choice, or most viewed? How prominently and where must these lists be contained?
- Are images and videos contained in separate regions or fields? Some newspapers now have a video or ‘pictures of the day’ section.
- Number of ‘supplementary’ categories such as sport, finance, travel, fashion, education, etc. These sections often need to be visually unified as they are separate, but belong to the same ‘level’ of information hierarchy; below the main headline articles.
Below are some observations I have made about the grids used in the design of the home page of several online newspapers.
The Guardian uses a 12 column grid layout, with the left-most and middle regions of equal width accommodating the main headline article and image above the fold. There is a pattern from left to right of four regions, made of four then two and another four then two columns. The instinct of the user to read from left to right is considered by placing the priority headline news articles in the left-most column.
The red caption bar is a good example of block colour used to emphasise key content. Red is also used effectively in the ‘News’ tab of the main navigation bar to orientate the user.
Underneath the central featured image, the second region from the left contains a one column width list of photographs with drop down headings. It is difficult as a user at first glance to ascertain what this column is for, but its narrow width compared with the main headline articles on its left indicates that they are articles of less importance, although the use of thumbnail photographs makes them eye-catching.
In all regions except the narrowest second region, the horizontal fields are marked out by a medium weight, solid red line. This use of colour and line creates some familiarity and unity between the regions.
The right-most column is used for non-news items and advertising. It also features the ‘Today’s Paper’ and ‘On this site’ navigation lists, which are below the fold and not where the user would expect to find further navigation. Each field in this column is approximately the same height and has the same solid red line top border, which unifies them and creates continuity down the page.
The two-tier navigation bar along the top is at first a little confusing – they look as if they serve the same purpose, especially as both begin with ‘News’ as the first link. Actually the bottom navigation bar is a subset of the ‘News’ selection on the top bar.
Overall, the grid succeeds in bringing order, hierarchy and definition to the many editorial categories. Advertisements sit easily inside the grid, without distracting the reader. Although the grid has good vertical rhythm, as a user I found it less easy on the eye to scan across than to scan down. This proves how important it is for online newspapers to establish and maintain a grid layout so that regular users become accustomed to it and know where to look.
The Telegraph layout is also based on a 12 column grid. The 12 columns are split into regions of 5, 3 and 4 columns above the fold, where the headline stories are contained in the left-most and widest region.
Then below the fold, an editorial content field is created, in which the 12 columns are used cleverly and rhythmically to divide the page into regions of equal width for each editorial category.
The Telegraph logo is positioned to the left, over the widest region which contains the headline articles. This draws the user’s eye down naturally from the heavy, bold typeface of the logo to the headline articles. The logo is uninterrupted by the banner advertisement, since the two are divided by a medium weight solid black line.
The primary navigation bar which sits under the logo is well emphasised and easily identified, by its inversing of the black and white text and background. This also serves well to separate the branding area from the rest of the content.
Consistent margin spacing and thin dotted borders are used successfully to help the user distinguish between regions and fields above the fold. Below the fold, the separate editorial category regions and fields are made easy to distinguish between by the use of colour and pattern above each heading.
I think the Telegraph is one of the best examples of rhythm being achieved through its use of the grid – a natural ‘flow’ is created below the fold, where the page is divided first into 2, then 3, then 6 regions. The baseline grid also seems to have been used more successfully to help align text horizontally across the page.
The Daily Mail
By now I am seeing an online newspaper convention emerging – the Daily Mail also divides a 12 column grid into three regions, with the priority headline article on the left and the feature image in the centre.
Of the newspapers that I have looked at so far, it is one of the most symmetrical and least demanding of the user. Interestingly, no border lines are used at all to separate these regions; it doesn’t seem necessary with such a simple and consistent layout.
One main difference is that the right-most column features solely and almost to the bottom of the (incredibly long) page the ‘Femail Today’ headlines with images. This decision was obviously made due to the strength of interest that users have shown in the Femail editorial content. Whilst the main bright blue colour is used consistently across the page to identify headlines, two other shades of blue are used to promote the ‘Comments’ and ‘Add to My Stories’ functions and to clearly distinguish the Femail section. The Daily Mail seems to be ahead of the more traditional broadsheets in this aspect. Snell (2008) acknowledges in his article ‘Newspaper Web Design: Trends and Examples’, that “a growing number of news websites recognize the impact of social media, but they are still using such tools subtly in their designs.” He compares newspaper websites with their closest genre, blog websites and observes that “Most news websites do offer feeds, often according to category of content, but they’re not a major part of the design or layout. In fact, most visitors probably don’t even notice the small icons or links to feeds. As RSS feeds become a part of the daily lives of average readers, this will probably change.”
The layout is sufficiently flexible to allow for regions of varied column widths across the page, below the fold. Image sizes are used very consistently, which creates continuity down the page, especially down the Femail column.
The New York Times
Since it belongs to the most grid-based city in the world, you would expect the New York Times to be one of the prime examples of an effortless, logical grid design. Surprisingly it isn’t – until you scroll below the fold.
The branding area is I feel, a little compromised. The two small advertisements on either side of the logo sit clumsily since they don’t align with anything else in the grid and they detract from the impact of the logo. Although the red ‘Become a Digital Subscriber’ call to action button is well emphasised, it is placed clumsily, rather than thoughtfully offset. The ‘Get a Full Times Experience’ tagline is presumably supposed to relate to the subscription offer, but at first glance looks more like a weak, second branding header, which is confusing. I also feel that the logo would look a lot stronger if the font size was considerably larger than the main top news headline.
Above the fold, I struggle to find any aesthetic beauty, rhythm or ‘rest’ in the layout. It is clear that all the navigation links I need are to the far left in the first column. I guess the main headline stories are in the middle, widest region, although as I scroll below the first article, the region divides up again into two regions of unequal width, with no easily identifiable purpose. Furthermore, there are inconsistencies in font size, case and line height. Generally the baseline grid, if it exists, does not seem to be holding the flow of the text together across the page. A random large white space in the far right region suggests some disorganisation of content too.
Finally, as I scroll further down to the ‘Inside NYTimes.com’ field, I find some symmetry and rhythm. Suddenly the grid is simple and easy to navigate, like the streets of New York. It’s just a shame I had to scroll down that far to find a working grid.
Online newspapers are a very challenging genre of website for the web designer. Content is large in volume and updated several times a day. There are so many constrictions and problems that it seems that little opportunity is left for consideration of aesthetic beauty. It also seems to be important that the newspapers closely represent their hard copy counterparts, in order to create users’ recognition of the brand online. Therefore the grid is also constricted very much by users’ expectations and the traditional conventions of the newspaper genre. Already, some of the newspapers (many of which are not reviewed in this essay) are evolving to accommodate web 2.0 features more overtly, for example the comment links in the Daily Mail. Online newspapers need to continually evolve in order to adopt new web 2.0 features such as user generated content and multimedia elements, but they must evolve with subtlety and at a pace that does not alienate the reader.
…More tweaking going on here.
Following up on comments at the crit session with Prisca, I’ve added a bit more ‘glow’ to the red and blue speech bubbles to help guide the user to them, as they link to the other two pages.
Also had fun with the neon effect on the ‘Secret of the Unicorn’ heading.
I tried a charcoal grey colour and black sugar paper background, as some found the black a bit harsh, but it really doesn’t work with the neon or the cinematic look I wanted.
I’ve centred the Rio logo above the ‘Adventures of Tintin’ stripe as suggested and edited down the text there to make the page less cluttered with text.
What I really want is for the circular image of Tintin running to change to the original drawing of this image on rollover. Working on a sprite solution now.
On the ‘About the film’ page, I’ve lined up the icons so they sit in a straight line, as suggested. I think they could do with rollover image changes too – maybe a glow around each icon on rollover?
Any suggestions (especially about how the navigation works, or using sprites) are very welcome.
Just had another look at my old Smiths the greengrocers website – felt a bit like looking at your old sketchbook from school and thinking, “I used to think that was good, now it looks rubbish!”
If I was to start all over again, I’d design it very differently now, but since I didn’t want to start again, I made a few improvements.
AND THE NEW:
The most important thing I’ve learnt through coming back to a website to improve it is how it’s important to do all your visual experimenting in the mockup, rather than continually redesigning by tweaking the code. Next time, I intend to spend longer on the mockup and make sure I’ve tried more design options before I start coding.
I had used Georgia for all the headings and main text, but looking at it again, I thought it seemed a bit ‘booky’ for a greengrocers. I changed the headings to ‘Rokkitt’, which is a slab style Google webfont. It complements the font used in the logo better and looks more modern. For the main text, I just went for nice neutral Arial, since Rockitt has a lot of shape and style.
Looking back at the way I’d used divs separately with the background showing through between them, I just thought it looked a bit odd and disjointed, so I merged the divs together visually with a cream background instead of white. Using off-white colours instead of cream can make a big difference and create warmth or just look less harsh.
In the last crit session on this website (seems like years ago), David commented that my call to action boxes on the left sidebar didn’t really look like calls to action, or even links. Hope they do now!
I also had to clear up some ‘id or class’ issues. I had the main content div on each page with an id by the same name. Since it’s copied onto each page, it should have been a class.
Well, that’s all for now. Onwards to the next project, I’d say.
Today I dug out my notes from our last website makeover crit session. The website I’ve redesigned is www.madameoiseau.com. My version is at http://www.priscillawdesign.com/webpage/madameo/index.html.
I’ve done a bit more tinkering to my chocolatier website, in response to people’s suggestions –
- Slightly redesigned the logo -reversed the yellow and purple background and foreground, so that it looks less washed out and the name is more prominent.
- Enlarged text on the main navigation links along the top.
- Made the side navigation links look more obviously like navigation links, by changing font weight, hover states and adding bottom margins.
- Added the JQuery Nivo image slider, with a couple of hitches along the way. Then re-sized all the images again because I wanted them to have even more impact. Decided against putting any text or caption over images, as it might clutter things, with the tagline already above and a heading below. Obvious what they are, anyway.
- Added the photo of Madame Oiseau herself – this makes the business seem more personal and adds interest I think.
- Changed the facebook and twitter icons for less ugly ones.
- Added more navigation to the footer so users can find products with fewer clicks.
Other bits and bobs – still looking for a better background image / pattern. Would like to make a feature of Christmas / Easter / Halloween products at the relevant times of year.
Any suggestions welcome.
Great day yesterday at our Talk Web event – what a privilege to get all that inside information and advice from industry experts.
Before I go and forget what I heard, I’ve made a list of interesting things to follow up.
Kerri-Anne Ellis, Front End Developer at Pirata:
- Find out more about API’s and Facebook tags – these are a big thing at the moment.
- Try out some media queries for responsive design.
- Pay some attention to my portfolio – seize opportunities to add personal projects and say more about my interests and skills.
Rob Hawkes, Web Technology Evangelist from Mozilla:
- Use www.caniuse.com to check out browser compatibility for html5.
- Get cracking with some html5 coding!
- Check out Popcorn.js – for creating a timeline to display text alongside a video – might have some use in my thesis website.
- Also look at the SublimeVideo – html5 video player.
- HTML5 Canvas – find out more about what it can do and if it would add some fun and function to my kids’ website.
Andy Hume & Paul Lloyd, Clearleft:
- More emphasis on the importance of responsive design and how to use media queries and fluid layouts.
- Liked the point they made that basic html has always been responsive – we just all complicated matters by adding so much to the presentational and behavioral layers.
- pt and px are for print; % and em are for responsive web design!
- Always design layout from the content out. Don’t just get into the habit of recycling a layout design you made earlier – think bespoke tailoring.
Richard Rutter, Web Typography Evangelist, Clearleft and fontdeck.com
- Web design is 95% typography: discuss!!
- The browser default is your enemy!
- Use proper markup for punctuation to improve legibility and aesthetic quality, eg “, not just “.
- Try out the WordPress Typography plug-in.
- Find out more about ligatures and how to apply them in css, eg text-rendering:optimizeLegibility;
- Think about how to make the best use of a single font – liked the Times New Roman only slide, showing how much can be achieved with font-styles.
- Find out more about font-feature settings – these can make a big impact. Many woff fonts have built in style sets.
Andy Budd & Jeremy Keith, Clearleft:
- Lots of good career advice… time to get a bit more focused!
Phew… information almost overload but lots to think about.
Finally my makeover website is all uploaded and linked to my coursework page. zzzzzzzz………..