Web Page Mockup Project

webpagemockup
DESCRIPTION

Design a homepage for a website using Photoshop to create a mockup.

PROCESS (Programs, Tools, Skills, FOCUS principles)
1. For this project, I decided to use my friend’s jewelry business called Boho and Basil. If you are in need of some really pretty, handmade jewelry, hop on over to her Etsy page.
2. I began by sketching out 3 ideas that I had come up with after researching how to create an effective webpage.

sketch

3. I chose the sketch that had the best layout and began to create a wireframe in Photoshop that was similar to my sketch.
shapemap
4. Once I finished my wireframe, I was able to add in all of my content.
5. One of the hardest things for me was keeping all of my layers organized but once they were organized, it made it a lot easier to arrange the content how I wanted to.
6. In the end, I was very happy with how my webpage turned out.

CRITIQUE PROCESS
I received critique from Brooklynne Noe who told me to make the tone of all of my images a cooler color so that it all looked cohesive. My friend Arianne recommended that I move the cart logo to a different place. My husband Joel suggested that I space out the images in my gallery a little bit more evenly.

MESSAGE
To entice viewers to buy unique jewelry.

AUDIENCE
Anyone who likes handmade pieces of jewelry and likes to shop online.

TOP THING LEARNED
It is important to keep the layers organized when you begin to design.

COLOR SCHEME & COLOR NAMES
Analogous // Teal, Blue, Indigo

TITLE FONT NAME & CATEGORY
Beyond the Mountains // Script

COPY FONT NAME & CATEGORY
Futura // Sans Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT

rings basilshrinky whiterockphoto-1450297166380-cabe503887e5texturescom_fabricwool0003_m

SOURCE OF EACH IMAGE (website name and hyperlink)

Rings
Earrings
Necklace
Rings on Hand
Texture
Social Media Icons
Logo Original

Advertisements

One thought on “Web Page Mockup Project

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