What is the difference between the media environment of the past and now?
What is the place of the Internet amidst these changes?
What is the difference between the media environment of the past and now?
In the past, people gathered together around a radio or queued up for the cinema to watch and listen to programmes at scheduled times. The media controlled these schedules and audiences play a more passive role.
Content creation and distribution required large equipment, plenty of manpower, and big business backing. Nowadays, content can be created using cheaper personal computers and mobile devices, and programmes can be watched via YouTube at a time that suits the audience. Typically audiences on the internet are individuals rather than families or groups of people, and they play an active role in both the content that is consumed and created.
What is the place of the Internet amidst these changes?
The Internet has facilitated distribution for everybody and everywhere, cheaply and freely. It also provides mechanisms for feedback channels, and as we power along with Web 2.0 collaboration methods. People are no longer subject to receiving stories from media moguls, we can create our own and share them as we like – as in “folk culture”. Take a look at this collaborative effort http://www.youtube.com/watch?v=6mjn7K6sl8M
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.
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)
at least double the maintenance of presentation 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
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
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.
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.
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
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):
Zen Garden praxis_de_cssocean_zenocean
Zen Garden - nicolehanusek.com - traffic
Zen Garden 165
A couple of these are (slightly) interactive. So check them out:
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:
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
Draw 7 shapes of varying sizes (can use Photoshop of Illustrator) – Again I used Fireworks.
Use colour or texture on some of them; leave some in outline.
Decide which shapes should be seen first, second, third and so on.
On an A4 sized page, arrange them in hierarchical order. – I still have no idea why were using A4 instead of, say 800×600.
Produce five versions. – This has been extremely worthwhile.
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
On a 20cm square format, draw ten arrows that all lead to one point or area on the page.
The arrows should be visually interesting; they may vary in quality and texture, and they may bend, curve, or intersect.
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.
Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.
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.
On an A4 sized page, create a rhythm with great variation. Use vertical, horizontal, and diagonal lines, dots, squares, and type.
rhythm 1
rhythm 2
rhythm 3
rhythm 4
rhythm 5
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.
Inspired by a sneak 
