Archives
-
Latest
-
Popular (7 Days)
-
Popular (30 Days)
-
Popular (All-Time)
Tweets
World Cup Latest News
- graphic, layout design
- XHTML/CSS template coding
- W3C-validation (XHTML 1.0 Strict, CSS 2.1) upon delivery
- cross-browser testing (Chrome, Firefox, Internet Explorer 6+, Opera, Safari)
- favicon creation
Home Page template, Click-through template, Listings template
Notes
I re-designed the client’s PHP-based site, an aggregator of soccer articles from various sources around the Web. I then coded XHTML/CSS templates for the home-page, a general-listings page, and a specific-article page.
Layout
The grid for the home page is inspired by the Mancester City FC website. I think that grids with symmetrical blocks are an effective way to show a lot of information. The 3-by-3 grid is perfect for this site because there are eight qualifying groups in the World Cup finals, and the remaining grid block is used to show popular content.
The inner pages have three asymmetrical columns. The widths of the columns are based on the importance of the content within them. Instead of the usual main-column-plus-sidebar layout, a third column exists because the main column is relatively narrow for readability purposes. More specifically, the main column is only wide enough to fit about 60 characters per line. This measure is narrower than typical ones, but it still fits the 50-80 character range that’s widely considered to be ideal.
Design
I created two different designs. The other design featured a background with a globe-ball image and pastel versions of South Africa’s team colours, green and yellow. The content area was more subdued with a mostly black-on-white scheme.
The chosen design, on the other hand, was inspired by the official World Cup site. I also looked at archetypal portrayals of sub-Saharan Africa in popular culture. More specifically, I tried to get inspiration from the visual branding of The Lion King, Resident Evil 5 and Far Cry 2.
The background of the live site is a texture photo that’s been combined with a red-orange gradient in Photoshop. The figures are just vector drawings that I’ve done in Illustrator. The colour scheme of the entire site is based on a user-created, Adobe Kuler set that’s aptly named “savannah.”
Navigation
The main links in the navigation menu are images of text, and the font is #44 Font. This font is also used for the headings of grid blocks and columns. The downward-pointing arrows serve the purpose of hinting toward the hidden sub-menus.
The sub-menus use regular text, and they include country flags to help the user to locate teams and groups more easily. The flags are CSS backgrounds to take advantage of browser-caching; they’re re-used throughout the site. The clickable area of each sub-menu link is expanded using the display:block CSS attribute value. The expanded block around each link is highlighted to let the user know that s/he can click the block around the text and not just the text itself.
I had planned to use a single column for the Teams sub-menu, but it would’ve been really long with the 32 teams. Instead, the list is divided into two columns to make it easier to scan. Despite my template, the live sub-menu is organized by group name. This organization isn’t obvious though, because the links alternate between the two columns. In my template, the teams had been alphabetically listed with the left-column filled before the right-column is filled. This organization would’ve been more user-friendly because, besides die-hard fans, most users wouldn’t initially be familiar with the eight groups.
Grid Blocks
For readability, the articles within the grid blocks are well spaced from each other and have dotted lines (ie, CSS borders) to separate them. Like the navigation sub-menus, the article links are coded via CSS to be block-level elements. As a result, they have clickable areas that extend beyond the text part of the links. Besides being bold, the article headlines are slightly larger in font size than the info about their source and recency.
The headings have a darker background to give them more visual weight than the navigation menu. The headings and the main navigation links use the same font, but they’re different colours. Hopefully, this distinction prevents the user from assuming that the headings have the same interactivity as the main navigation links. The flags help the user to locate his/her favourite team(s).
Main Column
Whenever the user clicks on an article link, s/he is taken to another page that has the actual links to the external source. These external links are a darker colour to, again, given them more visual weight than the standard, internal links. I’ve used a variation of the classic typographical scale to create a clear visual hierarchy. The headline of the desired article is the largest in size: because it’s the most important element, it should be significantly larger than everything else on the page.
The sub-headings of the main column aren’t links, so they’re italic as well as bold to differentiate them from links, which are styled with only a bold typeface. As a Web user, one of my pet peeves are non-links that resemble links on the same page and vice versa.
Tertiary Column
The Most Popular column is the narrowest and its content has smaller font sizes compared to the main column. Instead of being beside each other, the main and Most Popular columns are separated by the widget/ad column. The FIFA widget adds visual interest to the page and improves the readability of the content columns by giving them much-needed breathing room.
Footer
The eight groups are displayed in separate columns across the footer. Naturally, the footer links have expanded clickable areas that include flags. The group names are bold because they’re links, and they’re also uppercase to give them precedence over the team links. The utility links are displayed horizontally below the page container where they’re noticeable. Their styling, ie colour and typeface, is consistent with that of other links on this site.
Comments are closed.