My study in Web Design & Production



New Melbourne Jazz Fringe Festival Website

The completed redesigned Melbourne Jazz Fringe Festival can be viewed at:

http://kassy.photox.com.au/Cassie/

Overall The finished website is very close to the original design proposal  although some elements were changed so that i could simplify the code. 

I tested the website with firefox and safari and all elements appear to be functioning.

10:27 pm, by kassandra-utzinger
permalink




HTML site

So here is the HTML site…  next time i have to do something like that it will be soo much quicker!

http://u3030075.bravehost.com

10:58 am, by kassandra-utzinger
permalink




8:13 am, by kassandra-utzinger
permalink




3:50 am, by kassandra-utzinger
permalink




Web Patterns

There seems to be a trend that designer portfolio websites are simply the best websites on the net… makes sense i guess!!!!

Pattern 1: layout

This website is a portfolio website for a graphic designer. I love the way it is set out like a book that you would look through. It really sets the scene for what the designer is like. I dont think this exact theme would work for my website, its too “cute”, but i do think the layout concept could work well.. maybe instead of a cuteness to it, it could have a grungyness.

Pattern 2: navigation

http://www.richbrown.info/index.htm

This site once again is a designers portfolio. I think the navigation of this site and how the two windows are set out are quite unique. What i would do is have the right window dedicated to the artists that would be playing at the event… having photos and bio’s that when clicked on open in another window fixed on top of the page, the same sort of way it works on this website. The navigation in the left window is also simple, clean and easy. I like how it works… although when some link are clicked on they may lead to another page that abandons the spil windows and adopts a single large window.

Pattern 3: Slideshow

http://www.edit-studios.com/

Edit Studio’s is a company that develops websites. The whole website is really well layed out. The part of the website i am most interested in is the window to the right that looks like a pile of photos. This scrolls through i slide show of photos, i think this will be a great way to show slides of artist photos. Also how the website works below this and most the navigation is on the lower part of the page.

Pattern 4: Navigation Tabs

http://www.berttimmermans.com/

I use this website as an example for two reasons. Reason one: is that as a hwole i dont actually like the look of it. It looks plain, uneaven, uncomfortable and boring. I think alot of this is because of how the text is set out. The use of text and how it is layed out is in general completely under eastermated. Reason two: I love the tabs they have used to navigate the website. They are kinda saying ‘mark this in you diary’ which would work great for a musical festival.

Pattern 5: Breaking the conventions

http://www.booreiland.nl/

When i saw this website i didn’t think of it as a website that looked like what i wanted to make… but it did catch my eye for on very particular reason… It breaks the usual web design conventions! If you tried the trunk test out on it then a lot of the criteria wouldnt match, yet as a website it works well. The first and biggest thing with it is that it scrolls sideways! So i wanted to put this in with my design patterns as inspiration for ways to successfully break conventions. I don’t get me wrong i can see how many could argue that it isn’t conventional and it doesnt work very well, but i enjoyed my visit to this site!

Pattern 6: Layout

http://www.fishy.com.br/fishy/home.asp

Although some may find this layout boring, i think it works well because it is easy to navigate. It is in a different language and i still get the idea of where things are, this is because it follows a lot of design conventions, so navigation around this site comes naturally. It’s always a hard call between making something exciting and new, “out of the box” so to say and making something that looks good yet follows the stereo typical web design standards. When deciding which path to follow you need to consider you target audience and how they will respond. For example a younger audience will quickly find their way around almost any site, but an older person has not used the web all their life and finds it hard to adapt quickly to things that arn’t the norm.

8:30 am, by kassandra-utzinger
permalink




Inspiering Websites

A few of my favourite website designs that i think could be fantastic insperation for the Melbourne Jazz Fringe Festival…

Make Photoshop Faster

I instantly found this to be an eye catching website. There is only one page to it which makes it very simple and imposible to get lost in (i think!). For the fringe festival website i would take idea of a big background with simple boxes to keep content in but i would also need to add extra pages for more inomation which would also mean adding a navigation bar.

Me In Motion

Me In Motion is a band website with a very grungy feel. This grungy feel would suit the Fringe Festival logo excellently, surprisingly the colours of this website are almost spot on too! I like the navigation of this site although i am not so keen on the two columns, i would either have one column or make the main column larger and the right hand one smaller to make it clearer where the main content is. If you think back to the trunk test and apply it to this website it passes most aspects although it fails on having a search bar… but this is an easy fix! There is the oportunity to fit alot of content without making it too clutterd with the design layout of this site. There are plenty of neat little tricks with this website so i recommend you go check it out!

Coo-Coo Core

