The changing place of media in everyday life

  1. What is the difference between the media environment of the past and now?
  2. 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

Posted in Technology | Tagged | Leave a comment

Learning HTML5

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

Posted in Technology | Tagged | Leave a comment

new features on freetrappers.org.au

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.

Posted in Digital, Photo and Video | Tagged , , | Leave a comment

site redesign

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)
    • at least double the maintenance of presentation 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.Home (new)

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.

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/wordpress/plugins/smart-404/.

Posted in Photo and Video, Technology | Tagged , | 2 Comments

CSS Zen Camp

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)
Posted in Art | Tagged , , | 1 Comment

Illusion of spatial depth

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:

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.

Posted in Art | Tagged , | 1 Comment

Positive and negative space

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:

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.

VF-1
VF-2
VF-3
Posted in Art | Tagged , | 1 Comment

Visual hierarchy and focal points

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.

visual hierarchy 5Since 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.

focal point from 10 arrows

2 focal points from 7 and 3 arrows

Posted in Art | Tagged , | Leave a comment

Rhythm is a dancer

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.

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.

Posted in Art | Tagged , | 1 Comment

Lighting

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.

Posted in Art | Tagged , | 1 Comment