Since the original site redesign of late 2009, we’ve implemented a few slight adjustments on eucalyptproductions.com in effort to incrementally improve both functionality and aesthetics:

• Tweet button added to posts and pages
• Latest tweet from the official Eucalypt Productions Twitter feed
• Latest field update image now appears at double the original size

I am pleased to announce that we now have a gallery on the Southern Cross Free Trappers website. It can be accessed directly via http://freetrappers.org.au/gallery/ or visitors can simply click the new 5th menu link, aptly titled ‘Gallery’.

In order for an event to appear in the gallery, I simply need to add a ‘gallery’ tag to it. There was no point in simply adding all the past events as some do not yet have photos.

There has also been a couple of small changes to the Events page. It now shows all upcoming events ordered from the nearest to the most futuristic. Also, the sidebar has been completely stripped off to simplify the content presentation even further.

Finally, printing the newsletter will now produce a great hard copy product. The presentation in print media should look great now with photos/illustrations and their captions appearing centred (as on the website). See a PDF of Around the Traps – vol 23 for instance. Although a paragraph may spill over 2 pages, everything else should avoid a page-break.

I hope you like these new features.

Updates: 3/10/2010 –
Navigation bar received a text size-up. The Gallery is now also full width, with pagination in the footer area. Newsletter Archives has been given a major overhaul and now features a thumbnail image and an extract from each newsletter. As always, it’s free to subscribe.

Updates: 17/10/2010 – A revised home page was developed. The old design included the complete latest newsletter. From studying the Google analytics reports, I realised that there was no way to determine whether visitors were just looking at the site in general or genuinely interested in articles from the latest newsletter. This revamp has not only reduced the load on the home page to an excerpt of the latest newsletter, but also added the next few upcoming events in the side column. Finally, following ideas from Jeremy Keith’s book HTML5 for web designers, the code has been cleaned up a little and a start made on HTML5 semantics.

Last weekend, after much sweat and beers, we launched the new design for Steve Curtain’s eucalyptproductions.com website. What stemmed from my NED12 assignment was 10 problems and solutions to the original construction – I don’t think we can call the original a “design” since it wasn’t really thought about, it was merely put together and published. Care to read The Secret to a Great Blog Redesign?

Problems with the original site

1. lacking any search facility
2. all (too many) sponsors presented in sidebar on every page
3. large header graphic serves no real purpose, takes up a lot of space on every page
4. navigation links are tiny and difficult to distinguish, several have too many words, and also the order of navigation items is illogical
5. width of main content area is too narrow (405px), resulting in
   • very tall pages to scroll through (too much)
   • layout challenges for main content including graphics
6. link to sponsor (Hard Shell Backpacks) is broken and lacking a logo
7. shop is handled by external CMS (Zen Cart) – complete overkill
   • at least double the maintenance of presentational CSS
   • inconsistent look and feel
   • too many steps to complete purchase
8. lack of future upcoming events feature
9. excess content (overload) displayed on home page (2 full posts, trailing graphic and a eucalypt definition)
10. little thumbnail graphics linking to larger versions in ugly manner

Let’s take a look at the new design, the solutions it provides and the novel features that were added.

Goals of the re-make

1. add a search function: an input mechanism; a results page with excerpts.
2. show only 1 sponsor at a time, rotate through on a random cycle, and hide them from home page
3. make unobscured glossy hero images on front page only, and add a logo to the banner
   • use client specified fonts
   • check logo development guidelines
4. re-organise content into logical hierarchy and make a nav bar:
   • each primary button 1 or 2 words
   • aim for 5 – 7 buttons maximum
   • arrange items in order of client’s desire
   • secondary pages on fly-outs from primary items
5. remove sidebar, make main container 800px wide
6. remove dysfunctional link
7. internalise the shop:
   • minimise additional CSS hooks
   • use the same domain and general CSS and layout structures
   • reduce the number of steps to purchase
8. create an upcoming events feature so fans need to return to the site
9. strip home page content down to fit 1 screen height:
   • a single excerpt of the latest post
   • list a few upcoming events on the front page
10. use a Lightbox effect to enhance the visual experience all round

The process involved wireframe and prototype development, a lot of fresh ideas, stacks of consultation and meetings. We made some executive decisions on implementation. The prime one being to eliminate the character from the logo thereby reducing it to simply text. Having successfully addressed ten major problems in a single project, I am more than happy with the resulting website design.

Given that the content is largely a visual medium itself, removing distracting elements and careful arrangement of content pieces is crucial. I hope this clean design leaves no room for distraction and does well to focus visitors’ attention directly on the content. It is a flexible design and channels for new content have been established. Thinking ahead, I believe this design not only meets the needs of the client and visitors now, but will also meet their growing needs for at least a few years ahead.

Finally, the drawbacks at this stage include:

• a slightly ugly invoice is produced by the lack of a logo – there must be a way to insert that automatically.
• sub-domains such as shop.eucalyptproductions.com haven’t been implemented yet. Redirecting to permalinks is not easy.
• Update 25/10/2010 – shop.eucalyptproductions.com is now working, taking visitors to the shop!

So what do you think? Has a good job been done? What could have been done better?

Bibliography

Bowman, D. (2003, June 2). A design process revealed. stopdesign.

Retrieved August 25, 2009, from http://stopdesign.com/archive/2003/06/02/design-process.html.

Instinct Entertainment. (n.d.). WordPress e-Commerce Plugin a WordPress Shopping Cart Plugin by Instinct.

Retrieved August 27, 2009, from http://www.instinct.co.nz/e-commerce/.

Tyson, M. (2008, September 26). Smart 404 for WordPress.

Retrieved August 25, 2009, from http://michael.tyson.id.au/plugins/smart-404/.

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).