Feeds:
Posts
Comments

Archive for November, 2010

The aim of this project was to design a grunge style homepage for a site named Skateboard Sussex.

The page needed to contain a header, footer, side bar, navigation menu and  information around related topics.

The page was set up in photoshop – 1600 x 1000pxs. The actual page was set up to 960 x 600pxs. The extra space was to allow for a related illustrative background so that visitors viewing on high res or large monitors do not see the web page sitting on a white background.

I produced a background by creating a brush from images of graffiti. I used pavement colours – greys, pinks and black. These have been sampled within the webpage to anchor it to the background.

I have tried to keep the design quite clean even though it contains grungy elements. I want visitors to be able to locate what they are looking for quickly.

I have used one single image to sum up what the site is about. It contains lots of ‘white space’ so that additional info could be added if needed without adding too much clutter. If this was a live webpage – the image could be updated and changed regularly to keep it fresh. The photo was originally colour, I  have desaturated and tinted it with a pink sampled from the background image.

I thought that the main text could be a main news story with minimal introductory text with a link (more…) to take the visitor to a page containing the extended story, additional information, relevant links, images, etc…

The header, footer and sidebar are in a sampled grey. The edges have been softened by using a brush texture in the same colour and overlaid with an image of 5% opacity to add texture which doesn’t compete too much with other elements.

I have used two fonts – Verdana for body text – a recommended web font; for the header and subtitle I have used a hand drawn font called Green Pillow.

The navigation bar has been pushed to the top right of the header, it has lots of white space around it so it is easy to locate. It doesn’t take up too much space.

In the side bar I considered what other elements may appear on the homepage. Looking at existing sites there seems to be lots of news items which are often linked to videos, so I have added these in, along with registration and log-in buttons as well as links to Twitter and Facebook which also seem to be common items.

The footer contains information such as copyright, contacts, submission policy and others.

Advertisements

Read Full Post »

Mood boards representing different elements of interface design

Headers

The first thing a visitor to a website will notice is the header, It is the chance to make a great first impression, draw the visitor in and set the tone for the website.

Main navigation

Primary navigation are elements which are present on most pages of a site in a consistent format. These elements or controls should allow users to get anywhere on the site.

Well designed navigation is essential as it is key to the usability of a website. Navigation should strive to be visually appealing but not at the expense of functionality. It is a good idea to try and keep primary navigation minimal to avoid cluttering the page.

Secondary navigation

Secondary navigation is normally included on a few specific pages. It appears in the main section of a page, where it can provide detail about contents and provide fast routes to information.

Backgrounds

Backgrounds are another important element to add impact to the overall design and tone of a website. With increased monitor sizes and resolution plus faster internet speed there is more scope to create impact with big bold illustrations, graphics or photos.

Sidebars

Sidebars, while not the main focus of a website are still important in terms of usability and appearance. A well-designed sidebar can make it easier for visitors to quickly find what they want, which helps to keep them at your site longer and improve the overall effectiveness of the site.

Footers

Footers on web pages are sections where important additional information such as copyright or customer service information are sited. They can also contain additional site features such as twitter updates, a short biography of the author, e-mail sign up links and other information that does not belong in the main content of the site.

Read Full Post »

This report will examine two websites. One showing examples of good interface design and the other showing bad examples.

Bad Design

Barenforum.org

This is a website about the art of woodblocks. It states “it’s main purpose is to encourage a flow of information among printmakers, to allow them to share their knowledge and experience, and to provide a place where they can get to know each other.”

The site started as a personal forum run by one person 1997. Since then it has grown too large and active to be run by a single person and is now overseen by a ‘council’ of eight members. It was made into a permanent website in November 2000.

The main audience seems to be traditionally orientated woodblock printmakers who are looking for, or sharing information on how to start producing woodblocks and also extending their skills and knowledgebase. I get the feeling that there is a hardcore of established users who are used to the format of the website and it therefore feels quite insular.

The website holds a lot of interesting information, it is let down by a number of factors, the two main ones being a lack of organization and overall design (both artistically and structurally) that would draw new visitors in and hold them there. This website needs invigorating and refreshing.

