Developing a consistent & powerful illustration style

Developing a consistent & powerful illustration style

Dorota Owczarek - October 24, 2018

Illustrations have become a core component of digital products. Undoubtedly they are not only needed but wanted. Still, this is not a material that you can just produce anyway you like and throw here and there in the app to make it beautiful. They have to follow a particular style, and there has to be a process behind it. You may think that it is a magical and whimsical process happening behind closed doors, that involves designers falling into a deep meditative state until sparks of creativity burst out of their pencils. In fact, it is something entirely opposite (or at least should be), it is a well-defined process one should follow to create an illustrative style that works. When illustrations are built according to the style, they provide a more natural and harmonic feeling of the product and brand in general. And for that to happen, your brand illustrations should feel consistent, like they came from the same source even if they were created by different people. So, how to kick-off your next illustration identity project?

It is all about the message

We use illustration across the product to support a cohesive, easy to understand, and consistent story from start to finish. Therefore, you need to start your work at the very base of the traits represented by the brand. Think about the brand values, value proposition and the market you’re targeting. These artifacts will help you direct the tone of the illustrations. It is crucial to define the goal of your illustration identity project and to specify what are the priorities for it. Another review you should direct is checking the competitor market. Survey what your competitors are doing and how can you stand out with your brand. All of this is not really drawing… But, creating an audit like this will be the base of all the creative steps you will be taking after and should take into account when doing the actual creative work.

Create your mood board and explore

Assembling visual influences can combat the creative roadblock familiar at the start of new design endeavors. Kick-start your creative process with this visual brainstorming method. Collect examples that resonate with your brand and whatever you feel that inspires you and sets the direction. Scour the Internet. Whether physically collaged or digitally collected in your favorite tool, mood boards will help you gather and organize inspiration around the style. It is a valuable and easy to create resource that will not only be of use to you and your design team but also an asset that you can share with your stakeholders. Mood boards provide a tangible representation of design direction to non-designers, visually supporting concepts.

A carefully created mood board is a great way to refine the style before diving into the actual design process. Assembling a mood board is fast, easy, inexpensive, and collaborative. This is the low investment you should make to see if the chosen direction will convey the right message and match the overall brand style.

Explore more & more to create your visual style

Once you get the ball rolling, go ahead and explore more. Start copying the selected inspirations and styles for exploratory purposes. Steal like an artist and see where will it get you. Remember that the path you choose has to be the path you follow. Consistent design is intuitive design. Continual use of your chosen color palettes and shapes enables people to switch context across modules of your product with a higher degree of confidence. This is why developing a unique illustration style is so important. So make sure that the form is flexible enough to use in different mediums and cases and that you as an illustrator feel comfortable working with it. Ask yourself if you will be happy and comfortable drawing that way? Or whether you will be proud of the work you make? Your goal is to develop a signature style that can be followed.

Decide on the color palette and how should it be used

Colors you will use in your illustrations have to resonate with the brand as they are said to carry the most significant part of brand consistency. Though it doesn’t mean you need to strictly stick to the colors your product uses. In many cases, the key recognizable brand colors are too dominant to be used as the only ones for illustrations. You might want to balance the colors with a bigger palette of lighter shades and more neutral tones that will complement the signature brand colors. These additional shades of color will help you to create volume and clarity in your illustrations where the primary palette falls short.

Example of a main color palette. Additional shades and opacities can be added when needed.

Breathe some life into your product with custom characters

By injecting some personality into your brand, you are given an opportunity to differentiate yourself in a super crowded landscape of online services and products. Introducing characters into your brand artwork gives you a chance to reinforce the fun, playful approach. Custom characters contribute much to the voice and tone of the brand and can even become a metaphorical face of a product. Putting the character into various scenes enables you to explain multiple difficult scenarios through illustration rather than wordy content. Again, you should start your work on a role by thinking of the traits you want your character to convey. Once you’re ready with your characters, try to create a quick guide on how the characters should be constructed. Some of the guidelines you may want to include are, e.g., body proportions that should be followed, drawing faces and emotions, clothing, and other body details. Character illustration is a task where you should also think of diversity and inclusion. So take a minute to specify a set of rules on how your illustration style can represent a variety of body shapes, genders or races. To understand the issue better, I advise you to read these great articles from Meg Robichaud, Alice Lee and Jennifer Hom.

