Turning layout on its head

The site is a music bands website called 'no knife'. They include general news on the band, profile of the members and most important down loadable music to show off their art.

One this website loading a clear table layout is visible that has been used for the structure of the site. The same basic layout is used throughout the site with the main content changing in the middle.

What I liked the most about this site is that they have turned conventional website layout on its head, well its side to be more exact. It is the most prominent thing about the site. They have a vertical text layout. They have put their buttons on the left and right hand side of the page as opposed to the top and bottom. One downfall - but it may only be due to my specific screen size at the time of viewing the site while writing is - that their buttons on the right do not all fit on the initial screen, you have to scroll to view the complete list.

Another thing, is there is no specific home button, you have to just click on their main image at the top of the site to get back for your starting navigational point.

http://www.noknife.net/

I love this site!

I found this company only by accident on the way out of Stephens Green parking garage, in a back alley. You look at it initially and just see graffiti on the wall outside, but due to the signage I was intrigued and took note of it to look up what this might be later.

http://www.scuddingclouds.ie. This site is the business that I happened to drive past.

This company is industrial design. The absolute raw brilliance of what people are capable of with every day things and some creativity.

So they layout of the home page site looks like their shop font - literally the front of a garage, I have not been inside the physical building, but I'm here to talk about how they present their site. So you access where it says enter and a portion rolls up as your would a real garage door.
Then you get carton boxes, giving the navigation - so they firstly don't use just plain old navigational buttons, they use an object, a file box to be exact - where by you cant hen extract a file out of the file box - continuous theme - clever.

In their last 2 subsections - they have only a bit of info - so went one step further, and these became pieces of paper that comes out of a file that came out of the file box - the font they have used on this is also a typewriter front to give it a very unique style and to fit in with their theme. They also use this to show their pieces of work, that drop down on paper once selected as well as visual paper clips on the pages to give authenticity.

Their in a constant background picture - as if you are then looking into their garage of work from the street.

Their colour scheme is simple - as keep constant imagery in the background. Their layout is clear and simple and easy to navigate.

They are so creative. using raw, every day object by way of reusing or recycling them and unrestricted thought to produce their unique work and it shows. Its Brilliant.

Real World Identification

What I mean by the real world identification is relating your site, with its colours and branding and layout to a bigger universal connection. What this is, is when designing you cannot think of yourself as the inventor for example of a colour meaning. There is definitely multiple colour meanings even in different countries but universally they often signify very similar things.

Red means stop, blood, demonstrated worldwide with a stop sign or even a red traffic light.
Green for go, the earth or becoming more popular the connection to recycling. It can be shown with a green traffic light.
Blue for water, the sea.
Orange for caution as like above examples, on a traffic light.

With the above in mind you cant design without any outside influence and worldwide interpretation of how you output your design.

On the site listed below I found very precise universal influence portrayed which then helps with the interpretations of his symbols that are being used. The importance of taking into account outside influence helps for better understanding in portraying your objective.

http://www.vadestatus.com/

Dolls for Girls

This site is very clear but still directs for its target audience very well. This is aimed at girls and finding toys that girls will like. The site is pretty and pink. They have a main toolbar at the top with 5 sections - then within each section you are able to link to a lot more things such as in the 'fun for girls' tab, you can link to additional 5 links for more to offer, also with a listing link bar on the right and boxed subsections through the rest of the page . They also offer buying online so as to access their product immediately.

This is a very extensive site, and I think it would be very easy to navigate for young girls and then also be interactive enough for them to browse with a parent for purchasing purposes.

The colour are very girly, they do not have an extensive palette, but have rather taken to using colour gradient through the site. They have also centralised their content with then either white or their main pink as background colour.

I think there is also a wide appeal as this brand is linked to very prominent sponsors such as HBO and books and TV characters are featured through the site so they get a wide range of publicity to bring someone to this site.

http://www.americangirl.com/index.php

An interesting email

I recently signed up to a newsletter from About.com to do with DTP and web design as learning some new tips every now and again is helpful to everyone. I found this email especially interesting but mostly amusing.

I tried to copy a few things out but to no success as they have links on the site to view. The topic of this particular lesson was related to bad web design.

http://webdesign.about.com/od/webdesignbasics/tp/little_web_of_horrors.htm

Monitor size and resolution

The basic element to make up the visuals to a computer monitor is pixels. Monitor resolution is measured in pixels, the width and height of the screen. example 640 x 480. This means that the screen in 640 pixels wide and 480 pixels in height.

'You can see by the chart below how screen size and effective resolution are linked. Compare a 15-inch monitor and a 21-inch monitor, both set to 800 x 600 pixels: the 15-inch will have a higher resolution. Larger monitors must contain smaller pixels in order to maintain the same resolution, but when a smaller monitor is set to a high resolution, the images would be much too small to read. A 14-inch monitor set to 640 x 480 is very readable, while a 21-inch needs at least 1024 x 768. Here are some recommended resolutions for the different screen sizes:'

	14"	15"	17"	19"	21"
640x480	BEST	GOOD	TOO BIG	HUGE	TERRIBLE
800x600	GOOD	BEST	GOOD	TOO BIG	HUGE
1024x768	TOO SMALL	GOOD	BEST	GOOD	STILL GOOD
1280x1024	TINY	TOO SMALL	GOOD	BEST	GOOD
1600x1200	TERRIBLE	TINY	TOO SMALL	GOOD	BEST

http://www.thescreamonline.com/technology/monitor/monitor_res.html

Relationship between elements.

Web elements refers to things like font, colour, buttons. These all need to be connected and have a linking quality to them to make your web site work.

Font - You do not necessarily have to use the same font for all your text but make sure there is continuity throughout. What you can do is use one font for topics and then another for all your body text throughout.

Buttons - make sure that through your different pages your keep the same colour scheme in your tabs as colour is very good for navigation through a site. So having your home tab green on one age and then changing it to yellow on another will lead to it being harder to follow than any real help.

Colour - as mentioned above - keep your colour continuous. Not meaning monotone - but that you have continuity in the colour, that every age holds a base layout in terms of your colour. In your buttons - that they all stay the same colour on every page.

An example of some great design continuity in these web elements is
http://www.instabox.com/