🎨 Design | UI Design

[sreffler]

To Do

• 1. Convert wireframes into designed layout files using Figma. Add visual elements such as colors, typography, and images. Think about the user of shapes, lines, textures, and white space. Consider buttons, illustrations, icons, animations, etc. Design for interactivity...use hover effects, colors, animations, and micro-interactions to transform static designs into dynamic experiences.

Color and Fonts
Choose a color palette and fonts that match your brand identity while supporting the user experience. Your color choices help guide interactions and create a clear visual hierarchy for users.

For instance, the Calm app uses different shades of the color blue, which are associated with tranquility and relaxation—perfect for its goal of reducing stress and anxiety through guided meditations, sleep stories, and music.

DoorDash leans into the color red, which is known to stimulate appetite and encourage a sense of urgency, perfectly aligning with its mission to provide quick meal delivery.

Interactivity
Simple touches—like an animated heart when liking a photo or a color change when hovering over a button—enhance usability by giving instant visual feedback, making the user experience more enjoyable and engaging.

• 2. Gather feedback from your fellow strategy committee members. Use the sample questions below or write your own.

• What parts do you like? What parts seem like they will work well?
• Do the colors seem to have good contrast?
• Is all of the text readable and easy to understand?
• How well does the app represent your team branding? (Consider icons, fonts, and colors.)
• Is there anything that looks difficult to use?
• Are there any features that could be difficult to program? If so, what would be simpler?

For all questions include support/rationale for your opinions (always have a why!).

• 3. Test and test again. Ask non-strategy members to complete a specific task using your design layout, and watch how they complete it. What insights can you gather about how they did? Was it easy or difficult? Did they look confused? Did they do it incorrectly? Ask them follow up questions, if needed. If you have more than one option, ask them to try the same task on both and report back which they preferred and why.

Testing is an iterative process. That means that you design something, test it, fix it and then test it again. There might be problems which haven’t been found during the first round as users were practically blocked by other problems. Usability tests always produce useful results. Either you’ll be pointed to the problems you have or you’ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project.
(Source)

• 4. Revise and finalize. Incorporate the feedback and other changes you think will optimize the visual design; stay focused on efficiency and effectiveness. As you review feedback consider its impact on the overall design. Prioritize your changes and tackle the most critical issues first.