- 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
- lacking any search facility
- all (too many) sponsors presented in sidebar on every page
- large header graphic serves no real purpose, takes up a lot of space on every page
- navigation links are tiny and difficult to distinguish, several have too many words, and also the order of navigation items is illogical
- 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
- link to sponsor (Hard Shell Backpacks) is broken and lacking a logo
- 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
- lack of future upcoming events feature
- excess content (overload) displayed on home page (2 full posts, trailing graphic and a eucalypt definition)
- little thumbnail graphics linking to larger versions in ugly manner
Goals of the re-make
- add a search function: an input mechanism; a results page with excerpts.
- show only 1 sponsor at a time, rotate through on a random cycle, and hide them from home page
- make unobscured glossy hero images on front page only, and add a logo to the banner
- use client specified fonts
- check logo development guidelines
- 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
- remove sidebar, make main container 800px wide
- remove dysfunctional link
- internalise the shop:
- minimise additional CSS hooks
- use the same domain and general CSS and layout structures
- reduce the number of steps to purchase
- create an upcoming events feature so fans need to return to the site
- 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
- 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?
- 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
- 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.
- 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
- 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.
- 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/winter-2010/ 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)
- Colours on the Web (Johansson 2002)
- Paint Quality Institute
- 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?:
- Pairs of adjacent colours on the colour wheel, such as red and orange. The have very little contrast between them. Useful for serene designs.
- 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.
- Four colours with none adjacent each other on the colour wheel.
- 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?
- Restate the goal or aim of the project – in your OWN words. Do this to make sure you understand the problem you are setting out to solve.
- Did you fulfil the goal you were supposed to achieve? Did you miss the point of the original problem you were trying to solve?
- Is your solution appropriate for the audience or purpose of the project you are working on? For example, are your colours childish or corporate?
- Is your solution appropriately executed?
- Are you using a suitable visual hierarchy of information? Will your audience know where to look first, second, and third?
- Does your solution communicate the intended message to your audience appropriately? You can ask people to tell you what message they are interpreting from your design.
- Did you do any research? If so, how did you use it? Should you have done more?
- How many thumbnail sketches and roughs did you do before you created your comp? How much time did you really think about the problem?
- Did you experiment outside of your comfort zone? Or did you stick to your area of strength?
- Did you make any false assumptions about what you could or couldn’t do? Or did you take a positive approach that you could do anything if you really tried? It is very important to experiment and build your confidence in designing. Try flipping, stretching, skewing, speckling, etc.
- Did you really allow yourself to become involved in this problem you were solving? Did you use your imagination and feelings? Were your feelings personal or removed?
- Were you too judgemental? Did you give yourself a chance to be creative? Were you patient with the project and yourself? Don’t be so hard on yourself that it makes you afraid to take chances.
- Did you take chances? Were your solutions innovative? Did you dare to be different? Or did you do what most people would do? One way of determining this is to compare your solution to others? How many other people reached the same conclusions?
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
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
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
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… Continue reading
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
So far, common forms of distribution are:
- Optical discs
- CD-ROMs, DVDs, etcetera…
- a high speed internal network
- 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.
Traditional distribution models
Alternative distribution models
Intranet versus Internet delivery
Some examples utilizing an intranet delivery include corporate orientations, Computer Based Learning (CBL), presentations broadcasting, video conferencing, internal video services (VOD), and interactive information systems (customer information stations and POS systems).
try before you buy.
Some applications use the internet as a delivery platform. For example, streaming media in real time, Flash, and Java web-related applications, all rely on a constant internet connection.
Although there are many methods for delivering web multimedia, we recommend using stable technology that works for the great majority of client machines. You risk losing your audience if they have to jump through hoops to access your content.
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.
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.