A web designer is someone who is responsible for creating the look and feel of a website whereas a web developer is responsible for implementing it.
Flat Design
Typography
Typography is the art and tchnique of arranging type to make written language readable and beautiful - Wikipedia
Most of the content on a site is typically text. Therefore it is important to make it readible and good looking.
- Body text should br 15 - 25px
- No set rules for headlines except make them a lot bigger than body text (30 - 60). Typically if using even bigger you want to scale down the font weight.
- Line spacing should be 120 - 150%
- 45 - 90 characters/line is optimal for easy reading
- Sans-serif fonts are more neutral, clean and simple. Modern look. Serif fonts are traditionally used for presenting longer reads.
Some nice sans-serif fonts available via Google Web Fonts are Open Sans, Lato, Raleway, Monsterrat and PT Sans. Web fonts can easily be included without downloading files. For serif alternatives there are Cardo Merriweather and PT Serif.
- The font should reflect the look and feel of your website
- Don't mix lots of different fonts.
Color
Color is probably the thing that we tend to easily get wrong. Instead of enhancing the content it's easy to choose color combinations that distracts instead of helping in communicating
Use a single base color like one of these
Create some darker and lighter versions of the base color using a tool like this
Grey tones are not concidered base colors and are commonly used for both text and backgrounds
Use a tool if you want to use more colors. Adobe color CC or Paletton if you want to figure out color mixes
The main color should be used to draw attention to the most important elements on your webpage
Never use black in your design because it feels unnatural
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.
Images
Putting text in an image typically makes the text hard to read unless using an image overlay. Note that overlays not using black/white should take into account the section on colors above. You can use opaque text boxes Another technique is to blur the background image
- Floor fade - Fade towards black at the bottom making it suitable for displaying text.
Resources...
Icons
- Use icons to show features or steps to follow
- Icons are also typically used for links and actions. If you do this use icons that are easily recognizable and label them consistently
- Icons should not have a supporting role and not be center-stage
- Prefer vector images or icon fonts to regular image icons for scaling Resources:
Spacing and Layout
- Whitespace is key in creating a clean and simple look & feel
- To look well-designed a site needs to have a lot of white space at the correct locations. Put whitespace between elements and groups of elements. Also put whitespace between site sections.
- Whitespace should be used to describe invisible relationships between the elements of the site. It's related to visual hierarchy.
Defining hierarchy
- Define where you want your audience to look first
- Establish a flow that corresponds with your content's message
- Use whitespace to build that flow
User Experience UX
User Interface is the presentation of a product, how it looks and feels
User experience is the overall experience the user has with a product.
It's not just what it looks like and feels like. Design is how it works - Steve Jobs
Your website should be designed in a way that ensures that both the user and the owner of the website achieve their goals. This is the user experience.
Learn more:
Inspiration
- Use websites as inspiration
- Collect designs you like, try to understand them by answering:
- Why do they look good?
- What do they have in common?
- How were they built? (Use Chrome Devtools)
Steal like an artist!
Originality comes with experience Resources:
Responsive Web Design
- Fluid grid: Elements sized using relative instead of absolute units.
- Flexible images also defined using relative units
- Media Queries allowing us to specify different rules for different size screens
See this