The golden ratio for typography

Posted November 18th, 2016 by Danny Ruchtie

At this moment, there is a mathematical symphony going-on on this page. A symphony that everyone perceives unconsciously. This symphony, also called “golden ratio” is deeply rooted in us, and can be found everywhere around us, in architecture, photography, painting and nature.

You would not expect typography and mathematics have anything to do with each other at first. But nothing is less true! Typography is a combination of artistic forms and mathematical relationships. Each section consists of three primary dimensions: font size, line height and line length. The correct ratio between these three makes text readable.

golden-ratio-font

Following the great article by Chris Pearson over the Golden Ratio and web typography, I went to work on a typography Golden Ratio Calculator. The calculator calculates the ideal line height on the basis of the line length and size. The calculator is made using Tangle, a javascript library that I wanted to try for some time.

With Tangle library texts and documents can be created interactively. Tangle is developed by the brilliant Bret Vicro.

Try The Golden Ratio Typography Calculator

Contrast Calculator with YIQ

Posted August 31st, 2016 by Danny Ruchtie

We have plenty to consider when crafting mobile and web software. Contrast and accessibility are not new design considerations but they are still very important. The WCAG, Apple’s HIG and Googles Material Design guidelines tell us content should be distinguishable and requires us to make it easy for the user to see the content by clearly separating background and foreground. For example the WCAG recommends a 3:1 contrast ratio for non-decorative text for text larger than 18points and 14points when bold.

Let’s have a look at a range of various possible colors. Maybe these are your corporate colours or colours plucked from an image.

need-to-know-contrast

Now that we have these potential background colours and their hex values, we need to find out whether the corresponding text should be in white or black, based on which has a higher contrast, therefore affording the best readability. Maybe you have amazing eyeballs that can help you recognise contrast levels. But for people like me without these powers, I created a little tool that calculates the right contrast color using YIQ. This calculation converts the RGB color space (HEX) into YIQ. The result is perfectly readable text on coloured backgrounds.

contrast-set

The Javascript formula to convert and the RGB HEX value to YIQ and determine the correct contrast is:

function getContrastYIQ(hexcolor){
var r = parseInt(hexcolor.substr(0,2),16);
var g = parseInt(hexcolor.substr(2,2),16);
var b = parseInt(hexcolor.substr(4,2),16);
var yiq = ((r*299)+(g*587)+(b*114))/1000;
return (yiq >= 128) ? 'black' : 'white';
}

I have made a little colour grid. When you run the formula against the individual colours, you wil and up with the hue table as shown below:

Spectrum Contrast

Getting the right color contrast is important. It is important to select smart defaults by making de contrast between colours as high as possible. This makes it easier to read, increases the accessibility and is just easier on the eyes.

Project: YIQ Contrast Calculator
Linkdannyruchtie.com/play/contrast/

 

UX/UI Design roles and terminology

Posted December 26th, 2015 by Danny Ruchtie

You can be pardoned for sometimes feeling confused about all the terminology and job titles floating around the design world. What is the difference between Interaction design, visual design, and User Interface design?

As I see it, there are three clear tasks when designing mobile and web software. Concepting (wireframing), making artwork and generating assets. These task can be divided bij four distinct roles: Interaction design, UI design, Visual design en Production design, with a side note that not alle are involved with every product and often one person can fulfill multiple roles. Obviously there can be more types of designers involved: Product designers, Sound designers, Motion designers, etc.

deign-roles

Interaction design

The practice of designing interactive digital products. Like many other design fields interaction design also has an interest in form but the main focus is on behaviour. What clearly marks interaction design as a design field as opposed to a science or engineering field, is that it is synthesis and imagining things as they might be. Interaction design is heavily focused on satisfying the needs and desires of the majority of people who will use the product.

UI design

User interface design (UI) is the design of user interfaces for machines and software, with the focus on maximising the user experience. The goal of user Interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals (user-centred design).

Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilised to support its usability, influencing how the user performs certain interactions and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface. The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs. User interface design requires a good understanding of user needs.

Visual design

Visual design focuses on the aesthetics of a site or app and its related materials by strategically implementing images, colours, fonts, and other elements.  A successful visual design does not take away from the content on the page or function. Instead, it enhances it by engaging users and helping to build trust and interest in the brand.

Graphic Designers vs Visual Designers

