Poster Idol Designs

Design Reference Overview

Well, my design reference posts are now complete, and you can read them all right here on my blog.  If you would like to read them all in order, then you can click on the links below and be taken directly to the posts that way, or do a search for “Design Reference” with the search option.

Part One
Part Two     
Part Three   
Part Four

This four part series covers the seven conventions as outlined in the project description for Web Design and Development and includes things such as navigation bars and intuitive site design for ease of navigation, convention in site layout, Steve Krugs “Trunk Test”, Search Bars, Fixed Width Sites and more.  I also talk about the use of media including sound and images to present a theme and support familiarity within the site.  Follow the links above to find out!

If you found these posts interesting, educational or just plain fun, please remember to leave a comment.

Until next time..
Peace!

Design Reference : Let a website give you a hug.

“When I first came here, this was all swamp. Everyone said I was daft to build a castle on a swamp, but I built in all the same, just to show them. It sank into the swamp. So I built a second one. That sank into the swamp. So I built a third. That burned down, fell over, then sank into the swamp. But the fourth one stayed up. And that’s what you’re going to get, Lad, the strongest castle in all of England”
Monty Python and the Holy Grail - 1975

We’ve been talking about conventions all this week on Poster Idol Designs, haven’t we kids.  So, what does the Monty Python quote above have to do with that?  Its all about foundations.  I cant tell you how many times I’ve attempted to build a web site and its gone nowhere, basically burned down, fell over, then sank into the swamp.  Its all because they were built on the fly without a good foundation.  A lot of the times it came down to a matter of convention.  We all want to be trail blazers and try new things, but at the end of the day, humans are creatures of habit.  Because we have had a fair amount of exposure to the internet, we have an understanding of how things work, look and feel.  When we are confronted with something different there is an immediate desire to run away.  For those of you who haven’t visited HavenWorks yet, I think this will do a much better job of explaining this concept.

This is something that I have really liked about my chosen reference sites.  They make sense.  Their design follows really basic conventions leaving me feeling at ease and comfortable.  Its like walking into a party full of old friends.  “Hey, where’s Navigation Bar?  Ha!  There he is, hanging out on the left hand side of the screen.  I should have known!  SEARCH BAR!!!!  Maaaate!  I knew I’d find you at the top right hand corner of the screen you old devil“  If you take a look back at the screen shot for the Official Roxie 77 Site, it has a few elements there, some level of familiarity, but, like being in an actual large international airport for the first time, its sort of a bit alien and frightening.

Some other things I like about the reference sites are the use of a fixed size, single screen page.  When I go to the official Damon Johnson site, it only takes a second to look at the home screen and I have the latest Damon news.  They are only basic headline type messages, but the option for me to ‘drill down’ and get more information is available.

03/15/08 - NEW!! Damon Portraits for Sale…   “No thanks”
12/13/08 - Vintage Guitar Magazine - Damon Interview “Oh nice”  *CLICK*

The great thing about this is, the decision was left to me.  I wasn’t force fed half a page of merchandising talk and a dozen photos of the new Damon portraits.  It was like a friendly McDonalds employee offering me fries and a coke.  “No thanks, I’m watching my weight!  Just the double cheeseburger with a chocolate sundae and a box of cookies today thanks”

Lets regroup and think about what we’ve learnt today.

• Conventions are the building blocks of good web design
• Familiarity is your “Happy Place”.  If you make your guest feel welcome, chances are they will stay and probably visit again
• Its OK to make your dinner guest eat at the dinner table, just don’t force feed them brussel sprouts.

If you want to make your page a fixed width, go ahead!  Sure, you might be proud of your new video / flash cartoon / photo gallery, but Mr “In a Hurry” may not have the time today to sit back, wait for it to load and watch it before impulse spending $30 on one of your products.  He may decide instead that he doesn’t like youre blatant self promotion and pushy Avon lady sales approach and take his $30 to the local strip club instead!  Who’s feeling silly now?  Hmmmmm?

Food for thought.  Sure, your fourth castle may stay up, but why not just start with a strong foundation and make the first one great? Peace!

Design Reference : Where am I, who are you….and did we sleep together?

Surfing the internet is pretty much like having sex.  There are times when you want to take your time, enjoy the ambience and explore every possible region, then there are other times when you just need to jump in socks and all, get what you came there for and get out before you pick up any nasty viruses.  (Sheesh, need to work on those analogies).

Anyway, the point I’m making here is that I want my web site to offer the experience the user is looking for.  Think of me as a madam of a high class brothel. As I mentioned last time, there are some ‘foundations’ to a website that I believe are essential when building a site.  These ‘conventions’ can be backed up by Steve Krug’s “Trunk Test” which basically leaves you asking a few important questions when it comes to viewing a web page.

• What site is it?
• What page am I on?
• What major sections does this site have?
• Where can I go from here?
• Where am I in relation to the rest of the site?
• Where can I go to search?

If I can offer a website that a user can jump into, socks and all, and answer the questions posed above, then chances are I’m on the right track to a successful site, the rest is just nipple tassels and fishnet stockings (err, I mean look and feel) This all leads me back to my five reference sites and what it is I have learned from them.  From a functionality point of view, each of the sites offered a clear way to navigate the site, with the use of a navigation bar.

