HTML
HTML = HyperTextMarkupLanguage
Resources for design
- icons
- fonts
- Google Fonts — choose fonts and load via
linktag - FontsAwesome — common social media plattforms as font (svg)
- FontsSquirrel — fonts to use locally
- Google Fonts — choose fonts and load via
- colors
- ColorZilla — ColorPicker for chrome!
- Coolors — color scheme generator
- Color Hunt — color scheme generator
- background images
- Pexels — Bannerimages, random image picker
- CSS Libraries
- Bootstrap — widely used. By ex-twitter employees.
- Material Design — alternative (by Google)
- Semantic UI — beautiful animations
- Dribble — GitHub for designers, perfect for inspiration
- Product Hunt — startups posting their products. You can get inspiration of the design of other startups.
And here are some useful sites to check out (the resources I mentioned in the lecture and many more :zwinkern: ):
This is a handy sheet for HTML and CSS shortcuts: https://docs.emmet.io/cheat-sheet/
And here is a list of useful design resources:
Colors:
https://colorhunt.co/
https://coolors.co/
https://color.adobe.com/create/color-wheel/
Color Picker:
http://www.colorzilla.com/
https://sipapp.io/
Fonts:
https://fonts.google.com/
https://fontpair.co/
Font Picker:
https://fontface.ninja/
Placeholder images (free to download and use):
https://unsplash.com/
https://www.pexels.com/
Random placeholder image:
https://picsum.photos/200/400
https://source.unsplash.com/random
Icons:
https://thenounproject.com/
https://iconstore.co/
Gradients:
https://uigradients.com/#Bupe
Design tools:
https://www.producthunt.com/search?q=design
(Web)Design inspiration:
https://dribbble.com/
https://www.awwwards.com/
UI Components (more on that tomorrow :zwinkern:) :
https://calltoidea.com/
https://uimovement.com/
UI Design guide (MUST READ):
https://goodui.org/
If any of you has a site they love using feel free to add it to the list! :erröten:
-> http://www.webdesigner.world/
RESOURCES BY MARTIN (teacher LeWagon)
*Colors:*
https://colorhunt.co/
https://coolors.co/
https://color.adobe.com/create/color-wheel/
https://uigradients.com
*Fonts:*
https://fonts.google.com/
https://fontpair.co/
www.dafont.com
www.myfonts.com
*Placeholder images (free to download and use):*
https://unsplash.com/
https://www.pexels.com/
*Icons:*
https://thenounproject.com/
https://iconstore.co/
flaticon.com
*(Web)Design inspiration:*
https://dribbble.com/
https://www.awwwards.com/
https://www.producthunt.com
UI Components Inspiration that I showed you during the lecture.
https://calltoidea.com/
https://uimovement.com/
*ALL YOU NEED IN ONE STOP:*
http://www.webdesigner.world/
Landing Page
- clear value proposition
- clear design
- call-to-action
- CRM (customer relation management)