This work is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.

I’m excited to introduce my CSS Zen Garden. As well as completing this assignment for my university studies, I also intend to port some elements of the design to the Free Trappers website that I work on. Hopefully it suits the pre-1840 era of mountain men and fur trappers for the group involved.

I’ve wanted to make my own CSS Zen Garden for ages. In making this garden, I’ve definitely expanded on my skills in Photoshop, Dreamweaver, and especially Fireworks. Filters > Other > Convert to Alpha – is the best process I found for treatment of the photographs. An understanding of what the HTML id and class attributes are, is essential. Along with that, a solid CSS knowledge, and an eye for good design will go far toward creating a good CSS web page.

If you’re thinking this is for you, be sure to:

• make sure you check out plenty of winning designs that have been submitted to the pool – visit all designs for the thumbnail gallery
• learn (what not to do) from bad designs – it pays to spend a few minutes looking at the other designs that didn’t make the grade
• follow Dave Shea’s resources, FAQ, and his posts on the design process and implementation (in the garden)

In general, there are two possibilities when designing on a two-dimensional surface: you can keep it flat, or you can create the illusion of three dimensional space or spatial depth. The illusion of spatial depth can be shallow or deep, recessive or projected.

The size and scale of the shapes or objects play an important role in creating the illusion of spatial depth. The size of one shape or object in relation to another can make elements appear to move forward or backward on the page (Landa 2006).

Some examples of web pages with depth (some more than others):
A couple of these are (slightly) interactive. So check them out:

• http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css
• http://csszengarden.com/?cssfile=http://www.nicolehanusek.com/zenGarden/traffic/text.css
• http://www.csszengarden.com/?cssfile=/165/165.css&page=1

The Illusion of Spatial Depth

1. In Photoshop, turn on your grid (View > Show Grid).
2. Draw volumetric shapes like cones, cubes, and pyramids.
3. Use the grid as a guide for the vertical, horizontal, and diagonal lines.
4. Fill the entire page. Avoid creating flat shapes like squares and triangles.
5. Use gradients to give your shapes a 3D appearance.

Made using Fireworks, my attempt at the illusion of depth, in PDF.

In a successful positive/negative relationship in graphic design, the positive and negative space is interdependent. You are forced to consider the whole space of your design if you consider all space as active forces (Landa 2006). Note how the web pages below use both their positive and negative spaces. You can feel your eye drifting forwards and backwards between the positive and negative to appreciate all the design elements:

http://www.csszengarden.com/?cssfile=/147/147.css&page=3

http://www.csszengarden.com/?cssfile=/156/156.css&page=2

http://www.csszengarden.com/?cssfile=/158/158.css&page=2

http://www.csszengarden.com/?cssfile=/172/172.css&page=0

Letter-forms as Positive and Negative Spaces

• Using your initials, design the letters on an A4 sized page so that both the positive and negative space is carefully considered.
• The letters should touch all the edges of the page.
• The letters may be cropped or reversed.

Using my initials, VF, and Illustrator this time, for the range of fonts and lettering effects, I’ve produced these 3 spaces.

Visual Hierarchy

the arrangement of elements according to importance and emphasis.

The question “What is the message?” needs to be answered before knowing which text and graphics should be emphasised.

Things to keep in mind when trying to design a good visual hierarchy…

In general, people from Western cultures will:

• Quickly scan from upper left to bottom right to get an overview of the screen.
• Tend to look at larger items first and smaller items last.
• Be attracted to bright colors first, but also look at colors that contrast with or are different from other colors.
• Interpret item places above other items as more important than items placed below.
• Look at items that appear “heavier” first.
• Assume arrows and elements pointing to the right mean forward while arrows pointing to the left mean backward.
• Look at moving elements before static ones.
• Tend to look at moving images of another human (such as a video) before moving on to other elements.

(Graham 1999)

Immediately, 2 thoughts come to mind: combining all the above list items into a single design is not going to create a supreme one; What do the other cultures in the world do when looking at designs?

Creating a Visual Hierarchy

1. Draw 7 shapes of varying sizes (can use Photoshop of Illustrator) – Again I used Fireworks.
2. Use colour or texture on some of them; leave some in outline.
3. Decide which shapes should be seen first, second, third and so on.
4. On an A4 sized page, arrange them in hierarchical order. – I still have no idea why were using A4 instead of, say 800×600.
5. Produce five versions. – This has been extremely worthwhile.

Since we are making for A4 size, I’ve attached a PDF of my 5 visual hierarchies and posted my favourite here.

