Web Designer Workflow

Understand MMM Meeting Formats

Review the structure of the MMM Meetings to better understand how and when to contribute: 

📒
Meetings @ MMM
 

🕒
Weekly Team Syncs
 

Know your points of contact

Know who you will be interacting with on a day-to-day basis, what they are responsible for, and how to contact them in relation to specific project needs. 

Primary point of contact: 

Webflow Developer

💡

More information about the members of MMM and their roles can be found here:

💁
Who’s Who? (Roles @ MMM)
 

Design Sitemap

Collaborate with relevant stakeholders and the Webflow Developer to explore how the content and goals of the page(s) can be reflected effectively on the website. Explore the most effective way to arrange the page(s), which page(s) the content will be placed, and how the pages may link together.

It can be helpful to create diagrams to represent the sitemap. Make sure it is clear how many pages will be needed, their goals, their content and how they will connect. 

Wireframing

Use the information from the sitemap to begin wireframing, which will serve as the starting point of the design. The primary goal is to find a good layout for the content provided to you by the Webflow Developer, in the form of a Notion database. Ensure the layout is as straightforward and intuitive as possible. Structure the content in Figma focusing on headers and footers, text, buttons, images, etc. 

Experiment with numerous layout iterations to identify the optimal structure before integrating any stylistic elements. Make sure the layout has a natural flow and user journey that you believe will accomplish the goal of the page. 

Create Template

Take the layouts from wireframing, replace the images and text with placeholder content and turn the layout into a template that can be used for other pages. 

💡

Note: If you are provided a diagram for the project, it will need to be redone in the high-fidelity design.

Lo-Fi Design Creation

Following the wireframing process, integrate images, experiment with color schemes, and font styles in Figma. The goal is to create a rough idea of what you would like the high fidelity design to look like.

Typically, there is a unique color palette associated with each grant. These can be found in a visual language document. Determine what colors you would like to use from the palette and explore different uses for them.

💡

To aid stakeholders in reviewing the design, ensure to leave comments within the Figma file regarding any updates, rationales, and any potential questions that may arise during the review process.

Design Presentation

Distribute the design link in Discord for further review and discussion. This process has been largely asynchronous - team members will navigate into the Figma file and deposit their comments as needed.

This stage also provides an opportunity for content or layout alteration.

Hi-Fi Design Creation

Once the lo-fi design has been approved, polish the design by focusing on aspects such as spacing, font utilization, and the layout of diagrams in Figma. It is important to coordinate with the design guide from Webflow (if it does not exist, create it), including considerations around spacing, font usage, logos, and different buttons - especially if these elements already exist in the guide.

Continue to welcome feedback and make modifications based on the input received.

Design Systems and Style Guide Creation

Once the high-fidelity design has been approved, look at the layout and determine if there are ways that its elements can be templatized for future use. 

Web Designer Workflow

Understand MMM Meeting Formats

Review the structure of the MMM Meetings to better understand how and when to contribute: 

📒
Meetings @ MMM
 

🕒
Weekly Team Syncs
 

Know your points of contact

Know who you will be interacting with on a day-to-day basis, what they are responsible for, and how to contact them in relation to specific project needs. 

Primary point of contact: 

Webflow Developer

💡

More information about the members of MMM and their roles can be found here:

💁
Who’s Who? (Roles @ MMM)
 

Design Sitemap

Collaborate with relevant stakeholders and the Webflow Developer to explore how the content and goals of the page(s) can be reflected effectively on the website. Explore the most effective way to arrange the page(s), which page(s) the content will be placed, and how the pages may link together.

It can be helpful to create diagrams to represent the sitemap. Make sure it is clear how many pages will be needed, their goals, their content and how they will connect. 

Wireframing

Use the information from the sitemap to begin wireframing, which will serve as the starting point of the design. The primary goal is to find a good layout for the content provided to you by the Webflow Developer, in the form of a Notion database. Ensure the layout is as straightforward and intuitive as possible. Structure the content in Figma focusing on headers and footers, text, buttons, images, etc. 

Experiment with numerous layout iterations to identify the optimal structure before integrating any stylistic elements. Make sure the layout has a natural flow and user journey that you believe will accomplish the goal of the page. 

Create Template

Take the layouts from wireframing, replace the images and text with placeholder content and turn the layout into a template that can be used for other pages. 

💡

Note: If you are provided a diagram for the project, it will need to be redone in the high-fidelity design.

Lo-Fi Design Creation

Following the wireframing process, integrate images, experiment with color schemes, and font styles in Figma. The goal is to create a rough idea of what you would like the high fidelity design to look like.

Typically, there is a unique color palette associated with each grant. These can be found in a visual language document. Determine what colors you would like to use from the palette and explore different uses for them.

💡

To aid stakeholders in reviewing the design, ensure to leave comments within the Figma file regarding any updates, rationales, and any potential questions that may arise during the review process.

Design Presentation

Distribute the design link in Discord for further review and discussion. This process has been largely asynchronous - team members will navigate into the Figma file and deposit their comments as needed.

This stage also provides an opportunity for content or layout alteration.

Hi-Fi Design Creation

Once the lo-fi design has been approved, polish the design by focusing on aspects such as spacing, font utilization, and the layout of diagrams in Figma. It is important to coordinate with the design guide from Webflow (if it does not exist, create it), including considerations around spacing, font usage, logos, and different buttons - especially if these elements already exist in the guide.

Continue to welcome feedback and make modifications based on the input received.

Design Systems and Style Guide Creation

Once the high-fidelity design has been approved, look at the layout and determine if there are ways that its elements can be templatized for future use. 