Visual and graphic design are very closely linked and the two terms are often used interchangeably. You may come across job advertisements and degree programs described as visual/graphic design. Sometimes visual design is referred to as visual communications, and this terminology may help give you a sense of difference between the two roles — where a graphic designer uses typefaces, hierarchy, color, images, and placement to create a perfect product, a company hiring a visual designer may be interested in a candidate with an ability to come up with a holistic aesthetic that travels across all platforms. Think of graphic designers as communicating information, and visual designers as being focused on the look and feel of the product and brand.

Production design

Production designers are specialist to perform a variety of image and production tasks to help support the visual designer. He or she prepares artwork and specifications for engineering implementation. A production designer is able to command image based and typographical layouts and is advanced in knowledge of platform specifics. Experience relating to other visual arts such as texture work, photography, 3D work.

The UX designer

Nowadays there’s another title that people like to use: UX designer.
But asking to describe what a UX designer does, the answers vary:

“An UX designer is looking at the whole picture”
“Developing strategic requirements to information architecture”
“Interaction design”
“Create wireframes and mockups”
“Designing application flows”
“An UX designer is the manager of the design department”
“An UX designer decides where buttons should be with witch colour and determine the copy”

The title of UX designer is mostly confused with the roll of the Product designer. The way I see it is: User experience design is the product of the work of the four roles mentioned above. User experience is the product and not a role.

 

Animation and UI design

Posted July 18th, 2015 by Danny Ruchtie

Designers love to obsess about details. A lot of time is spent with moving pixels around, fiddling with type, margins and getting those details as sharp as possible.

But it all falls flat when you try to stitch different views together outside Photoshop. Static compositions don’t tell the complete story and and allows free interpretation for a developer.

How fast or slow? Does it bounce back? Cushion in?
You tap a button and the new screen just …appears? You swipe to delete an item and it just vanishes? That’s just strange and really un-natural. There is almost nothing in the physical world that just swaps states instantly.
Animation leverages an overlooked dimension — time! An invisible fabric which stitches space together. Folks keep throwing around words like “delight and sexy” when referring to animation interactions. And yes animation can, just like color, shape, rhythm and type, give character to an interface.

But guess what though? Animation can be used functionally too. Animation is a clue, it can be used as a great UX tool, guiding users through an interface. Good animation is invisible. It can make an interface feel intuitive and just like spacing, color and type, it can give character.

The 12 principles of animation

walt_disney_nine_old_men

When designing an interface with animation, it’s a good thing to keep the 12 principles of animation in mind. The 12 basic principles of animation were developed by the ‘nine old men’ of Walt Disney Studios These principles came as a result of reflection about their practice and through Disney’s desire to use animation to express character and personality. The following illustrations by Cento Lodigiani demonstrates these principles applied to simple shapes.

Squash and stretch

SQUASH AND STRETCH

The most important principle is “squash and stretch”, the purpose of which is to give a sense of weight and flexibility to drawn objects. It can be applied to simple objects, like a bouncing ball, or more complex constructions, like the musculature of a human face. Taken to an extreme point, a figure stretched or squashed to an exaggerated degree can have a comical effect. In realistic animation, however, the most important aspect of this principle is the fact that an object’s volume does not change when squashed or stretched. If the length of a ball is stretched vertically, its width (in three dimensions, also its depth) needs to contract correspondingly horizontally

Anticipation

ANTICIPATION

Anticipation is used to prepare the audience for an action, and to make the action appear more realistic. A dancer jumping off the floor has to bend his knees first; a golfer making a swing has to swing the club back first. The technique can also be used for less physical actions, such as a character looking off-screen to anticipate someone’s arrival, or attention focusing on an object that a character is about to pick up.

Staging

STAGING

This principle is akin as to staging as it is known in theatre and film. Its purpose is to direct the audience’s attention, and make it clear what is of greatest importance in a scene; Johnston and Thomas defined it as “the presentation of any idea so that it is completely and unmistakably clear”, whether that idea is an action, a personality, an expression or a mood. This can be done by various means, such as the placement of a character in the frame, the use of light and shadow, and the angle and position of the camera. The essence of this principle is keeping focus on what is relevant, and avoiding unnecessary detail.

Straight Ahead Action and Pose to Pose

Straight Ahead Action and Pose to Pose

These are two different approaches to the actual drawing process. “Straight ahead action” means drawing out a scene frame by frame from beginning to end, while “pose to pose” involves starting with drawing a few key frames, and then filling in the intervals later. “Straight ahead action” creates a more fluid, dynamic illusion of movement, and is better for producing realistic action sequences. On the other hand, it is hard to maintain proportions, and to create exact, convincing poses along the way. “Pose to pose” works better for dramatic or emotional scenes, where composition and relation to the surroundings are of greater importance. A combination of the two techniques is often used.

