Designed by engineers (uh oh!)

If you've ever worked in software development, or maybe even as a non-technical manager in a big business, you've probably seen this.

It's those software or web products which for all intents and purposes are functional, but in terms of how they look and 'feel' to use, are as basic as can be, or could do with some TLC.

I'm one of those engineers. It's not that I don't care for design, but that I'm genuinely just not great at it. I've tried to improve over the years and I'd like to say I've gotten better, but the truth is that I'm still fairly bad at making things look good.

With that in mind, in this post, I'm going to share some resources that hopefully might help me (and you) to become better at making our functional masterpieces look better. I'll aim to keep this post update in future, but I can't make any promises.

• Typography: https://www.youtube.com/watch?v=9-oefwZ6Z74
• Colours: https://www.youtube.com/watch?v=vvPklRN0Tco
• CRAP: Contrast, Repetition, Alignment, Proximity: https://www.youtube.com/watch?v=uwNClNmekGU
• 19 psychological design principles: https://www.youtube.com/watch?v=fYs2Mdyasuc
• The 8pt grid system (sizes are multiples of 4 or 8): https://www.youtube.com/watch?v=ohF93_k3IMk
• Mobbin (real world design inspiration): https://mobbin.com/
• Screen design (app design library + UI inspiration): https://screensdesign.com/
• Flowbite (premade Tailwind components): https://flowbite.com/#components
• Material Design 3: https://m3.material.io/
• More typography: https://threadreaderapp.com/thread/1576997489529344001.html?s=12&t=DEBSW0_4NSQHe9j7iInI4w
• More colours: https://threadreaderapp.com/thread/1579536039139758080.html
• Expo - Mathematical-driven animations: https://expo.dev/blog/the-beauty-of-mathematics-in-crafting-stunning-animations
• Font choice: https://fonts.google.com/knowledge

Key tips

Below, I'll summarise some of the things which have stuck with me. Don't ask me why these tips are recommended or why they stuck with me, they're just things that designers have said, and after trying them out, they seem to work.

• Use sizes which are divisible by 4. For example, 4, 8, 12, 16, 20 px for padding (but see next point for 'rem' units).
• Use 'rem' units. If you work in React Native like me, you won't have access to this. So, with that in mind, all you need to know is that 1 rem = 16 pixels. Since we're using 'divisible by 4' as our basis, that means 4px = 0.25 rem. You could have const rem = (size: number) => size / 4 and called with rem(4) if you want a px -> rem conversion function.
• Don't design beautiful interfaces. Those things you see on Dribbble and similar sites? Not practical. They look fantastic, but they're not practical. Build practical UI's that look good, not beautiful UI's which aren't functional.
• Flex-shrink and flex-grow are not mutually exclusive. Flex-shrink will ensure that a container doesn't grow beyond its boundaries (e.g. if it has lots of sibling elements). Flex-grow will ensure it fills the available space instead of leaving empty gaps.
• Focus on large groups, then small subgroups, the individual subgroup subgroups. For example, if we use YouTube as an example, the large groups would be the header, the menu on the left, and the video section. Within the video section, you have subgroups - e.g. recommended videos, reels, maybe the 'games' suggestions. Within each of these subgroups, you have a thumbnail, title, author, age, etc. These are grouped visually.
• Font weights and colours are great for visual hierarchy. For example, a title and subtitle might be the same size, but the title would be bold, white, while the subtitle would be normal-weight, gray.
• Spacing is better than borders. A border might add visual separation, but it also adds clutter. When scanning a UI for the first time, spacing will be easier for the brain to notice compared to a visual separator.
• Avoid duplication. This isn't anything to do with the 'repetition' link I shared above. Rather, it refers to removing wording which is redundant. For example, if you have an icon for 'Mail' that opens a panel to write a message, you probably don't need to add a 'write your message' label.
• Icon-only UI's are awful. This is a personal opinion from me, and I specifically refer to Snapchat with this point - the UI of it is horrible to use because it feels like you have to learn what each button does because of a lack of labelling or common icon choice. None of the icons are 'obvious' in what they do except for the 'record' button. Don't overuse wording when it's not needed, but also don't represent functionality which is unique using icons which are unfamiliar.
• Use common iconography. What this means is that if you're using an icon, find what is the most common icon (or icons) for that functionality. For example, the 'Share' icon is often represented by either the square with an upwards pointing arrow, or the 3-dots-connected-by-lines (an older icon, not super-clear on what it means, but used often enough for so long that it's commonly understood). Don't use some weird icon which makes no sense for the context.
• (Shading) without borders. You can use borders around items, but they should be very subtle in the 'default state'. If you're using them to highlight a selected option, that's good. If you can't use spacing to group things for some bizarre reason, use background colour shades. Borders for grouping are a fallback option.