Brand characters in various poses. Embrace storytelling to engage your users by converting them into illustrated characters. This particular project still needs some refinment when it comes to representing cultural and ethnical diversity (work in progress).

Hero & spot illustrations

In your work, you should take a substantial amount of time to work on theme illustrations. Hero or theme illustrations are usually used on landing pages and make the majority of the screen space available. You should leverage hero illustrations with strong visual metaphors to establish an emotional appeal from the first seconds of user interaction. When you look at this kind of drawings from respected and popular brands that focus on design, you’ll find that they are becoming more and more complex, sophisticated, stylish, and metaphorical, moving these brands to the next level. Go ahead and try to create your own scenes that complement your brand style imbuing abstract concepts with approachability and can be used as the key element on a landing page or as a spot supportive imagery. Try using the characters you created putting them into various scenes that explain different difficult scenarios through illustration rather than wordy content. Admittedly, it can be done later, but treat this part as an exploratory exercise where you can spread your wings and work without too many restrictions. There is no need to create illustrations that will fill up all the space available in your product. This is more of a trial and error work where you can show the feelings and the overall looks of the illustration in action. Take my word that this is the part your inner creative creature will probably enjoy the most!

Reactive Manifesto

With illustrations taking the center stage focus on the hero images that can be used in various places across the whole product. Try to think not only about composition but also the mathaphorical concepts you’re trying to convey.
Spot illustrations are perceived much faster than text so users may cover the key message quickly. Make them eye catchy to draw users’ attention to the necessary details on the user interface.

Readymade elements for aid

Assets you create for your library give you the flexibility to expand on the illustrative approach across your brand. It is a really great idea to invest some time at the beginning of your project (and also later on) and create your own construction kit. A design kit that consists of small secondary objects or scenery sets is a starting point for quickly putting together product illustrations. The design construction kit is useful for designers and other stakeholders   who can quickly put together illustrations and narrative that they need. This is a time and money saver that helps to keep the look and feel consistent. As you move forward, search for other areas and use cases where you could push the catalog of your assets even further with, for instance, smaller icons. Basically, the more assets you have in your illustrative library, the more flexibility you have to utilize the illustrative approach across the whole product.

Reactive Manifesto

Library of elements, ready to construct a new illustration.

Combine it all in a go-to document

Now you have a bunch of illustrations and a concise set of rules to construct them. The next step is to create complete documentation that showcases all visual elements and the strategy one needs to follow when creating new ones. Once ready, the illustration system doc can be shared between product stakeholders, marketing teams and of course the design team to make sure all future artwork created aligns with the style guide. You need to build this base so that the next person to step in can quickly get up to speed. Keep in mind, that most probably this will be a living document that will need to updated as brand illustration style matures and evolves.

There is one more point that is worth noting here. Do not sit down to your documentation at the end of the style creation process. Try to fill it in as you move down the creative path, describing and explaining your decisions. Writing things down will make you rethink them and will keep your style guide cohesive and comprehensive.

So what’s next?

Keep on going with what you started and evolve the style. Try to implement it in all other areas like marketing or the general communication and make sure it has found a voice and appropriate tone for your brand. Make sure that all the materials are covered, complimenting the product facilitating a cohesive, remarkable and empowering user experience.

About the author

Dorota Owczarek

Dorota Owczarek

AI Product Lead & Design Thinking Facilitator

Linkedin profile Twitter

