Skip to content

rasyidialwee/Design-Tips

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 

Repository files navigation

Tips for stunning website

Beautiful Typography

  1. Use a font-size between 15 and 25 pixels for body text
  2. Use (really) big font sizes for headlines
  3. Use a line spacing between 120 and 150% of the font size
  4. 45 to 90 characters per line
  5. Use good fonts
  6. Chose a font which reflects the look and feel you want for your website
  7. Use only one font
  8. Example of font Sans-serif font - Open Sans - Lato - Raleway - Monsterrat - PT Sans Serif font (better for long text) - Cardo - Merriweather - PT Serif

Using Colors Like a Pro

  1. Use only one base color. https://flatuicolors.com
  2. Use a tool if you want to use more colors
  3. Use color to draw attention
  4. Never use black in your design
  5. Choose colors wisely

The Meaning Of Colors In Web Design

  • Red is a great color to use when power, passion, strength and excitement want to be transmitted. Brighter tones are more energetic and darker shades are more powerful and elegant.
  • Orange draws attention without being as overpowering as red. It means cheerfulness and creativity. Orange can be associated with friendliness, confidence, and courage.
  • Yellow is energetic and gives the feeling of happiness and liveliness. Also, it associates with curiosity, intelligence, brightness, etc.
  • Green is the color of harmony, nature, life and health. Also, it is often associated with money. In design, green can have a balancing and harmonizing effect.
  • Blue means patience, peace, trustworthiness, and stability. It is one of the most beloved colors, especially by men. It is associated with professionalism, trust and honor. That's actually why the biggest social networks use blue.
  • Purple is traditionally associated with power, nobility and wealth. In your design, purple can give a sense of wisdom, royalty, nobility, luxury, and mystery.
  • Pink expresses romance, passivity, care, peace, affection, etc.
  • Brown is the color of relaxation and confidence. Brown means earthiness, nature, durability, comfort, and reliability.

Working with Images

  1. Put text directly on the image
  2. Overlay the image, be creative, use gradient and colors as overlay.
  3. Put your text in a box
  4. Blur the image
  5. The floor fade

Working with icons

  1. Use icons to list features/steps
  2. Use icons for actions and links
  3. Icons should be recognizable
  4. Label your icons
  5. Icons should not take a center stage
  6. Use icon fonts whenever possible

Spacing and layout

  1. Put whitespace between your elements
  2. Put whitespace between your groups of elements
  3. Put whitespace between you website's sections
  4. Define where you want your audience to look first
  5. Establish a flow that corresponds to your content's message
  6. Use whitespace to build that flow

User Experience

  1. User interface is the presentation of a product, how it look and feel.
  2. User experience is the overall experience the user has with a product.

Improve your website's conversion

  1. Build trust with your future customer (free gift, demo,etc)
  2. Repeat strong call to action(CTA), more is better but no spamming.
  3. Grab your user's attention
  4. Tell your user the benefit
  5. Don't ask for too much information. User hate forms!!
  6. Use social proof
  7. Use urgency
  8. Use scarcity

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published