Appearance

The overall appearance is dated – the home page has far too much information on it, though this is divided into sections and there are no distinct graphics apart from two sorts of logos.

The homepage has a header and footer and a main section containing links to information. There are no sidebars. The use of fonts and colours are restricted, readable and easy on the eye, but suffer from looking outmoded.

Headers on other pages are different from the one on the homepage.

There is no recognizable navigation bar.

The footer on the homepage contains copyright and a link to a contacts page. A different footer appears on some of the other pages and this seems to act more like a navigation bar (though very small and hidden away at the bottom – which has to be scrolled to be reached).

The homepage does not require vertical scrolling.

There is consistency of page layout throughout the core of the site. This deviates in the encyclopedia section, though this seems to be based around links to other sites.

Though you know that you have arrived at a woodblock website, it’s purpose is not immediately clear and it seems somewhat daunting to navigate around.

Images on the site, which are primarily there to showcase members’ work are often small, though some are thumbnails which click to larger images. Some images suffer from not being properly produced for the web.

Structure and navigation

The structure of this site is disorganized– the lack of a navigation bar makes it hard to move around the site and the visitor needs to use the back button or a tiny link at the top of some pages to be taken back to the homepage. You are not able to locate other areas of the website without returning to the homepage or navigating though a seemingly haphazard maze of links.

As text fits across the width of the page there is no room for a sidebar in which additional relevant information to a particular page could be held. Links tend to rely on underscored words.

Content

The overall content reflects the purpose of the site and is appropriate to its intended audience. It is heavily text biased and seems to be well written and does not contain typographical errors. It is broken down into short sentences and paragraphs and is bulleted in places. However it is let down by the fact that lines of text are  too long and therefore quite hard to scan.

I think that the content would probably meet the users needs and expectations, but suffers from the lack of well-placed graphics/illustrations.

A large portion of information on the homepage is very out of date and needs to be removed, archived or maybe listed in hierarchal order. A casual visitor could easily come to the conclusion that this site is not longer in use due to this and it takes time to find current information. Specific information takes time to find as well and the search function concentrates on external sites.

Usability

Safari and Explorer 6 – These pages remained the same when viewed on both these platforms

The different components of the site seem in general to be working well – the links take the visitor to the correct place and the forms are arranged in a logical order and are working. There is a shopping section, which operates in the normal online way, and there is much support information to explain the process. Apart from these interactive elements the site does not contain sound or flash and does not require additional browsers or plug-in requirements.

I am not sure how accessible this site is to disabled users

Good design

East London Printmakers

www.eastlondonprintmakers.co.uk

This is a website for East London Printmakers – an independent collective established in 1998 as a not for profit organization supporting and promoting artistic practice within the realm of printmaking. It represents 150 members and attracts 1000 visitors annually.

The main audience would be artists looking to find classes in printmaking or to have open access to the printmaking facilities and studio space. Visitors may also visit to find out about print exhibitions or individual artists. I think there would be quite a wide age range.

Appearance

The overall appearance is clean and contemporary. The layout is structured and balanced. The banner contains a navigation bar that is consistent throughout the site.  The logo is simple and is not too imposing. The banner also contains links that may more commonly be found in the footer (contacts, find us, about us links) and the address and an active email are also contained on the right hand side of the banner.

The colour used through out the site is minimal and restrained – the yellow banner, which is echoed in various text links throughout the site, supplies a splash of colour. Other colours are grey and black text with the use of tones of a soft pink to show links within the body text or to highlight the page the visitor is on. A contemporary and legible sans serif font is used throughout.

The homepage is simple and appealing and very minimal scrolling is required to reach the bottom of the page.

The main body of the pages is split into two, with the main information on the left of the page and an image or sidebar on the right depending on what is required on a particular page.

