The da Vinci Days Web Design Process

Alan Ballard

Web Designer

Alan has been the designer for ProWorks for over 4 years, and is responsible for creating web designs and interactive graphics with great aesthetics and optimal user functionality. His responsibilities also include building his and others' designs into an HTML/CSS framework. Alan's technical skills include Photoshop, Illustrator, Flash, and HTML/CSS.

Let's pry open the creative brain of ProWorks for just a minute and see what really went into the new da Vinci Days site. The pages you'll see there certainly weren't imagined exactly like that from the start; they went through a creative process that covered a few stages of design. Generally the design process we go through for most websites looks like this:

Set requirements
Create 2 or more wireframe designs
- Review
- Create final wireframe
- Review
Create 2 or more complete designs
- Review
- Create final design
- Review
Build final design into HTML/CSS format
Integrate design HTML into a content management system (Umbraco, Sitefinity, Wordpress, etc.)

The challenge in designing the da Vinci Days site was to create a framework that looks great year after year, and allows for changing poster artwork in the background.

Wireframe designs are just rough layouts of the elements on a page. We are playing with the puzzle pieces until we get the perfect fit, without even looking at colors or design yet. Here are a few of the wireframes that we started with for the home page:

Back to the top

We went with this last one. It handled all the priorities in the best way. Then I made wireframes for the rest of the pages. Here's one for an event page:

The next step is to breathe life into the chosen wireframe and explore a few full-color design directions. Usually I'll design a few for the the home page first, and then design the rest of the pages after the direction is chosen. This first direction never really got that far. I totally missed the mark at the beginning :)

I quickly changed gears and designed something with the da Vinci Days comminity in mind. I went with a natural hand-crafted look that better reflects the feel of this event and Santiago's wonderful poster art.

We felt that design hit the mark right on the nose. There were only a few changes to get the final result from there.

The next challenge for me as a designer is building the framework of the actual website so that it looks exactly like my design. The design also needs to hold up to real data getting plugged into it, so I make sure everything's flexible. In the end we come up with an entire visual system for da Vinci Days that encompasses any type of page Brenda wants to make!

Back to the top