design.md

Web and Creative Design Guides

• Web Design Cheatsheet
• 15 banner ad design tips to get more clicks
• Designing the perfect web banner ad: 50 examples to help you get it right
• 6 UI Concepts That Will Make You a Front End Ninja
• 8 UX Principles You Should Know as a Frontend Developer

Web Design Cheatsheet

The Designer creates the look and feel. The Developer builds it.

User Interface is the presentation of a product, designing how it looks and feels. User Experience is the overall experience the user has with a product.

Beautiful Typography

Typography is the art and technique of arranging type to make written language readable and beautiful.

1. Use a font size between 15 and 25 pixels for body text
2. Use big font sizes for Headlines (60px or 90px with less font weight and 32px for Subheadlines)
3. Use line spacing between 120 and 150% of the font size.
4. 45 to 90 characters per line
5. Use Good Fonts (sans-serif and serif)

• Sans-serif (more neural, clean, simple, modern websites)
  • Open Sans, Lato, Raleway, Monsterrat, PT Sans
• serif (traditional purposes, story telling, long reading)
  • Cardo, Merriweather, PT Serif

6. Chose a font which reflects the look and feel you want for your website
7. Use only one font if possible

Using Colors Like A Pro

1. Use only one base color
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

Picking a color for a website means more then picking your favorite color and turning it into a design. It means picking the right color in order to get the desired response from your audience. Color really makes a difference. This happens because there are psychological effects behind each color.

• 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
3. Put your text in a Box
4. Blur the image
5. The floor fade

Use CSS To Work With Images

To achieve the text-on-image effects, you can use CSS for your websites. Here is example CSS code for some of the effects. Please change it according to your needs.

Overlay the image

.darken {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(YOUR IMAGE HERE);
}

Example: http://jsfiddle.net/drpak8vy/1/

Put text in a box

.text-box {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: inline;
  padding: 10px;
}

Example: http://jsfiddle.net/qg83m36p/

Floor fade

.floor-fade {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(YOUR IMAGE HERE);
}

Example: http://jsfiddle.net/gRzPF/409/

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 if possible
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 your 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

Getting Inspired: The Secret Ingredient For Stunning Web Design

Use other websites as inspiration to see what others leading designers are doing right.

• Collect designs that you like
• Try to understand everything about them
• Why do they look good?
• What do these sites have in common?
• How were they builtin HTML and CSS? (Chrome devTools)

8 Super Effective Ways To Improve Your Website's Conversion

1. Build trust with your future customer (giving a free ebook)
2. Repeat your primary action (button for signup)
3. Grab your user's attention (popup box)
4. Tell your user the benefit (of signing up)
5. Don't ask for too much information
6. Use social proof (testimonials)
7. Use urgency (now, hurry, instant, immediately)
8. Use scarcity (Only 1 left in stock)

Creating Effective Websites

• Keep it simple
• Purpose
• Typography
• Technical
• Colors
• Images and icons
• Navigation
• Call-to-actions
• Videos

15 banner ad design tips to get more clicks

1. Use the most effective, standard banner sizes
2. Place your banner ads correctly
3. Maintain hierarchy
4. Keep it simple
5. Use buttons appropriately
6. Have a clearly defined frame
7. Make your text instantly readable
8. Use animation
9. Complement, but stand out
10. Be consistent with your brand
11. Instill a sense of urgency
12. Use imagery well (and only when you need it)
13. Choose appropriate colors
14. Keep your file sizes small
15. Use the correct file formats

Designing the perfect web banner ad: 50 examples to help you get it right

1. Use Stylistic Typography and Image Pairings
2. Create Hierarchy
3. Use Relevant Icons
4. Add in Unexpected Elements
5. Incorporate Illustrations
6. Adjust Your Layout
7. Use Bright Colors
8. Keep It Simple
9. Stay Current
10. Use Texture
11. Appeal to Your Niche
12. Show, Don't tell
13. Have a Clear Focal Point
14. Make a Reference Using Imagery
15. Let Your Product Shine
16. Create Angles
17. Use Overlays
18. Set the Scene
19. Be Creative With Your Type
20. Use a Stylized Illustration
21. Use Multiple Elements
22. Make a Pop Culture Reference
23. Keep It Loose
24. Create a Relationship
25. Create Contrast
26. Create Symmetry
27. Make a Reference to Your Target Market's Lifestyle
28. Use Motion
29. Be Sharp and Edgy
30. Create Depth
31. Use a Unique Typeface
32. Use a Variety of Beautiful Typography
33. Use Simple Graphics
34. Create Depth with Textural Dimension
35. Use Accents of Color
36. Don't Just Try to Make a Sale
37. Use Bold, Analogous Colors
38. Use a Simple Drawing
39. Create Movement
40. Utilize Animation
41. Create Geometric Texture
42. Break Up the Space with an Interesting Shape
43. Utilize Shadows
44. Create a Pattern with Repeating Elements
45. Use Monochromatic Blocks of Color to Break Up Photos
46. Use Linear Accents
47. Tell a Story
48. Have a Sense of Humor
49. Use a Simple Font Pairing
50. Accentuate with Simple Shapes

6 UI Concepts That Will Make You a Front End Ninja

1. Hierarchy is Everything
2. Stop Using Grey Text Everywhere
3. Using Labels
4. Semantics are Secondary
5. Overlapping Elements
6. Using Empty Spaces

8 UX Principles You Should Know as a Frontend Developer

1. Don't Use More than Two Typefaces
2. Use System Native Fonts
3. Depict Information Hierarchy With Type Size
4. Use a Default Size for Body Copy
5. Using Drop-Down Menu
6. Using Pagination When Content is Finite
7. Use Consistent Icons
8. Use Breadcrumb Navigation