Website Mock up


Creating a website mockup for a business. website-final




  1. First I decided to make  a website for my photography business.
  2. I decided to keep my original color scheme and fonts from my logo and business card.
  3. I created my three sketches on paper, adding a bit more detail to each one, to see what i wanted in my final project.
  4. I created my shape map from my last schech. I used adobe photoshop for this step. I placed circles in place for my image.  And a box for my logo.
  5. I then opened my business card in adobe illustrator and reorganized the bubbles so they laid more horizontally with the text.
  6. I added circles I was going to put images in with text over top. I also added my information bar.
  7. I got in critiqued by sister godfrey. She suggested making my logo circles less like an eclipse. I then decided to add the gold colors into the logo circles.
  8. I added a pink bar to my information section. And a red footer with my phone number and email.
  9. I got the vectors for my photos for free online.
  10. I decided to make my circles not contain images and make them more eclipse to add some asymmetry.
  11. I added an inspirational quote from my favorite photographer Ansel Adams.
  12. I then went through my images and picked out my favorite to add to the boxes for my images.

Critique process: I went to lab on wednesday night and got a critique as I went by Jeremiah, Spencer, and Jordan. Jeremiah suggested that I only add a single bar for my footer and not a double bar like my information line. Jordan suggested that I added gold circles to my logo behind the text. I decided it would be to cluttered, but that inspired me to add the gold into my three main circles. He also suggested that I make the circle symmetrical from one side to the other. But I decided it added more interest to keep each side different. I was inspired by Jeremiah’s project to create my images vertical instead of horizontal.


Higher me as a photographer. Buy my fine art images.


Young adults looking for a photo session

Top Things learned: 

Remember Asymmetry.

Color Scheme:

Analigus: Gold, Orange, red, pink,

Title font:

Thinking of betty/decorative

Copy font:

Champagne and limousine/stan serif

Image Credit:

All images are my own

Vector Credit:

<a href=’’>Designed by Freepik</a>


One thought on “Website Mock up

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s