The Making Of

Multiple Background Layers:
The first hurdle I needed to over come was that I had three layers for the background. Viget Inspire is a really good example of a site that uses many background layers which are placed on several overlapping divs. For my site I realised that I needed to use the repeating paper pattern on the lowest layer (the body layer) then add background images to header and footer divs. The header also had another div for the logo badge that allows you to click on it to return to the home page.

@font-face:
One way to add a unique typeface to a site is to use a font-face kit. FontSquirrel provides a large collection of free font-face kits (as well as a font-face kit maker). This Youtube video by NetTuts is a very clear tutorial on how to add the font onto a site.

The Dreaded Twitter Widget:
Twitter kindly provides a free widget that allows you to display twitter feeds from publicly available accounts.
While it allows for some customisation, the base model did not fit all that well into my website. So I needed to figure out how to tweak it (mainly the header, the footer and try and get a transparent background).
The transparent background was the easy part apparently: Simply type none instead of a colour number in to the twitter widget. Instant transparent background.After a lot of searching I found that removing the header and footer were equally simple enough, you just need to find the right tags: twtr-hd and twtr-ft and using CSS set display:none
A more detailed explanation can be found here.

The only thing I couldn’t find out was how to adjust the colour of the horizontal rules between each twitter post. Also, for some reason however, IE demands that you download an ActiveX control. I’m not quite sure how to fix this, so I apologise in advance if you are viewing the site with IE.

The search bar:
Again tutorials came as a great help here. The placement of the search box was the most fiddly part of the process.

Two other resources proved invaluable. The first was Html Dog which goes through the dos and do-nots of coding.The other was Jennifer Niederst Robbins’ “Learning Web Design” which carefully explains the ins and outs of web design from coding to publishing. Could not have done with out it.

Other than that, most of it was coded using what I had learnt in the class tutorials and adapting where I could.

Web Design Project quick links:
Post 1: Country and/or Western - Project Choice
Post 2: Inspirational Bits and Bobs - Research and Inspiration
Post 3: Initial Layout - Website Flat Graphic
Post 4: Now Showing - Website Link
Post 5: The Making Of - The Making of the Site

Now Showing...

My design for the Canberra Country Music Festival is now live.

Examples of stuff:
Subnavigation: Most of the pages except for the Home and Contact pages have sub navigation menus in the left column.
Fragmental Links: Go to About>FAQ
Link to external website: the Twitter/Myspace/Youtube/Facebook links on the right hand menu (listed under "Follow")
An Email Link: In the left column of the Contact Page
File Download: On the Program page.
Form input field: The search bar in the right column of any page or a more in-depth form on the Contact Page.
Google Map: On the Getting There page
Youtube videos: Program>Performers>chose any of the performers to see one of their music video clips.

Web Design Project quick links:
Post 1: Country and/or Western - Project Choice
Post 2: Inspirational Bits and Bobs - Research and Inspiration
Post 3: Initial Layout - Website Flat Graphic
Post 4: Now Showing - Website Link
Post 5: The Making Of - The Making of the Site

Initial Layout

A flat of what the final page design will look like:


The Design:
As mentioned in the last post, I wanted to give the website a rustic, vintage feel. Like you had discovered it in the shed out the back, all browned with age but still pretty to look at.

The background photo was one I took earlier in the year of Lake George, overlayed with a paper texture and using a vintage sunburst pattern in the headder to enhance the colours of the background. The main body uses a repeating paper pattern so that it blends seamlessly.

The site is designed within the confines of a centred 960px wide page however the top and bottom background layers extend to 2000px before fading into the paper texture to account for larger screen sizes.

The header and navigation are again inspired by woodpress labels and posters designed to integrate with the background layers and building the colour scheme:

White: #fffae5
Black: #111111
Russet red: #75220e

Note that pure black and pure white are not used. They are too harsh and would kill the softened look of the site. Even the forms use the off white colour.

The image beneath the navigation and the header introduces the page and will change depending on which section of the site the user is visiting. This is particularly functional on the Location Pages (used for the placement of a Google map) or the artist pages, which will show a large image each performer.

There are three columns within the main wrapper. The left hand column (200 px) is reserved on the home page for twitter updates or as a column for sub-navigation on other pages.

The centre column (480px) is reserved for the main content.

The right column (280 px) is a Woodpress inspired shortcut menu. Many festival websites use shortcut menus for the most frequently visted links on their site. This is also where I will be placing the search bar.

