mock up pages

19Apr08

warning: long rambling post ahead.

I’m running a little bit behind schedule partly due to devoting time to other subjects and also because even though I tried not to spend too much time mucking about with the visuals, I probably did anyway Anyway, I’ve got the page design down and what I’ve come up with is still relatively simple – basically a one page template for everything.

Database changes

When I actually went through the design process I discovered I’d missed a few things earlier.

For the database (see the original here) I realised that Somehow I managed to forget to include an email address for each user, which is essential for allowing registration. I also decided I want to index an image to each piece of music, something like an album cover or artist photo so there’s now an extra column to reference that. Finally I’ve added the column userValidated to the user table. This would be a Boolean automatically set to false when the user has registered and not clicked the special link sent to their nominated email address. When they click that link the would head to a page whose PHP would set this field to true. Standard spam prevention/validation etc…. A user would need to enter a valid username/password and have userValided == true for a successful login.

I’m also thinking I only really need two tables, not three as in my first draft…why make things more complicated than they need to be? My queries would be full of needless inner joins…

New pages

I’ve also decided that i will add a couple of search options for my end users. Keeping things as simple as possible, I’ll provide just three predefined queries; one will throw up some random files, one will return ‘new files’ meaning files that have been added to the database since the users last visit (fileDate vs userLoginDate) and the last one will return all the music files that match the users nominated favourite genre. So, anyway, to reflect this I need a page with a form that will allow the users to choose one of these options. You can see the changes to the flow chart below (click for full size).

Artwork/mock-ups

I’ve made the pages look like a little bit like what I imagine a commercial site might look like but based on a single template/page to save time and keep things simple. Of course there’s plenty missing (a navigation menu for example) because I don’t have the time or interest to add them.

Oh yeah, and In a moment of shear creative genius (or not), I decided to call my music file sharing site….umm.. musicfiles.com… meh. The thumbnail images follow the flowchart above.

Login:

Login failure:

New user registration

(i’m planning to incorporate the user password strength widget into this page):

New user registration 2

Account validated

Retrieve password

Retrieve password 2

Search

Admin file upload

User file download

Log out

Some graphics came from morguefile.com (free! If you are in need of some quick stock images for a student project or something with $0 budget it’s worth a look) or already had lying around from istockphoto.com. Fonts other than web safe ones are Qlassik, Scriptina and Mplus which are all free.

Also the album art came from freecovers.net which is probably highly dodgy

Filed under: Uncategorized   |  Leave a Comment