Creating Effective and Creative Mood Boards for Web

Mood boarding is one of the most crucial parts of the web design process. Getting it right is the difference between an efficient, highly creative project and a boring, full-of-headaches website that seems to lack a clear vision. Let's learn how to make the ultimate mood boards for your web projects.

Let's get you off to a good start with this lesson's freebie download:


The Main Takeaways:

1. Mood boards are an effective way of kickstarting visual thinking, generating interesting functionality ideas, finding unique layouts, and coming up with ways to convey content.

2. There are plenty of great online resources to find mood board inspiration such as Dribbble, Awwwards, Behance, and more.

3. Sort your mood board into categories to make pulling content focused and efficient. Some categories might include:



Layout and Grid

Link/Button Styles



Mobile Layouts

4. Keep your ideal client in mind when choosing content for your mood boards.

5. Look for inspiration outside of web design and/or your client’s industry.

6. Don’t copy each element on your mood board. Instead, look for creative ways to take ideas from different elements to make one new element.

Where to Look for Inspiration:

1. Dribbble: https://dribbble.com

2. Awwwards: https://awwwards.com

3. Behance: https://behance.com

4. Pinterest: https://pinterest.com

5. YouWorkForThem: https://youworkforthem.com

6. FontsInUse: https://fontsinuse.com

7. FontsInTheWild: https://fontsinthewild.com

My Favorites On Dribbble

1. Halo Lab: https://dribbble.com/halolab

2. Ooze: https://dribbble.com/ooze

3. Focus Lab: https://dribbble.com/focuslab

4. CLAW: https://dribbble.com/clawinteractive

5. DStudio: https://dribbble.com/D-studio

6. Green Chameleon: https://dribbble.com/greenchameleon

7. Cuberto: https://dribbble.com/cuberto

Get exclusive content.

Join the patreon community!


Article by:

Noah Shreve

Want to work together?

Schedule a call and let’s see if we are a good fit.

Let's Talk