Design is everywhere. We enjoy good design over long periods of time whether or not we realize it — in posters, books, magazines, packages, websites, and mobile devices.
At Off Base Productions, we strive to be leaders in design, motion and animation, user experiences and user interfaces, and responsive website and mobile design. Last month, we talked about how the shift from print to digital goes beyond global reach. This month, we’re discussing design practices that we standardize in our office and why it makes our designs successful. Our design team consists of experts in digital strategy, brand identity and insights, and visual language. We got into the minds of our traditional and interactive design teams to take a look at our best design practices for the digital age.
⚙ Typography
In the early stages of the design process, plan on using a minimal amount of typefaces by working within the same font family. For example, Helvetica has a large font family with additional features compared to those with only the typical roman, bold, and italic options found in smaller font families. Incorporating and deciding on the appropriate typefaces at the beginning of your planning process will make the text flow smoothly together. Although some situations call for exceptions to this rule, using no more than two or three complementary typefaces is generally recommended. If necessary, try to select typefaces that aren’t too similar, otherwise they will clash and distract from the design. For instance, if you’re designing invitations for an event, consider the atmosphere the client desires – is it fancy, casual, business, and/or modern? The desired fonts should convey the style and tone that the design is striving to achieve.
In addition to choosing fonts for your project, test the kerning, tracking, and leading capabilities – will it compliment and meet the requirements of your design? These aspects are directly related to the layout of your project, and it’s best to design the text so that it’s visually satisfying and remains consistent.
⚙ Layout
Before diving into designs, we do our due diligence with proper research, competitive analysis, collaboration, and creative briefs. This helps ensure that we deliver creative solutions with astonishing designs. Meeting the target audience’s criteria and maintaining inspirational approaches to the layout, setting, background, and overall context is fundamental. When designing the layout, the elements of design to consider include: color schemes, underlying grid, hierarchy, shape, contrast, size, texture, and overall direction. Although these elements are used to create and design the layout, don’t overwhelm the user with clutter and unnecessary decoration – each element in a design must have a purpose. Recognizing the advantages of white space and utilizing it in creative ways is good practice to promote simplicity for both designer and user while making it possible to properly perceive the content. Start with what works, not with something just because you like it.
The other half of the layout design process involves additional principles of design, including: balance, harmony, proportion, space, repetition, and alignment. Rather than aiming for symmetrical balance, consider exploring asymmetrical yet balanced compositions. The results may create a more interesting and dynamic overall design. Additionally, the layout should anticipate and influence how the user will receive the content with intended eye flow. Understanding consumer behavior, user experience, and interface design will help you achieve these goals and create a successful design.
⚙ Motion/Animation
With motion and animation design, we accomplish narrative story telling and create design-driven motion with both 2D and 3D animation. While animating elements, add verbs, adjectives, and character traits to create a concrete goal. For example, instead of a mere box moving left to right, imagine a whale heavily trudging from left to right. It’s particularly helpful for elements that don’t have counterparts in the real world. For example, if we are animating an elephant, we can pull from hours of reference footage, but if we are animating a text callout, we have nothing to refer to. This practice helps designers create concrete elements out of an abstraction, and adds something recognizable to the equation. Humans naturally want to find patterns and connections in life. Identifying or linking animations with examples from real life (either on a conscious or subconscious level) will assist in creating meaningful designs.
Likewise, an effective use of the squash and stretch principle can add believability and life to even the simplest of elements. For example, let’s look at this squash and stretch clip from http://the12principles.tumblr.com/.
Notice how the box stretches vertically and shrinks horizontally as it accelerates. It returns to its natural shape as it hits the apex of the jump before stretching again as it accelerates back down. As it makes contact with the ground, it squashes vertically and stretches horizontally. We can see that the shape may change due to the forces acting on the box, yet the mass is always consistent. This practice helps tie animated elements to the real world and give a sense that actual, concrete physical forces are affecting them. The degree in which you use squash and stretch can also define an object’s physical properties: a bowling ball will appear relatively unaffected with a very subtle amount of deformation, whereas a rubber ball will have a much more noticeable amount of deformation.
Furthermore, be aware of tangent issues and take care to keep edges from lining up. Avoiding tangents will help to create depth and give elements a sense of volume. Look at this example from Walt Stanchfield’s excellent “Drawn to Life” – see how all of the lines in the left image converge at the chest?
It flattens the image and pulls the viewer’s focus into a mess of lines. Now look at the image on the right – with some minor adjustments, the figure has so much more depth. We can see and feel the chest overlapping the rear arm and the forearm overlapping the chest. It’s especially important to avoid tangents in animation; even though the viewer may not see it outright, a single frame tangent creates a strobe effect that the viewer will definitely feel, and it will take viewers out of the animation.
⚙ Adaptive/Responsive
Our designers are passionate about adaptive and responsive design, and have gained experience in the field by working with our engineers to develop platforms and applications that facilitate multiple viewing experiences across different devices. The first step in creating adaptive and responsive designs for user interfaces or user experiences is prototyping. In the creative services and marketing industry, we need to create quick solutions to present constructed ideas to clients, and prototyping fulfills that need. This step will help you capture ideas and create a navigational field with digital design rather than relying on a flat and lifeless version on a piece of paper. The more effort you put into your prototype design, the easier the rest of the design process will be. In our fast-paced environment, rapid prototyping is a natural part of the development and production process prior to implementation. Although it may seem simple, it’s quite challenging to execute. Expediting these aspects and understanding the approaches around all outputs and platforms is essential to this growing and emerging field, and will be most beneficial to your success.
The ever-growing and improving nature of our devices translate into specific requirements when it comes to adaptive design. Designing the same element to be displayed on multiple devices requires the adaptation of the display screen and resolutions. There are two types of design approaches: progressive enhancement, and graceful degradation. The progressive enhancement route focuses on taking a mobile-first approach, and then later building up to create additional features that are more appropriate for desktop capabilities. On the other hand, graceful degradation primarily focuses on moving a desktop experience down to smaller tablet and mobile devices. Our designers prefer the progressive enhancement approach because it’s more user-centric to ensure that our designs and products will be user-friendly, and we can focus on creating a pleasant user experience. Graceful degradation, on the contrary, may create more issues across multiple platforms. Elements that are easily viewed on a desktop may not translate well to tablet or mobile devices, resulting in a disrupted and compromised user experience.
Coinciding with adaptive design is responsive design. Although they have their differences, both are integrated for easy navigation and user appeal. Once the adaptive design is laid out, imagine yourself as the user and think about how you would like content and information to move and display. Collecting analytical data on your audience can also serve as a helpful tool to target the correct audience. As the designer, you have the power to create and animate content and elements, and as previously stated, knowledge of multiple platforms will help to make effective and efficient designs.
⚙ Designing for the Future
As a creative services agency, we take pride in our abilities to problem-solve in innovative ways, as well as how we successfully adapt and capture the attention of our target audience. Our designers have created applications such as Docs for PlayStation that automatically adjust to any screen size or device without compromising the initial layout on desktop devices. Not only do we produce work for our clients, we also work with them to create something amazing that we can both be proud of. We have conquered website limitations and adapted design techniques across multiple devices in ways that are and can be seen by people every day, from anywhere. As designers, we are excited to continue creating new ways in which we can contribute to this emerging field.
One last practice to keep in mind: when you’re working with a team and reviewing designs, give constructive feedback by using phrases such as, “this works because” or “this doesn’t work because”. All aspects of a design can serve great purpose, displaying ideas in an efficient and effective manner. What are your design practices?
