Archive for the ‘Project 3 – Interface Design’ Category

e-commerce homepage

e-commerce homepage

For this project we had to produce a homepage for an e-commerce site. I have created a page for a friend who renovates and sells vintage furniture and accessories. After looking at various sites I decided I wanted a clean crisp look with retro overtones. Mid century vintage furniture is very fashionable and features in many lifestyle magazines such as Elle Decoration, so I felt that the page should try and reflect the tone of such magazines.

I have hopefully included all the elements needed for an e-commerce homepage such as call to action buttons, simple navigation bar, a large photo to reflect the content of the website, a section for any brief introdcutory text, contact details plus search, account, register and cart links, foot details including delivery and returns plus methods of payment.


Read Full Post »

There are legal and ethical issues that need to be considered when designing Web pages and using the internet.

Web Accessibility Initiative (WAI) guidelines

1999 the World Wide Web Consortium (W3C) set up a project called the Web Accessibility Initiative (WAI), which created a set of guidelines to develop access for disabled users to the Web.

There are millions of disabled users and they are often presented with significant barriers when accessing the Web.

The premise of the WAI guidelines is that if all sites are correctly designed, developed and edited, all users have equal access to information and functionality.

The guidelines encompass all disabilities that affect access to the web – visual, auditory, physical, speech, cognitive and neurological.

It is important because the Web is an increasingly essential resource for many aspects of daily life such as education, employment, government, commerce, health care, and leisure. In some cases, the Web is replacing traditional resources and service delivery, therefore equal access and opportunity needs to be provided to people with disabilities to ensure they are able to interact fully with the Web. This basic human right is recognized in the UN Convention on the Rights of Persons with Disabilities, which specifically mentions the Internet.

Organizations may also be required by law and policy to make their web content accessible to disabled users. The WAI website provides a comprehensive list of laws and policies around the world to help organizations in their legal obligations.

The basic guidelines laid out by the W3C to enable disabled users to successfully use the Web are as follows:

  • Provide equivalent alternatives to auditory and visual content.
  • Don’t rely on color alone.
  • Use markup and style sheets and do so properly.
  • Clarify natural language usage.
  • Create tables that transform gracefully.
  • Ensure that pages featuring new technologies transform gracefully.
  • Ensure user control of time-sensitive content changes.
  • Ensure direct accessibility of embedded user interfaces.
  • Design for device-independence.
  • Use interim solutions.
  • Use W3C technologies and guidelines.
  • Provide context and orientation information.
  • Provide clear navigation mechanisms.
  • Ensure that documents are clear and simple.

Copyright and the Internet

In essence copyright is a set of exclusive rights granted by the law of a jurisdiction to the author or creator of an original work, including the right to copy, distribute and adapt the work.

The author of the work in general holds copyright. If an employee in the course of work makes it, the employer is the owner unless other arrangements have been made.

Copyright is, however, a form of property that can be bought or sold, inherited or otherwise transferred, wholly or in part. So, some or all of the economic rights may subsequently belong to someone other than the first owner.

Copyright covers a wide range of works, for example: books, maps, dramatic works, paintings, photographs, sound recordings, film, and computer programs. Many such works can now be accessed via the web and this has impacted on copyright protection and enforcement.

In the UK material sent over the Web or stored on servers are in general protected by law in the same way as other material on other media.

Anyone who wishes to place copyrighted material on the web, distribute or download material others have placed on the web must do so with the owner’s permission unless copyright exceptions or defences apply.

Defences can include:

Material published in the public interest.

Permitted Acts under the Copyright, Designs and Patents Act 1988 such as use of work for research or study.

Fair dealing. There is no strict definition of what this means but it has been interpreted by the courts on several occasions by looking at the economic impact on the copyright owner. Where the economic impact is not significant, the use may count as fair dealing.

Examples of fair dealing can be the use of another’s work for the purpose of criticism or review, the reporting of current events, making single copies of short extracts of a copyright work for non-commercial research or private study.

The law maybe different in other countries, so copyright material may have been put on Web in other countries without infringing copyright but may still be illegal to use (i.e. download that material) without permission in the UK.

