Our photo shop is a small gallery whose audience is generally from the mid twenties to mid forties. It prides itself on it’s quality pieces, knowledge of local photographers responsible for the work and its modern atmosphere.
They would like us to build them a site that reflects their values, personality and demonstrates the pieces in the best light possible. Luckily for us, they’re not too keen on Flash components, but they would like to see an automatically updating cart and for users to be able to click on thumbnail images to load up larger photos.

They generally have in stock between 50-100 photographic pieces at any particular time. Of these 2 or 3 new pieces come in each week, and every day they have a special on offer, usually at a reasonable discount of about 5% or so.

After some further discussion, we have determined they would like an About Us/History page, Contact Us page; in addition to separate pages for each photograph, the checkout and an additional page for the cart itself.
Straight away, based on the ideas about the store page and the discussion regarding stock and specials, we’ve come up with this rough sketch of our home page/store.

The central image takes precedence and allows the user to click on various thumbnails below and get a better idea of the product they’re interested in, as well as add it to the cart straight away if they wish. Next to this is our dynamic cart, with little thumbnail images to illustrate what items are in the cart at any one time, we will of course need to take into account what will happen when the cart gets bigger and bigger.
Our photo area is there too, although I’ve only sketched 2 rows of photos I think it will be neccessary to expand this to three or four depending on content. I could opt to paginate here, but this is a Photo shop, they need real estate.

Below our main content, we can already see the areas for our daily special and new to store sections as well as added info for our users to grasp at.
Through sketching these ideas down with the brief still fresh in the mind, it can give us something to work with as we start taking these ideas to our wireframe and design. For your own records I’ve sketched out the about us page, contact page, item page and checkout.

It has given pause for thought about how we can expect the site build to come together as well, by looking at the content areas we can start thinking about some of the database queries we will be looking to make as well as the structure of the HTML. Luckily for us our client is quite accepting of utilising some modern css3 techniques ( author’s perk), so we can look forward to implementing those down the track.

Through a series of posts, I will be covering each project from planning to delivery. The reason for this, as opposed to more in-depth tutorials on particular areas i.e. Photoshop techniques or PHP work, is that by having a project each month with all these elements included, will illustrate how multiple techniques can be brought together effectively.

The first project will be designing and building an online store (sans security and credit card functionality).

This project in particular will look at the following :

• Initial Planning, based on a mock brief
• Wireframing
• Utilisation of a grid based layout
• Designing in Photoshop
• Initial HTML / CSS build
• Development of back-end
• Utilisation of jQuery for visual effects
• Incorporating twitter into the site

The first post, looking at the mock brief and initial sketches and drawings will be up Monday.

In the midst of this I have been studying new techniques and improving on old ones. However, all this new knowledge needs to be shared. So as much as I can, I’ve set a personal goal for myself.

I want to share, what I’m learning and teaching myself with you. Whether it be new CSS or Photoshop techniques. It will help me to reinforce my skills as well as flesh out this site a bit more.

Stay tuned!

If you are in the Newcastle area take the time out to meet the regular and new attendees of Bits and Pixels, you will quickly find friendship as well as insight into all areas of the Web from people in all different stages of their careers. For that reason,Bits and Pixels succeeds thanks to the willingness of its members to share and impart their experience and friendship over a cold beer or a particularly tasty potato wedge. Thanks.

Hope to see you there.

Here, you will find tools, techniques, recommendations and thoughts on all areas of web design and development. It is my intention that I will continue to learn and be engaged by what I can trawl from the web and the various people in the industry I have been lucky to meet and talk to. Now, however I can share that knowledge and insight with anyone who takes the time to read.

So thank you, if you’ve read along so far and welcome aboard.