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.

Publication process

The testing of my site included critical feedback from volunteer beta testers, uploading all pages to my personal website and testing (links, images, etc.) from there, validating XHTML (via the W3C Markup Validation Service) and validating CSS (via the W3C CSS Validation Service).
home  previous  next
design  elements  principles
personal process  print 
email  portfolio 
Home Design Elements Principles Home Design Elements Line Shape Color Value Texture Principles Unity Variety Emphasis Balance Space Personal Print