Archive for January, 2011

Website redesign – Baren Forum

For this project I wanted to make the ‘bad’ website I had chosen much more visually appealing and easier to get around as the existing website is unwieldy and confusing. It is full of interesting information but is presented in a haphazard and out-of-date format. It seems as though new bits of  information are tacked onto the existing infrastructure without any consideration to the overall coherence of the site. This is a website for artists who are fairly traditional in their approach. It is serious and though friendly, quite strict as to how people should conduct themselves in the forum. I think the people who run the site regard it as a community where there can be a safe exchange of artwork, techniques and recommendations in a supportive atmosphere. In the three different interfaces I have tried to keep the ‘client’  and existing audience in mind as well as considering how to draw in a new audience to the site.

Each design contains a home page and a second page of artworks.

There is quite a lot of information to include. There are a set of main links, secondary links and a large footer contains extra information so the visitor should be able to find necessary information quickly. I have also included log in, register, subscribe, archive, search and contact links.

The information on each of the home pages is laid out so that minimal vertical scrolling is required. On the second pages this was not possible but I have organised them so that the images take prominence and supporting information is reached by vertical scrolling.

The first redesign which was created in Photoshop arose out of the classroom project for simple design. I have kept this as a quite clean, stripped back design. Mainly black and white with a splash of colour. I created a simple circular logo which is a reference to the name Baren Forum (see earlier post – vector image)  I used a fresh looking serif font – Perpetua – throughout.

I have used one high impact ‘hero’ image on this page. On the second page I have created thumbnails of each print with the artists name underneath. These are arranged in alphabetically order. Clicking on the thumbnail takes the visitor to a page displaying the whole image, with details about the print.

The second redesign was vector-based and created in Illustrator. This page is illustrative in it’s concept. I created a wood effect background by following and modifying an online tutorial. I did the same for the sheet of paper. The preferred tools for both were the warp, wrinkle and twirl. I wanted the sheets of paper to have a deckled edge like real japanese paper.

Again I used a single hero image. For the logo and headers I used a font from dafont – LLRubberGrotesque which has a printed feel to it. The lines of the page have a rough, carved feel to them – I downloaded some hand drawn effect brushes for this. I used a sans serif font – Gill Sans –  to contrast with the logo and headers and to give the site a contemporary look with good readibility.

For the second page rather than having to click between pages to look at the prints I have used a slide show/carousel format which is a popular and intuitive way to display and search/look at images. It allows the visitor to concentrate on the content rather than on the navigation. A highlighted number system allows them to see where they are in the slide show. To integrate the slide show into the design I have put it on top of a stack of paper after seeing another website that used a similar format with photos. This may have to be tweaked to work, but I wanted to show it as a concept.

For the third design I have gone for a more grungy look and went back to Photoshop to design this. I used several sheets of scanned japanese paper to build up the background image and the background of the actual page. In the background I overlaid a scanned image of a woodcut and applied opacity to knock it back. I overlaid the sheets of paper on the page to differentiate between the different areas of the page – header, main body, footer. For the sidebars I downloaded some paint effect brushes to give a texture, rolled ink effect.

Again I created a circular logo imported from Illustrator. I tweaked the circle a bit so it looked a bit handmade and created a clipping path with a scanned image of printed woodgrain. I used a font called 18th Century downloaded from Dafont which has a handmade old fashioned feel to it, this is contrasted with Candara a humanist sans serif font used for the majority of the text which has a carved feel to it, but looks fresh and contemporary.

On this home page I used a bit more of the text from the introduction on the original site and two images with subtitles containing links.

On the second page I again used a slideshow – but with a formal feel to it. This time I used thumbnails that could be scrolled. The displayed image can be clicked to take the visitor to a page with more information about the print and artist.

Below are examples of websites I found inspiring, there are slideshows are from popular websites such as Flikr and the Guardian. I like these sites as I think they successfully show images, artwork and photography off in a visually interesting, engaging and intuitive way. Most are quite stripped back so that the pages are not competing with the artwork which are the main focus of the sites.  I have also included earlier designs for the different interfaces, alternative textures and quick sketches

This slideshow requires JavaScript.


Read Full Post »

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 »

« Newer Posts