BEST RESOURCES FOR WEB

DESIGN AND DEVELOPMENT

WITH HTML5 & CSS3

WELCOME TO THIS E-BOOK

In this e-book, I share a lot of resources with you, in order to make your life as a web
designer a lot easier! I found all of these tools and resources over a period of years,
spending days of my precious <me looking for things that I needed. So I decided to
pack all of them into this e-book, so that you dont have to go through the same
hassle!

1 INTRODUCTION TO WEBDESIGN
Design course in form of ar<cles:
hBps://hackdesign.org/lessons
Learn more about at design:
hBp://www.webdesignerdepot.com/2013/12/infographic-at-design-vs-
skeuomorphism/

2 TYPOGRAPHY
Google fonts: tons of free, easy to use webfonts:
hBps://www.google.com/fonts
Fonts for free download:
hBp://www.fontsquirrel.com/
List of best free fonts for designers:
hBp://www.crea<vebloq.com/graphic-design-<ps/best-free-fonts-for-
designers-1233380

Very good for nding good font combina<ons:

hBp://www.fastprint.co.uk/blog/the-art-of-mixing-typefaces.html
Find even more good font combina<ons:
hBp://fontpair.co/
learn even more about typography:
hBp://www.typogui.de/

3 COLORS
Cool Flat UI colors:
hBp://atuicolors.com/
Even more cool colors:
hBp://getuicolors.com/
Find varia<ons of colors (very good):
hBp://www.0to255.com/
Adobe Color CC, play around with colors:
hBps://color.adobe.com/create/color-wheel/
PaleBon, play around with colors:
hBp://paleBon.com
Beau<ful gradients for webdesign:
hBp://uigradients.com/
Learn about colors:
hBp://www.rocket-design.fr/color-template/

Learn even more about colors:

hBp://webdesign.tutsplus.com/ar<cles/an-introduc<on-to-color-theory-for-web-
designers--webdesign-1437

4 WORKING WITH IMAGES

Basically all free images in one place:
hBp://thestocks.im/
Images from many sources:
hBp://www.pexels.com/
Unsplash, a must see:
hBps://unsplash.com/
Food images:
hBp://foodiesfeed.com/
A curated collec<on of free resources:
hBp://www.imcreator.com/free
Huge paBern library:
hBp://thepaBernlibrary.com/
Subtle paBerns:
hBp://subtlepaBerns.com/
Free videos:
hBp://mazwai.com/
Techniques for working with images in CSS:
hBp://css-tricks.com/design-considera<ons-text-images/

5 WORKING WITH ICONS

Beau<ful icon font:
hBp://ionicons.com/
Another beau<ful icon set:
hBp://entypo.com/
Font awesome icons:
hBp://fontawesome.io/icons/
Big collec<on of SVG fonts:
hBp://iconmonstr.com/
Yet another icon font:
hBp://icon-works.com/

6 USER EXPERIENCE
UX crash course in 31 days
hBp://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals
UI tricks that can lead to higher conversion rates:
hBp://www.goodui.org/

7 GETTING INSPIRED
Find beau<ful websites:
hBp://www.siteinspire.com/

Dribble, show and tell for designers:

hBps://dribbble.com/
Behance:
hBps://www.behance.net/
Inspira<on for one-page websites:
hBps://onepagelove.com/
Even more webdesign inspira<on:
hBp://www.admiretheweb.com/
Flat design inspira<on:
hBp://atdsgn.com/
Collec<on of specic design elements and paBerns:
hBp://paBerntap.com/
Another collec<on of design elements:
hBp://calltoidea.com/
Google fonts inspira<on:
hBp://femmebot.github.io/google-type/
Some amazing designers on Dribble:
hBps://dribbble.com/victorerixon
hBps://dribbble.com/benske
hBps://dribbble.com/peternlan
hBps://dribbble.com/Radium

8 EVEN MORE RESOURCES

Huge list of front-end development resources:
hBps://github.com/dypsilon/frontend-dev-bookmarks
Curated resources for everything crea<ve:
hBp://oozled.com/

9 KEEPING UP WITH THE WEB INDUSTRY

Treehouse show, weekly video about new things in webdesign and development:
hBp://teamtreehouse.com/library/the-treehouse-show
Sidebar: the 5 best design links, every day:
hBp://sidebar.io/
Codrops, webdesign blog with lots of freebies:
hBp://tympanus.net/codrops/
Webdesignerdepot, webdesign blog:
hBp://www.webdesignerdepot.com/
Smashing magazine, webdesign blog:
hBp://www.smashingmagazine.com/
1st webdesigner, webdesign blog:
hBp://www.1stwebdesigner.com/
Hey designer, curated list of webdesign ar<cles:
hBp://heydesigner.com/