A Peek Into Shane’s Site Design Process Part I

See also:

• A Peek Into Shane’s Design Process Part II – Design Decisions
• A Peek Into Shane’s Design Process Part III – Lessons Learned

My example HTML and CSS code – Helena Morgan – Teacher, Performer, Freelancer (opens in a new window)

The Project Brief

The site above is the result of an assignment for a Web Design subject I was enrolled in during 2008. The subject focused on design theory (for example layout, usability and colour choices) and did not discuss front- or back-end technologies. The assignment, “design a web page, applying the principles discussed during the semester” was vague and open-ended. Like the subject itself, the assignment was to focus on design and the decisions behind them. The technology behind the design was not important, whether it be lovingly hand-crafted, fully complaint XHTML and CSS, thrown up onto WordPress inside a premium template, elaborately constructed in Dreamweaver or kludged together with Front Page.

I took the opportunity to treat the assignment was if it was a design brief from a customer who knew that they wanted and needed a website but had no idea as to how it should look. As a happy coincidence, my wife had been thinking about creating an online presence for her musical and acting activities as part of our planned move from Canberra to Sydney to support her professional performance ambitions.

The Client Brief

Using my wife as inspiration, the brief was to develop a promotional website for a fictional teacher, performer and freelance musician and choreographer.  The aim of the site was to create a central point of information on each of the person’s main activities – private music tuition, performing and other freelance music activities such as commissioned compositions and choreography.

Over a number of meetings with “the client” (ie coffee with my wife), three target audiences were identified:

1. individuals seeking lessons in singing, piano, violin or music theory, whether for themselves or for their children;
2. directors, producers, casting agents and so on for professional productions who are seeking a singer, dancer or actor (or a combination of the three) for their production; and
3. individuals or organisations seeking to engage the services of a vocal coach, choreographer or composer for their production.

The client’s design needs were basic and light on detail. “Keep it simple” and “purple” were the two key requirements. We brainstormed several design options with pen and notebook before settling on a few sketches to flesh out with some mock site designs.

Self-imposed Technology Constraints

In the conceptualisation phase I created a list of technology constraints to help me make the best use of the time available to me. I decided that the site needed to be highly accessible and should present the content as consistently and uniformly as possible across all major browsers.

As the timing was tight for the assignment I made the decision to create a dummy site using only XHMTL and CSS2. This would in theory make it quick and easy to develop ideas and see how they will look across browsers without a lot of time spent on troubleshooting problems such as browser-specific bugs in JavaScript and Document Object Model API rendering. However, I underestimated the time it would take to troubleshoot browser specific CSS rendering errors (and that will be discussed in a little more detail further on).