NED12 Final assignment

We had to do a web site and a flash-based banner ad with animation and audio.

The web site - I had some really helpful feedback from tutor and class, was pretty happy with it (a bit over it at the moment, having been working on it solidly the last two/three weeks). A copy is published at www.mja.au.com



The flash banner ad was interesting. I am still trying to get the hang of layers, stages, frames and instances. For my first banner ad with audio it is a fair attempt I think!

What the hcard

Thought I'd read up on this and include it with my assignment. Digital Web Magazine article - http://www.digital-web.com/articles/microformats_primer/

24ways.org article - http://24ways.org/2005/practical-microformats-with-hcard

Hold your position

Patrick Fitzgerald provides this concise yet well explained 10-step lesson in CSS Positioning. A good demonstration of the value of chunking for any sort of learning material. It managed to sink in through my thick head!

Also learned something about vertical centering from Bert Bos' tips on Centering Things. Unfortunately there was a browser compatibility issue with lists and the display: table-cell property, so I couldn't use it.

Colorblind filter

Or if you're Australian like me - colourblind filter.

In NED12 assignment one, the marker commented that they wondered how the design would go with a red filter. I decided to test this on my final assignment, and found an online filter test at http://colorfilter.wickline.org/.

So far my design-in-progress has passed with flying colours (haha). I also tested my design from assignment one - my lovely Australian bush colours become quite drab, but at least it still seems to pass from an accessibility standpoint.

Rounded corners in photoshop

Was trying to get anti-aliased curves. This method works great - http://matthom.com/archive/2004/09/10/fast-rounded-corners-in-photoshop

Module 12: Search Engine Optimization

Bound to be lots about this one.

Module 11: Video Design

Video resources

Module 10: Audio Design

Putting audio on the web

Tutor Edwin provided link to free audio site he uses: http://freesound.iua.upf.edu/forum/index.php

Fellow student Daniel very helpfully provided link to some great software - http://www.nch.com.au/switch/index_b.html which really helped me with my banner ad part of the assignment!

Module 9: Logo Design

Good resources for learning about logo design

Module 8: Copyright

Copyright resources

Module 7: Animation Introduction

Find stuff about making animations - in Flash preferably. Found this tutorial on creating a photo fading slideshow from UC Berkeley, for Apple users.

Fellow student Tracy M found this ALA article by Drew McLellan on embedding flash while supporting web standards, Flash Satay.

Some CS3 basics from Adobe.

Module 6: Project Management

Look for good resources about project management (particularly web site projects of course)

Module 5: Banner ad design

List some useful resources to effective banner ad design! (particularly flash animated ads).

Module 5: Information Architecture

This module is titled "information architecture" but half of it is about designing banner ads. Go figure!

There will be links here to resources about information architecture - site organisation, directory structure.

Module 4: Screen Design & Storyboards

Site elements:

• Home pages - strategies include menu list of links, news-oriented front page, path-based split, splash screen - or a combination of these.
• Graphics or text - visual design versus usability/seo
• Master page layout grid - a standard layout for all pages, not dominated by homepage design
• Menus and subsites - grouping sections together into digestible chunks
• Resource lists, links to related sites
• Tables of contents, site maps, site indexes
• "What's New?" pages - for regular visitors
• Search features - for large sites
• FAQ pages
• Custom error pages

Links - Screen Design
* Web Style Guide - Planning, Lynch & Horton (2004)
* Text & Graphical layout based on principles by Robin Williams & John Tollet, Brian Josephson (2002)
* Screen Design Research, Bonnie Skaalid (1999)
* Writing for the Web: Elements of Effective Screen Design, Dr. Stuart Blythe (2001)
* Visual Literacy, Screen design, Betty Hennessy (n.d)
* Screen Design, keithpeterb on Youtube
* The Need for Web Design Standards, Jakob Nielsen (2004)
* Elements of style for web design, Christine A. Quinn (n.d)
* Principles and Elements of Design, Joshua David McClurg-Genevese (2006)
* Elements of Interface Design, Virginia Tech
* Design Rules, Anna Muoio and Lucy A. McCauley (1999)
* Elements of Design Applied to the Web, Kyle Meyer (2007)
* Elements of Web Design Today, Hyder Jaffari (2007)

Navigation:

• All about organising information using logic, hierarchy to structure relationships
• Information best presented in short "chunks"
• Hierarchies ranked by importance, organised by interrelationships
• Logical/predictable organisation helps users know where to find things
• The "three click rule"
• Four navigational/site structures - sequences, hierarchies, grids, webs

Links - Navigation
* Basics of Navigation, Sean Timberlake (2000)
* Navigation, Joe Gillespie (2000)
* Basic Principles of Web Site Navigation, Charlie Morris (1999)
* Website Navigation, Ross Shannon (2007)
* Website navigation is useful, Adam Baker (2001)
* Where am I?, Derek Powazek (2006)

NED12 Flash tutes

Let's learn about Flash and hopefully create a decent animated banner for my next NED12 assignment! Course work suggests going straight to the source to learn about Adobe Flash..

* W3C Schools suggests starting off with the lessons that are included with Flash the program

* Adobe's Using Flash for the First Time - 1. Building a banner. Perfect!

NED12 Positive and negative spaces

I was just learning about this in the drawing class I've started. Positive space is the area occupied by our subject. Negative space is the surrounding area or background space. The frame or drawing space makes up the third element of composition.

Looking deeper we realise that negative and positive spaces can develop an interdependence. Enough negative space (aka whitespace) around an object can draw attention to that object and give it priority.

A good composition is generally thought to have a balance of negative and positive space (although this can vary according to purpose). Artists like M. C. Escher play with reversal of negative and positive spaces to create complex illusions (Jirousek, C. Form, Shape and Space).

Web designs, such as many of those displayed on CSS Zen Garden use the interplay of positive and negative space to create depth to a design, which compels the eye to move around the page.

* Digital Web - Principle of Design
* Web Design Office - Negative Space
* Apogee Photo Magazine - Primer on positive and negative space
* Jim Saw's Design Notes

NED12 Visual hierarchy

The arrangement of elements according to importance and emphasis.

* Lynch and Horton's Web Style Guide - Visual Hierarchy
* Luke Wroblewski - Visible Narratives: Understanding visual organisation
* Tutorial Outpost - Get Some hierarchy in Your Design

NED12 Stripey backgrounds in Photoshop

I had a lot of fun with my first NED12 assignment, and in the course of working on it greatly improved my knowledge and confidence in Photoshop. This photo by Georgie Sharp of a bee hovering over the wattle really took my fancy, and the stylised text above it is intended to be reminiscent of the bee's flight path. The stripey background was a simple technique I learned about from blogger Amy on Shooting the Kids.



More reading: Elements of great Web design: The polish

NED12 Texture

"Texture is created by varying the pattern of light and dark areas on an object." Elements of Design: Contrast from Bonnie Skaalid, 1999.

Five Texture Tips from Photoshop Tips & Tricks