| Home | Tutorials |
Information Technology Links
W3C »
The World Wide Web Consortium develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding.
W3 Schools »
Completely free web building tutorials from basic HTML and XHTML to advanced XML, SQL, Database, Multimedia and WAP. An essential resource for those studying web development.
Jakob Nielsen »
Dr. Nielsen is an author, researcher, and consultant on user interfaces, especially Web usability, Web design strategy, and user-centered methodology. His internationally renowned "alertbox" is an invaluable resource for all website designers.
NASA Website - April 2007
Coca Cola Website - April 2007
On sub-conscious and conscious levels, different shapes, and their placement or orientation, arouse emotions which have influenced culture for thousands of years. For this reason shape and composition are a major component of art and architecture. In web design, the choice of shapes, in conjunction with colour, can have an important impact on how a product, company, or service is interpreted by the viewer. Geometric shapes are the easiest for us to recognise and understand, but that is not to say natural or abstract shapes do not play an important role in our perception either.
The NASA website (top left) is an example of the most popular choice of shape on websites – rectangles and squares. We consider the square to be a familiar shape that we can trust. It denotes order and stability.
On a daily basis we encounter rectangles through books, newspapers, and most other mediums of correspondence, and within these mediums the text is generally set within rectangles also. As such, the majority of websites which cater to news or educational content employ rectangles and squares to convey their message. The layout provides an uncomplicated and organised environment for the reader to recognise and locate the information they require.
The orientation of familiar geometric shapes can change how we perceive them emotionally. The current Coca-Cola website (bottom left) is a good example of this. Using tilted squares and rectangles, the site is still easy to navigate, yet offers a more modern, fun, and lively atmosphere to its youthful target audience.
Product identification is fulfilled mostly through our familiarity with the product. The base colour, the logo, and also the coke bottle shape are popular cultural symbols which are easily recognisable.
Using unfamiliar shapes, combining an assortment of shapes, or approaching the layout of shapes in an unexpected way, can be risky if it is not done carefully.
Let us look at the SweetCollect website (top right) as an example. The company offers lollies as reward to members who complete surveys, view advertisements, or sign up to various offers. The designer is attempting to relate to the pleasure and joy associated with lollies by using a mixture of colours, shapes, and unpredictable layout, but ultimately the result is rather unappealing.
There is little consistency of colour and the majority of focus is on an oval containing an image which has no correlation to the business. Immediately below is an awkwardly placed rectangle. Navigation is all over the place, also as a variety of shapes. This page has a lot of wasted space, numerous shapes, and many cramped objects. The viewer is lost for a place to start and the company is immediately perceived as unprofessional, unorganised, and immature.
With the implementation of CSS and Flash media within the web browser environment, incorporating unusual shapes and layout is no longer restricted by table structure. As discussed with the SweetCollect website, this capability can produce undesirable results. However, it is possible to merge diversity of shape with some success.
Let us now look at the current US website of contemporary entertainer, Joss Stone (2nd down right). This is a bold exploration into the modern world of web development.
With a focus on the younger market, the fluid abstract forms and bright colours attempt to convey the style of her music, which is highly influenced by popular culture of the 1960's and '70s. The use of circles represents free movement, emphasising the theme of the era. It is certainly effective at suggesting the music genre and is likely to grab the attention of the target audience.
The page is unified with the contour of the central box following the curvature of her body. The green and blue boxes positioned to the right, balance the blue hues of her body paint on the left. Opaque radiating circular shapes help to combine the main elements, add subtle variation to the background, and give the page depth. There is a great deal happening on this page, but the core elements are spaced appropriately and the layout is logical for the viewer to comprehend with little effort. The merging of such a diverse range of items is a rare accomplishment.
Ultimately, when dealing with an assortment of shapes, it appears simplicity is the key. Both the Pantene (3rd down right) and Sweaty Betty (bottom right) websites are good examples of strength in minimalism.
Pantene have repeated the ribbon-like motif of their logo to divide the page elements and create a consistent theme in the promotion of their hair-care merchandise. The green gradient ribbon flows effortlessly through the open space of the page. This supports the idea that Pantene will keep hair shiny, smooth, and tangle-free. The two primary images are similar shapes in mirror, effectively balancing the page layout and tapering towards the text in a subtle triangle. The text areas are contained within squares and rectangles giving order to the information content of the page. The careful combination of free flowing and geometric shapes communicates an approachable, yet dependable company and quality product.
Sweaty Betty, a fashion, beauty, and lifestyle public relations business, successfully combines multiple irregular shapes through minimalism. Each object is a flash link to other areas of the website. The chosen shapes are easy to recognise, and their sparse placement on a metallic bench gives the impression of high class and excellence. The objects taper to a point, forming a subtle triangle. Triangles represent dynamic and progressive action, which is also reinforced by the cheetah skin background. In these shapes Sweaty Betty gives the impression that her services are expensive and of superior quality. In this instance the perception of expense is not a negative, as her objective is to attract only the most affluent clientele.
Disclaimer: Third-party website screen-shots are copyright of their respective owners and this tutorial is not endorsed by any of the companies discussed. The third-party copyright material appearing as part of the Reanimated Residue tutorials complies with the fair and acceptable of use principles established in US and International copyright law for the purposes of review, study, critique, and news reporting.
Reanimated Residue Forums »
Need help with your course? Discuss information technology, visual art, cultural theology, and much more at our community forums. Visit ...
Sweet Collect Website - April 2007
Joss Stone Website - April 2007
Pantene Website - April 2007
Sweaty Betty Website - April 2007
