Design with tactics, not skill! You can do this!
Here’s a concrete design tactic I bet you see applied every day but haven’t explicitly noticed.
Use fewer borders.
Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered.
Instead, try adding a box shadow, using contrasting background colors, or simply adding more space between elements.
It doesn’t take any talent to make changes like this — once you know the tactic you just need to notice the problem and apply the solution.
Starting from scratch
Start with a feature, not a layout
The phrase “Start with a feature, not a layout” in UI design emphasizes the importance of focusing on functionality before aesthetics.
Instead of designing a visually appealing interface first and then figuring out what it does, you should prioritize the core features and build the UI around them.
Why This Approach Matters
User-Centered Design – Users visit an app or website to accomplish something, not just admire the layout. Prioritizing features ensures the design serves their needs.
Avoids Unnecessary Design Work – If you start with a polished layout before defining key features, you may have to redesign it multiple times to accommodate functionality.
Improves Usability – A feature-driven design approach ensures that interactions, navigation, and workflows make sense for the user, rather than forcing them to fit into a predefined layout.
Faster Iteration & Prototyping – Teams can test and refine features early using wireframes or prototypes before investing time in high-fidelity designs.
How to Apply It
✅ Define Core Features First
Identify the main action users need to take (e.g., searching, signing up, making a purchase).
Prioritize these features based on user needs and business goals.
✅ Map Out User Flows
Sketch how users interact with these features before worrying about colors, fonts, or layout details.
✅ Build UI Around Functionality
Once the core interactions are clear, design a layout that supports them naturally.
Ensure key features are easily accessible and guide the user towards their goal.
Example:
Spotify vs. a Random Music App
Spotify: The app’s core feature is playing music instantly. The UI is built around a play button, playlists, and recommendations—everything is designed to get users to music quickly.
Bad Example:
If a music app started by designing an aesthetically complex homepage
before deciding how users find and play music, they might end up with a beautiful but confusing experience.
Here’s a simple wireframe demonstrating the “Start with a feature, not a layout” concept. I’ll create a UI example where the feature (searching for and playing music) is prioritized over the layout design. Give me a moment to generate it.
showing a feature-first UI design for a music app. It prioritizes the search and play functionality rather than focusing on decorative elements. The search bar is prominent, allowing users to quickly find music, and the play button is easily accessible for instant playback.
Detail comes later
you should focus on the core structure and functionality before refining the visual details like colors, fonts, and micro-interactions. This approach ensures that the user experience (UX) is solid before investing time in perfecting aesthetics.
Why “Details Come Later” is Important in UI Design:
Prevents Wasted Effort
If you start with detailed UI elements too early, you might redesign them multiple times when functionality changes.
Ensures a Strong Foundation
Prioritizing information hierarchy, navigation, and usability first helps create an intuitive experience.
Speeds Up Prototyping & Iteration
Wireframes and low-fidelity prototypes help test and refine ideas before committing to visual details.
Keeps Focus on User Needs
Users care more about how the app works and flows than how it looks. If an app is visually stunning but hard to use, it fails.
How to Apply “Details Come Later” in UI Design
✅ Start with Wireframes
Sketch or build low-fidelity designs to define layout and navigation.
✅ Focus on Functionality First
Ensure buttons, forms, and workflows are intuitive before styling them.
✅ Add Visuals After UX is Set
Once usability is tested, refine fonts, colors, icons, and animations.
✅ Polish Micro-Interactions Last
Small details like hover effects, shadows, and transitions should enhance an already solid experience.
Example: A Sign-Up Form
???? Wrong Approach:
Choosing the perfect font, gradients, and button styles before deciding what fields are needed.
Adding animations before testing if users understand the form layout.
✅ Right Approach:
First, define what inputs are required (Name, Email, Password).
Organize the layout for clarity and ease of use.
Once tested, refine colors, typography, and animations to enhance the experience.
Here’s a wireframe illustrating the “Details Come Later” concept. It focuses on the core functionality of a sign-up form—basic input fields and a clear call-to-action—before adding colors, fonts or extra styling
Don’t design too much
In UI, design suggests that you should avoid overcomplicating the design with excessive details,
unnecessary features, or overly intricate visual elements.
It’s about keeping the interface simple, functional, and user-friendly rather than adding design elements
just for the sake of aesthetics.
Why “Don’t Design Too Much” Matters in UI Design
Avoids Clutter & Cognitive Overload
Too many elements (buttons, animations, text, icons) can overwhelm users and make the interface confusing.
Prioritizes Functionality Over Aesthetics
A visually complex UI doesn’t necessarily improve usability. Users value a smooth experience over flashy visuals.
Makes Navigation More Intuitive
Over-designing can lead to hidden actions, confusing layouts, or unnecessary steps that slow users down.
Improves Performance & Load Speed
Excessive design elements (large images, complex animations) can make the interface slower and less responsive.
Encourages Scalability & Flexibility
A simple, clean design is easier to adapt and scale as new features are added.
How to Apply “Don’t Design Too Much” in UI Design
✅ Stick to Essential Elements
Only include what helps users achieve their goal.
✅ Use Whitespace Effectively
Avoid stuffing too much content on the screen.
✅ Follow UI Best Practices
Standard patterns (e.g., familiar navigation bars) improve usability.
✅ Limit Animations & Effects
Only use animations when they enhance the experience, not just for decoration.
✅ Test with Real Users
If users struggle, simplify the design instead of adding more elements.
Example: A Simple E-commerce Checkout vs. an Over-Designed One
???? Bad Design (Over-Designed Checkout Page):
Too many pop-ups, extra steps, unnecessary animations.
Distracting images and colors make it hard to focus on completing the purchase.
✅ Good Design (Minimal Checkout Page):
A clear flow: Cart → Shipping → Payment → Confirmation.
Only essential fields, with an easy-to-find “Place Order” button.
Here’s a wireframe showing the “Don’t Design Too Much” principle in action. The checkout page keeps things minimal—only the necessary fields for a quick and easy purchase process, without unnecessary distractions.
Choose a personality
Your interface should have a consistent, intentional character or style that aligns with your brand, product, and target audience. Instead of being generic or inconsistent, the UI should reflect a distinct personality that enhances user engagement and creates a memorable experience.
Why “Choose a Personality” Matters in UI Design
Creates Brand Identity
The UI should reflect the brand’s values, whether it’s playful, professional, elegant, or futuristic.
Enhances Emotional Connection
Users connect more with interfaces that have a personality—whether it’s friendly, bold, or minimalist.
Improves Consistency
Having a defined personality guides decisions on colors, typography, icons, and micro-interactions, ensuring a cohesive experience.
Differentiates Your Product
A unique design personality helps your app or website stand out from competitors.
How to Apply “Choose a Personality” in UI Design
✅ Define Your Brand’s Voice
Is it fun, formal, cutting-edge, or warm?
✅ Use Colors & Typography That Match
Bold fonts for energetic brands, soft colors for calming experiences, etc.
✅ Pick UI Elements That Reflect the Tone
Rounded buttons for friendly interfaces, sharp edges for sleek and modern designs.
✅ Add Micro-Interactions & Animations Thoughtfully
Playful UI might have bouncy animations, while a serious UI might be more subtle.
✅ Stay Consistent Across All Screens
Every element should align with the chosen personality.
Examples of UI Personalities
???? Playful & Fun (Duolingo, TikTok)
Bright colors, rounded shapes, friendly icons, and casual language.
???? Professional & Elegant (Apple, Notion, LinkedIn)
Minimalist design, neutral colors, refined typography, and smooth animations.
???? Futuristic & High-Tech (Tesla, Cyberpunk UI, SpaceX website)
Dark themes, neon accents, bold typography, and sleek, animated elements.
two different UI personalities—one playful and one professional. This illustrates how personality shapes UI design choices, from button shapes to typography and layout style.
Limit your choices
The principle of reducing decision fatigue for users by offering a clear, focused, and streamlined experience. Too many options can overwhelm users, slow down decision-making, and negatively impact usability.
Why “Limit Your Choices” Matters in UI Design
Reduces Cognitive Load
Users can process information faster when they have fewer choices to evaluate.
Too many options = decision paralysis (users may abandon the action instead of choosing).
Enhances Usability
A well-structured interface helps users quickly find what they need.
Organizing choices effectively prevents confusion and increases efficiency.
Encourages Faster Decision-Making
Limiting choices helps users commit to an action without hesitation.
Example:
A checkout page with two payment options (credit card & PayPal) is faster to navigate than one with ten different payment methods.
Improves Conversion Rates,
If users struggle to decide, they might leave the site or app instead of completing an action.
A simpler interface guides users toward a desired outcome (e.g., signing up, purchasing, subscribing).
How to Apply “Limit Your Choices” in UI Design
✅ Prioritize Essential Actions
Show only the most important options upfront.
✅ Use Progressive Disclosure
Hide less critical options until needed (e.g., an expandable menu).
✅ Group Similar Choices
Instead of overwhelming users, categorize related options into sections.
✅ Guide Users with Defaults
Pre-select recommended options to speed up decision-making.
✅ Keep Navigation Simple
Limit the number of main menu items to 5-7 for clarity.
Examples of “Limit Your Choices” in UI Design
???? Good Example:
Apple’s Settings App
Uses progressive disclosure (tapping reveals more options inside submenus).
Keeps the main screen clean and focused on top-level categories.
❌ Bad Example:
Overloaded Navigation Menus
A website with too many menu items makes it hard for users to find what they need.
Solution: Group related links into clear categories.
Here’s a wireframe comparing “limited choices” vs. “excessive choices” in UI design. The first design keeps navigation simple and clear, while the second one overwhelms users with too many options.
