Similar to Day 2, Day 5, and Day 14. I watched a session on creating wireframes for an online shoe store for mobile and desktop. I would summarize my learning in bullet points.
I learned two shortcuts to speed up my workflow;
To hide the layout grid, with Mac: "Control + G."
To quickly duplicate elements after selecting them, Mac users press and hold the "option key."
I familiarized myself with the Figma workspace and learned about frames as containers where our designs are housed.
I learned about layout grids for mobile and desktop;
Mobile [Columns= 4, Margin= 24, Gutter= 16]
Desktop [Columns= 12, Margin= 64, Gutter= 16]
I learned how to use content blocks to outline the display of information. Also, how to take advantage of real estate (jargon for whitespace)
Lastly, I learned how to present and share my designs by exporting the assets or sharing the link with collaborators or stakeholders.
Key takeaways
Creating wireframes saves us unnecessary time wasting but also provides a solid foundation to design solutions at a world-class level. I enjoyed today's resource.
References
- "Free Figma Tutorial: Designing Wireframes with Figma - YouTube." 27 Jun. 2020, https://www.youtube.com/watch?v=6t_dYhXyYjI.