Redesigning Boca Fiesta’s Website

Disclaimer: This project is for educational purposes only and I am in no way affiliated with the Boca Fiesta, The Palomino, or The Backyard brand.

For the next project, I recreated my favorite restaurant’s website. If you have not been to Boca Fiesta in Gainesville, FL, you have to check it out! True to its name (mouth party in Spanish), Boca Fiesta’s menu is stuffed with delicious Tex-Mex items that will send your taste buds soaring. It also has a great drink selection and wonderful ambiance. However, its website is not on the same level as its food. bocahomepage

To start redesigning this website, I began by creating a wireframe on Photoshop. I took into account all of the main elements of the site:

  • Logo
  • Social share buttons
  • Contact area
  • Photos
  • Menu
  • The Backyard
  • The Palomino
  • Specials
  • Merchandise

Wireframe

To create the final mock up, I started off by placing the logo. Once I added the logo, it set the tone for the rest of the piece. The logo has a neon pink that I decided to weave in throughout the mock up. The font for the logo was also pretty tall and narrow so I chose the font Ostrich Black to match it.

I had a difficult time finding the Boca Fiesta logo with a transparent background and in the right dimensions I wanted. I used clipping masks and duplicated the logo a few times to set it up the way I wanted it.

The buttons in the top right corner were fairly easy, but I did use hue/saturation adjustment layers to make a few of them white.

For the navigation bar, I kept the rectangles from the wire frame and added a longer rectangle over the four smaller rectangles and lowered the opacity to give the navigation bar a more unified look.

For the three images on the page (tacos, a pool hall, and The backyard), I placed the images into the file and created clipping masks with the rectangles from the wire frame. For the images on the right, I also added an additional rectangle in the same neon pink as the logo in a lowered opacity.

I also decided to add a chalkboard image as the background because these are found throughout Boca Fiesta.

Here is the final product:

Mockup

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s