Product Design Module 7 - Practical скачать в хорошем качестве

Product Design Module 7 - Practical

This practical module focuses on closing the gap between abstract planning and concrete design by demonstrating how ideas are transformed into visual structures. The process covers visualizing a site map in FigJam, creating a detailed user persona in Figma, and translating those foundations into low-fidelity wireframes. The first stage involves mapping the user journey using FigJam, a collaborative whiteboard tool designed for brainstorming and organization. In this example, a site map is created for a farm produce ordering website. Every site map begins with a clear entry point, represented by a square shape. Small dots around each shape act as connectors, allowing lines to be drawn from the entry point to the homepage and onward to other sections. Beneath the homepage, essential pages such as Contact Us, About Us, and Products are added to establish information hierarchy. The Products section is further refined into two categories: Processed Foods and Fresh Foods. Emphasis is placed on maintaining a clean and readable structure by resizing boxes properly and aligning elements neatly. Once the site map is complete, the process moves to Figma to design a user persona. Unlike FigJam, Figma offers a more advanced interface, including a Layers panel, Properties menu, and a dedicated toolbar for shapes, text, and drawing tools. The persona card is built within a frame, which acts as a container for all design elements. User data is clearly outlined, including name, age, gender, occupation, and family size. Psychographic details such as goals, motivations, and frustrations are added to give deeper insight into the user’s mindset. A user quote is included to humanize the persona and provide a clear voice. Visual refinements, such as adjusting colors, adding borders, or modifying corner radius, are handled through the Properties panel to enhance clarity and presentation. The final stage focuses on translating planning into low-fidelity wireframes. Because FigJam and Figma exist within the same ecosystem, the site map can be copied and pasted directly into the Figma project. Before drawing begins, an appropriate device frame must be selected, such as phone, tablet, or desktop. In this case, a mobile phone frame is chosen, based on the assumption that the 23-year-old doctor persona is technologically inclined and more likely to use a mobile device. Wireframes are kept intentionally simple, emphasizing structure over visual detail. The homepage includes a top navigation bar with a logo and a hamburger menu suited for mobile screens, followed by sections for featured farm produce and call-to-action buttons. The About Us page uses horizontal lines to represent text placement. The Contact Us page includes an image placeholder, brief descriptive text, and hollow input fields for user interaction. Product pages are structured in a list format, displaying item names, short descriptions, and a “See More” button. The module concludes by emphasizing that effective design is rooted in logical reasoning. Personas and site maps should never be overlooked, as they serve as critical reference points that define what appears on each screen and the purpose behind every design decision.