Phase Two: Design
Overview
During the Design phase, the approved structure is translated into clear page layouts and a consistent visual presentation. Wireframes define the functionality and placement of key elements, while homepage mockups establish the visual direction of the site. Concurrently, content is reviewed and aligned to the new structure to ensure accuracy, clarity, and accessibility prior to implementation.
Planeteria Deliverables
In the design phase there are six deliverables to look forward to. Wireframes; Homepage Mockups; Page Designs; Content Workbook; Content Migration Plan; Content Design. Please read more about each below.
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, only 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 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.
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.
In order to approve the wireframes 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.”
Congrats! That’s a wrap on the wireframing portion of the project.
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 above.
For directions on how to submit your feedback, reference the “How to Post Your Feedback” box below.
As the point person, only 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.
Page Designs 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 page 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 page designs should look pretty familiar since they are the page wireframes with the approved homepage design applied. Below are some items to keep in mind while compiling your feedback:
⇢ Do your chosen colors/fonts play out as expected across the other pages?
⇢ Do the page designs graduate from the wireframe as expected?
⇢ Thoughts of iconography, line thickness, use of shadow, the prevalence of imagery vs. text (other aesthetics?)
⇢ Are there functionality/flow issues you see now that weren’t obvious to you during wireframing?
If you have more questions about this activity, please tag your project manager under the “Updates” tab above.
For directions on how to submit your feedback, reference the “How to Post Your Feedback” box below.
As the point person, only 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 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.
By approving the link, you are agreeing to the design direction and layout of the provided page designs.
In the future, some minor changes can be made during development. Anything deemed a substantial change from this point on can lead to an increase of scope and/or timeline.
In order to approve the page designs 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 hit “Update.”
Congratulations that completes the approval process for the project deliverables!
Next up is the development phase.