ProWorks Blog

The da Vinci Days Web Design Process

By Alan Ballard     Thursday, July 15, 2010     web, design, websites, process, protoype
 15 16 ShareThis

 

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.

The da Vinci Days Web Design Process

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

 15 16 ShareThis
comments powered by Disqus
comments powered by Disqus

5 memorable comments for "The da Vinci Days Web Design Process"


  1. Posted 7/15/2010 5:05:18 PM

    Nice post Alan. Da Vinci Days should be a blast this year!

  2. Posted 7/16/2010 8:39:39 AM

    [...] This post was mentioned on Twitter by Jason Prothero, ProWorks Corporation. ProWorks Corporation said: New Blog Post: The da Vinci Days Web Design Process http://bit.ly/9S0Qtx [...]

  3. Posted 12/28/2010 12:14:54 PM

    I'm just finding this article (I hope the festival was a hit!), but I really like it. I loved seeing those wireframes come to life. Thanks for sharing the process!

  4. Posted 1/6/2011 4:09:21 PM

    My pleasure Kristi, thanks for reading!

  5. Posted 4/15/2011 10:55:16 AM

    Your post is very enlightening! Thank you for sharing:)