The images throughout the site are professional looking and relevant to the content. They are properly reproduced and of a good size. There is a page of all the artists who work at the studio containing thumbnails that link to individual pages of each artist’s work. These pages contain a large single image and a sidebar with thumbnails which when clicked replaces the main image. These sidebars also contain a short bio of the artist. These pages are occasionally let down by the fact that that the main image does not always appear. The copyright of the artists is explained on the thumbnail page.

I think that the design is in keeping with the target audience as it is restrained and contemporary and complements the images of artists work visible throughout the site.

Structure and Navigation

The content of the site is logically organized and is easy to move around. It is intuitive and all links are well signposted.

The main navigation bar is the most obvious way of moving between different sections of the site and you can also navigate between related pages easily.

Secondary navigation is supplied as drop down menus within the main bar as well as the text links as described above.

Quick links to interesting/important pages are also supplied on the home page.

Images are supplied with text and it is explained at the top of the page if they are to be used for navigation.

Information is easily accessed within the three clicks rule of thumb and it is easy to backtrack.

Content

The content is useful, relevant and up-to-date and meet the needs of the intended audience. The text is simple, with short sentences, paragraphs and headings, it is also free from typographical errors and is grammatically correct. It scans easily as the lines of text are short. It is an interesting site to look around, with much to engage the visitor over and above looking for courses or access. There is a good links page to lots of helpful sites and it is easy to find specific information.

Usability

Safari – the pages view correctly

Explorer 6 – the images jump around skewing the page layout and there are a couple of typographical errors, but otherwise works well

Firefox

The site has good usability – no horizontal scrolling is required, some pages need vertical scrolling due to amount of information. Forms are arranged logically and the majority of the components are functional (just a few glitches on the occasional artist’s page). As the site is simply laid out there are no special requirements regarding plug-ins or interactive elements. The majority of visitors to this site would be able to use it very easily.

Disabled accessibility?




Read Full Post »

 

With this project I have tried to replace life in the ocean with a plastic equivelent.
 
I have created a header that is repeated throughout the 6 banners to retain continuity. I have deliberately used a colour that contrasts with the dominant blues and greens of the ocean to try to emphasis the point that plastic is an alien substance that is invading our oceans.

 I wanted the other text to be a contrast with the header – to be softer, readable and to be informative. I have manipulated this text to try to give it a watery effect by blurring, smudging and erasing. I also emphasized certain parts of the text by increasing the font size.

Read Full Post »

When designing a website, one of major considerations needs to be colour. Colour helps to set the tone and emotional punch of the website. It can draw the viewer in or repel them depending on how well colour is used. Effective use of colour is produced by understanding the basics of colour theory.

The colour wheel

The colour wheel is a tool to show us how colours are related.

It is divided in the following way

Primary colours

Red yellow, blue. These are colours that cannot be produced by mixing other colours together, they are used as the basis to mix all colours

Secondary colours

Green, violet, orange

These are created by mixing two primary colours.

Tertiary colours

These are created by mixing a primary with its adjacent secondary colour

For example yellow mixed with orange will create orange-yellow. Blue mixed with green makes a blue-green.

Warm colours

Warm colours on the colour wheel range through red, orange and yellow. These colours can come forward, feel closer, or come towards you.

Cool colours

Cool colours range through blue, green and violet, tend to recede, feel distant or move away from you.

Colours appear warmer or cooler depending on the amount of warm colors, such as red, vs the amount of cool colors such as blue, that appear in each color.

Various colour schemes can be used to make harmonious and effective colour combinations.

Monochomatic colour

This is variations in lightness and saturation of a single color, it produces a soothing scheme, that is easy on the eyes when using cool colours.

Analogous Colour

These are colours that are adjacent to each other on the colour wheel and have a harmonizing effect when used together. It is similar to the monochromatic colour scheme, but has more nuances.

Complementary colours

These are colours that sit opposite each other on the colour wheel. They contrast with each other quite dramatically when placed next to each other and create tension.

There are other more complex colour schemes which are variations on the complementary colour scheme

Triadic

This scheme uses three colours equally spaced around the colour wheel, which can produce less contrast and more harmonious, balanced results than the complementary scheme.

Tetradic (Double Complementary) Color Scheme