The site only uses two/possibly three main fonts:

Verdana for text
Georgia for certain headers
League Gothic (a font licensed for @font-face use) for main headers.

At the moment, I don't know what size the text and line spacing will be, I'll have to test out what looks best in-browser.

All links, on mouse over, will be underlined to make them more noticeable to users and differentiate them from other emphasised text. In text links will be bold and russet red to make them stand out.

All images used will either be mine, those used on the original website or artists performing at the show.

Web Design Project quick links:
Post 1: Country and/or Western - Project Choice
Post 2: Inspirational Bits and Bobs - Research and Inspiration
Post 3: Initial Layout - Website Flat Graphic
Post 4: Now Showing - Website Link
Post 5: The Making Of - The Making of the Site

Inspirational Bits and Bobs

First things first. What does country music look like? Well, from research it seems the undisputed home of country and western music is Nashville, TN. So lets go there first.
The Country Music Association (CMA) holds a big music festival in Nashville every year. This is what there website looks like:

Instantly we see a style: Red and Black with beige whites and a blue highlight colour. The logo is a badge design centred in the menu. There are elements of eroded lettering but is balanced with smooth edged graphics, with a slick gradient in the main-content area. The background image is a stage photograph that remains static while the page rolls down. This site mainly uses type and colour to make it feel "country".

In Australia, Tamworth is the home of country and it too holds a huge country festival every year. Here is their website:


Similar concept but used in a different way. Again, same colour scheme: Red, off-white and Black. Instead of eroded lettering, this uses a paint-peeled background. So instead of using colour and type to emulate country, this uses colour and texture and is balanced by refined typography.

But this country style can be found on lots of websites that range from country fashion outlets to cottonseed oil.

www.cottonseedoiltour.com

www.thefarmerandthechef.com

www.rmwilliams.com.au

www.storypixel.com

It's clear from these examples that the elements I talked about previously are common among a lot of country inspired websites. Harsh blacks and whites are out, rich earthy colours are in. Typography is essential and imagery and texture are just as important.

But I’ve also been looking at sources from the real world. A lot of inspiration was drawn from photos and objects and ephemera such as labels from bourbon and wine bottles. Also of particular interest for their typographic layout were hand painted signs and woodpress posters so often associated with the wild west.

And I can’t forget this Rawhide Annual I found under the house. Starring Eric Fleming and Clint Eastwood. Again the hand drawn typefaces and the colours scream wild west:
And finally, last semester I went on a photoshoot out at the Yass Rodeo. A heck of a lot of fun because everything takes place so darn quickly. The colours from the costumes and the surrounding area again provide a good source of inspiration. Again, looking at the photos, the predominant colours are reds, browns, some blues (from jeans), gold-yellow, soft-black and off-white. It seems this colour-theme is one of those unbreakable rules.

Web Design Project quick links:
Post 1: Country and/or Western - Project Choice
Post 2: Inspirational Bits and Bobs - Research and Inspiration
Post 3: Initial Layout - Website Flat Graphic
Post 4: Now Showing - Website Link
Post 5: The Making Of - The Making of the Site

Country and/or Western

Instead of starting a new blog, I thought I’d just resurrect an this one and dust off the cobwebs as I go. As for the website I plan on redesigning, I chose the Canberra Country Music Festival. The amount of text is reasonable to work with and, although there aren’t many large photos on the main site, it links to sites that do have photos so I should be right for resources.

Web Design Project quick links:
Post 1: Country and/or Western - Project Choice
Post 2: Inspirational Bits and Bobs - Research and Inspiration
Post 3: Initial Layout - Website Flat Graphic
Post 4: Now Showing - Website Link
Post 5: The Making Of - The Making of the Site

The Metapost

After nearly three months of posting this blog has looked at various aspects of networked media. The majority of the blog was devoted to integrating what I had learnt from the lectures and tutorials and how it related to the use of the “networked media” in other areas that I’m interested in, using relevant and current examples.

I also tried to build posts that would give both my opinion, yet allow the reader to come to their own conclusions by providing them with source reading material that inspired the post in the first place.

My three nominated posts are:

• No Fury like Twitter Scorned
• Creative Commons and Copyright
• Web 2.0

In No fury like Twitter Scorned which at the time resulted in an uproar in the twitter design community, I tried to give readings that gave both sides of the story so that the reader could go deeper into the readings if they so wished, and then I related this topic back to networked media by commenting on the power of Twitter and the use of # tags.

