Jumpstart Your Project’s Visual Design

November 11, 2022

Get started!

Whether you are a seasoned designer or brand new to the world of visual design, odds are that you have experienced that moment at the start of a project that I call white canvas paralysis. Similar to writer’s block where writers find themselves staring at a big blank page without a word in their head, designers find themselves looking at the white artboard of their design tool not knowing where to begin. 

I've experienced this far too often, whether I'm the visual designer on a project, or I'm preparing a storyboard to hand off to a team member to do the visuals. Over time, I've found the following process to be quite effective at jumpstarting my own ideas or opening communication with team members to help iterate on design ideas together.

Get inspired!

To kick off the create process, I begin by creating a digital mood board to capture visual ideas. A mood board is simply a collection of images that can be used as inspiration for a project. 

Having a mood board can help communicate ideas to clients or visual designers on a team early on and may even influence earlier design decisions for Instructional Designers (IDs), like how to design an activity, how to organize information on a page, or how an interaction may function.

Whether you’re working with an existing branding scheme or creating a design from scratch, there is inspiration to be had and the earlier you can get in the mindset of design the better. Mood boarding can prepare you for the arrival of the design phase by getting into the right mindset early.

Mood board showing screenshots of various webpages with photos of smiling women in the hero sections.
Example of a mood board for a personal website (site Images found in public domain via Pinterest)

As soon as a project launches, be on the lookout for inspiration to strike! (Okay, that sounded aggressive. I promise, being inspired usually isn’t painful.) What I mean is, while this may not be the right time to get bogged down with the specifics of what your design will ultimately look like, documenting ideas as you learn more about your client and audience will help you when you do reach that point of the design process.

When you start purposely looking for inspiration, ideas often begin to springboard off of one another. The next thing you know, you are being downright creative even during project analysis and research.  

Tool tip: Mood boards can be created in just about any tool of choice that supports graphics. I gather a lot of inspiration online, so I prefer to use a web-based design tool, such as Figma. If I find something I like, I can do a quick screen capture and paste directly into my mood board.

Get moody!

Once you create a new mood board, how do you decide what goes on it? Here are a few things to help guide you.

Consult with your client

Check in with your client early. Do they have a particular style in mind that they like or wish to avoid? Illustrated? Photorealistic? 

What can you learn from their current branding or existing training materials? Are they going for a particular mood? Formal? Whimsical? Retro? Is there something they have seen or produced in the past they really love? What specifically do they love about it? Is it the overall look and feel or something about one particular part?

If the key decision-makers already have a picture in their mind of what they want, knowing about it up front will save you tons of time as you begin to think about the visual makeup of your design.

Consider your audience

You should never think about design before understanding who you are designing for. The consumer of your content may have different needs and preferences than your client. Tuning into your target audience is just as critical for the visual design of your project as it is for the content. 

As you are gathering data and creating personas as part of user research or learner analysis, think about what would appeal to those users. Are you appealing to a particular age group or demographic? Can users be grouped a certain way - by job role perhaps? Answers to these kinds of questions can help guide visual decisions. For example, if you are designing content for a group of corporate managers, characters in business attire may be appropriate. If you are designing for pet trainers, they would likely be dressed casually. 

Think about key elements

When you do start creating visual mockups, four elements will be the cornerstones of your designs: color, typography, iconography, and movement. These are the elements you want to pay attention to as you collect items for your mood board as well. I could do multiple blog posts on each of these elements individually, but at this stage, remember you are only searching for inspiration. If you see something you like, take a screen grab or photo of it and save it for later. You will make more mature visual design decisions about these elements later in the design process.

Square outline with checkmark in it used as a paragraph bullet
  • Color: Don’t try to pick out colors or limit your mood board to a particular color scheme at this stage, but after learning about your audience, you may have an idea of if warm or cool tones are going to be more appropriate. Colors have meanings associated with them. The colors you choose will help set the tone, or personality, of your project.

Square outline with checkmark in it used as a paragraph bullet
  • Typography: Fonts, like color, set a tone also. If you are going for a playful tone, look for playful fonts. If you see an example of fonts used in a particular way that conveys the tone of your project, then grab a screenshot for examination later.

Square outline with checkmark in it used as a paragraph bullet
  • Iconography: Icons can be used to convey information in a concise and visual way. Icons come in almost limitless styles ranging from super simple line art, to highly complex shaded 3D vectors. Be on the lookout for icons that could work in your project.

Square outline with checkmark in it used as a paragraph bullet
  • Movement: Have you viewed an online experience that was organized in a way that would work for your content? Was the user guided through the experience in a way that caught your eye? If so, capture that experience to think about later. Many programs will let you embed a video or a link to a webpage into the mood board. If that is not an option, take a still screenshot and then make a note beside it about how the interaction worked.

Check out the competition 

This particularly applies to product and web design. If you are doing a competitive analysis as a part of UX research, capture screens from your direct and indirect competitors on your mood board. Odds are you will need them anyway as part of your competitive analysis. Capture what your competitors are doing well, what product features they highlight, and unique parts of the user journey they have created. Not only will this help with front-end decision making, but it will give you a great foundation when you move into visual design and need to make decisions that capitalize on what works as well as what you can do differently to set your design apart. 

Get organized!

So, you have found items that have inspired you or that you want to remember some detail about. Now what? How can you make your mood board go from a compilation of images to a tool that jumpstarts your visual design process? The trick is organizing your mood board.

The first thing to do is document. This can be done as you add items to your mood board (this is what I recommend) or once you feel like your board is complete and you are ready to dive deeper into design. 

Example of a comment left on a mood board that says, "I like the color scheme and the shading techniques used here. I like the highlight effect on the..."

To document, make a note somewhere near the image about what inspired you to save that image. Did you like the font? Did you like a particular product feature you saw on a competitor’s website? Did you like the overall tone of a site even though it in no way relates to your subject matter? These notes do not need to be lengthy, but will help you sort your mood board. Documentation is extremely important if you are going to be passing off your mood board to another person to do the visual design. This will help the designer see what you found value in as you were working with the client and users. It will also give them a feel for what styling choices you like or wish to avoid. 

Next, sort your mood board. Use your documentation to sort items into themes that you think makes sense for your project. Popular themes are colors, fonts, and illustrative style. Some people prefer to create a separate mood board for each theme.

Get ready to design!

When the time finally arrives to actively launch into the visual design of your project, use the mood board or boards to inspire your first round of mockups and avoid the white canvas paralysis. If you have several themes on your mood board, you may choose to create a mockup using each theme idea. Let your client or team help narrow down the choices from there if desired. 

While I believe having a ‘no holes barred’ approach helps promote creativity in the first couple of rounds of design, by using a mood board that keeps your audience and client’s needs in mind from the beginning, your mockups will likely be ahead of the game with designs that are relevant as well as creative.

For more information about mood boards and to see examples, check out this article from Milanote.