This website is the cutes thing i have seen in ages… it just makes me want to squeeze it!!!!… no not really, but i do think it is fantastic! The simplicity is the key feature of this website, with plenty of white space and crisp sans serif fonts it is a nice rest for the eye after the full on pages that the web is mostly made up of. I would like to play around with having a very simple and clean website for the fringe festival. I dont know if it will work … it is oe of those things im sure will be either fantastic or a total fail!… so i guess i will have to give it a try and see for myself.

Gary Nock

This website has a great home made feel to it… like its a scrapbook of someones life. I think this style of design could work well for the Fringe Festival. It could suit the logo and could be worked on from there. The navigation of this site is easy, there is alot going on and plenty to look at but it is orderd clutter rather than a mess. The design of this website is probably going to be my strongest influence for the fring festival website design.

11:00 pm, by kassandra-utzinger
permalink




Trunk Test

What is a Trunk Test? A trunk test is a way of seeing if you can quickly identify the 6 core elements every “good” website should have, from any part of the website. The 6 elements are: Site ID, Local Navigation, Search, Page Name, Home Button and Sections. Doing the trunk test on your own site is a good way to see if it is easy to use and it is also import to keep in mind whilst you are designing the site.

Trunk test One: Design Was Here

Design was here is a design website with posts about current design, design tutorials, quotes an other goodies for designers. Although it has good content the site is not easy to navigate around. It lacks a you are here indicter, meaning you can quickly become lost in the site, it’s navigate is alos very simple and does not have any sub categories.

To update the site and make it easier to find your way around i added a few things. Firstly Whatever page you are on is highlighted in the navigation bar, Next i added a drop down navigation tab for easy access to specific content such a tutorials or typography design ect.

Trunk Test Two: UCFM Website

UCFM 87.8 is the website for the uni radio station. On this site you can tune in live to what is being broadcast, you can see the current track that is playing and you can see the time table for when particular shows are on along with other updates and news. Looking at the original site you can see that it does not pass the standard trunk test requirements. The Site ID is small and hard to see, there is no home button or indication of what page you are on and no search bar.

Now i redesigned the UCFM website, not only is it more functional but it is also much better looking with the use of colour and graphics. There is a main logo which makes it very clear what site you are on and this also acts as a home button. There are the section buttons along the top of the page which highlight in blue to indicate what page you are currently on and also have drop down menus to direct you to sub sections of the site. The new web page is still under construction but you can view the work in progress at: http://ucfm.canberra.edu.au/page/

Trunk Test Three: A Day On The Green

Although the origional website looks ok, it is not very functional. You have no idea what page or where in the site you are and there is no search either. When you click on a section and then on a local navigation link the page name does display for that section but no for the sub section.

I Then added a few elements to the page to make it easier to navigate around. The First thing i changed is in the sections. When you are in a particular section that tab sits high abouve the line that the other sections sit on. Second i added a search bar for ease of finding particular items. Lastly i added a you are here page name that indicates what section you are in and then what page of that section you are currently on. Making these changes means that the site now passes the trunk test.

8:33 am, by kassandra-utzinger
permalink




Melbourne Jazz Fringe Festival Trunk Test

Well other than the fact the there is no content on the home page and the search bar is sitting in an awkward and unappealing place, the Melbourne Jazz Fringe Festival has all the elements that are required for the trunk test as you can see in this image.

7:45 am, by kassandra-utzinger
permalink




Melbourne Jazz Fringe Festival

The music festival website i am going to re-design is the one for the Melbourne Jazz Fringe Festival. The screen shot below is the original website and you can view it her: http://melbournejazzfringe.com/

Although some parts of the website look fine there are obvious faults with other parts, but i will discuss this later. First a bit of background research…

What is the Melbourne Jazz Fringe Festival?

Well there isn’t much info on the official website its self so after a quick google search this is what i found:

The Melbourne Jazz Fringe Festival is an annual international jazz music festival held in Melbourne in April or May. The festival was formed in 2005 to celebrate Melbourne’s burgeoning creative jazz scene. Building on the unprecedented success of the 2005, 2006, and 2007 festivals, the festival returns again in 2008 to deliver eleven days and nights of original music featuring Melbourne’s most celebrated improvisers plus interstate guests. (wikipedia)

Why this festival?

I chose this festival website for a few reason. First of all it had a nice logo which gives gives you a solid foundation to work from. Next was the fact that it wasn’t the worst of all the website options… if i had say picked the worst of the websites then almost anything i changed would of been an improvement from the old thing where with the one i have chosen the official website is of a decent standard which means it pushes me to make something better. But of course i also did not want to go for the best looking website because this would be hard to improve upon.

10:20 pm, by kassandra-utzinger
permalink