Graphic Elements
Our visual system is based upon the geometry of the block U. We have distilled it to three flexible approaches to accommodate assorted communication channels.
"Slices"
PRIMARY CREATIVE: USE ACROSS ALL COMMUNICATION TYPES
Our fundamental visual approach, Slices, is based on our foundational principle “Caring now, pioneering the future.” We leverage the past, present, and future in both content and visuals. Slices allows us to do this figuratively. This approach leaves the “center well” open for copy and populates the margins with supportive imagery. Slices also uses streamlined arrow effects to suggest momentum. As the fundamental visual approach, Slices is the creative treatment used across communication types. Typography and design are articulate, restrained, and allow content to speak for itself through white space and legible type style. Color comes from photography. Read further to learn about our narrative approaches to photography.
"Rising"
ADVERTISING CREATIVE
Rising picks up on the principles of Slices, but performs more assertively in the marketplace. The slices, arrow and progress effects incline to a sharper diagonal to bring more energy in marketing campaigns and collateral, suggesting an upward trajectory. The diagonal is a metaphorical nod to the mountain West. Rising introduces a transparent red “film” for an injection of brand color. These visual effects make Rising stand out in a crowded field of look-alike creative and is therefore our approach for advertising campaigns. Typography becomes more contrasting to speak a little louder without shouting. Confident and concise messaging, coupled with precise design, allow us to stand out in cluttered channels from social media to other print and digital advertising platforms.
"Simplified U"
BRAND SPECIFIC CREATIVE
Simplified U is our most distilled approach to visual communication. It places the emphasis on the block U, and builds upon the red film visual from Rising to highlight hero images of patients and/or practitioners which, combined with the DNA helix, supports the patient-centric message central to the U of U Health brand. Because this is bold creative, it will be used in specific executions where we want to emphasize a clear brand message.
Graphic Examples
"Slices"
"Rising"
"Simplified U"
Graphic Moves
This arrow and line device is used to lead the eye into body copy. It should always begin at the border of a page. Using this element gives the piece a feeling of forward momentum and progress. The line is also used to carry the reader across the page (as a timeline of sorts), highlighting content along the way.
Compartmentalization brings a level of organization and structure to the U of U Health brand. Use containers to highlight small bits of information, like a call to action, website, or statistic. Use rectangles with rounded corners (radius .0278 in for InDesign, and 4 px for web design) to soften the container and make it more inviting. To contrast with the body copy, the containers should be outlined in red, and the type within them should be in all caps.
Transparency can act as metaphor for the knowledge we convey as an acdemic medical center. Transparency can also act as a graphic device to inject communications with our brand color. It can also provide an even tone over photography to support information that can be reversed out in white.
To give viewers a glimpse into “slice-of-life” moments, you can compose slivers of images into a timeline-like series. Whether it’s a child playing, a doctor performing surgery, or a researcher collecting data, these moments are what make life—and our careers—worth it.
You can show changes and progress through the use of sequential photography. Use a series of moment- by-moment photos, each one slightly different than the one before it. This photographic treatment shows how each small discovery and alteration makes a large difference over time, just like scientific research at U of U Health.
Icon System
Our icon system is simple, clear, and open. Each icon has a few key things in common with the rest of the set. They show objects from the front and use flattened perspective whenever possible. This standard icon set was created to enhance call outs in marketing materials, website, and advertisements.
Essentials
Self-pay Discount
Accepting most insurance plans
Appointment
Urgent care
Pharmacy
Physician
Hours
Welcoming new patients
Virtual visits
Creating Icons
Standard icons must be created to spec to ensure they work with the existing set. For consistency, keep within these format dimensions. Line stroke weight should be 1pt with rounded corners and caps. 50% grey is preferred on white background, however red, black or white (on colored backgrounds) are accepted.
Square
Vertical
Horizontal
Illustration
Illustration can enhance communications. It can make infographics immediately comprehensible, illuminate publications and editorial content, visualize complex concepts, and so much more. A wide variety of illustrative approaches and styles are available. Following are some approaches we recommend, and contexts where different types of illustration perform best. Illustration may be commissioned by artists or designers, or even licensed from professional stock agencies. When illustration is procured, it must be done within full copyright compliance.
Flat
Flat illustration is minimalistic and modern. It uses clean lines and crisp edges, open space, bright colors and a two-dimensional effect. It allows complex objects to be conveyed in outline or silhouette while still making the subject instantly recognizable. This approach keeps the focus on content without distracting the audience with flashy visual effects.
Semi-Flat
Semi-flat illustration uses the same attributes as flat illustration, but incorporates subtle visual effects. It might use simple color blocking, tints and shades, modest gradients or color transitions, or subtle textures and patterns. Semi-flat design suggests realism without needing to render high-contrast shadows and highlights, 3D effects such as ultra-real textures and patterns, or painterly color and other embellishments. It brings a little more dimension and distinction to illustration while maintaining an ease of read.
Conceptual
Publications and editorial content might turn to more conceptual and expressive approaches, such as these samples from Algorithms for Innovation.
Medical
Realistic illustration is beneficial for educational content, such as these medical illustrations.