close
Shot by

How to design a strong visual identity for digital products

In this article, designer at Heartbeat Agency, Vladimir Gruev explains how to craft a cohesive visual identity for digital products. Plus, how to successfully present your concept to clients, and integrate the visual identity into product marketing and interfaces.

In the modern world of digital products, we often see big names in the industry change their look to attract users’ attention. New brands are well-aware of this and try to be distinct, unique, and stand out in this highly competitive market. I see Visual Identity as an important element that help products achieve the goals mentioned above.

Visual Identity is an important element that helps products stand out in this highly competitive market.

So, how do you create a strong, coherent, and most importantly, consistent identity for your product? Stay tuned, because we’re about to find out.

Note: This article is written in a compressed way for a broader overview of the whole picture. I’m sure there are intermediate stages of visual identity development that are just as important, but I’ll try to be as concise as possible :).

  1. Score: Product Page banking calculator fintech header illustration landing landing page lending product design product page shapes site typography web web design web page website
  2. Header: Photo Stock header page pattern stock web web design web page webdesign website
  3. Organic Onboarding app guided tour illustration ios launch screens mobile mobile app onboarding screen splash tour typography ui uiux ux walkthroughs


First: Do your research about the product

Before jumping into developing a visual identity, do your homework first. If you’re lucky enough to be working on a product that already has an existing brand strategy, you can pretty much skip this step and use these brand strategy documents to guide the product’s visual identity.

If you’re creating a brand strategy from scratch, researching the product will help you save a ton of time interacting with your client. So, let’s go ahead and dive into the discovery stage:

Find and fill out a Lean Canvas of the product you’re creating a visual identity for. It should include the following sections (order is important here):

  1. Customer Segments
  2. Customer Problems
  3. Customer Solutions

Next, fill out a Brand Canvas. This should include brand characteristics (the way your brand communicates with your customer), such as tone of voice, core traits and attributes, plus the brand story.

Your job is to find out as much as possible about the company’s mission, values, and vision...

In essence, your job is to find out as much as possible about the company’s mission, values, and vision so you can fuse these insights into the visual identity you create.

Pro-tip: You can find Lean and Brand Canvas templates easily with a simple Google search. Or, fill both of them out using this link
.

All of the information gathered will make up your initial research and provide you with enough details about the brand and/or product—from how it compares with competitors, the problems it solves for customers, user segments, behavioral factors, etc. Don’t hesitate to ask clients for additional product materials too!

Now that your research is done, it’s finally time for the visual identity creation process!

Acme: Product page bank banking credit card e finance finance fintech header homepage identity landing landing page marketing page product design product page promo visual identity web web design web site website
Shot Link

Acme: Product page

by Vladimir Gruev for OOZE

Hey there!Don't you agree that the feeling of being rewarded kind of relates to the state of self-security?I don't mind exploring, and this time felt bringing you a shot delivering a slightly different vibe. Acme is neobanking experience seasoned with c...

View on Dribbble

How to approach creating a Visual Identity

At its core, Visual Identity is how your user visually perceives and feels the product. It’s a set of visual assets that shape the user’s perception of this product.

Visual Identity is how your user visually perceives and feels the product.

I’d like to point out that visual identity is built upon these two fundamentals:

  • The company’s culture & characteristics
  • The product’s business niche

My working process always starts with an evaluation of the product’s bits and pieces that I’ve talked about earlier. As a designer, you want to feel knowledgable about the business and product by studying these materials. That way, you can confidently create a compelling image at the end.

Manage card and Service app app design application banking categories design system details finance fintech interface product design site transaction transfer user interface web web design web site website
Shot Link

Manage card and Service

by Vladimir Gruev for OOZE

Hey everyone! How is summer treating you so far?This time teasing you with another view of an online banking app invoking users' engagement. Simple yet genuine are qualities we recommend looking towards when creating visual experiences.Now, your thought...

View on Dribbble

Create a moodboard & sync up with your client

Start off by creating a moodboard (or inspiration board as others like to call it). This will contain various visual assets and materials that resonate with your client’s creative vision. A moodboard for a visual identity may include photos, illustrations, patterns, logo examples, typefaces, color palletes, print materials, etc.

I also recommend creating a second moodboard if the product is a web app. This second moodboard will present some UI/UX aesthetics for different platforms the product will live on. (Web, iOS, Android).

Here are a few tips for developing a strong moodboard:

  • Take the TA into account along with the company’s values, niche, and other available strategic information, in order to accurately convey the spirit of a vertical business of a product.
  • Always explain the process and its purpose to the client.
  • Don’t push your client’s decisions or choose something yourself — ask them to share their impressions and provide feedback.
  • If things aren’t clear — ask your client for more context or reasoning. Tell them to avoid responses such as: “I don’t like red”, “This is cool”. Encourage them with open questions.
Lily House Co. Mood Board apothocary botanicals brand design branding collage herbalism holistic inspiration logo design minimalism moodboard natural tea

Lily House Co. Mood Board

by Morgan Brewer (Parsons)

A mood board for Lily House Co., a shop selling natural teas, herbs and botanicals.

View on Dribbble

Present your concept to clients