Follow Through and Overlapping Action

FOLLOW THROUGH AND OVERLAPPING ACTION

Follow through and overlapping action is a general heading for two closely related techniques which help to render movement more realistically, and help to give the impression that characters follow the laws of physics, including the principle of inertia. “Follow through” means that loosely tied parts of a body should continue moving after the character has stopped and the parts should keep moving beyond the point where the character stopped to be “pulled back” only subsequently towards the center of mass and/or exhibiting various degrees of oscillation damping. “Overlapping action” is the tendency for parts of the body to move at different rates (an arm will move on different timing of the head and so on). A third related technique is “drag”, where a character starts to move and parts of him take a few frames to catch up. These parts can be inanimate objects like clothing or the antenna on a car, or parts of the body, such as arms or hair. On the human body, the torso is the core, with arms, legs, head and hair appendices that normally follow the torso’s movement. Body parts with much tissue, such as large stomachs and breasts, or the loose skin on a dog, are more prone to independent movement than bonier body parts. Again, exaggerated use of the technique can produce a comical effect, while more realistic animation must time the actions exactly, to produce a convincing result.
The “moving hold” animates between similar key frames, even characters sitting still can display some sort of movement, such as the torso moving in and out with breathing.

Slow In and slow Out

SLOW IN AND SLOW OUT

The movement of the human body, and most other objects, needs time to accelerate and slow down. For this reason, animation looks more realistic if it has more drawings near the beginning and end of an action, emphasizing the extreme poses, and fewer in the middle.This principle goes for characters moving between two extreme poses, such as sitting down and standing up, but also for inanimate, moving objects, like the bouncing ball in the above illustration.

Arc

ARC

Most natural action tends to follow an arched trajectory, and animation should adhere to this principle by following implied “arcs” for greater realism. This can apply to a limb moving by rotating a joint, or a thrown object moving along a parabolic trajectory. The exception is mechanical movement, which typically moves in straight lines.
As an object’s speed or momentum increases, arcs tend to flatten out in moving ahead and broaden in turns. In baseball, a fastball would tend to move in a straighter line than other pitches; while a figure skater moving at top speed would be unable to turn as sharply as a slower skater, and would need to cover more ground to complete the turn.
An object in motion that moves out of its natural arc for no apparent reason will appear erratic rather than fluid.

Secondary Action

SECONDARY ACTION

Adding secondary actions to the main action gives a scene more life, and can help to support the main action. A person walking can simultaneously swing his arms or keep them in his pockets, he can speak or whistle, or he can express emotions through facial expressions. The important thing about secondary actions is that they emphasize, rather than take attention away from, the main action. If the latter is the case, those actions are better left out. In the case of facial expressions, during a dramatic movement these will often go unnoticed. In these cases it is better to include them at the beginning and the end of the movement, rather than during.

Timing

TIMING

Timing refers to the number of drawings or frames for a given action, which translates to the speed of the action on film. On a purely physical level, correct timing makes objects appear to obey the laws of physics; for instance, an object’s weight determines how it reacts to an impetus, like a push. Timing is critical for establishing a character’s mood, emotion, and reaction.It can also be a device to communicate aspects of a character’s personality.

Exaggeration

EXAGGERATION

Exaggeration is an effect especially useful for animation, as perfect imitation of reality can look static and dull in cartoons. The level of exaggeration depends on whether one seeks realism or a particular style, like a caricature or the style of an artist. The classical definition of exaggeration, employed by Disney, was to remain true to reality, just presenting it in a wilder, more extreme form. Other forms of exaggeration can involve the supernatural or surreal, alterations in the physical features of a character, or elements in the storyline itself. It is important to employ a certain level of restraint when using exaggeration; if a scene contains several elements, there should be a balance in how those elements are exaggerated in relation to each other, to avoid confusing or overawing the viewer.

Solid drawing

SOLID DRAWING

The principle of solid drawing means taking into account forms in three-dimensional space, giving them volume and weight. The animator needs to be a skilled draughtsman and has to understand the basics of three-dimensional shapes, anatomy, weight, balance, light and shadow, etc. For the classical animator, this involved taking art classes and doing sketches from life. One thing in particular that Johnston and Thomas warned against was creating “twins”: characters whose left and right sides mirrored each other, and looked lifeless.

Appeal

APPEAL

Appeal in a cartoon character corresponds to what would be called charisma in an actor. A character who is appealing is not necessarily sympathetic — villains or monsters can also be appealing — the important thing is that the viewer feels the character is real and interesting.