With over ten years of professional experience in designing and developing software, Dorota is quick to recognize the best ways to serve users and stakeholders by shaping strategies and ensuring their execution by working closely with engineering and design teams.
She acts as a Product Leader, covering the ongoing AI agile development processes and operationalizing AI throughout the business.

Becoming AI Driven

Insights on practical AI applications just one click away

Sign up for our newsletter and don't miss out on the latest insights, trends and innovations from this sector.

Done!

Thanks for joining the newsletter

Check your inbox for the confirmation email & enjoy the read!

This site uses cookies for analytical purposes.

Accept Privacy Policy

In the interests of your safety and to implement the principle of lawful, reliable and transparent processing of your personal data when using our services, we developed this document called the Privacy Policy. This document regulates the processing and protection of Users’ personal data in connection with their use of the Website and has been prepared by Nexocode.

To ensure the protection of Users' personal data, Nexocode applies appropriate organizational and technical solutions to prevent privacy breaches. Nexocode implements measures to ensure security at the level which ensures compliance with applicable Polish and European laws such as:

  1. Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation) (published in the Official Journal of the European Union L 119, p 1); Act of 10 May 2018 on personal data protection (published in the Journal of Laws of 2018, item 1000);
  2. Act of 18 July 2002 on providing services by electronic means;
  3. Telecommunications Law of 16 July 2004.

The Website is secured by the SSL protocol, which provides secure data transmission on the Internet.

1. Definitions

  1. User – a person that uses the Website, i.e. a natural person with full legal capacity, a legal person, or an organizational unit which is not a legal person to which specific provisions grant legal capacity.
  2. Nexocode – NEXOCODE sp. z o.o. with its registered office in Kraków, ul. Wadowicka 7, 30-347 Kraków, entered into the Register of Entrepreneurs of the National Court Register kept by the District Court for Kraków-Śródmieście in Kraków, 11th Commercial Department of the National Court Register, under the KRS number: 0000686992, NIP: 6762533324.
  3. Website – website run by Nexocode, at the URL: nexocode.com whose content is available to authorized persons.
  4. Cookies – small files saved by the server on the User's computer, which the server can read when when the website is accessed from the computer.
  5. SSL protocol – a special standard for transmitting data on the Internet which unlike ordinary methods of data transmission encrypts data transmission.
  6. System log – the information that the User's computer transmits to the server which may contain various data (e.g. the user’s IP number), allowing to determine the approximate location where the connection came from.
  7. IP address – individual number which is usually assigned to every computer connected to the Internet. The IP number can be permanently associated with the computer (static) or assigned to a given connection (dynamic).
  8. GDPR – Regulation 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of individuals regarding the processing of personal data and onthe free transmission of such data, repealing Directive 95/46 / EC (General Data Protection Regulation).
  9. Personal data – information about an identified or identifiable natural person ("data subject"). An identifiable natural person is a person who can be directly or indirectly identified, in particular on the basis of identifiers such as name, identification number, location data, online identifiers or one or more specific factors determining the physical, physiological, genetic, mental, economic, cultural or social identity of a natural person.
  10. Processing – any operations performed on personal data, such as collecting, recording, storing, developing, modifying, sharing, and deleting, especially when performed in IT systems.

2. Cookies

The Website is secured by the SSL protocol, which provides secure data transmission on the Internet. The Website, in accordance with art. 173 of the Telecommunications Act of 16 July 2004 of the Republic of Poland, uses Cookies, i.e. data, in particular text files, stored on the User's end device.
Cookies are used to:

  1. improve user experience and facilitate navigation on the site;
  2. help to identify returning Users who access the website using the device on which Cookies were saved;
  3. creating statistics which help to understand how the Users use websites, which allows to improve their structure and content;
  4. adjusting the content of the Website pages to specific User’s preferences and optimizing the websites website experience to the each User's individual needs.

