Drop #260 (2023-05-12): Weekend Project Edition

Design Like No One's Watching

At some level, we are all designers. We create and disseminate “content” (a terrible word), hoping folks will care and engage. As I've been noting more fervently this year, we are also going to be driven more towards the browser as a target for our creative efforts; and, we are or will be clamoring for the attention amidst a sea of other content “creators”.

Speaking of attention, one way for our creations to stand out is by ensuring we are paying enough attention to detail. And by “detail”, I mean detail.

So, your mission this weekend is to level up your ability to pay attention to detail to help you design “content” that others will take notice of (in a good way). And, by “take notice”, I mean have a feeling as you're experiencing some “content” that a significant portion of said “content” had solid font selections (with proper typography), effective color usage, and overall appreciation for how elements fit together.

The bestest part, is that you're going to level up those skills by playing games!!!

Method Of Action

Method of Action is a labor of love (well he does take donations, too 🙃) by Mark MacKay, an individual who creates tools, toys, and games to help you learn design, for free.

Let's dig in to some of the ones you can play with this weekend.

Color

We talk about “color” quite a bit in these Drops, but just how much time do you spend really trying to grok what color is and how to wield it as a master? Well, now's your chance! Mark has designed an engaging color game that lets you work with:

• hue: which refers to the dominant color family of a specific color in the color spectrum. It's essentially what people commonly refer to when they say “color.” Red, blue, green, yellow, and orange are all different hues.

• saturation: which refers to the intensity or purity of a color. A fully saturated color is bright and vibrant, while a less saturated color appears more washed-out or grayish.

• complementary colors: in color theory, complementary colors are colors that are directly opposite each other on the color wheel. When placed side-by-side, they create strong contrast and can make each other appear brighter.

• analogous colors: these colors that are next to each other on the color wheel. They have a common hue and usually match well, creating a serene and comfortable design.

• triadic scheme: this uses colors that are evenly spaced around the color wheel. This scheme is popular among artists because it offers strong visual contrast while retaining harmony and color richness.

• tetradic scheme: a.k.a. “double complementary”, this scheme involves four colors arranged into two complementary pairs. ‘Tis a very rich color scheme that offers plenty of possibilities for variation, but it's also the most challenging to balance.

All these terms are crucial to good design, as they provide a framework for understanding and manipulating color, which is a powerful tool in design. Color can influence mood, draw attention, make associations, and guide the eye.

Understanding hue and saturation is fundamental to selecting and adjusting colors that work for your design. Complementary colors can create vibrant contrasts that demand attention and make a design stand out, while analogous colors can be used to create a more harmonious, soothing design. Triadic and tetradic schemes provide more complex color relationships that can add richness and variety to a design.

When used appropriately, these principles of color theory can significantly enhance the effectiveness of a design, leading to better user experiences, increased engagement, and more successful communication of messages. A well-executed color strategy can even contribute to your brand (yes, we all do have “brands”, now) recognition and overall image. Therefore, mastering these concepts is essential for any designer.

Beziers

I bet all of you have heard the term “Bézier”; and, further, bet that many of you know these curves well, and actually do a good job working with them. For the rest of us mortals, we can use all the practice and help we can.

Bézier curves are a fundamental tool in vector graphic editing software, which are often used in graphic design, web design, animation, and many other areas that involve the creation of digital images. These curves are defined by mathematical formulas and are used to model smooth and scalable shapes. They are created with anchor points and control points that allow for the manipulation of the shape of the curve.

Knowing how to work with Bézier curves is important for a few reasons:

• precision and control: Bézier curves allow designers to create and manipulate shapes with a high degree of precision. The ability to control the curve precisely allows for greater detail and complexity in design work.

• scalability: because Bézier curves are mathematically defined, they're resolution-independent. This means they can be scaled up or down without losing any detail or clarity, which is vital for responsive design and high-resolution displays.

• smoothness: Bézier curves are ideal for creating smooth, flowing shapes and lines. This is particularly important in logo design, typography, icon design, and any other design work that requires smooth contours.

