DA VINCI DAYS

corvallis, oregon

GKC July 18-19 2015
Seeing things differently

Website Team: ProWorks

flickr community photos

You need JavaScript enabled to see these photos. Try the Flickr Community Page to see the DaVinci Days photos.

proworksbloganydate-taken-desc
Tag your photos on Flickr: proworksblog
avatar_alan.jpg

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 page you're looking at now certainly wasn't imagined exactly like this from the start; it 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:

wireframe1

wireframe2

wireframe4

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:

wireframeInternal

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 :)
initialDesign
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.
homeDesign1
We felt that design hit the mark right on the nose. There were only a few changes to get the final result from there.
finalDesign
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 the da Vinci Days staff wants to make!
Back to the top