Focal point

The following list contains some of the visual techniques you can use to emphasis the focal point in your visual hierarchy.

• Make it the biggest.
• Make it the brightest.
• Enclose the item in a different shape than that of the other content screen.
• Make the item a different shape that that of the other content screen.
• Add a border to the shape around it.
• Change the color of the item to make it contrast with other items onscreen.
• Isolate it from other items onscreen.
• Add a special effect to it (like texture).
• Make it bright if everything else is dull (or visa versa).
• Make it sharp if everything else is out of focus (or visa versa).
• Position the item so all the other elements lead to or point toward it.
• Animate it (make it blink or change colors, apply a rolling texture to it, or create a looping image animation).
• Use another animated element to call attention to the item.

(Landa 1996)

Creating a Focal Point

1. On a 20cm square format, draw ten arrows that all lead to one point or area on the page.
2. The arrows should be visually interesting; they may vary in quality and texture, and they may bend, curve, or intersect.
3. On an A4 sized page, draw seven arrows that lead to a main focal point and three arrows that lead to a secondary focal point. Make sure the arrows are visually interesting; give them texture, tone, various line qualities, and vary the directions and lengths.

Rhythm Is A Dancer

rhythm

A visual tempo or beat. The principle of design that refers to a regular repetition of elements of art to produce the look and feel of movement. It is often achieved through the careful placement of repeated components which invite the viewer’s eye to jump rapidly or glide smoothly from one to the next.

In any artwork, it is possible to distinguish between rhythm of color, line, and form. In the continuity of the three comes the whole rhythm of that work.

Rhythm unites the visual culture with music, but in visual culture, rhythm is more evident in the applied arts than in the fine arts. In the former, it is often the foremost means of aesthetic expression.

via ArtLex on Rhythm.

Rhythm exercise

On an A4 sized page, create a rhythm with great variation. Use vertical, horizontal, and diagonal lines, dots, squares, and type.

Although creating an A4 page, I used Fireworks to create these rhythms. It seems easier than Photoshop at handling, positioning and aligning a larger number of objects. For text, I’ve attempted both an Eastern flow with the Chinese words for “my love”, and relied on the trusty Lorem Ipsum generator for Western copy.

Draw 3-D objects, like cubes, pyramids, or spheres using your Photoshop or Illustrator tools. Think about where your light would be coming from, and shade in the opposite sides with varying intensities of texture to create the illusion of three-dimensional space.

• http://www.colourlovers.com/patterns/top
• http://www.brusheezy.com/patterns
• http://www.devppl.com/photoshop-tutorials/
• http://www.inaneblabbering.com/photoshoptutorials/?view=list
• http://www.phong.com/tutorials/lightingeffects/

The tactile quality of a surface or the representation of such a surface quality, is it’s texture. While tactile textures are real textures (which you can feel), they can be imitated as illusionary visual textures on computer screens, giving the impression of real life textures.

Graphic designers need to be aware of all the textures available to them. Paper has tactile texture. Inks and varnishes can create tactile textures. Visual textures, including indirect marks like rubbings and blottings, and direct marks like the ones in the following exercise, should become part of any designer’s vocabulary.

