How to create great interface design
Agencidev has designed & built a wide range of products, from a hardware validation software for YC startups to a memory test app for a dementia neuropsychology company to an AI chatbot app for the #31 best business podcast show on Spotify charts.
Here are 22 principles of design we swear by when creating products, regardless of industry.
Use 2 font families max.
Use 2-3 font weights max.
Use colour strategically. Do not make everything bold and clear. Use muted colours on things that don't need the user's attention. Muted colours help direct the user's attention to parts of the interface that require their focus.
Font sizes can be 12px, 13px, 14px, or a multiple of 4px.
Do not clutter the screen with information. Too much information can subconsciously overwhelm the user and be mentally draining. Every screen has one principal objective. Layer components to ensure the user sees only what they want to see, but make seeing other things accessible too.
All sizes (paddings, spacing, radii) should be multiple of 4px or 6px.
Hovering or clicking should cause a stylistic state change, but sizes should remain the same. Do not make a button where the text changes weight from 400 to 500 or 600 when hovered; the size change breaks the established system.
Unify animations and stylings by components. Do not have 3 different button hover animations or stylings.
Make animations respond on pointer-down, not on release. Highlight a button the instant it's pressed. Waiting for click/touch-up to show feedback feels dead.
Ensure consistent paddings on sections & components.
Be vigilant about every latency. Audit debounces, artificial timers, transition waits, and the ~300ms tap delay. Anything on the input path that isn't essential is a regression.
When the user drags something, it must stay glued to the finger, and respect the offset from where they grabbed it. Snapping to the element's centre on grab breaks the illusion immediately.
Use 2 radii max.
Give the user a sense of agency. Offer choices, don't force a single path, and allow easy undos for mistakes. Use a confirmation dialogue only for genuinely destructive, irreversible actions (use sparingly; overusing it trains people to click through).
Things that trigger 100+ times/day (keyboard shortcuts, command palette toggle) should never have animations. These become distracting.
Things that trigger tens of times/day (hover effects, list navigation) should use only very subtle animations. Loud ones become a pain.
Rare triggers (onboarding, feedback, celebrations) can be allowed to use fanciful animations. These rarely trigger, so they will be seen as fun rather than an interruption.
Sometimes adding things simplifies (like a video scrubber that shows time remaining). Build every interface with the principal objective in mind and you can easily sieve out the unnecessary noise.
Measure LCP, TTFB, CLS, and FCP of each page. Ensure all are below 3s.
Get npx react-doctor score >75.
Create animated loaders. These give the user something to see other than a blank screen if network issues ever elongate loading speed.
Use a js router to make switching pages look seamless. An entire page refreshing each time the user clicks on a button or component is bad UX.