Cookies usually contain the name of the website from which they originate, their storage time on the end device and a unique number. On our Website, we use the following types of Cookies:

  • "Session" – cookie files stored on the User's end device until the Uses logs out, leaves the website or turns off the web browser;
  • "Persistent" – cookie files stored on the User's end device for the time specified in the Cookie file parameters or until they are deleted by the User;
  • "Performance" – cookies used specifically for gathering data on how visitors use a website to measure the performance of a website;
  • "Strictly necessary" – essential for browsing the website and using its features, such as accessing secure areas of the site;
  • "Functional" – cookies enabling remembering the settings selected by the User and personalizing the User interface;
  • "First-party" – cookies stored by the Website;
  • "Third-party" – cookies derived from a website other than the Website;
  • "Facebook cookies" – You should read Facebook cookies policy: www.facebook.com
  • "Other Google cookies" – Refer to Google cookie policy: google.com

3. How System Logs work on the Website

User's activity on the Website, including the User’s Personal Data, is recorded in System Logs. The information collected in the Logs is processed primarily for purposes related to the provision of services, i.e. for the purposes of:

  • analytics – to improve the quality of services provided by us as part of the Website and adapt its functionalities to the needs of the Users. The legal basis for processing in this case is the legitimate interest of Nexocode consisting in analyzing Users' activities and their preferences;
  • fraud detection, identification and countering threats to stability and correct operation of the Website.

4. Cookie mechanism on the Website

Our site uses basic cookies that facilitate the use of its resources. Cookies contain useful information and are stored on the User's computer – our server can read them when connecting to this computer again. Most web browsers allow cookies to be stored on the User's end device by default. Each User can change their Cookie settings in the web browser settings menu: Google ChromeOpen the menu (click the three-dot icon in the upper right corner), Settings > Advanced. In the "Privacy and security" section, click the Content Settings button. In the "Cookies and site date" section you can change the following Cookie settings:

  • Deleting cookies,
  • Blocking cookies by default,
  • Default permission for cookies,
  • Saving Cookies and website data by default and clearing them when the browser is closed,
  • Specifying exceptions for Cookies for specific websites or domains

Internet Explorer 6.0 and 7.0
From the browser menu (upper right corner): Tools > Internet Options > Privacy, click the Sites button. Use the slider to set the desired level, confirm the change with the OK button.

Mozilla Firefox
browser menu: Tools > Options > Privacy and security. Activate the “Custom” field. From there, you can check a relevant field to decide whether or not to accept cookies.

Opera
Open the browser’s settings menu: Go to the Advanced section > Site Settings > Cookies and site data. From there, adjust the setting: Allow sites to save and read cookie data

Safari
In the Safari drop-down menu, select Preferences and click the Security icon.From there, select the desired security level in the "Accept cookies" area.

Disabling Cookies in your browser does not deprive you of access to the resources of the Website. Web browsers, by default, allow storing Cookies on the User's end device. Website Users can freely adjust cookie settings. The web browser allows you to delete cookies. It is also possible to automatically block cookies. Detailed information on this subject is provided in the help or documentation of the specific web browser used by the User. The User can decide not to receive Cookies by changing browser settings. However, disabling Cookies necessary for authentication, security or remembering User preferences may impact user experience, or even make the Website unusable.

5. Additional information

External links may be placed on the Website enabling Users to directly reach other website. Also, while using the Website, cookies may also be placed on the User’s device from other entities, in particular from third parties such as Google, in order to enable the use the functionalities of the Website integrated with these third parties. Each of such providers sets out the rules for the use of cookies in their privacy policy, so for security reasons we recommend that you read the privacy policy document before using these pages. We reserve the right to change this privacy policy at any time by publishing an updated version on our Website. After making the change, the privacy policy will be published on the page with a new date. For more information on the conditions of providing services, in particular the rules of using the Website, contracting, as well as the conditions of accessing content and using the Website, please refer to the the Website’s Terms and Conditions.

Nexocode Team