Sketch
Most of us are familiar with the idea of sketching. A sketch is simply a rough, quick drawing of an idea. Visual design is of course a visual medium, so drawing is one of the most powerful ways to explore design ideas.
Sketching for visual design is a great way to work through ideas about page layout, interaction types, icon design, user flows, and more. And a sketch or ten is a much quicker, easier, and lower-stakes way to try out ideas than moving directly to digital design tools. If an idea turns out to not work, you can simply crumple up the paper and throw it in the recycling bin.
- Moodboards:
- For basic aesthetic and vibe
- Images, type samples, color swatches, textures, patterns, graphical elements, (possibly) similar full designs
- Try to arrive at one clear aesthetic per moodboard rather than a mix of possible inspiration
- Be sure to make them actionable
- Adjust as you go. Don’t be afraid to remove things as you refine the style
- Style tiles:
- More specific than moodboard
- Design usable components
- Hints of layouts
- Wireframes:
- For laying out where everything will go and basic functionality
- Keep it black and white
- Doesn’t necessarily need final typefaces or content
- Don't bring in too much visual design
- the right amount of detail
- Mockups:
- Every detail matters
- Always use the most realistic content possible
- An exact picture of what the final page or component will look like
- Create secondary mockups to show interactions in context
- Since mockups aren't responsive, it's usually a good idea to make several mockups of the same thing showing how it adapts at different sizes
- Prototypes:
- Creates an illusion of the real interactions
- Be precise
- Show the relevant interactions for your needs
- Use it to test out your ideas and look for blind spots
- Demonstrate animations
- Know your software
- If you know how, you can also prototype with code
- Annotation and understandability