I've always had issues with almost everything related to design.
Color matching
Spatial awareness
White space
Accessibility
etc.
Just making a UI that looks and feels good.
Here are a few tools and methods that I use to hide my incompetence.
1. UI Frameworks
UI libraries and frameworks have prebuilt, expertly designed, and tested components.
This will save you from having to code an accessible and good-looking dropdown, button, textbox, etc.
It's a great way to get started and then customize later.
Some great UI frameworks
DaisyUI (@Saadeghi) - https://daisyui.com/
TailwindUI (@adamwathan) ($) - https://tailwindui.com/
Bootstrap - https://getbootstrap.com/
Vuetify - https://vuetifyjs.com/en/
2. Color palettes
Picking colors that go together well is really difficult. Something that I still struggle with.
The right color choices are important for conversion, accessibility, retention, and brand awareness.
There are tools that can help us!
Mobile Palette Generator (@csaba_kissi) - https://mobilepalette.colorion.co/
Coolors - https://coolors.co/
Canva Color Palette Generator - https://www.canva.com/colors/color-palette-generator/
3. Font pairings
Fonts can separate an ok design from a professional one.
The best way to get into typography is with font pairings. There are some great tools and resources for that.
Font Joy - https://fontjoy.com/
Front Pair - https://www.fontpair.co/
Canva's Ultimate Guide to Font Pairing - https://www.canva.com/learn/the-ultimate-guide-to-font-pairing/
4. Inspiration
One of the biggest crutches I use is relying on other designers that are better than me.
Find sites and apps you like and take inspiration.
Large companies spend big money on UI/UX, by using their patterns you can save that money and make great apps/sites.
You can also use special sites dedicated to design inspiration.
Dribble - https://dribbble.com/
Webflow Showcase - https://webflow.com/websites/popular
Awwwards - https://www.awwwards.com/
5. Templates
Templates are a great place to start if you are completely lost.
They can help you bridge the gap while you're getting a handle on design.
A good template is the perfect learning example. Pick it apart and take note of why and how everything works.
Some great sites where you can find templates.
Wickedtemplates (@Mike_Andreuzza) - https://www.wickedtemplates.com/
Tailwind Awesome - https://www.tailwindawesome.com/?price=free
Themeforest - https://themeforest.net/
6. Design Tools
Design tools are there to help.
Don't try to learn all the systems front to back, use them for exactly what you need at any given time.
Start with just wireframes, that will teach you the basics of a system like Figma.
Design a Twitter header, that will teach you the basics of Canva.
Edit out the background of your profile picture, that will get you started with Photopea. (great free alt to photoshop)
7. Follow people that know what they are doing
⚡ TL/DR ⚡
- UI frameworks
- Color palettes
- Font pairings
- Inspiration
- Templates
- Design tools
- Follow people that know that they're doing
If you're interested in seeing more content like this you can follow me on Twitter @htmleverything