Bits & Pieces

Description

During the first semester of 2008 I was enrolled in a unit called “Systems Analysis and Design”. The unit’s acronym—S.A.D—quite succinctly sums up my experience with the subject. Anyway, in an attempt to rid myself of the restraint order that I seem to self–impose on all my assignments until the very last day, I chose to make an otherwise utterly boring assignment ever so slightly interesting.

Part of the final assignment for this subject required designing a user interface. Instead of simply creating diagrams in Photoshop (or, god–forbid, Visio) I opted to go ahead and mock–up a working demo site.

From the Ashes

I was revisiting some of my assignments earlier this year when I came across the aforementioned site, and thought it was a shame the design was gathering dust in a neglected folder on my computer. So, I decided to dust it off and do some good by sharing it with the wider world.

The demo web site is meant to provide an interface to the stock management system used by a fictitious leather shoes reseller in Melbourne called Luvov Shoes.

Pages

1. Log In
2. Home
3. New Stock Form
4. New Stock Form with errors

A stock listing/management page would probably make the demo more complete, but I’ll let that be an exercise for the reader <evil grin>.

I have however spruced up the HTML and CSS to make the markup slightly more meaningful and lightweight compared to the original version. I also added a bit of JavaScript to make the navigation menu more accessible.

• View demo
• Download demo

Why Again?

I’m well aware of how incomplete the page designs are, and this doesn’t even compare to something like “The Highly Extensible CSS Interface” series by Cameron Moll, but I think it can serve as a helpful example nonetheless.

• Look out for CSS selector examples. Besides the common ones, you’ll find combinations of attribute selectors, adjacent, child and descendant selectors as well as a few pseudo–classes.

  /* ID Child Type */
  #nav > li
  
  /* Type <Descendant> Type Attribute */
  form input[type="submit"]
  
  /* ID <Descendant> Type Pseudo-class Adjacent Type  */
  #dash ul:first-child + ul
  

  As usual, different browsers have varying levels of support for these CSS selectors. CSS3 has proposals for a lot more of these selectors.

• Examples for semantic form design and real–world usage of the <fieldset> element. This demo also makes use of the HTML5 doctype and some of its affordances, like no type attribute for the script tag.

• The site also contains an example of an accessible dropdown menu. Use your keyboard (tab key) to try it out.

  

Finally, I’m all ears for any improvements, discussions and call outs, so don’t hesitate.

Usage

I’ve published this with the aim to help budding web designers. By all means go through the code and the design, tear it apart if you want to, and feel free to use any bits and pieces (ha!) in your own projects. Just don’t rip off the entire thing and call it your own. Licensed under creative commons for what it’s worth.