MD Projekt

Responsive website development with HTML5, CSS3 and some jQuery. In this project I focused on the web design (below web design guidelines and tips - source: Jonas Schmedtmann course).

Basic principles of website designing that I use in my projects:

Typography

1. Use a font-size between 15 and 25 pixels for body text.
2. Big font-sizes for headlines (no limits).
3. For a big headline decrease the font weight of text. (This ensures that the text doesn't steal too much attention from the rest of the content. And it makes the text look less bulky and more modern and elegant.)
4. Use a line spacing between 120% and 150% of the font size. (vertical distance between lines)
5. 45 to 90 characters per line is the optimal line length that is easy to read.
6. Use good fonts

• Sans-serif:
  • more neutral
  • clean
  • simple
  • modern websites
• Serif (no serifs)
  • traditional purposes
  • storytelling
  • long reading

Colors

1. Use only one base color (any different color than black, white or some shade of grey).
2. To choose base color: https://flatuicolors.com/. Based on this color, choose the others from https://www.0to255.com/0163af
3. Use a tool, if you want to use more colors like http://paletton.com/. Then use a main color to draw attention to the most important elements on your web page (like cta button - to draw attention a second or third colors can complement the main color).
4. Never choose the black color for any part of your design. This is because black actually almost never appears in the real world. So using complete black just doesn't feel natural.
5. Choose color wisely

• Red is a great color to use when power, passion, strength and excitement want to be transmitted.
• 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, et cetera.
• Green is the color of harmony, nature, life and health. Also it is often associated with money.
• 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.
• 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, et cetera.
• Brown is the color of relaxation and confidence. Brown itself means earthiness, nature, durability, comfort and reliability.

Working with images

Effective placement of text on the image

1. Put text directly on an image. Overlay the image with a color, if there is a small contrast. Use color gradients to achieve stunning effects: https://uigradients.com/
2. Put your text in a box. Box should be opaque.
3. Blur the image.
4. The floor fade method. It is a technique where an image subtly fades towards black at the bottom, with white text written over it.
   

• All free images in one place: http://thestocks.im/
  
• Images from many sources: https://www.pexels.com/
  
• Food images: https://www.foodiesfeed.com/
  
• A curated collecton of free resources: http://www.imcreator.com/free
• Free videos: http://mazwai.com/
  
• Techniques for working with images in CSS: https://css-tricks.com/design-considerations-text-images/
  

Working with icons

1. Use icons to show features of your web site or steps that a user should follow to achieve some goal.
2. Or instead of showing features, you can use icons for actions and links.
3. Icons should not take a center stage in your design. Instead, they should play a supporting role.
4. Use icon fonts whenever possible. Icon fonts use smooth, vector images instead of common roster images to display icons on your web site. Vectors scale endlessly up or down for any resolution.
   

• Icon fonts: https://icomoon.io/
  
• Or: https://ionicons.com/ https://iconmonstr.com https://fontawesome.com/
  
• Another icon set: http://entypo.com/
  
• Useful SVG icons: https://www.iconfinder.com/
  

Spacing and layout

1. Use whitespace

• put whitespace between your elements
• put whitespace between your groups of elements
• put whitespace between your web site's sections.

2. Define hierarchy. With the whitespace that you add, you describe invisible relationships between the elements of your web site. You communicate how the pieces of information relate to one another.
   Hierarchies give your web site order. And how do you do it?

• first, define where you want your audience to look first
• establish a flow that corresponds to your content's message (Because hierarchy is exactly that. It guides the user from one element to the next.)
• and then, use whitespace to build that exact flow

User Experience

1. Designing the user interface means to design the presentation of a product, like a web site or a mobile application. It's designing the look and feel of the product.
2. Another type of design - user experience design. User experience includes the user interface, but also has to understand the whole picture of the product. It's not just what it looks like and feels like. Design is how it works.
   

• UX crash course in 31 days: https://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals
  
• UI tricks that can lead to higher conversion rates: https://goodui.org/patterns/91/
  

Getting inspired

• Find beautful websites: https://www.siteinspire.com/
• Dribble: https://dribbble.com/
• Behance: https://www.behance.net/
• Inspiraton for one­‐page websites: https://onepagelove.com/
• Collecton of design elements: https://calltoidea.com/
• Google fonts inspiraton: http://femmebot.github.io/google-type/

This is my cheatsheet inspired by Jonas Schmedtmann: some web design guidelines in one place.