Ok, having established some idea of the problem domain I’m looking at in the previous article, I’ll now set out to define a few pages that I’d like to look at.
I should preface this section with a note that beautiful page design is not really in my skill set, and that I am competent but not terribly inspired in writing HTML. The pages I’ve mocked up are there more for the sake of having concrete examples to work with than for demonstrating my amazing graphic design abilities. I’ve also helped myself to some page layouts (but not to any actual code) from various internet sites.
Note that these pages will likely evolve as I update the code.
Registration page
This page is a basic registration form, such as one might see on an online forum. It’s got five fields and a spot for an error message. Template code should re-fill the form, add the error messages, etc.
Paginator
This page has a pager near the top and could represent search results or what have you. The arrows on the sides are intended to link to the first / last / previous / next pages.
Product thumbnails
This page isn’t meant to be displayed directly but rather is a sort of repository of different layouts for some very simple product information (name, image, price, and copy). At the time of this writing there are only two present.
Category Pages
There are two pages in this category. They use the product thumbnails from above to lay out a whole page of products. Right now I’ve mocked up one in a simple 4×3 columnar layout and one using a big “hero image” at the top left.
Navigation
This is still the least-defined idea in my mind. I did mock up a page with slightly different top-navigation for when the user has logged into an account.