Website Mockup Project

DESCRIPTION

Construct the layout and design the overall look for a mockup webpage for the same company that you designed a logo for.

PROCESS

  1. I sketched a very loose idea of where I would want certain items of the webpage to be placed. I didn’t go into a lot of detail, because I knew I might change my mind about the look in the end or perhaps new ideas would pop in my head.A hand drawn sketch of the mock website I designed.
  2. I then downloaded a 960 grid and pulled it up in Photoshop. Using basic shapes such as ellipses and rectangle, I laid out my sketch on the computer so that it would be easier to just insert the real images and text later. A wireframe of the mock website I designed.
  3. I looked up images that matched what different purposes I had in mind. I was particularly focused on finding images that had a little red on them, if that was possible (it wasn’t always). I even managed to find an image in which the item (sparklers) is being held  by left hands.
  4. I used a clipping mask to insert the desired photos and I creatively crafted some text to match the images. I placed the logo up on the top left and googled a quote that would nicely embody the whole point of the webpage.
  5. I chose to create a “moving” image, and signify this by creating arrows with the line tool and little dots with the ellipse tool. This shows that the arrows are clickable and will bring up different “announcements” when pressed. I also created clickable buttons on top of the other images with the rounded rectangle tool.
  6. After all this, I was a little perturbed that my webpage seemed very white and lifeless. After a few days, I was suddenly struck with the idea to make fun, quirky bubbles that matched the color scheme. In my opinion, a fun and unique webpage deserved a fun and unique theme.
  7. Then I placed the copyright and some social media links in different bubbles at the footer to make it a little more interesting.

CRITIQUE PROCESS

After receiving critique from my peers, I put a little more white space in between the left side images and the right side images to provide more of a divide. I also got the idea from looking at others’ webpage drafts to include social media links. They told me that they liked the overall theme and thought it was fitting.

MESSAGE

Lefties For The Win is an exciting, innovative community with a lot to offer. If you are a leftie yourself, you should join the cause and feel united in this right-handed world.

AUDIENCE

This is mainly a fun thing for lefties. It is a community where they can feel accepted, embraced, and understood.

TOP THING LEARNED

I learned that organizing my layers into folders, so that certain things (like all ellipses or all body copy text) were in one place was more manageable and organized. After a while of continuously bouncing around searching for the right layer, I started renaming and grouping things and that helped a lot. Also, I learned that repeating elements is important. For example, with the bubble theme- once I designed it at the top, I knew it needed to be included throughout. I made bubbles on the footer and I also made one of the pictures a bubble to keep consistent.

COLOR SCHEME AND NAMES

Black and White with a pop of color: red. And, of course, flesh-colored for the hand. I tried to keep red elements by including, when I could, pictures that did not appear out of place.

TITLE FONT NAME AND CATEGORY

Cookies-Regular, Script

COPY FONT NAME AND CATEGORY

Arsenal-Regular, Sans Serif

THUMBNAILS OF ORIGINAL, UNEDITED IMAGES

A picture of desk supplies.

A picture of a left hand.

A picture of a man and a laptop.

A picture of sparklers.

A picture of various social media icons.A picture of the owner of the mock website.

SOURCES OF IMAGES

https://unsplash.com

Supplies

Left Hand

Guy on Laptop

Sparklers

https://pixabay.com

Social Media Icons

https://www.facebook.com

Personal Image of my Husband

 

 

 

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

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: