Using a brochure design to create a web page

My wife and I have been very busy these last couple of weeks getting ready for the My Montana Wedding Expo. We created a variety of promotional materials which I shared in my last blog post. One of the main items was a brochure on which we spent the bulk of the time. In it we outlined most of the details of the services provided, pricing and packages, and information about the artist for our new wedding painting business call Captured on Canvas.


When you create a brochure or content for a web page, you have to organize information into bite-sized, digestible chunks so your audience doesn't get overwhelmed. You also have to create a pleasing visual design with appealing graphics, and a cohesive look that supports the brand. When a designer goes through this process in creating a brochure, creating a website or web page with similar content becomes very streamlined.


My goal then was to add the content of the Captured on Canvas brochure to my existing JeffTroupeFineArt.com website. I chose to create a separate wedding page on the site in which all of the content would live. The first step was to create a rough sketch of how the Weddings page would look on the website. Next I created a mockup of the page in InDesign which is what I will use as a guide to create all my html and css code. After doing this, there were a few things that I noticed that I would need to change from the brochure's layout. some of the graphics would need to be enlarged to better fill the wider format, and I was going to need a navigation solution to help the user find their way on this now relatively long page.


The solution for this was to create a horizontal navigation element for this page only that would immediately scroll to the link on the page when clicked. These are known as anchor links. The main navigation for the site, which is a vertical bar on the left side of the page, would then be unaffected and still retain its clean look and simple functionality.


I was able to use the same graphics on the site as I did on the brochure. A simple change of the color mode in Photoshop from CMYK (for print) to RGB and conversion to .png files was all they needed. After gathering all my images for the page, I need to create my html code and CSS styles and finally make it mobile responsive. I think this is a successful example of bringing a design from print format to digital.

wedding page mockup created with InDesign

Jeff Troupe Fine Art Wedding page

Jeff Troupe Fine Art Wedding page

Jeff Troupe Fine Art Wedding page

 

Captured on Canvas brochure inside

Captured on Canvas brochure outside