Welcome to the 7th Article about creating an online application using CakePHP 1.2. In my previous post I went through the process of implementing a basic user authentication system which will require an admin user to enter a username/password to access any of the admin controller actions.
This article is going to be a bit of diversion away from coding and will focus on the design of the application. More specifically the front end of the application and how visitors will see the front page. I'm going to show you a few places I go for design inspiration and the process involved with coming up with a design for my dvd catalog application which I've coined "CakeCatalog".
Inspiration
Before I even start to think about designing I like to go to a few CSS showcase sites to get my creative juices flowing, here are just a few I like to visit:One of the reasons for building a catalog application was a piece of software I saw a while back called Delicious Library which looks really nice so my initial thoughts would be to design something similar and have all the covers appear on the front page on shelves.
Paper Prototyping
Using the front page shelves idea I also wanted quite a large header and footer which spans across the entire page, this is quite a popular design technique looking through the design galleries and works quite well.Here I use my trusty pen and paper to come up with a few rough layouts of what things might look like. I've not got a scanner so you cant see mine but coming up with very quick sketches will give you a good indictation of the direction the design wants to be heading and will help to overcome a few hurdles in the very early stages of design.
Wireframing
Once I've created a design that I like its time to fire up Photoshop and start creating a very basic wireframe model. This is essentially a number of coloured boxes that will represent the different areas of the page such as header, contents and footer.
Photoshop Resources
I've been using Photoshop for some time now and although I dont claim to be a fantastic graphic artist I do know my way around the program and can create some good looking designs. No matter what your Photoshop skill level here are a few great resources for using the program and loads of techniques for you to play around with so you can improve.Creating the Layout
From the wireframe I've split the design into 3 main parts, header, contents and footer. The header will contain the appliction logo and form boxes for filtering through the DVDs by format, type, location and genre along with a search box.The contents will contain a graphical list of DVD covers so you can easily recognise the dvd and be able to select a single DVD to look at more information about it. I've gone with the shelf idea so I'm going to find a nice wood texture for the background and create a shelf effect.
The footer will contain lists of DVDs such as top rated, recently added, top genres and most active. This will provide the front page with some dynamic content that will change on each page load to keep things fresh.
Colour Resources
Here are a few amazing sites for some kick ass colour schemes that you can use in your designs. I know some basic colour theory and what colours should and shouldn't go together but these sites provide an endless possibility of good looking schemes.Final Design
Without further ado here's what I've come up with for the main front page. I found some really nice blue colours for the header and footer and added a few radial gradients to add some depth. The main text logo is "Myriad Pro" and thats got a slight gradient along with some inner and outer shadows.I managed to find a cool seamless wood texture which I modified to make it a little darker and this makes up the shelf as well.
The footer is a bit basic and I'm not really happy with it so it may change at a later stage but for now its just a few simple lists which I'll use to display some dynamic content.
Wrapping Up
This has been a fairly small article but I've pointed you to a few decent resources on Photoshop and design in general. Obviously you dont have to use Photoshop its just something I'm familiar with and I'm sure Fireworks, Paint Shop Pro all have pretty much the same basic features.If these articles are helping you out why not consider donating I can always use a beer! :)
