# Typography and Design Improvement Session Wed, 05 Feb 25 --- ## 1. Taking & Giving Feedback - **Emotional Resistance** - It’s normal to feel defensive or judged when receiving feedback. - Recognize feedback as an opportunity to improve your work rather than a personal judgment. - **Safe Environment & Intent** - Feedback is “an act of bravery” because it risks demotivating people if delivered poorly. - Strive to create a culture where the giver and receiver both see feedback as collaborative, not confrontational. - **Actionable Step** - Before reacting, pause and ask: “How can I use this to make my design better?” - In a group setting (e.g., pods), proactively request the support or clarifications you need. --- ## 2. Purpose of the Assignment - **Pixel-Perfect Replication** - Replicate real app screens (or redesign them) to train an eye for detail and consistency. - **Ownership Over Details** - Small elements (typos, extra punctuation, alignment) can cost you credibility. - Designer’s job is to ensure professional, error-free deliverables. - **Actionable Step** - After drafting your screens, overlay the original screenshot to catch every discrepancy (“spot the difference” method). --- ## 3. Figma Workflow & Techniques - **Overlay Exercise** - Import the exact app screenshot alongside your design. - Reduce the screenshot’s opacity and place it over your design to compare typography, spacing, and sizing directly. - **No Decimal or Negative Values** - Font sizes, spacing, etc., should be in whole numbers whenever possible. - Decimals often indicate an accidental scale or stretch. - **Auto Layout & Components** - Use Auto Layout to mirror how developers use Flexbox/constraints. - Components ensure consistency: fix once, update everywhere. - **Actionable Step** - Structure your Figma file: original screenshot beside your design; label frames clearly; reduce background clutter to make mentor review easier. --- ## 4. Typography & Letter Spacing - **Consistent Font Choices** - If the real app uses a custom font you don’t have, find a close system font (e.g., SF Pro on iOS, Roboto on Android) and keep it consistent. - Avoid random letter-spacing (especially +2% or negative values) in normal text. - **Hierarchy & Alignment** - Headings vs. body text: maintain a standard type scale (e.g., H1, H2, Body, etc.). - Carefully match line-height/line-spacing (avoid decimals). - **Actionable Step** - When in doubt, keep letter spacing at 0% for standard UI text. - Check alignment visually and with the overlay method to confirm exact positioning. --- ## 5. Spacing & Alignment - **Margin vs. Padding (“Box Model”)** - Margin = space outside a container. - Padding = space inside a container around its content. - **Symmetry & Optical Alignment** - Elements don’t always look balanced with equal mathematical spacing; trust your eye and check “optical” feel, especially with icons that have circles or heavier shapes. - **Actionable Step** - Define a spacing system (4-point or 8-point grid). - Ensure consistent, symmetric padding in buttons and cards. --- ## 6. Icon Usage - **Use a Matching Icon Set** - Mismatched icons (different stroke widths, styles) undermine professionalism. - If you’re not designing custom icons, grab them from a reliable set to ensure uniform shape and sizing. - **Actionable Step** - Choose one icon library (e.g., Material Icons, Noun Project sets) so all icons share the same visual style. --- ## 7. Shadows, Overlays, & Other Visual Details - **Shadows for Foreground & Background Separation** - Subtle shadows or gradients behind text ensure readability on dynamic images. - **Buttons & Cards** - Keep corner radii consistent. - Verify box shadows match the original screen—opacity, blur, spread. - **Actionable Step** - Use the overlay method to fine-tune shadow sizes and transparency; check consistency across multiple screens. --- ## 8. Mentors & Feedback Process - **Pods & Accountability** - Mentors are available for deeper technical help on auto layout, constraints, etc. - Provide side-by-side layouts in your Figma for quick mentor review. - **Actionable Step** - Post frequent updates in your accountability pod; ask for clarity if stuck. - Incorporate mentor feedback swiftly and share revised links. --- ## 9. Next Steps & Bigger Picture - **Upcoming Assignments** - Website design (Month 2) will cover responsive layouts, design systems, accessibility guidelines. - App design (Month 3) will dig into advanced patterns, product thinking, deeper Figma features. - **Actionable Step** - Use the lessons from this pixel-perfect assignment to refine your approach for more complex web and app designs. - Maintain a personal checklist: typography, spacing, alignment, icon sets, etc., to self-audit before seeking feedback. --- ### Summary - Pay attention to the small details (typos, alignment, letter spacing). - Use structured methods (overlay, consistent font sizes, standard icon sets). - Collaborate with mentors and peers for clearer, more systematic feedback. - Carry these best practices into more complex designs (web/app) as you progress.