This scheme uses two complementary colour pairs and can be hard to harmonise. It can look unbalanced if the four hues are used in equal amounts. One dominant colour needs to be chosen or the four colours need to be subdued.

Our response to colour is physical, emotional, psychological and mental, it is also determined by culture. These factors need to be considered when designing websites to ensure that you are sending the correct message.

Red

Is an extremely dominant hot, colour, It stimulates the metabolism, respiration and appetite.

It can evoke the following: energy, strength, dynamism, heat, passion, vibrancy, love, lust, aggression, violence, dominance, danger

It makes objects on a page appear larger and closer and can become overpowering and ‘congested’ – It is a good iconic colour to encourage people to act quickly (buy/click here buttons).

It is seen as a masculine colour.

Pink

Is another hot colour, it expresses romance, love, friendship, peace. Pale pinks suggest ethereal, delicate qualities. It is regarded n European culture as a feminine colour.

Orange

This colour acts as an appetite stimulant, it also makes objects seem nearer/larger.

It suggests warmth, energy, excitement, friendliness, cheerfulness, it is inviting.

It is also seen as ‘cheap’ and is often used for promoting sales, bargain products, toys and food.

Yellow

This colour stimulates mental activity. It is the colour most visible to the human eye, it attracts attention.

Yellow is the colour of sunshine, light, joy and energy, happiness, cooperation, wisdom, hope, enlightenment. Depending on its shade or tint it can also suggest jealously, deceit, disease, cowardice and weakness.

It is colour that needs careful handling to work successfully. Overuse can be disturbing and produce anxiety. Some shades lose their warmth and appear dirty. It can also be perceived as a childish colour.

Brown

This is a neutral, natural colour with a wide palette. It conveys a feeling of warmth, honesty, and wholesomeness. It is suggestive of stability, simplicity, nurturing,,the outdoors and nature, fertility, productivity and hard work. Some of the warmer browns such as a chocolate or coffee brown promote sophistication and richness.

Green

Green is a cool colour. It lowers blood pressure, relaxes the nervous system and calms and soothes the mind. It stimulates creativity and suppresses appetite.

Green images tend to recede and appear further away.

Green can represent fertility, physical healing, abundance, growth, freshness, nature, harmony, safety and suggest monetary success. It also represents jealousy, inexperience, disease, decay and nausea.

Blue

Blue is a very popular colour. It slows the metabolism and suppresses the appetite. This is a cool colour that recedes.

Blue is associated with wisdom, spirituality, faith, patience. It is harmonius, soothing and serious. It suggests fluidity, freedom, peace and mystery. It can also evoke conservatism, depression and coldness.

This is seen as a colour predominantly favoured by males.

Purple

This is a strong colour, that is quite polarizing. It is either loved or hated.

It is the colour of spiritual power, self assurance, dignity, royalty, wisdom, empathy, sophistication, wealth, ambition, luxury and elegance. On it’s flip side it suggests cruelty, arrogance, gloom and can be very oppressive.

Grey

This is another neutral colour. It is grounding and can be used with bright hot colours to calm them down.

It is the colour of security, reliability, professionalism, dignity. It is durable, quite and practical. It can also be seen as gloomy, depressing, boring and sad. It is a popular colour in current web design.

Black

This is another strong colour. It evokes power, sophistication, sexuality, mystery, elegance, power and wealth. It is also the colour of fear, sadness, anger, anonymity and evil. It can be seen as an anti establishment.

Large areas of black diminish the readability of text. It is a good colour to use with most others.

White

Though often viewed as a neutral it is in fact a brilliant colour that can induce headache, something to consider when designing a website, especially if there is a lot of text to read.

White is the colour of purity, innocence and cleanliness  and is a colour that goes well with others and can make dark colours appear brighter and more prominent when placed next to them.

Read Full Post »

This is another header project – to combine elements of text and image to produce three different banners based around the theme of our main project but reflected in three different moods

Read Full Post »

We had to find images that adhered to the “Rule of Thirds”

This slideshow requires JavaScript.

Read Full Post »

Older Posts »