How can you create a mood board for your web design project? (2024)

Call me a millennial but Pinterest has always been my starting point for mood boards and the beginning phases of inspiration exploration. Each click / photo takes you on a new path to unlock the next.

Having our goals clear in head brings the clarity If we are sure about the message we want our designs to conveyHalf of the battle is already fought

To create a mood board for your web design project, gather inspiration from websites, design galleries, and physical materials. Define project goals and target audience. Utilize digital tools like Pinterest or Adobe Spark, or opt for a physical board to arrange visuals such as color palettes, typography samples, images, textures, and patterns. Incorporate branding elements for consistency. Experiment with layout and organization for cohesion. Share the mood board for feedback, and use it as a reference throughout the design process.

Gosto muito de usar o Freeform porque aí vou acessando pelo celular, computador e iPad. Em um primeiro momento, acho importante que nosso "toró" de ideias contenha várias coisas que passam na nossa cabeça: sites parecidos com o que queremos criar, empresas que dialogam com o mesmo público, uma capa de album que transmite a mesma sensação que buscamos gerar, um post do insta que vimos, etc. Depois desse "esvaziamento" de várias coisas que nos tocam e permeiam o projeto, vem a parte da filtragem. Nesse momento, nos aprofundamos naquilo que é realmente essencial que seja desenvolvido e é quando aceitamos perder em volume pra ganhar em sofisticação.

Translated

I like to use Chrome plugins like Diigo or Pinterest Save to collect, and archive inspiration I find throughout my day. So the first place I look when gathering for a new mood board is my library of already-collected inspiration

I never would consider a physical moodboard unless it's for a long term goal, vision board sort of thing.Figjam is great for most situations. Powerpoint or Slides can also be decent option if your client is more comfortable comfortable with those and you can still work collaborate. Also forces you to curate a bit and pick the strongest examples because there is only so much you can fit on a page. I usually save this for presenting version 2 of the moodboard to client, but use FigJam to work out the messy initial thinking.

Each moodboard you create should communicate a specific idea to your client, to help the designer figure out the client's preferences for the direction of the project. Group of the images you've collected into 2-4 separate ideas, sorted by vibe/color/direction. Come up with a catchy name and description for the moodboard based on what you already know about the project, and goals of the client.Many designers use Figma, Figjam, Google Slides or Adobe InDesign to create a moodboard. Each moodboard should contain a Name, Description, as well as the images themselves. Keep each moodboard to 1 page maximum so the client can easily tell each of them apart and pick their favorite.

Be clear about which elements in the reference work you're inspired by.For example:"The experimental typography in the H1 and motion elements."Also include anti-inspiration:"Colors are way off brand for <project x>. Typography is too conventional."

I like to create a story and provide a rationale based on what I feel the most effective approach would be. Then provide alternatives based on the creative brief.

Finding fonts, in my experience I found I have a font idea in my head and then I try to look at fonts that come as close to what I was thinking. There are so many fonts to choose from. I usually will try several different fonts and see if they work with my vision.

If I do not have to align to a specific brand font I like to use dafont to present a variety of fonts that fit my vision.I will present in black and white first then add colour combo's based on the themes created earlier.

Art is a different kind of world & when it comes to web designing I would love to do it all by myself sitting on a table for good time to choose better thing...

Revisar meticulosamente nuestro trabajo es una práctica común para garantizar que lo que hemos creado refleje fielmente lo que se nos pidió o lo que deseamos transmitir. Después de invertir varias horas en la elaboración de nuestro mood board, es natural sentirnos abrumados por la cantidad de información.La mejor estrategia es tomarnos unos minutos para realizar otra actividad antes de realizar una revisión final. Este descanso nos permite abordar la evaluación con una mente fresca y receptiva para notar posibles mejoras. Además, buscar la opinión de alguien perteneciente al grupo objetivo puede proporcionarnos una perspectiva externa invaluable. Sus comentarios nos ayudarán a identificar qué ajustar o si todo está bien.

Translated

I have my tried and true creative process. I like to begin all projects with a list. I need to purge all of my ideas first, define the overall big picture and then fill in the details with actionable steps. I will also create a calendar to ensure I meet deadlines and keep the project on tract.To create a web design mood board or any project mood board first define purpose and audience. Gather inspiration from websites, Pinterest, look at competitors in the space, etc. Choose digital or physical concepts boards to organize the elements. I prefer digital and typically organize in illustrator. Arrange them visually and add brief explanations. Review and tweak. Present for feedback, make any revisions and start the actual build out.

Assuming a written mood board has not already been formulated in any way (perhaps you are a more visual person) then a mood board can be a great way to visualise things you like. In doing this, it can help you see how things relate or don’t; like the colour swatch samples you see when selecting paint or wallpaper patterns.If you plan to have somebody help with aspects such as business strategy or UX design, presenting a mood board this way could help you convey what you inevitably aspire towards, but couldn’t otherwise do so with words.