10A Webpage Mockup

design

DESCRIPTION
Design a website homepage using a grid.

PROCESS (Programs, Tools, Skills, FOCUS principles)

sketch      wireframe

  1. I started with a Sketch and planned out what I wanted to have in the design.
  2. I then did a wireframe in Photoshop to digitally lay out how things were going to be set.
  3. I then created my digital design in Photoshop. The grids really helped align everything
  4. I then posted to the Facebook group to show my initial design and got some good feedback by Ralph, Seth, and Audrey. Brother Stucki also shared some feedback.
  5. I fixed what she asked and posted my final design.

CRITIQUE PROCESS
Ralph suggested having one pricing box instead of two, making the “why choose us” box not all caps, and uncentering the footer. Seth liked the design and didn’t have any suggestions to improve on the design. Brother Stucki liked the design and suggested adding more contrast to the title vs.the body text. Audrey suggested for her personal preference that the nav links be left-aligned but I tried it and it just looked like it was off so I decided to keep it centered as it already was.

Critiques: Ralph Borcherds, Seth Bennett, Brother Stucki, and Audrey Finlayson Spjut

MESSAGE
Come get some great and affordable hosting!

AUDIENCE
Anyone interested in creating a personal website or a website for their business.

TOP THING LEARNED
Wireframes and sketches really help to map out what you will want in your final design.

COLOR SCHEME & COLOR NAMES
Split Complementary // Blue, Green, Grey

TITLE FONT NAME & CATEGORY
Lato Black // Sans Serif

COPY FONT NAME & CATEGORY
Optima Regular // Sans Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT
hyslogo-blue-square-new-300x300      pixabay-comenlaptop-work-coffee-technology-1209008-320x320

SOURCE OF EACH IMAGE (website name and hyperlink)
Logo is my own.
Laptop image is from: Pixabay

2 thoughts on “10A Webpage Mockup

  1. I really like your mockup. The color scheme is smooth and has a professional and quiet feel to it. It also looks like you simplified the upper portion some, which works in its favor of giving the eyes room to rest and quickly getting across information. Helpful tip for the future as well, if the font your using has small caps available use those rather than increasing the font size of a first letter as it keeps the stroke consistent along the letters. Of course maybe its just photoshop pixels being finicky. Overall I like the clean look of it!

Share your Thoughts