In Creative Commons and Copyright I tried to build on the tutorial content of creative commons and bring in issues of certain copyright laws that may have a big impact on the use of the networked media. Again I try to provide various resources that inspired the post so that the reader can build their own opinion of the issue at hand.

In Web 2.0 I feel provides a larger summary of what I’ve learnt in the duration of this course by using relevant examples, integrating relevant links and video to help express the content of the post

Traffic and connecting with the networked media world:
When it came to adjusting the design of this blog, I set up a test blog which I could trial my css adjustments on and save it as a template before applying it here on this blog. Using Bloggerbuster.com as a resource to help me to navigate the html and css code I adjusted the Minima White template – tweaking the colours of the text to match the theme and adjusting width of the columns and header fill a 1024 x 768 resolution screen (as the statistics suggested that none of this blogs readers were using lesser screen resolutions). I have also used the blogroll gadget to encourage readers to check out a few of the blogs I’m interested in both within the class and outside it to give an idea that I’ve

Analytics:
Using Google’s Analytics, I found that generally there was traffic of about two or three a day shortly after I posted. Some traffic is came through blogrolls on the blogs of peers or through blog followers. While I did leave it a bit late to sign up for an Analytics account (so it’s difficult to tell a pattern to when the traffic is coming in) it is encouraging to know that others are interested in and connecting with my blog.

As for knowing which content is the most popular, Analytics is no help because of the nature of the design of Blogger, the posts are all on the one page and I am unable to tell from commenting because there hasn’t been any. While there hasn’t been any commenting, I have tried to encourage it with topics like “Twitter scorned” or “Copyright” which do allow for anyone to voice their opinion, for or against the issue I presented.

Popular or not, I still feel that the three nominated posts best reflected what I learnt throughout the Networked Media Production unit.

Design and Networked Media

In a self-response to a previous post of my own illustrations and photography, I thought I might write about what I actually use networked media for.

I mainly use the web through forums, blogs and the like to learn from and connect with other graphic designers, discovering new techniques and learning from other tutorials or advice:

Freelance Switch:

After discovering and reading the e-book “How to be a Freelance Rockstar” by Bondi-based designers Cyan and Collis Ta’eed, I followed through to the Freelance Switch website an online magazine usually posting daily articles on freelancing advice, mostly for designers, copywriters, coders and other areas. Even if you’re not freelancing there are some great articles that all creatives should be thinking about including dealing with clients, portfolios, ergonomics etc. The site also offers a jobs board, a forum and a radio podcast.

Graphic Design Week:
Along those lines I’ll recommend Graphic Design Week that AI and PSD Tuts hosted this week. A heck of a lot of links, tutorials, articles and inspiration on all areas of Graphic Design.

I also follow the works of artists and designers through blogs or websites.

Spoon Graphics:
I came across this graphic design blog a couple of years ago when I was looking for tutorials on using the right black for print. This nicely designed blog by UK based designer Chris Spooner is full of articles, tutorials, inspirational sites and downloads with decent content (not just another picture show blog).

Steven Watkins:
Since beginning the Motion Graphics class this semester I’ve been on the look out for inspirational motion designs and along came the WWF ticks ad, a beautiful use of music and animation to make an ad you actually want to watch again.
Wanting to know who had made it and what else they had done I went searching and discovered the work of Melbourne based designer Steven Watkins.

I learn a lot from other people’s contributions to this networked media and for that I’m grateful.

But what do I contribute?
Not as much as I’d like to. I’ve always had this feeling that because I’m inexperienced in real world design jobs that I really don’t have any authority to contribute anything when it comes to design. Sure, I know when there are far too many fonts used in a design or when compositions look off, but I still feel awkward making a point when I haven’t had any real world experience. Or maybe I’m just put off by designers that hit back at their critics by saying “but it’s my style”.

As for putting my own work up for show:
I’ve always thought about starting a gallery but I’ve never been too sure about which gallery site to use or whether some of my work is actually good enough to go up onto the web. While I am learning to be a designer I’m still very self-conscious about my work and I’m hesitant again because I feel I lack the experience to be able to judge it and tell whether it’s worthy to put on show and ready to receive constructive criticism.

Even so. I put a few pictures in a previous post just to show everyone that I can do something. Comments and constructive criticism are more than welcome.