Web Page Mockup Project



Create a web page layout using a grid.

Process (Process, tools, skills, FOCUS principles):

  1. First, I had to choose between two ideas I had regarding the webpage I wanted to create. I decided to choose the same business I used in the Business Identity Project.
  2. Then, I started sketching ideas for the website layout. draft
  3. Next, I went to photoshop to create a shape map of my idea. I felt that my initial idea was too minimalistic to attach to my brand, so I added a more professional look.10ashapemap
  4. Then, I started on my actual web page mockup page. I inserted title, logo, menu items, thumbnails of photography, and footer information.
  5. My final project ended up differently than I had originally intended as I added more images and different alignment of the tab text.


I received feedback from Danielle Esplin. She suggested I arrange the featured photos so that the spacing was more uniform. She also suggested that I move the menu text onto two lines rather than three and to also move the social media icons below them.

Facebook Critiques: n/a

One-on-one critique: Danielle Esplin

Instructor Critique: n/a


To showcase photography and my portfolio to potential and existing clients.


People looking for photography and social media marketing services.

Top thing learned:

I learned the importance of alignment, especially with using the guides provided.

Color scheme & color names:

Monochromatic–blue and white.

Title font name & category:

Avenir Next Condensed–Sans serif.

Copy font name & category:

Avenir Next Condensed–Sans serif.

Thumbnails of any original, unedited image(s) used in project:

Source of each image (website name and hyperlink):





5 thoughts on “Web Page Mockup Project

  1. I thought you did a great job creating white space through out the web page. Everything looks neatly spaced and that is a uge strength in your web page. One thing I would change is put everything in the top right corner somewhere else, usually it fits best on the bottom of the page but you could do somewhere else and that would work too.


  2. You’ve got a striking design there, Kayla. The muted dark colors are easy to read, while at the same time they contrast well with the brighter photographs. It’s a simple design, to be sure, but that’s not a bad thing. Plenty of white space and good font choice make it good enough for anyone.

    As per our instructions, here’s my blog:

    And here’s Brianna’s blog:


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 )

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