• versatility: Bézier curves can be used to create almost any shape imaginable. This versatility makes them a crucial tool in a wide range of design disciplines.

In terms of where they show up in design, Bézier curves are everywhere. They are used in the creation of logos, where smooth, scalable shapes are needed. They're also used extensively in typography: most digital fonts are created using Bézier curves. In web and user interface design, they are used to create icons, buttons, and other interface elements. In animation and 3D modeling, they are used to create paths, model shapes, and control animation trajectories.

In short, understanding how to use Bézier curves is a fundamental skill for any digital designer or illustrator. Properly wielding them can significantly enhance the quality and flexibility of your work.

Mark's Bézier game helps you use what is usually referred to as the “pen” tool in most design applications. But, understanding how they work can also help you in environments like D3, p5.js, R, Python, Julia, and more, especially when it comes to having items follow a path or have smooth, unique transitions. You are challenged to create increasingly more complex shapes, and it's both frustrating and quite fun.

Kerning

Oh man, now we're talkin' my game.

You immediately know when someone has paid zero attention to font detail and has ignored or abused kerning rules. I may judge you quite harshly (it's a “tough love”, tho) if I catch some terrible text spacing in things you create.

Kerning refers to the adjustment of spacing between individual characters (letters, numbers, punctuation, etc.) in a piece of text. Its primary goal is to achieve a balanced and visually pleasing distribution of space between each character.

Kerning is crucial for several reasons:

• readability: good kerning ensures that text is easy to read. Poorly kerned text can lead to awkward spaces between characters, making the text difficult to read and potentially causing confusion or misinterpretation.

• aesthetics: kerning plays a significant role in maintaining the aesthetic appeal of typography. Well-kerned text looks professional and visually pleasing, while poorly kerned text can look amateurish and unbalanced.

• communication: In graphic design, every detail, including kerning, can impact the overall message or mood. For instance, tight kerning can convey a sense of urgency or closeness, while more extended kerning might suggest elegance or formality.

• your brand: typography is a critical element of a brand's visual identity. Good kerning contributes to a professional, polished image, while bad kerning can negatively affect your brand's perceived quality and credibility.

I thoroughly enjoyed Mark's Type game, and I think you will, too.

Shape Type

So, while I think I'm good at typography, I'd never make it as a font designer. The amount of skill, effort, and expertise it takes is just beyond my patience level and cognitive load handling.

Even if you never think you'll make a new typeface, I implore you to give Mark's Shape game a go. You won't be building one from scratch, but trying to adjust some terribly skewed glyphs into their proper final form. I guarantee that it will give you a new appreciation for just how talented typeface creators truly are. Please play the Bézier game first, since glyphs and Béziers are tightly joined at the hip.

The Boolean Game

The final game in Mark's current collection involves understanding the concept of “boolean” composition operations that are part of the creation and presentation of individual “glyphs”. These operations are based on the principles of Boolean algebra and are typically performed in vector graphic editing or type design software. The most common Boolean operations are:

• union (or “add”): this op combines two or more shapes into a single shape that includes all the original areas.

• difference (or subtract): this operation uses one shape to cut away from another shape. The portion of the shape that overlaps is removed from the first shape.

• intersection: this operation retains only the area where two or more shapes overlap, removing all other areas.

• exclusion (or XOR): This operation combines two shapes but removes the area where they overlap.

Boolean glyph operations are a powerful tool in typeface design because they allow complex shapes to be built up from simpler ones or for parts of shapes to be precisely removed. This can help to maintain consistency and accuracy in a typeface, and it can simplify the process of creating complex glyphs, like those found in some scripts or logo designs.

You can see just how hard this is in the boolean game.

Free Vector Drawing Tool!

Now, you can put all your newfound expertise to work in Mark's free Method Draw vector drawing tool.

FIN

I do hope you take some time out this weekend and play at least one of Mark's games (and, perhaps, buy him a ☕️). Most of all, I hope you have a remarkable weekend! ☮