Picking Fonts, Creating Color Palettes, Areas Designers Should Focus On
Discover more from Design Insight
Picking Fonts, Creating Color Palettes, Areas Designers Should Focus On
Edition #001 of Design Insight
Hello there, welcome to the first edition of the Design Insight newsletter 👋
I’m extremely excited to share this with you and I hope you find value in what you read here.
If you have any feedback or comments, please let me know over on Twitter @mishacreatrix.
Let’s get into the newsletter!
3 Design Library Items
FontPair - Helps you to find Google Font pairs
Font choice is important when it comes to designing a website or app.
If you pick a stylized font that looks cool, the user might not be able to read it clearly.
If you pick a font without enough font-weights, the content on a page will all look visually similar so nothing stands out.
I recently came across this website called FontPair. It has a library of really nice Google Font pairs you can pick from to make life easier.
ColorSpace - Color palette generator
Color is another very important factor in the design process.
Finding inspiration is a great way to create a color palette as opposed to creating one from thin air.
A fun site I have bookmarked is ColorSpace which helps you to generate color palettes and gradients.
Tip: Bookmark the URL when you've generated your color palette so you can come back to it later.
Article - Knowledge Areas UX Designers Should Focus On
Author: Dominic Emanuel Horn
Source: UX Collective Blog
Here's what I learned from reading this article:
Document everything you do as regards work. During your weekly review step back and make note of this. That way at a later point in time, you can easily refer back to the weekly reviews to extract this great information for your portfolio or a job interview.
It's important to learn the aesthetics of design to get the basics right, i.e. Elements & Principles of Design
Be meticulous with the work that you do. Be consistent and clear with your message. Learn to incorporate grids and design systems into your working process.
Link To Article: Knowledge Areas UX Designers Should Focus On
2 UI Design Tips
Build A Brand Color Palette
Build your brand color palette in Figma so you always have it as a reference when you need it.
I do this with each new project I start and you have no idea how much time it saves me trying to dig out hex codes when I need them.
Here's what to do:
Open a new Figma project.
Create an artboard called "Color Palette for Project X" - Project X being the project you're working on.
Create squares for each color in your color palette.
Color the squares accordingly.
Write the hex codes above the squares (you could also include the RGB values).
Now you have a brand color palette to work from.
Here's an example of a brand color palette that I use on my website at Mishacreatrix:
Limit The Number Of Fonts You Use In A Project
It's easy to overdo it when it comes to fonts. There are so many different types and styles it can be hard to choose 1 or 2.
Unfortunately, multiple fonts used inconsistently will make your website seem confusing.
The user has to do more work to decipher all of the different fonts on the screen.
You might not think it but this actually does add to the user’s cognitive load; their ability to process information.
Rule of thumb: At most use 2 different fonts; one for headings and one for body copy.
I generally stick to one font and use different font weights to make headings stand out from body copy.
1 UI Review
How Jelly Development Uses Color Simply But Effectively
The Jelly Development website is an example of a simple color palette used to great effect.
In fact, the website's home page only uses 6 colors, most of which are greys and white.
Take a look at the color palette (found using Stylify Me):
As you can see, the primary color is blue. The accent colors are shades of grey. Though red is present, it’s only used in the form to denote required fields.
Link To Jelly Development's Website
TL;DR
My advice for creating a simple but effective color palette:
Pick one color
Use two or three various tints and shade of that color
You’ve reached the end of this week’s edition of the Design Insight newsletter. Thank you for reading, I truly hope you found value in the insights I shared today.
Til next week 👋
Michelle
Picking Fonts, Creating Color Palettes, Areas Designers Should Focus On
So good Michelle! Congrats on your first published edition!