Development process
I created the layout and design in Photoshop CS. As is my normal process, I went through multiple ideas and iterations before deciding on the final design.
I wanted the design to reflect the content - to look "designy," a combination of architectural and artsy. I also wanted the design to be clean and simple, both because that is my personal preference and also because that is how I planned to present the content. To achieve the visual look I wanted, I used grid lines, the font Soli (which looks like an architect’s handwriting) and the simple primary shapes of
as a nod to the Bauhaus. These shapes, the ABCs of design, led to the idea of using the metaphor of writing for the content of the site.
Once I had finalized the design for the site, I made multiple copies of the left side navigation image, highlighting the title for the selected page. I then created an XHTML page template in TextPad (including a hand coded image map), as well as the style sheet. After testing the template and validating both the XHTML and CSS, I created a copy of the template for each page of the website, substituting the appropriate left side navigation image.
After revalidating all pages, I added the content, testing and validating as I completed each page. I uploaded the pages to my server using Macromedia Dreamweaver MX and tested and validated again.