Development of Website Design

All designs were made by me in Photoshop. For the most part I used a canvas size of 1024 x 768 pixels as according to the W3C website, this is the most commonly used screen resolution.

I began by creating a neutral colour scheme. I used light colours as I felt this would create an open and inviting feel to the site.



After receiving feedback from Mehreen I then decided to change the colours to reflect a most rustic homely, feel.



I then decided that maybe using an image as header would give it a bit more impact.



I then decided that the more options I could present to the group the better, so came up with another design. This one took rather longer than the others to produce.

Development of Logo

This week I have made progress on the logo for the website.

Last week I made some sketches, exploring multiple ideas. It looked something like this

At the beginning of this week, I took to photoshop and produced the following, at this point still not completely set on an idea.

A few days later, I looked at these ideas again and decided on one which I thought had the most potential and looked least amateurish. I felt that having books in the logo would be a good idea, and liked the idea of the three letters of the book shop name, S, T and B of Small Town Books, acting as perhaps bookends, with some books falling over, as the books on my bookshelf never stay upright. I produced further sketches of this idea in photoshop.



Then I used Adobe Illustrator to produce a more professional set of designs.

These upright oblong shapes are book spines, and will be rendered as such later. I found that it was easy in Illustrator to quickly produce many different configurations using the same elements. I will get feedback on which of these is most effective from my team next week.

I had a clear idea of what I wanted the font to look like. In the final design it will look like this. My preference is for the top design, however I am intending to get feedback from my team before going ahead. The colours are interchangeable.

This week I also started to think about what types/genres of book will be available in the online shop. I also started to collect information for cookery books, because I knew that this genre will definitely be included. I will finish off gathering book information next week.

I also thought about colour palettes for the website.



The group of colours on the left fit into the rustic, warm colour scheme that we mentioned in the bid. The other colours could be used depending on the actual images that will go on the site.

week 2 tasks done

http://www.martinfrancis.org/smalltownbooks/admin.html

database design What fields are required?
Create mysql database
create php form that updates database fields from the admin page,
Get some book data to go in fields
view database to check that form works and is adding data

Week 1 tasks

Colour scheme
Decide on navigation main headings and subheadings including genre
types for general area and cooking area
Images visuals, logo
Basic layout
Div structure, HTML and CSS
Twitter and blog (possible 2, general one and cooking one)

e commerce sites reviewed

http://econsultancy.com/blog/5160-best-of-2009-24-e-commerce-sites-reviewed

Would of been nice to know about the when we did the critique.

But worth spending a few minutes on now, to see a few good examples.

Food websites be inspired

http://www.dishizzle.com/

http://www.beerenberg.com.au/

Bid draft - 3

Following our client discussion we propose the following features for your Smalltown
e-commerce bookstore:-

E-Commerce usability
We recommend optimising conversion rates by building the structure around the principle of landing page to purchase in no more than 3 clicks. This is extremely important in e-commerce as each click is a point for confusion or drop out.

Navigation
It is very important that users know where they are on the site and how to get back if they have arrived at the wrong page. To ensure that users can clearly navigate the site we will have:-

1. The Smalltown logo at the top left corner as a home link.
2. A horizontal tabbed navigation for the main part of the website. This worked successfully for both Blackwell and Amazon websites.
3. Book genre types will be listed as a vertical menu down the left hand side with the page clicked indicated with an arrow.

The navigational elements will be controlled using cascading style sheets (C.S.S.)

Colour
We recommend that multi-coloured book covers are best displayed on a neutral white background as Amazon and Blackwell demonstrate.
As the cookery section is key we propose using rustic browns and reds to reinforce the cookery theme as these cookery sites do.
See http://www.bbc.co.uk/victorianchristmas/ and http://www.booksforcooks.com
When the users navigate away from the cookery section these rustic borders will disappear to be replaced with complementary colours signposting to the user they are now in a general books area.
Exact colours are to be decided but we will use a professional looking colour scheme using Adobe Kular for suggested colours and will be controlled using CSS.

Layout
We propose building a mixture of fixed column for the left hand side and liquid for main content to cater for users with a range of screen sizes.

Social Media
We recommend 2 social media feeds to appear on the site to help with it’s SEO.
A Blog where staff and customers can review and comment on the latest books. Plus we will use AJAX to display excepts of those reviews on the right hand column of the sites pages just like Amazon.
A Twitter account that customers can join so that they can be informed of latest offers and arrivals. This will ensure that your customers have reasons to keep returning to your online bookstore.

Administration
Database control will be password protected and secure. We will provide the facility to monitor the increase in sales that this new website will no doubt generate.

Quality Coding
We will do our best to ensure we follow best practice in writing W3C valid XHTML code, adhere to WCAG and make sure the content is easily crawled by web spiders and robots so that it ranks highly with search engines. We will monitor user input by using Javascript.
and Cookies will monitor users searches and make suitable recommendations just like Amazon.

These practises will ensure a success measured in high sales and an enjoyable user experience.