Webpage Mock-Up

WebPageMockUp11

DESCRIPTION:

This project was to create a website layout using sketches and a wireframe.

PROCESS:

  1. The first thing was to watch the videos provided.
  2. I then sketched three wireframes and found one I liked better than the other ones.
  3. I then made a rough draft in InDesign.
  4. I picked a color scheme of red, blue and two shades of gray.
  5. Then I started in Photoshop.
    1. I created my page 1500 x 1500.
    2. I added the 12” grid.
    3. I started adding black squares where things belonged.
    4. I then added my text and picked a decorative font and a sans serif font.
    5. I put all my images in an image folder.
    6. I made sure my images where the correct size.
    7. I then added my pictures
    8. Then I used the clipping mask to place the pictures in the boxes.
    9. I then tweaked things by moving and changing colors.

ROUGH DRAFT:

 I made three sketches.

IMG_3449

IMG_3450

IMG_3451

I created wire-frame in Photoshop.

WebPageWireFrame

CRITIQUE PROCESS: 

  1. Huyett: Love the images! I like how they set up a very clear grid structure for your page. Since you do have a lot of them on the page, I think it might help to increase your white space to balance out all the colors in the images. I’d actually be really curious to see what this would look like if you took both the darker and lighter grey colors out and replaced them with white – I think it might really open up the design. The red text on the grey background is a little hard to read as it is.
  2. Gannaway:  I like the images and the organization of the page! SOmething I would suggest is changing those blocks behind the text. The light gray seems to clash and look a little drastic. I agree with Charlotte, I think white would really open up and simplify your design.
  3. Cherisha: She liked the textured background but felt the color should be changed.
  4. Sister Tranberg: Change the background to lighten it up. Somehow make more of a flow so that you can tell Charity’s artwork vs Cherisha’s , and Toni’s work. Change the color scheme. She wants the photos to stand out more. She felt it was too grid like. Make the site more understandable what it represents.

 CHANGES

  1. I made many, many changes!
  2. I took the background out and left it white.
  3. I changed the color scheme to blue, green and gray.
  4. I changed the square shapes of the pictures to a circular or rounded rectangle shape.
  5. I added a very light boarder around the individual groups to give distinction to each group.
  6. I added social media icons.
  7. I made multiple changes to the logo.
  8. I added a backdrop to the title to help it stand out more.
  9. I worked on the alignment.
  10. I added a menu bar.
  11. I added extra green lines to start and stop the webpage.

TOP THINGS LEARNED:

  1. I learned more about wireframes especially creating them in Photoshop.
  2. Photoshop tools I learned to use.
    1. How to color objects.
    2. How to make a clipping mask.
    3. How to use layers especially how to group them.
    4. I learned how important it is to use this grouping as it makes it much easier to manage the different layers.
    5. I learned how to use a grid.
    6. How to get rid of an outline that kept appearing.

MESSAGE:

The message is to display art work created by members of my family.

AUDIENCE:

My audience is people wanting to view art work of my two daughters or quilts that I have made.

COLOR SCHEME & COLOR NAMES:

Primary color scheme green(184026 or 24, 64,38), blue(11133d or 17,19,61), light gray (DCDBDB or 220, 219,219) and darker gray (757778 or 117, 119,120).

TITLE FONT NAME & CATEGORY:

  1. Title and text: font-family: Segoe Script, decorative;
  2. Subtitles : font-family: Myriad Pro, sans-serif;

IMAGES:

All images were created by myself or by one of my daughters, Charity and Cherisha

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