A 101 guide to basics in UI and visual design for beginners
A simple Google search for educational design resources online yields 6,250,000,000 results — there’s no wonder for those starting out as a designer, it may feel overwhelming to know where to begin. As with mastering any subject, grasping key foundational knowledge is critical before becoming an expert in the field.
Below are some crucial facets of design I believe every creative should know. As a designer, I can attest that I use my knowledge in these pillars in some way, shape, or form in my day-to-day role.
Every page starts off as a blank slate. Similar to the process of solving any problem, adding constraints and guidelines helps ease towards a structured solution. In design, this is where the role of a grid system comes into play; it helps align elements according to sequenced columns and rows to achieve balance and consistency on the page.
For historical context, the grid system initially existed as a way to help type-set novels. With the industrial revolution, it transitioned to divide space on pages up into segments for advertising. Movements like the Bauhaus and the Futurists investigated the use of grid systems, and how to play within these constraints.
Josef Müller-Brockman, known as the father of Swiss graphic design, wrote Grid Systems in Graphic Design in the 1980’s; it’s considered a must-read for any early designer, providing a comprehensive framework and a myriad of layout examples.
In application, most popular frameworks utilize a baseline grid system of 12 equal-width columns; this allows designers to divide the given area into halves, thirds, fourths, or sixths. It’s helpful in building consistency, alignment, and balance as the system ensures that the bottom of each line of text (its baseline) aligns with the vertical spacing.
Once you have your grid established, it’s quick and easy to distinguish placement of the content you want to place on a blank design. The different components of your project will take up varying homes on parts of the grid depending on its hierarchy and importance.
A well-defined color palette is key to harmony in every visual experience. It engages the viewer, evokes an intentional emotion, and delivers a sense of order with its deliberate combination. Ultimately, it’s a tool meant to effectively communicate a psychological message or tone to its audience.
According to a study conducted by Jan V. White, a graphic design educator, ads in color are read 42% more often than the same ads in black and white. Additionally, it’s proven that the presence of color boosts memory, positively impacts purchasing power, and increases brand recognition by up to 80%.
Although it depends on how they’re used, colors have varying connotations that represent different meanings. Warms such as reds, oranges and yellows represent passion, vibrancy, and energy. Cool colors comprise of greens, blues, and purples which represent themes of nature, peace, wealth, trust, royalty, and romanticism. Neutrals such as blacks, grays, and whites exist to create balance within designs.
Most palettes have between three to six colors depending on the theme. A good rule of thumb would be to use the 60%/30%/10% rule for your dominant, secondary, and accent colors respectively. This formula works because it creates balance between the different hues and is a known technique in interior design. It’ll also make your designs more comfortable for your users’ brains (as stated by Invision).
Here are some digital tools to help you generate your own color palettes:
Like most things, color theory can be hard to grasp initially as it takes time to develop a good eye. My favorite way of grabbing color inspiration is from the environment around me: films, photographs, artwork, etc. One of my favorite YouTube channels, COLORS, is centered on showcasing artists and their music with matching backdrops and color-coordinated outfits. Another source I gravitate towards is r/AccidentalWesAnderson, one of my favorite subreddits online.
Think about the last time you experienced color in a memorable way similar to the emotions you want to evoke in your users. Where were you, what were you seeing, and what were you feeling? Use this to guide your selection.
Web design is 95% typography; almost all of the information presented online is comprised of written language. Thus, knowing how to craft a balanced type system will be imperative to your design’s overall appeal as it’ll live on a device for users to read.
Choosing fonts is an art, but there are conventions that can help you in the process. First, start off with fonts that have the clear basics: legibility, readability, clean spacing, and appropriateness for the context you’re designing for. There are lots of fun and wacky fonts out there, but it doesn’t mean you should use them. Ask yourself if the mood you want to convey is represented in your typeface decisions.
Next, determine how many typefaces you’ll need for your designs; typically, this will range from one to three variations. If you’re only using one, skip ahead to read the next paragraph. However, if you’re mixing more than two together, match-making skills are crucial. It’s your time to play Cupid. Two typefaces can work well together if they have one thing in common, but are otherwise greatly different. This shared common aspect tends to be visual (similar x-height or stroke weight). Also, typefaces have a greater “compatibility factor” if they were created from the same period of time or were designed by the same typographer.
If you need some inspiration, Fonts In Use provides a collection of fonts popularized from various sources.
Once you’ve determined your fonts, the next step is to build a modular type scale. In “Elements of Typographic Style,” Bringhurst states that a modular scale, like a musical scale, is a prearranged set or harmonious proportions.
How does this apply to type? Well, once you’ve chosen a starting font size you see fit, you can use a ratio to obtain resonant numbers for other type styles in your designs. I’d recommend using the Golden Mean (1:1.618) or the Perfect Fourth (2:3) due to their reputations in creating aesthetically pleasing works by Greek and Renaissance mathematicians, architects, and musicians.
Some popular visual calculator tools:
In my opinion, these three pillars of design are invaluable to creating beautiful designs (a successful design will still rely on the requirements of the project). Although there are rules with each, sometimes breaking the rules is what makes your designs stand out. However, nail them, and I can say with confidence you’re off to an auspicious start in your career.