A rubbing effect can be made by following this Photoshop tutorial (http://www.escrappers.com/rubbings.html).

Find two online example of graphic design solutions that use low contrast and two examples that use high contrast. Thinking about the word contrast, in noun form, I like these 3: a striking exhibition of unlikeness; opposition or juxtaposition of different forms, lines, or colors in a work of art to intensify each element’s properties and produce a more dynamic expressiveness; Photography. the relative difference between light and dark areas of a print or negative; these definitions can apply here.

Low contrast designs

1. http://www.electrolux.com.br/bluetouch/ Full-screen video coupled with easy-to-understand demos explain the most important features of a new line of products with blue touch-panel technology.
2. http://www.livemountwashingtonresort.com/ With a poised combination of beautiful vistas and concise content, this site provides prospective homeowners with enough information to prompt a phone call to the resort’s sales office.

High contrast designs

1. http://www.patagonia.com/web/us/tinshed This new e-zine for outdoor clothing manufacturer, Patagonia, is loaded with audio, video and written-word dispatches from around the world.
2. http://nikeid.nike.com From sportswear and Nike Pro apparel to Nike 6.0 and Nike, consumers can customize nearly every kind of Nike product on this redesign of NIKEiD—the most comprehensive since the site was launched in 1999.

Choosing a low or high contrast design will depend on both the subject matter, and the intended audience. Looking for inspirational examples, try commarts.com/webpicks first as this collection gives thumbnail previews. Also check webbyawards.com/webbys/current.php and americandesignawards.com/winners-annual.html for other winning examples.

Research these questions from the 3 websites listed below, posting your answers next to each question.

Color Theory, a brief tutorial (Ford 2004)

http://colortheory.liquisoft.com/

Colours on the Web (Johansson 2002)

http://www.colorsontheweb.com/

http://www.colorsontheweb.com/colorterms.asp

http://www.colorsontheweb.com/colortheory.asp

Paint Quality Institute

http://www.paintquality.com/paint-professionals/paint-design/color-trends.html

http://www.paintquality.com/homeowners/paint-design/paint-color/wheel.html

• What colour model does your computer use? RGB
• Where can you see more colours, in print or on screen? Unfortunately, CMYK cannot reproduce the same amount of colors as RGB can, which is why yellow-greens sometimes look a bit muddy when printed.
• What are primary colours? Red, Yellow, Blue. These 3 colours are the base colours for every other colour on the colour wheel.
• What are the primary colours for print? CMYK. This is the method used by printers the world over, and is also a clever way of mixing paints.
• What are the primary colours for on screen? RGB. Remember, this color method is only used with light sources; it does not apply to printing.
• Which colour model is additive? RGB. Any color source that emits the light itself… is built up of tiny red, green and blue dots. This color system is commonly referred to as the Additive Color System.
• Which is colour model is subtractive? CMYK. The subtractive colour system is what comes to play when the color does not emit any light of its own, but reflects light from its surroundings. In the subtractive colour system, you get black when all colours are mixed.

In your own words, define the following:

• Hue – What we usually refer to as colours. Red, green, blue, orange, and yellow are all examples of hues.
• Value – A measure of how much white (or black) is in a colour. A brighter colour has a higher value than a darker colour. To check the difference in value, you can examine the corresponding greyscale versions of colours.
• Saturation – Richness or intensity of colour. Completely de-saturated colours are shades of grey.
• Tint and shade – Variations on an original colour. Take blue for example. Tints, created by adding white, would be lighter blues. Shades, created by adding black, would be darker blues.

What is the difference between each of these colour schemes?:

Analogous

Pairs of adjacent colours on the colour wheel, such as red and orange. The have very little contrast between them. Useful for serene designs.

Complimentary

Pairs of colours opposite each other on the colour wheel, red and green for example. They have the maximum contrast between them. Useful for making elements stand out.

Split Complimentary

3 colours made up of one colour, and the pair of colours adjacent to the compliment of the original (on the colour wheel). For instance, starting with violet you would need to add the two colours adjacent to yellow, i.e. yellow-green and yellow-orange.

Tetrad

Four colours with none adjacent each other on the colour wheel.

Triad

Three equally spaced colours on the wheel. There must be a 120 degree arc between each colour, such as blue – red – yellow.

What are these color schemes used for?
To aid in colour selections that are appropriate for designs to convey the desired messages / emotions.

How do you hold a self-critique?

So here I go practising these critique methods on 3 inspiring designs within the Communication Arts – Webpicks http://www.commarts.com/webpicks/

Photographer Fredrik Clement

http://www.fredrikclement.com/ Instead of hiding them behind a complex interface, the developer of this minimal site placed the images front-and-center in a gratifying full-screen display.

As a photographer’s portfolio, this website does a fantastic job in how it shows the photos unobstructed by interface elements and completely full-screen. A thumbnail film strip appears at the bottom edge of the screen, and contact information slides into view overlaying the top half when the pointer approaches. Left and right sides will preview adjacent images and they’ll slide into view when clicked. It is a simple and highly effective approach to the goal of such a project, and a most appropriate design for the intended audience.

Storyville Coffee Company

http://www.storyville.com/ This site introduces a new, available-only-on-the-Internet, coffee bean retailer. Storyville, equally passionate about perfectly roasted beans and independent artists, conveys its obsession with both in a collective, interactive experience. The continuity of the design aesthetic makes it a flawless brand experience from start to finish.

Visually gorgeous, the site is a highly polished sales project that appeals to coffee drinkers chained to their broadband internet – more customers than you might think. The transition animations, photography and videos, simple and clean layouts, colour scheme, and shop facility all blend together to cohesively complete the experience for caffeine consumers.

USHMM: Propaganda

http://www.ushmm.org/propaganda/ In January 2009, the United States Holocaust Memorial Museum opened a special exhibition titled State of Deception: The Power of Nazi Propaganda, that examines how the Nazis used propaganda to sway millions with their vision for a new Germany. Reflecting the museum’s efforts to keep the Holocaust and its lessons a topic of public discourse, it encourages people to think about how to recognize and respond to propaganda, to understand the potential consequences of it and provokes discussion about responding to hate speech and propaganda today.
Instead of presenting the exhibition in précis, the Web site is a further exploration of themes. It invites interaction with select content enabling visitors to explore the subject, its legacy and its implications in today’s world.
The materials are presented in a range of formats (artifacts, books, documents, moving images, sound recordings, etcetera) and logically organised into themes, a timeline, an artifacts gallery and resources, making it interesting and easy to find important information. The online forums and polls make a perfect platform for interactive expression. As an educational resource, the lessons and exercises are well referenced. The principle of exploring, as defined in the site’s by-line, allows users to move through the material at their own pace. The cohesive red, white, and black colours together with muted colour drawings, paintings and posters, and black and white video footage, are all excellently combined, enhancing the mood and feel for the target users. The only drawback I can find is that some secondary navigation items are elusive and / or buried. The video gallery, for example, contains a lot more than just 1 video, but it is accessed via a link on the front page titled Watch video about the exhibition.

And now for 3 less glamorous online designs, and why I think they’re poor…
First of all, like anyone with more than half a brain, I googled for bad website design and I’m mighty glad that I did. Being the youngest of 4 boys, there are many things in life I learned with somewhat less embarrassment because of my brothers – thanks guys! This same ethos is echoed over at Web Pages That Suck,

Looking at bad web site design is valuable because it gives us the opportunity to learn from other people’s mistakes without having to make them ourselves. Winston Churchill once said, All men make mistakes, but only wise men learn from their mistakes.

Take Churchill’s quote literally, that is, learn from the mistakes of all men!

Fabric Land

http://www.fabricland.co.uk/ The only positive comment I can make is that the navigation in the left frame is basically alphabetical. (Is “basically” good enough? If I were single, would I want to date someone who is “basically” a woman?)
The most important HTML tag — TITLE — is the search-engine-hating “New Page 1.” They shouldn’t feel bad about this gaffe. There are only 5,310,000 other pages on the web that use “New Page 1″ [as their title].
Hideous colours that mean nothing to the visitor; insulting instructions and abusive tone with words in all capital letters; redundant information (SINCE 2000 [9 YEARS]); animated .gif images that serve no purpose but irritate; blurry and stretched out of proportions photos of staff are very low quality and also seem out of place as the first item of the main content; JPEG compression killed the company name (logo?) banner; the marketing copy – if you actually bother to read it – is absolute rubbish; text links like “click to look” are just the beginning of the countless usability issues; the list goes on and on…

Genicap

http://www.genicap.com/ This company is supposed to offer a pretty nice plugin for Adobe Illustrator; however, I have searched their site for 30 minutes and cannot find out how I can buy a copy. There is no search feature. The navigation SUCKS. It is chock full of technobabble. All in all, one of the worse sites I have seen for a big company.
Annoyance is one word I would use to describe it. Aggravation is another! The pages of the site seem to have a ridiculously long loading time. The copy reads like a mish-mash of a geometry textbook, quotes from Buckminster Fuller and Steve Jobs, and some drivel from an acid junky. The body copy is a JPEG image rendering it rather unusable! The hiding of page URLs via misusing frames, prevents visitors from bookmarking anything but the redundant splash page with Mystery Meat Navigation. I’ve also wasted a lot of time on this website and still have no idea what the point of it is. I think this one angered me most because on the surface it is deceivingly good looking with a sense of balance and unity. User frustration is the only result of this shocking website.

HavenWorks.com

http://www.havenworks.com/ When someone sees this site, their reaction is the same as my reaction when I first saw it — What the Heck?
Even on my giant screen, this website still has a horizontal scroll bar, let alone an incredibly tall vertical one. First reactions aside, the layout is a jumbled mess of columns and rows that even an effort to make a bad HTML table layout couldn’t achieve. Second, the colours are competing with each other, rather than complementing, and the human eye doesn’t know where to begin. Semantic confusion results from the choice of colours, and inconsistency in the size and typeface of fonts. Usability issues are profound, and I bet if you stare at it just long enough you will actually vomit or faint.

So, do the World Wide Web a favour before you beat down the path of creating more cyber-garbage. Thoroughly go through the Biggest Mistakes in Web Design 1995-2015 and follow Churchill’s advice, learn from them.