Wireframes
Phase Two: Design
Wireframes Overview
A wireframe is the skeleton or blueprint of the page, usually drawn with basic shapes and lines with limited colors and styling. Wireframes are a tool to determine the website’s structure, functionality, and flow without getting sidetracked by design elements such as colors and images.
Before the assigned due date, review the wireframe link (provided by your Project Manager) 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 purpose of the wireframe review is to focus on the layout, functionality, content placement, and overall flow of information. Keep in mind that all aesthetic considerations will be determined in the following design phase. Here are some questions to consider:
⇢ Is the layout clear, intuitive, and easy to navigate?
⇢ Is all types of content accounted for? If not, what is missing?
⇢ Is there any content that needs to be reorganized or restructured?
⇢ Is all functionality accounted for? If not, what is missing? Provide example links if you have them.
If you have more questions about this activity, please tag your project manager under the “Updates” tab on the associated task on Monday.com.
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 consolidated 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 on 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.
In order to approve the wireframes get the go-ahead from whoever has sign-off power for the project.
By approving the link, you are agreeing to the structure and layout of the provided wireframes.
In the future, some minor changes can be made during the page designs. Anything deemed a substantial change from this point on can lead to an increase of scope and/or timeline.
Congrats! That’s a wrap on the wireframing portion of the project.