Vintage Design

From a Brochure to Website

Posted on by djbrensinger

Ideas for a website come form all kinds of sources. We went from a brochure to a website. My client wanted a website to let visitors learn what Historic Downtown Burlington Wisconsin had to offer. The downtown has historic buildings with great architecture and unique businesses.

Started with a brochure

The downtown businesses had a brochure created that contained a map and information on their businesses. I used the map as a starting point. Then, I researched websites of historic downtown’s. I found a couple and looked at how they were organized and what kind of content they had.

he Shoppes of Downtown Burlington Wisconsin

Next, I created a paper prototype using the brochure to decide how to separate and organize the businesses based on categories. The businesses were separated into three categories: Shop, Dine and Visit. We added a history page, so people could learn a little bit more about Burlington, Wisconsin.

Vintage Design

After completing a paper prototype, I researched vintage design. I learned what type of colors, fonts and other decorative elements that were used. While I researched vintage design, I found an old poster that inspired the initial color scheme. Once, I had the color scheme and fonts, I created a prototype using Adobe Fireworks. I worked with the client to make a few adjustments to the logo and the overall design.

From design to website

We decided to build the site in WordPress using a custom theme. I created the custom theme using the Toolbox Starter theme. Then, I added the original content from the brochure to the site. As the client reviewed the site, the client wanted to make a few changes. We added additional businesses, more pictures of the downtown and altered the color scheme.

Historic Downtown Burlington WisconsinWhat I Learned

Every project is unique. Some go smoothly and others do not. While working on this project, I learned at least three things:

  • Your color inspiration doesn’t always translate well to a website. What looks good as a poster, may not translate well as a website. The colors I chose were too strong for a vintage design.
  • Pinterest is a great tool for researching. I found a board that had Vintage Design color schemes. This board helped in deciding which colors to change and which ones to keep. Our end result gave the site a more historical look.
  • Taking photos of the businesses was challenging. My camera picked up the reflection of the street on the windows. I discovered that removing it with Photoshop is time-consuming. With practice, l learned how to find the best angle to limit the amount of reflection.

Have you built a website from a brochure?

Creating a web button using vintage design

Posted on by djbrensinger

For Burlington Footwear’s website, the client wanted an old-fashioned or vintage look. I applied this design style to a button that opens the shoe club page. Vintage Design uses dark or muted colors, descriptive or cursive fonts, textures and graphics specific to your selected time period. BFW Shoe Club

To create this look, I made the following choices:

  1. I created a background with a vintage paper look. It combines the colors yellow and green to make it look aged. Then, I added a paper texture to complete the look. I used this Fireworks tutorial to create a vintage (old) paper look.
  2. Vintage Design uses descriptive or cursive fonts. Burlington Footwear already uses a script or cursive font in its header. For consistency, I chose to reuse the font.
  3. Burlington Footwear’s website uses red and green. I choose a dark green and red because Vintage Design uses dark, muted colors. These darker colors were applied to the font and outline of the button.
  4. Vintage Design also includes using images specific to a selected time. I used the old-fashioned shoe from the logo. Since the shoe image is specific to an older time, it made sense to add it to the button. I just blended it into the background and repeated the shoe for balance.

By combining these elements together, they help to achieve the vintage look that the client was looking for.