An alternative to traditional copyright is Creative Commons which are copyright-licenses that are free of charge to the public. They were developed and released by a non-profit organisation based in San Francisco. They were developed to create a more flexible copyright model, replacing “all rights reserved” with “some rights reserved” and are an attempt to address what ‘intellectual property’ means in the information age and how it can be shared.

The licenses allow creators/authors to communicate which rights they reserve, and which rights they waive for the benefit of recipients or other creators/authors.

There are four major conditions of the Creative Commons:

  • Attribution; which requires attribution to the original author;
  • Share Alike; which allows derivative works under the same or a similar license
  • Non-Commercial; which requires that the work is not used for commercial purposes
  • No Derivative Works; which allows only the original work, without derivatives

Privacy and Crime on the Internet

Internet privacy is about the exercise of control over the type and amount of information a person reveals about themself on the Internet and who may access such information. Websites collect personal information through registration pages, order forms,  and survey forms among others.

Most people accept there is a trade-off  of information in order to be able to enjoy the benefits and convenience of using the Internet for activities such as online shopping. However a degree of care needs to be employed as to what is submitted and looked at online in order to keep information private.

Secure websites have been created to ensure customers have maximum security and privacy in their online transactions. These use encryption technology to transfer information from the user’s computer to the online merchant’s computer. The encryption scrambles the information, preventing hackers from obtaining it.

One way to try and ensure privacy when shopping online and surfing the web is to read a companies privacy policy. This should describe all information a website gathers, and explain why it is gathered, what is done with it, who has access to it and under what circumstances, and describe any control the visitor has over the process.

Social networking sites such as Facebook are phenomenally popular which means millions of people are giving their personal information out on the Internet. These social networks keep track of all interactions used on their sites and save them for later use (there is controversy that such information may be kept indefinitely).

Privacy measures are provided on these sites to try to provide protection of personal information.  For example Facebook has privacy settings available for all registered users. These include the ability to block certain individuals from seeing your profile, the ability to choose your “friends” and the ability to limit who has access to your pictures and videos.

Cookies do get stored on users’ computer and assist in automated access to websites. However via some cookies, websites are able to track consumers’ online activities and gather information about their personal interests and preferences.  They are often seen as a common concern in regards to privacy.

Internet users obtain Internet access through an Internet Service Provider (ISP). All data transmitted to and from users must pass through an ISP. This means an ISP has the potential to observe users’ activities on the Internet though they are usually legally prevented from carrying out such activities.

A topic of debate between privacy champions, civil libertarians and those who believe measures are necessary for law enforcement  are the range of technologies used by government agencies designed to track and gather Internet users’ information. In January, 2009, the UK’s Home Office adopted a plan to allow police to access the contents of individuals’ computers without a warrant. This is called “remote searching”, and allows one party, at a remote location, to examine another’s hard drive and Internet traffic, including email, browsing history and websites visited.

Other risks to privacy may include:

  • Web bugs: objects embedded into a web page or email, usually invisible to the user of the website or reader of the email. It allows checking to see if a person has looked at a particular website or read a specific email message.
  • Spyware: ia piece of software that obtains information from a user’s computer without that user’s consent
  • Phishing: a fraudulent process of trying to obtain sensitive information such as user names, passwords, credit card or bank information. This is  an internet crime in which someone acts as a trustworthy entity in some form of electronic communication.
  • Malware: a term short for “malicious software” it is software designed to cause damage to a single computer, server, or computer network through the use of a virus, trojan horse or spyware
  • Pharming: a hackers attempt to redirect traffic from a legitimate website to a completely different internet address. It can be conducted by changing the hosts file on a victim’s computer or by exploiting a vulnerability on the DNS server.

Read Full Post »

For this classroom project we had to produce an interface with a more minimal and clean look. I have chosen quite a stripped back look with a serif type face (Perpetua). The interface is mostly blacks and greys with a splash of bright yellow for the header and footer to ‘lift’ the design. I have used a single large single colour image for impact and quite a large footer to contain links to large amounts of important information. A minimal drop shadow was added to the page to lift it away from the background.

Read Full Post »

This was a vector based project produced in Illustrator. We had to produce an Octopus following downloaded instructions. The main tool we used was pathfinder.

Read Full Post »

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.

Read Full Post »

Mood boards representing different elements of interface design


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 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, 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 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


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.


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.


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.


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


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.


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.


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.


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


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 »