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

Inspired by a sneak preview of HTML5 and Jeremy Keith’s new book HTML5 for web designers, one might be keen to dive into HTML5. However, heed caution though as the browsers get ready for both HTML5 and CSS3 – care to test yours? You can learn how to use HTML5 in your client work right now or simply start designing a blog with HTML5.

Oh, and last of all, don’t forget to replace acronym tags with abbr. If you’re looking for the tags, try quackit.com’s complete alphabetical list of HTML5 tags.

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)

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.

Distribution of a multimedia project should have been one of the very first matters considered during the initial concept stages. The matters of distribution can have some very simple as well as complicated reasons for choosing one method over another. There are many contributing factors to determine the right delivery method:

• Target user group
• Client’s wishes and expectations
• Product’s limits and limitations
• Interactivity
• Expertise

So far, common forms of distribution are:

Optical discs

CD-ROMs, DVDs, etcetera…

Intranet

a high speed internal network

Internet

a mass distribution medium

Hardware or embedded application

embedded devices that are not normally associated with computer interfaces, i.e. organisers, kiosks, mobile phones, and etcetera.

Intranet versus Internet delivery

Content management

Content management is a system of organizing the delivery, storage and access rights of all the media components of an internet or intranet delivery system.

By the system administrator or broadcast administrator, content management is used to set-up and manage scheduled content or on-demand programs, channels, recordings, and file transfers among various media servers. This can include the setting up of group profiles or individual profiles, in other words allowing only certain groups or individuals to view certain media.

Embedded devices

Typically these devices have no keyboard or limited input capabilities, and somewhat limited display capabilities and data storage. They are usually dedicated to performing certain functions or tasks only, and include mobile devices (personal organisers and mobile phones), home devices (appliances, home automation systems, home theatre systems, home security), automotive (GPS, in-car entertainment systems), and industry systems (information kiosks, ATMs, and cash registers).

Due to advancements in computer memory and CPU miniaturization, devices now have the capabilities to provide levels of interactivity and intelligence previously unheard of. We are also seeing not only the breakdown of input and output limitations, but also a merge of delivery methods, in devices such as the iPhone.

Embedded devices traditionally perform dedicated functions, and are designed with a specific embedded software application. The end user cannot modify such closed systems. We see embedded systems everywhere – at the cash registers, in industrial controllers, at home in our digital set top box. They are usually simple to use, sturdy, fast and reliable. Unfortunately updates or upgrades contribute to the problems of a throw-away society and are costly in both time and money. Hence the reason developers attempt to future-proof systems as much as possible.

The choices of delivery methods to best deliver products are constantly increasing. Choosing the right method is not always your choice. The best safe guard is to know right from the conceptual stage, what delivery method(s) you and your team will be designing for.

Is it really possible to create interactive Flash applications without programming any code? Perhaps this may soon become reality, as just last Monday, Adobe launched the beta releases of Flash Catalyst™ and Adobe ® Flash ® Builder™ 4.

Adobe ® Flash ® Catalyst™ is a new professional interaction design tool for rapidly creating user interfaces without coding.

If you’re keen, go download the pre-release beta and learn to use it through some video tutorials. Otherwise, stay tuned for further updates on Flash Catalyst at Adobe Labs.