Web Design for Web Developers: Build Beautiful Websites! Part 1 by Jonas Schmedtmann

 

Chapter 1

Web design has become easier because of Flat design

Flat design is a user interface design style that uses simple, two-dimensional elements and bright colors.

Easy user interface, bold colors, sharp images, simple navigation, distinctive fonts, easy to read the text, all together contribute in making flat design the best option for many designers and customers

Chapter 2

Beautiful Typography

Below are the guidlines to achieve beautiful typography:

• Use a font size between 15 and 25 pixels
• Use big font sizes for headlines
• Use line spacing between 120 and 150%
• 45 to 90 characters per line
• Use Good fonts 

Sans-serif	Serif
More neutral	Traditional purposes
Clean	Storytelling
Simple	Long Reading
Modern Websites

Sans-serif regular example:

Almost before we knew it, we had left the ground.

Example of Bree serif :

Almost before we knew it, we had left the ground.

Other examples to show typeface:

Cardo

Almost before we knew it, we had left the ground

Merriweather

Almost before we knew it, we had left the ground

PT Serif
Almost before we knew it, we had left the ground

How to choose your font?

1. Choose a font which reflects the look and feel you want for your website
2. Decide: sans-serif or serif typeface?
3. Use a good font
4. Use only that one typeface

Chapter 3

Consider using Flat UI Color Palette Sketch Resource

1. Use only one base color

             

2. Use a tool if you want to use more colors

Using Adobe Color wheel

3. Use color to draw attention

4. Never use black in your design

5. Choose colors wisely

• Red is great color to use when power, passion, strength and excitement want to be transmitted, brighter tones are more energetic and ricochets are more powerful and elegant.

• Orange draws attention without being 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, it is often associated with money

• Blue means patience , peace, trustworthiness and stability. It is the most beloved colors, especially by men. It is associated with professionalism, trust and honor.

• Purple is traditionally associated with power, nobility and wealth in your design, purple can give sense of wisdom, royalty, nobility, luxury and mastery.

• Pink expresses her Ullman's passivity, care, peace, affection etc 

• Brown is the color of relaxation and confidence. Brown itself means earthiness, nature, durability, comfort and reliability.