Homepage Mockups
Phase Two: Design
Homepage Mockups Overview
The design produces the website’s skin – the visual/graphic presentation. It provides directives that visually leads users through their experience that is cohesive with the brand. We establish your design elements with the homepage before moving forward and applying the aesthetic to the remainder of the site.
Before the assigned due date, review the homepage design link (posted in the box below) with your team members to compile and consolidate feedback from all necessary stakeholders.
Be sure to provide clear, direct, non-contradictory feedback and questions, allowing for a smoother feedback review during our meeting.
The homepage design aims to establish the design direction/ design theme for the remainder of the site. Each round, we will reduce the number of designs provided to choose one homepage design direction to apply to the rest of the website pages.
Keep in mind that we can mix and match elements you like from each design option and merge them into one design.
For example, if you like the typeface from one design direction and prefer the color use on another design. In the next version, you can see a homepage design with both elements showcased together.
Here are some other things to consider:
⇢ Do you like the font: style, weight, color, placement?
⇢ Do you like the colors: usage, combination, hue, variety?
⇢ Does the homepage design graduate from the wireframe as expected?
⇢ Thoughts of iconography, line thickness, use of shadow, prevalence of imagery vs. text (other aesthetics?)
⇢ Does information feel easily readable?
⇢ Do you like how your eyes visually flow through the page?
If you have more questions about this activity, please tag your project manager under the “Updates” tab.
For directions on how to submit your feedback, reference the “How to Post Your Feedback” box below.
As the point person, you will submit the condensed feedback directly to the provided link above.
- Open the Figma file – Click the link to open the Figma presentation file in a web browser. You can scroll down the page as you would any webpage.
a. To view the next page in the presentation click the > button at the center bottom of the screen. Sometimes this button disappears as you are browsing the presentation. It will reappear when you hover over the area
b. If you want to restart the presentation you will find that button on the bottom right. (or press R) - Click the speech bubble – To leave your feedback, click on the speech bubble icon on the top left the Figma top bar (next to the Figma logo). This top bar is also hidden sometimes as you are browsing the presentation. It will reappear when you move your cursor to the area. Your cursor will turn into a speech bubble icon.
- Leave your feedback – Click any part of the presentation where you want to leave feedback. You’re comment will stay sticky to that part of the document. Write your feedback in the and “Add a comment” form field. Click the submit arrow. You can now move through the entire presentation making comments on any element.
- Mark task as “Done” – After submitting all your feedback, go to the task on Monday.com and mark the task as “Done” in the status column.
By approving the link posted, you are agreeing to the design direction and layout of the provided homepage design.
In the future, some minor changes can be made during page designs. Anything deemed a substantial change from this point on can lead to an increase of scope and/or timeline.
In order to approve the homepage design get the go-ahead from whoever has sign-off power for the project.
Then mark the task as “Done” in the status column, then hover over the top left right corner of the status box until the corner folds over and a “+” sign is revealed. Click the plus sign, type “Approved” and @[project manager’s name] in the dialogue box, and hit “Update.”
Well done! We are finished with the homepage portion of the project.