Web Designer World - Curated list of web design resources

Follow the design rules of thumb

Bend the rules only if you have learned them, break the rules only if you have mastered them. – Matshona Dhliwayo.

Checklist Design

A collection of the best UX and UI practices for different pages or components.

I use it for: necessary features per page, component states, best practices.

Good UI

75 general UI ideas & best practices of modern web design.

I use it for: design best practices.

Intro to The 8-Point Grid System

Find out what benefits an 8pt (or 8px) system could give to your designs.

I use it for: spacing rules.

Step 1 - find inspiration!

I no have education. I have inspiration. If I was educated, I would be a damn fool. – Bob Marley.

Dribbble

Basically instagram for designers, this website is great for very broad search when starting a new design challenge.

I use it for: button ui, dashboard ui, form design.

Pages.xyz

A collection of the best web pages found around the web. You can browse through different categories like product page or pricing page.

I use it for: landing page, pricing page, payment form.

Call To Idea

A curated list of nice design divided by components, very useful when you know what you're looking for and just want design ideas.

I use it for: layouts, login page, tabs, navbar.

Bootstrap examples

Layout ideas from Bootstrap!

I use it for: layouts, landing page, page structure.

Step 2 - pick the right colors!

Colors are the smiles of nature. – Leigh Hunt

Coolors.co

A cool app allowing you to quickly browse through colors palettes, lock the ones you like and find matching colors.

I use it for: matching color set.

Color Hunt

A platform for color inspiration with thousands of trendy hand-picked color palettes.

I use it for: color palettes, trendy color.

Picular

Google, but for colors.

I use it for: finding color.

Step 3 - pick good fonts!

Helvetica is the sweatpants of typefaces. – John Boardley

typespiration

Free inspirational web font combinations with color palettes and ready-to-use HTML/CSS code.

5 Minute Guide to Better Typography

This cool interactive guide gives you tons of tips on how to handle typography on the web.

I use it for: text spacing rules, alignment rules.

Font Pair

This website helps you pair Google Fonts together.

I use it for: pair body & header fonts.

Step 4 - add some awesome icons!

I don't believe in icons. – The Weeknd

Step 5 - find beautiful images!

Words are but pictures of our thoughts. – John Dryden

Finally, stay up-to-date on design trends!

The more up-to-date the information, the more valuable it is. – Katie Jacobs Stanton

Marvelapp Blog

Awesome daily articles about design and tech by Marvelapp.

UI Sources

Get real product insights from the best designed and top grossing apps on the App Store today.

The web designer tool kit you need