Design Tips & Tricks

[DevCassie]

Hello folks!

For non-designers, it's a bit scary to start with designing a product. This product can be anything, for example, a logo, website, app or, anything that comes with a design. As a designer myself, I would love to share the things that I've learned so far. These include color/colour, white-space, and many more.

Table of contents

• Color/Colour
• Whitespace
• Typeface

Color/Colour

Everyone knows that a first impression counts. This is especially true when it comes to your brand since your brand color/colour is most likely the first thing customers see. Colors/Colours evoke emotions and feelings, they also hold certain information. This enables customers to form a first impression without even knowing what your product is about.
In short, your brand colors/colours are powerful in helping customers decide whether or not they want to engage.

What color/colour is associated with what emotion or feeling?

1. Red: excitement, strength, love, energy
2. Orange: confidence, success, bravery, sociability
3. Yellow: creativity, happiness, warmth, cheer
4. Green: nature, healing, freshness, quality
5. Blue: trust, peace, loyalty, competence
6. Pink: compassion, sincerity, sophistication, sweet
7. Purple: royalty, luxury, spirituality, ambition
8. Brown: dependable, rugged, trustworthy, simple
9. Black: formality, dramatic, sophistication, security
10. White: clean, simplicity, innocence, honest

Color/colour psychology in-depth:

1. https://www.canva.com/learn/choose-right-colors-brand/
2. https://londonimageinstitute.com/how-to-empower-yourself-with-color-psychology/

UI design and colors/colours:

1. https://uxmisfit.com/2019/05/21/ui-design-in-practice-colors/

Whitespace

In general most non-designers and beginning designers are afraid of whitespace. Thinking everything needs to contain something. However, this often comes across as clumsy and too busy. Take a look at the example below.

Which one is more readable? The left one, isn't it? Why is that, you think? Correct answer! Whitespace of course.
With a very little amount of effort, the design already looks a lot better.

What about images and objects? Well, let's take a look at that as well.

On the left image, our eyes keep jumping from object to object. Not knowing what to focus on. If we would implement whitespace as seen on the right image. It gives us a pattern to look at brand name, title, text, button, bubble. This result is more soothing and pleasing to our eyes.

Importance of whitespace in-depth:

1. https://blog.prototypr.io/importance-of-white-space-in-design-5a40c0e65bfd
2. https://medium.com/successivetech/importance-of-whitespace-in-good-design-de03ea0ab4db

Typeface

Most common typefaces:

• Serif: Typefaces with feet like those are called serif. You can see where the "feets" are highlighted below:
  

• Sans-serif: In French, the word “sans” means “without.” So the term “sans serif” literally means “without serif.” In the image below, you’ll notice the words lack serifs, as pointed out with the red arrows.
  

There are also a few typefaces and fonts overused, so designers nowadays never use them. Here is a list of them:

1. Comic Sans
2. Papyrus
3. Arial
4. Times New Roman
5. Courier New
6. Kristen ITC
7. Vivaldi
8. Helvetica
9. Impact
10. Viner Hand

Source: https://www.logomaker.com/blog/2019/09/17/10-overused-fonts/

Typefaces in-depth:

1. http://www.designishistory.com/1450/type-classification/
2. https://blog.hubspot.com/marketing/typography-terms-introduction

Key elements in a design are:

• Visual hierarchy
• Consistency (consistent use of typefaces (2 or 3 but not more), whitespace consistency, colors)
• Whitespace
• Contrast (Is the text readable, yes or no)

I do not own any of these images and/or websites. They were used to show a few tips and or tricks and are coming from the sites used.

[schmelto]

Thanks for sharing!
For the typeface which one would you recommend in which scenario?

[DevCassie]

Yea of course!

Serif typefaces are more formal and traditional, that's why they're often used for educational/informational purposes. Think of a newspaper, magazines, or the body of books.

Sans Serif typefaces are more modern and bold, so they are often used for larger headlines and modern designs.

Anything related to the web or apps are a bit different. Since most displays are not as high resolution as printed media. Both the web and app use Sans Serif typefaces. This is because the "feet" on Serif typefaces can display poorly on lower resolution sizes.

More talked about Serif and Sans Serif could be found here:

1. https://about.easil.com/support/serif-vs-sans-serif/
2. https://uxdesign.cc/improve-your-designs-with-these-typography-tips-eeacc8fb81ff

[abughurab16]

Thanks for sharing this cassie!

[DevCassie]

Any time :P

I'll probably update it some time xD

[eddiejaoude]

Wow great 👍 thanks for sharing 🤓

[DevCassie]

No problem. Enjoy it!

[RemcoHalman]

Awesome! thanks for sharing😄

[ahammadshawki8]

Really learned a lot, especially the articles' are very informational. Thanks for sharing this. 🔥

[DevCassie]

Some tools and websites I've come across:

Colors/Colours

1. https://mycolor.space/
2. http://coolors.co/
3. https://color.adobe.com/nl/

Fonts

1. https://fonts.google.com/
2. https://fontjoy.com/

Icons

1. http://endlessicons.com/
2. https://fontawesome.com/
3. https://feathericons.com/
4. https://fonts.google.com/icons
5. https://thenounproject.com/

Mockups

1. https://mockups-design.com/
2. https://previewed.app/

Other useful links

1. https://freedesignresources.net/
2. https://app.haikei.app/
3. https://material.io/