The Art of Visual Design
In conversations about digital products, the term 'visual design' can be interpreted differently. While some perceive it solely as the UI design of a digital product, others extend its definition to encompass the aesthetic appeal of marketing websites. Often treated as a distinct phase in product development, there's a tendency to detach it from the broader UX framework. However, from my perspective, Visual Design is intricately linked with User Experience. By crafting the visual elements—such as layout, color palette, typography, and imagery—Visual Design significantly influences user interaction and perception. Therefore, it should be integrated into the entire product development process, ensuring that aesthetic considerations seamlessly align with user needs, ultimately enhancing the overall user experience.
Drawing from my experience in graphic design, art direction, and directing visual design, I see Visual Design as the strategic use of fundamental graphic design principles—like line, shape, texture, and balance—to create captivating compositions tailored for digital platforms such as websites, mobile apps, and instructional materials. Its ultimate goal is to elevate brand experiences, establish meaningful connections with audiences, and drive tangible business outcomes.
How it Takes Form
Designers incorporate the unique elements of the brand they are designing for to make the design distinct and non-generic. They can make the design more appealing by incorporating human aspects such as texture, form, and shape through illustrations, typography, 2D or 3D elements, organic shapes, shadows, and other visual elements. These elements add depth and tactility to digital designs, making them more attractive and increasing the chances of people using them more frequently. This is also known as the concept of Emotional Design, which aims to create designs that evoke emotions, positively affecting product conversion and user satisfaction.
There is another aspect of visual design driven by art direction, which usually encompasses finding the right balance between typography and layout, color and contrast, movement and direction, and images and icons. It's what makes something go from being functional to a user saying, "Oh wow!". This is particularly important when it comes to first impressions, as research indicates that users can form an opinion about what they see in the first 17 milliseconds of visiting a website.
Case Example
During the summer of 2021, as Director of Visual Design at Newsela, we worked on a visual redesign that led to updating the entire Design System and then updating most of the product, section by section. The screen below shows the before and after of the "View Page" section of the Newsela product, which houses articles, videos, and activities for each piece of content - considered the core of the product.
Work credit to visual designers: Dana Givens and Kiersten Miller. Read more about this case here.
We improved the hierarchy of elements on the screen, such as larger text for the title, accessible button colors, and a more noticeable secondary toolbar moved to the left side of the screen with more recognizable iconography. Every item in the toolbar now feels interactive. The Activities panel on the right side has better iconography and more negative space between elements. We made sure every interactive element was noticeable to avoid second-guessing. We also incorporated brand cues like the curve in one corner of the image inspired by the Newsela logo, and brand colors in the background. The goal was to increase distributions by 1% relative, and it increased by 4% relative. A qualitative survey revealed positive feedback like, "I like the lexile, assign, and activities right up front where I can see them quickly," and "It seems more pleasant to the eye, and the tools are still there. I think the Activities look clearer to find."
A Strategic Approach to Incorporate Visual Design
Focusing on core elements initially is crucial when launching a new idea, but neglecting visual design can hinder success or lead to costly delays. To mitigate this risk, a strategic approach can be effective. Here's how:
Collaborate with key stakeholders, including UX researchers, marketers, product managers, and designers, to define the project's goals and objectives. Understanding what you aim to learn or achieve with the test or launch is essential for guiding the design process. Ask yourself, "What do I want to learn from this test/launch?"
Work with the designer to identify the user flows necessary for the product or idea. Determine the level at which visual design elements should be incorporated - whether at the flow, page/section, or individual element levels. Consider what enhancements would add value and effectively communicate the product's goals. Ask yourself, "What would enhance the value and help communicate the goal of the product, and at what level?"
Create parallel experiences with varying degrees of visual design once the level of visual design integration is established. This allows for experimentation and validation of design choices. Additionally, designing a future product vision can provide a reference point for the team, helping maintain focus and alignment throughout the project. While simplicity is key initially, keeping a list of potential visual design elements for future iterations ensures flexibility and scalability.
By following this approach, teams can ensure that visual design considerations are integrated early in development, leading to more cohesive and successful product launches.
Case Example
In the fall of 2022, driven by the desire to learn rapidly and explore potential product innovation or improvement opportunities, I collaborated with Ico Romero, then the Senior Editorial Production Lead of the Interactive Media team at Newsela. Together, we aimed to assess the value of interactive maps and specific features for teachers. Acting as the Product Manager, Ico led the initiative while we worked closely with UX Research and team members from the Editorial team. We developed two interactive map prototypes and two types of interactive assessment prototypes, each offering distinct interactions, resulting in four prototypes. Our shared objective was to:
Understand the value of four different interactive map features by learning how these features solved classroom problems.
Determine what would be most useful in supporting teachers' Social Studies instruction and assessment.
We utilized content and a map from an existing licensed piece designed for printing, preserving its 3D aspect. We added micro-animations to most interactive elements, such as location pins. In developing the assessment prototypes, we prioritized clear instructions and prominent interactive elements, drawing inspiration from design patterns and cues found in other interactive pieces and games. We also utilized elements from the new Design System or created new ones drawing inspiration from it, such as location pins and buttons at the bottom of the map. User testing with seven participants yielded ratings above 4 out of 5 for value (or satisfaction) and indicated a high likelihood of use in three out of four prototypes, demonstrating the success of the study.
Work credit to Ico Romero and Christian Haarhaus (UX Research). Read more about this case here.
In Summary
It is important to understand that Visual Design is not just about using decorative elements like adding confetti if you win points on a mobile app, changing the colors of a website, or making fonts bigger. Instead, it aims to add or enhance an idea's value by incorporating elements that bring delight. Visual design holds a pivotal role in the creation of products, branding, and web experiences. It accentuates the human elements in each aspect, enriching the overall user experience. By making on-screen designs tangible, relatable, and enjoyable, visual design ensures seamless interactions across products, branding materials, and web interfaces. This approach fosters a positive and engaging user connection.