Principles of UX / UI (Product Design): Staying Current (NN/g, Smashing Magazine, Figma Community)

Staying Current (NN/g, Smashing Magazine, Figma Community)

Portfolio-Ready Study Guide: Staying Current in UX Design

(For aspiring product designers, graphic designers transitioning to UX, and bootcamp students)

What This Is

Staying current in UX means continuously learning from trusted sources (like NN/g, Smashing Magazine, and the Figma Community) to design products that are usable, accessible, and delightful. It’s not just about trends—it’s about applying evidence-based principles to solve real problems.

Example: A hospital’s patient portal has a 40% drop-off rate during appointment booking. By studying NN/g’s research on form design and Smashing Magazine’s accessibility guidelines, you redesign the flow with progressive disclosure (showing only essential fields first) and clear error messaging, reducing drop-offs by 25%.

Key Terms & Principles

• Jakob’s Law (Consistency): Users expect interfaces to work like others they’ve used. Example: Placing a shopping cart icon in the top-right corner (like Amazon) instead of inventing a new location.

• Hick’s Law (Decision Paralysis): The more choices a user has, the longer it takes to decide. Example: Netflix’s "Top Picks for You" row (limited options) vs. a grid of 50 movies.

• Progressive Disclosure: Showing only essential info first, revealing details as needed. Example: A "Show More" button in a product description instead of dumping all specs upfront.

• Heuristic Evaluation (NN/g’s 10 Usability Heuristics): A quick way to find usability issues by comparing a design to best practices. Example: Checking if error messages are clear and actionable (e.g., "Password must be 8+ characters" vs. "Invalid input").

• Design Systems: A single source of truth for UI components, patterns, and guidelines. Example: Shopify’s Polaris system ensures consistency across their admin dashboard.

• WCAG (Web Content Accessibility Guidelines): Standards for making digital products usable for people with disabilities. Example: Ensuring text has a 4.5:1 contrast ratio (e.g., dark gray text on a light gray background fails).

• Micro-interactions: Small, functional animations that improve feedback. Example: A "like" button that fills with color and bounces when tapped.

• Guerrilla Testing: Quick, informal usability tests with 3–5 users. Example: Testing a Figma prototype on coworkers in a coffee shop.

• Dark Patterns: Deceptive UI tricks that manipulate users. Example: A "Free Trial" button that auto-enrolls users in a paid plan unless they opt out.

• Figma Community: A hub for free, reusable design files (e.g., UI kits, plugins, templates). Example: Downloading a mobile banking UI kit to speed up wireframing.

• Design Thinking (Empathize → Define → Ideate → Prototype → Test): A problem-solving framework. Example: Redesigning a food delivery app by interviewing users (Empathize), defining pain points (e.g., "Users struggle to find dietary filters"), then prototyping solutions.

• Affordance: A design element that suggests its function. Example: A 3D button that looks "clickable" vs. a flat, ambiguous shape.

Step-by-Step / Process Flow

How to Stay Current (Without Burning Out)

1. Curate Your Sources
2. Follow NN/g’s newsletter, Smashing Magazine’s UX articles, and Figma’s blog.
3. Bookmark case studies (e.g., Airbnb’s redesigns, Spotify’s UX research).

4. Figma Action: Create a "UX Resources" file with links to articles, plugins (e.g., A11y Color Contrast Checker), and templates.

5. Apply Research to Real Projects

6. Pick one principle per project (e.g., "This week, I’ll focus on Hick’s Law in my checkout flow").

7. Figma Action: Use variants to test different button placements (e.g., "Buy Now" at the top vs. bottom of a product page).

8. Join the Community

9. Download free Figma Community files (e.g., design systems, wireframe kits) and reverse-engineer them.
10. Participate in #uxdesign Twitter threads or ADPList mentorship sessions.

11. Figma Action: Duplicate a popular UI kit (e.g., Material Design) and modify it for your project.

12. Test Your Knowledge

13. Conduct guerrilla tests on your designs (e.g., ask a friend to complete a task while you observe).

14. Figma Action: Use the Figma Mirror app to test prototypes on your phone.

15. Document Your Learning

16. Write short case studies (e.g., "How I Applied Progressive Disclosure to Reduce Form Abandonment").
17. Portfolio Tip: Add a "Learnings" section to your portfolio with key takeaways (e.g., "Why I stopped using hamburger menus after reading NN/g’s research").

Common Mistakes

Design Interview / Portfolio Tips

1. Show Your Process, Not Just the Final Design
2. Interviewers want to see how you think, not just pretty screens.

3. Portfolio Tip: Include before/after comparisons (e.g., "How I reduced drop-offs by 30% using progressive disclosure").

4. Explain Your "Why" with Principles

5. If you used Fitts’s Law to size a button, say:
   "I made the ‘Submit’ button larger and placed it in the thumb zone because Fitts’s Law shows that bigger, closer targets reduce errors."

6. Tricky Distinction: Heuristic Evaluation (quick expert review) vs. Usability Testing (observing real users).

7. Talk About Failures (And What You Learned)

8. Example: "I initially used a hamburger menu, but after reading NN/g’s research on hidden navigation, I switched to a tab bar for better discoverability."

9. Tricky Distinction: Design System (components + guidelines) vs. Style Guide (colors, typography).

10. Use the STAR Method for Behavioral Questions

11. Situation: "Our checkout flow had a 40% drop-off rate."
12. Task: "I needed to reduce friction without adding steps."
13. Action: "I applied Hick’s Law by simplifying the form and progressive disclosure to show only essential fields first."
14. Result: "Drop-offs decreased by 25%."

Quick Check Questions

1. Scenario: A stakeholder wants to add a "Live Chat" button to the homepage, but you’re worried about clutter. How do you use design principles to push back?

2. Answer: Use Hick’s Law ("More choices = slower decisions") and Jakob’s Law ("Users expect familiar patterns"). Propose A/B testing the button in a less prominent spot (e.g., bottom-right corner) or using a sticky widget that appears only after scrolling.

3. Scenario: You’re designing a form, and the PM insists on making all fields required. How do you advocate for a better user experience?

4. Answer: Cite NN/g’s research on form design (users abandon forms with too many required fields). Propose progressive disclosure (e.g., "Billing address same as shipping? [Yes/No]") or lazy validation (only show errors after submission).

5. Scenario: Your team wants to add a complex animation to a "Submit" button. How do you decide if it’s worth it?

6. Answer: Ask: "Does this improve usability or delight?" If it’s just for aesthetics, it may increase cognitive load (violating Occam’s Razor). Test with users—if they find it distracting, remove it.

Last-Minute Cram Sheet

1. NN/g’s 10 Usability Heuristics – The gold standard for quick UX reviews.
2. WCAG 2.1 AA Contrast Ratio – 4.5:1 for normal text, 3:1 for large text.
3. Fitts’s Law – Bigger + closer = easier to click.
4. Hick’s Law – More choices = slower decisions.
5. Jakob’s Law – Don’t reinvent the wheel (users expect consistency).
6. Progressive Disclosure – Show only what’s needed, when it’s needed.
7. Guerrilla Testing – Test with 3–5 users for quick insights.
8. Figma Plugins to Know – A11y Color Contrast Checker, Content Reel, Anima (for prototypes).
9. ⚠️ Dark Patterns – Avoid deceptive UX (e.g., hidden subscriptions, fake urgency).
10. ⚠️ User Interviews ≠ Usability Tests – Interviews uncover problems; tests observe task completion.

Final Tip: Bookmark this guide, but apply one principle per project. Mastery comes from doing, not just reading. ?