There are different approaches when it comes to developing a visual identity. We, at Heartbeat, believe that it’s enough to create a single visual identity concept and to have a couple of secondary ones if necessary.

Explain your concept by showing how it can be used in both digital and real-life applications.

At this stage, you’ll want to present your client with a draft in the form of a PDF presentation showcasing your core idea. Include things like a description of the concept, what it consists of, how you reached this point, plus, how it can be elevated and advanced in the future. This presentation should also contain the basics, such as logotype, typefaces, colors, etc…

Here are a few tips when presenting:

  • Explain your concept by showing how it can be used in both digital and real-life applications.
  • Do your best to explain the connection between the product and visual identity, even if it seems obvious.
  • Validate the visual identity with your product discovery from earlier. Keep in mind the business niche and target audience.
eCommerce: Homepage commerce e commerce e shop ecommerce eshop fashion landing page product page promo shop store web web page web site website design
Shot Link

eCommerce: Homepage

by Vladimir Gruev for OOZE

Hi there!When picking an outfit, what's the first thing that comes to your mind when you see something you like?For all you fashion lovers I've prepared something out of ordinary.This time making it human-centric and combining natural colors with fabric...

View on Dribbble

Create your visual identity assets

Those are various components of the visual identity, deliverables you end up passing down to your client. This set of components and the way you showcase them really depends on your client’s goals and requirements. We like to arrange and save it as a Figma file, with a handy feature to export the necessary assets to png, SVG, and pdf formats. Here is an example list of components:

  • Logo
  • Colors
  • Fonts
  • Icons
  • Illustrations, Photos, Patterns
  • Communications / Videos
  • Interactive elements
  • Website (demo header)

Once the visual identity is done, it’s time to fit it nicely onto the product, just like a tailored outfit.

  1. Warren: Splash, Investment, Category account management app design bank banking budget e finance finance financial services fintech investment ios ios app mobile personal banking portfolio product design savings screen spendings
    Shot Link
  2. Dashboard: Overview app design application bank banking branding budget dashboard e finance finance financial services fintech investment overview product design savings spendings visual identity web web app webdesign
    Shot Link
  3. Warren: Home, Saving, Settings app design application bank banking budget e finance finance financial services fintech investment ios ios app mobile personal banking portfolio product design savings screen spendings
    Shot Link


Integrating visual identity into a product’s website & app

Today, we know that a product won’t perform as well as it should, if App or Marketing parts live on their own (or if one of them is simply absent). Both have their own practical applications. In other words, a product’s App should aim to solve problems for a user. Marketing, on the other hand, is about actually communicating a message to a user.

A good, modern digital product will seamlessly combine all product parts, making a whole product work together as a single, uniform mechanism.

Simply put, a product’s App, Marketing, and even Sales can’t exist and function on their own. A good, modern digital product is about a seamless combination of these product parts, making a whole product work together as a single, uniform mechanism.

Applying visual identity to Marketing

When it comes to marketing, all branding elements should work well together on your website and other mediums. This is the first thing customers (sometimes even investors) will notice when they familiarize themselves with a product. There’s a rather large variety of applications for digital marketing—social media, presentations, email newsletters, or even a post on Product Hunt.

Here are some tips to get the most out of your visual identity:

  • Use visual identity wisely by not overloading it with graphics. Focus on sales triggers, CTAs, and main messages. Let your user scan the content without constraints.
  • Follow consistency guidelines across all marketing materials to keep style nice and uniform across the board.
  • For marketing webpages, use modern versions of the AIDA model
 and storytelling to raise users’ interest.
spike: homepage app courses e learning edtech education identity landing landing page memberships online product design product page promo site teach visual identity web web design webinar website
Shot Link

spike: homepage

by Vladimir Gruev for OOZE

Hey everyone!Blurred gradients with noise!_______do you think we're right for each other?ooze.design | hello@ooze.design

View on Dribbble

Applying visual identity to complex user interfaces

Naturally, there are some constraints that put certain restrictions on a designer. Remember that users open an app to use it, not to see all the great visuals you’ve created. Let them do their work first, and only slightly hint at your visual identity during their experience. Simply put, an app should preserve its swiftness and ease of use. If you want, you can add some visual touches to “banners”, “onboarding”, “placeholders”, “success messages”, etc. Here are some tips:

  • Seriously consider a product’s platform, e.g. desktop/mobile. It will affect visual constituent, product’s core DNA, and user experience.
  • Use design systems in the context of your product’s platform. Utilize your identity system containing visual assets such as colors, fonts, icons, illustrations, and others in order to preserve a unique product style.
  • Apply elements of visual identity where you need a user’s attention, or if you’d like to entertain your user.

Let’s summarize

Always start your journey from the fundamentals. Things like company values, team, and product characteristics all prepare a strong base to build your visuals upon. Go from that, and then carry on by getting it all documented and shared across all team members.

Reinforcing that foundation with visuals will make everything feel organic and work as a uniform piece. Don’t just copy things—think of it as a system. Create one and enjoy the benefits of consistency and a visually complementing result.

Vladimir Gruev About the author: Vladimir Gruev is a digital designer who is keen on simplicity and usability. Find Vladimir and his work on Dribbble.


Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Previous
Next