This navigation bar acts as the street signs to the site.  If I want galleries, I take this road.  If I want to check out the store, I head this way.  The navigation bar is easy to find and are all internal links, so there is less of a chance of the user clicking on a link from the navigation bar and ending up on another site (Essentially being locked in the trunk of a car and dumped (Thanks Steve)).  Most of my reference sites also included external links, sites that were affiliated with the artist but have no need to be taking up real estate on the site itself.

Then there is the dark side.  None of my reference sites contain the ability to search.  For an artist like Alice Cooper, who’s career harkens back to the heady days on 1968, there is a lot of material on offer, and finding it is made slightly easier with the categories presented in the navigation bar, but wouldn’t a search function just make life so much easier?

Really Simple Syndication, or RSS feeds are also strangely missing from all five of these sites!?  Has Alice got a new album?  Is Damon touring with Slave to the System?  Has Keri released a new T-Shirt?  Guess what buddy, you aren’t going to know unless you go to the site!  Had Alice offered an RSS feed, Id have it pop up on my handy iPhone RSS Reader and know instantly that I needed to run out and line his pockets with some cash.  Sorry Alice.

So, lets wrap it all up shall we?  For a site to be functional at a basic level we need it to:

• Be easy to navigate.  Everything should be clear and concise
• And if it cant be, we need to let the user search.
• Offer a way for the user to obtain the latest information without doing a lot of work (Im talking about RSS folks)

I think next time we get together, we will talk more about those nipple tassels and fishnet stockings (or for the kids playing at home, “look and feel”)

Peace!

Design Reference : Waiting for the gift of sound and vision

Back in 1976, David Bowie had a song called Sound and Vision, and this is the song that comes to mind while I’m thinking of web design.

Being from a generation that has a short attention span, I’m the type of person that often finds himself jumping from site to site within moments, and it takes something eye catching for me to apply the brakes, slow down and take a look.  Sites like Deviantart are the kind of sites that I could spend all day looking at and YouTube is like taking some kind of retro memory trip that frightens and delights me at the same time!

Discussing the convention of web design, its easy to pinpoint not only things that I love about sites, but also the things that are blatantly obvious in their absence!  For example, could you imagine trying to find your way through Youtube without a search bar?  Yikes!

As I mentioned in my last entry, I’m focussing on recording artists in regards to the design of my site, not because I didn’t look at other types of sites out there, but because there is an obvious reoccurring style that showed up while looking at these particular sites.

Let me start by listing the five sites that I chosen for my design references;                   

• Alice Cooper   
• Damon Johnson
• Keri Kelli         
• Jason Hook
• Chuck Garric

Every one of these pages presents me with a gift of sound and vision of some kind.  All five of these sites have a featured photo of the artist on the front page.  It seems so obvious, but taking a look at the Official Roxie77 Site, you would be hard pressed to relate the page to the artist, Ryan Roxie, at all.

Three of these sites (Alice, Damon and Keri) also offer me the chance to caress my ears with the sweet sounds.  The have small media players, mostly in the upper right hand corner of the screen, which offer a sample on the artists music.  This is another chance to make the connection between the site and the artist.  Once I see the artist and hear the music, I can be pretty damn sure I’m in the right place!

The conventions I’m pointing out here are three simple things;

My site should include;

1. An embedded media player featuring samples from Roxie’s album.
2. A simple design including a photo of Roxie as reference.
3. A search bar to make site navigation even simpler.

Of course these aren’t the ‘foundations’ of a good site, and I will get to that in a future post.  What I’m talking about here is more like looking at a meal on a dinner plate at a new restaurant.  At first glance, its either something that looks appetising or looks like a pile of slop, its after this that you start looking at what’s actually on the plate.  “Oh, its chicken, with a nice tangy looking dressing.  It’s also got some nice looking salad vegetables etc”  Chances are though, if it looks like slop from the get go, you might very well jump up from the table and head out to another restaurant, never returning to this one.  This is something I don’t want happening to any websites that I will be designing in the future!

I want to keep these posts fairly short, and post on a daily basis.  Please feel free to leave comments and thoughts on this and other posts.

Peace!

Design Reference : Intro

For my design reference project I have chosen five websites that I found aesthetically pleasing, as well as designs that I thought would work well for the website that have chosen for the Website project. As mentioned previously, I’m working on a site called Roxie 77, which features information and music for the artist Ryan Roxie.  As a brief overview, Ryan played guitar and co-wrote music with Alice Cooper between 2000 and 2006 as well as working with Slash for his solo project, Slash’s Snakepit. Roxie has had a number of projects himself including Dad’s Porno Mag, Roxie 77 and his current band HappyPill.

The sites I have chosen also happen to be artists that have, or continue to, work with Alice Cooper (as well as the official Alice Cooper Site) and I think are really well designed sites that are easy to navigate and are pleasing to the eye.  So, over the next few days I will present the sites and how I feel they share certain web conventions and what I like or dislike about particular parts of the pages.