Design for Non-Designers: Principles That Work
You don't need to be a designer to build something that looks good. These principles get you 80% there.
Most startups don’t have a designer on day one. Engineers and founders end up designing by default. The result is often… rough.
But good design isn’t magic. It’s a set of learnable principles that, when followed, produce clean, usable interfaces. You don’t need design school—you need to know the fundamentals.
The Core Principles
1. Alignment
Elements that are related should be aligned. This creates visual order and helps users understand relationships.
What to do:
•
Pick an alignment (left, center, or right) and stick with it
•
Use a grid system (12-column grid is standard)
•
Align text to the same baseline
•
Make sure edges line up
Common mistakes:
•
Center-aligning everything (hard to scan)
•
Mixing alignments without purpose
•
Elements slightly misaligned (looks sloppy)
2. Hierarchy
Not everything is equally important. Visual hierarchy guides users to what matters.
Create hierarchy through:
•
Size (bigger = more important)
•
Weight (bold = more important)
•
Color (higher contrast = more important)
•
Position (top and left get seen first)
•
Spacing (more space around something = more important)
Common mistakes:
•
Everything the same size/weight
•
Too many “loud” elements competing
•
Primary actions that don’t stand out
3. Consistency
Same things should look the same. Different things should look different.
Be consistent with:
•
Colors (use a defined palette)
•
Typography (limit to 2-3 font sizes)
•
Spacing (use a consistent scale)
•
Components (buttons look like buttons everywhere)
•
Patterns (same action, same interaction)
Common mistakes:
•
Multiple shades of gray with no system
•
Random spacing values
•
Buttons that look different across pages
4. White Space
Empty space isn’t wasted space. It helps users focus and makes content digestible.
Use white space:
•
Between sections (create clear groups)
•
Around important elements (draw attention)
•
Inside components (padding matters)
•
Between lines of text (line height)
Common mistakes:
•
Cramming everything together
•
Being afraid of “wasted” screen space
•
Inconsistent spacing
5. Contrast
Users need to be able to read and distinguish elements. Contrast makes this possible.
Contrast requirements:
•
Text should have 4.5:1 contrast ratio (WCAG AA)
•
Use dark text on light backgrounds or vice versa
•
Don’t rely on color alone (add icons, text)
•
Test in different lighting conditions
Common mistakes:
•
Gray text on gray backgrounds
•
Colored text on colored backgrounds
•
Low contrast “for aesthetics”
A System for Making Design Decisions
When you’re stuck, follow this checklist:
1.
What’s the goal? What should users do or understand?
2.
What’s most important? Make it visually dominant.
3.
What’s related? Group it together.
4.
What’s the action? Make buttons obvious.
5.
Is it readable? Check contrast and size.
6.
Is it consistent? Match existing patterns.
Quick Wins
Limit Your Palette
Use 1-2 colors plus black, white, and gray:
•
Primary color for actions and highlights
•
Neutral (gray) for text and borders
•
White for backgrounds
•
Optional: secondary color for accents
More colors = more opportunities for mistakes.
Use a Type Scale
Don’t pick random font sizes. Use a scale:
•
12px (small/labels)
•
14px (body text)
•
16px (large body)
•
24px (headings)
•
32px (page titles)
Stick to the scale. Consistent sizing looks polished.
Master the Spacing Scale
Same principle for spacing:
•
4px, 8px, 16px, 24px, 32px, 48px, 64px
Everything uses these values. Padding, margins, gaps—all from the scale.
Copy What Works
When you see a design you like, study it:
•
What colors are they using?
•
How big are headings vs body?
•
How much spacing between elements?
•
How do they handle buttons?
You can learn a lot by reverse-engineering good design.
Use Components
Don’t design every page from scratch. Build components:
•
Button (primary, secondary, text)
•
Input fields
•
Cards
•
Navigation
•
Modals
Reuse these everywhere. Consistency happens automatically.
Tools That Help
UI Kits
Start with pre-designed components:
•
Tailwind UI – Paid components for Tailwind
•
shadcn/ui – Free, copy-paste components
•
Radix – Unstyled, accessible components
•
Chakra UI – Complete component library
These give you building blocks that look good.
Color Tools
•
Realtime Colors – See your palette in context
•
Coolors – Generate color palettes
•
ColorBox – Create accessible color systems
Typography
•
Google Fonts – Free fonts that work
•
Typescale – Generate font size scales
•
Inter, Geist, IBM Plex – Safe font choices
Layout
•
Figma – Industry standard design tool (free tier)
•
Excalidraw – Quick wireframes
•
TailwindCSS – CSS framework with built-in design system
Common Patterns
The Card Pattern
Cards group related content. Use them for:
•
List items (products, articles, users)
•
Settings groups
•
Feature highlights
Structure: Container with padding, subtle border or shadow, rounded corners.
The Form Pattern
Forms need to guide users:
•
Labels above inputs (not placeholders as labels)
•
Helpful error messages below fields
•
Clear primary action (Submit, Save)
•
Logical grouping of related fields
The Empty State Pattern
What do users see when there’s no data?
•
Explain what this area is for
•
Provide a clear action to add content
•
Use illustration or icon (optional)
Empty states are first impressions. Make them helpful.
The Settings Pattern
Settings screens need organization:
•
Group related settings
•
Use clear labels (avoid jargon)
•
Provide descriptions for complex options
•
Save automatically or with clear save button
What to Avoid
Rainbow Interfaces
Every element a different color creates chaos. Restrain your palette.
Mystery Meat Navigation
If users can’t tell what’s clickable, they can’t use your product. Buttons should look like buttons. Links should look like links.
Wall of Text
Break up text with:
•
Headings
•
Bullet points
•
Short paragraphs
•
Visual breaks
Tiny Touch Targets
Clickable elements should be at least 44×44 pixels on mobile. Fat fingers need big targets.
Jarring Animations
Animation should be subtle and purposeful:
•
Guide attention
•
Provide feedback
•
Smooth transitions
Not: spinning logos, bouncing buttons, or 2-second page transitions.
When to Hire
Design yourself until:
•
You’re spending more time on design than your core work
•
Design is limiting growth (users complaining, conversion suffering)
•
You have budget for quality help
When hiring:
•
Start with contractors/freelancers
•
Look for product design experience (not just visual design)
•
Review their portfolio for relevant work
•
Start with a small project as a trial
Key Takeaways
•
Align related elements, create clear hierarchy, be consistent
•
Use white space generously—it helps focus
•
Limit your color palette to 1-2 colors plus neutrals
•
Use a spacing and type scale for consistency
•
Start with a UI kit or component library
•
Copy patterns from products you admire
•
Design yourself until it becomes a bottleneck
Put your context to work.
Keep your project’s decisions, next steps and proof together as your agents work.
Explore the agent workflow →