html all the things
Cover image for ⚡ I Suck at Design ⚡

⚡ I Suck at Design ⚡

Sun Sep 12 2021

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.

https://www.figma.com/

Design a Twitter header, that will teach you the basics of Canva.

https://www.canva.com/

Edit out the background of your profile picture, that will get you started with Photopea. (great free alt to photoshop)

https://www.photopea.com/

7. Follow people that know what they are doing

@hey_Ololade

@kvncnls

@vponamariov

@jessicaivins

@buninux

@outmn

⚡ TL/DR  ⚡

  1. UI frameworks
  2. Color palettes
  3. Font pairings
  4. Inspiration
  5. Templates
  6. Design tools
  7. 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