Product Design | Part 4: Testing through Prototypes | Stoa Learning

Tags

Top Highlights

• The process begins with defining a product and understanding users through interviews and analysis. According to the project requirements, followed by creating sitemaps and defining user flows across the sitemap; card sorting is also done to shape apps and websites according to users’ mental models.

• At the wireframing stage, the designer will take each page on the sitemap and create wireframes

• Designers will often create multiple versions and compare them for analysis and client validation

• wireframes: low-fidelity and high-fidelity

• Low-fidelity wireframes are all about the pillars of design — navigation, hierarchy, labelling, and information architecture

• High-fidelity wireframes are about proportion and spacing; hi-fi wireframes include text, some greyscale graphics and icons

• Unlike static website landing pages or marketing sites, dynamic user interfaces require UI designers to think through states and conditionals. This is where thinking in components, atomic elements, and database views can help. It also requires consistency, applying sound usability principles, and deciding the best way to layout, organise, and disclose information and actions.