Website Design Moodboard Template

Website Design Moodboard Template, within the Milanote app

Set the visual direction of your website with a moodboard

Define a visual language for your web design project with a moodboard. It's an effective way to collect ideas and convey the look and feel of a concept to a client.

Bring together a collection of design ideas such as images, photographs, color palettes, gradients, typography, iconography, navigation styles, hierarchy and layout examples to streamline the web design process.

Milanote helps you share concepts early on to collect suggestions and feedback so you can bring together ideas, excite the client and make crucial design decisions with ease.

This template is part of the Website Design collection.

  • Explore ideas
  • Organize visually
  • Share with your team & clients
  • Gather feedback
  • Export to PDF

How to use this template

Whether you’re a designer, developer, marketer or client, follow this easy step-by-step guide to learn the modern process of creating a moodboard for your website in Milanote, a free tool used by top creatives.

1. Start with an empty template

The Website Moodboard template contains beautifully composed placeholders for images, video, color swatches and notes. Just drag and drop your content onto the board to create a moodboard in minutes. Before you start, think about the style of moodboard you like to create

  • Visual Style Moodboard: This type focuses on the overall visual aesthetics of the website. It includes color palettes, typography choices, image styles, and general design elements that set the tone for the design.
  • Layout Moodboard: Layout moodboards explore different arrangements of content, including the placement of headers, navigation bars, content sections, and footer. It gives an idea of the website's structure.
  • Icon and UI Element Moodboard: This moodboard collects various icons, buttons, UI elements, and interactive components that will be used in the design. It ensures consistency in the design of these elements.
  • Inspiration Moodboard: An inspiration moodboard gathers a wide range of visual references, not necessarily related to the project, that inspire the overall creative direction of the website.
  • Animation and Interaction Moodboard: For websites that involve animations or interactive elements, this moodboard showcases examples of how these elements could be integrated into the design.
  • Responsive Design Moodboard: This type illustrates how the website's design adapts and responds to different screen sizes, such as desktop, tablet, and mobile.
website design moodboard template 01
How to do this in Milanote
  1. Create a new board for your moodboard.

    Create a new board

    Drag a board out from the toolbar. Give it a name, then double click to open it.

  2. Choose the Website Moodboard template.

    Choose a template

    Each new board gives you the option to start with a beautiful template.

2. Collect existing material

Now that you've chosen a moodboard template, start adding any existing material you have—This might include client references, positioning statements, tag-lines or any other parts of the Website Brief that will inspire you. Just drag and drop them onto your board.

website design moodboard template 02
How to do this in Milanote
  1. Drag files from your computer.

    Upload a file or document

    Click the "Upload" button or just drag a file onto your board. You can add images, logos, documents, videos, audio and much more.

3. Add inspiring references

The imagery you choose to include in your moodboard can have big influence on the look and feel of your project, so choose carefully! These images can define things like typography, layout, interface styles and color. Use Milanote's built-in image library, draw from your own bookmarks or search for visual inspiration from around the web.

website design moodboard template 03
How to do this in Milanote
  1. Use the built-in image library.

    Use the built-in image library

    Search over 3 million beautiful, free photos then drag images straight onto your board. Powered by Pexels.

  2. Install the Milanote Web Clipper

  3. Save images from other websites straight to your board.

    Save content from the web

    With the Web Clipper installed, roll over an image (or highlight text), click Save, then choose the destination in Milanote. Return to your board and find the content in the "Unsorted" column on the right.

4. Add examples of motion

With an online moodboard it's possible to embed examples showing how movement and animation could be used in your website. Grab some animated GIFs from Giphy, video from YouTube or even audio from Soundcloud to add motion and depth to the look and feel of your board.

website design moodboard template 05
How to do this in Milanote
  1. Embed Youtube videos or audio in a board.

    Embed Youtube videos or audio tracks in a board

    Copy the share link from Youtube, Vimeo, Soundcloud or many other services. Drag a link card onto your board, paste your link and press enter.

5. Add color & fonts

How you use color and fonts can have a huge impact on your website design. Both elements contribute to your website mark being easy to use and memorably. Color especially can be a great way to express a particular feel, style or energy. As painter Johannes Itten said, “Color is life.” This is also the perfect time to start collecting inspiring fonts that communicate the personality you'd like to create.

website design moodboard template 04
Pro tip:

Opt for web-safe fonts that are widely supported across different browsers and devices. Alternatively, use web font services like Google Fonts or Adobe Typekit for a broader range of font choices.

How to do this in Milanote
  1. Add color swatches to a board.

    Add a color swatch

    Drag a Color Swatch card onto your board from the left-hand toolbar. Double-click the swatch to choose a different color.

6. Share your moodboard

Now is the perfect time to share the moodboard with your team or client. Encourage them to add feedback and build on your ideas. It's important that everyone agrees on the general visual direction at the moodboard stage. It lets you begin the design phase confident that you're on the right track.

website design moodboard template 07
How to do this in Milanote
  1. Invite others to edit to your board.

    Invite editors to your board

    Open the "Share" menu from the title bar of your board. Add email addresses of the people you'd like to collaborate with—they'll receive an invitation via email.

  2. Collaborate in real time.

    Collaborate in real time

    When multiple people on your team edit a board at once you'll see their updates appear in real-time.

You're done!

Hopefully, this guide has helped inspire you to plan and set a visual direction for your next website design project. Check out our other website design templates and use the template below to help get you started.

Start your Website Design Moodboard

Set the look & feel for your website