Client and Project

FarmSense is a USA-based innovative tech product that helps growers reduce losses from insect pests and lower dependence on pesticides to take the uncertainty out of pest management for better farming and a brighter future.

Why is it important, and how does it help? The agricultural industry loses more than $220 billion in crop damage each year because of insects. For decades, farmers have been stuck with few options for pest management. Most use sticky traps – a time-consuming and inaccurate method, followed by a broadcast spray of selected pesticides and insecticides. Still, sadly, these traps can also affect beneficial bugs that pollinate more than 70% of the global crop supply.

So, the FarmSense team formed by scientists and innovators developed a better way. Using computational entomological models, they created a real-time sensor that can help farmers make better decisions for pest management, saving time and potentially boosting crop yield. The team believes that leveraging the power of machine learning and computational modeling can help save lives, reduce hunger, and help developing countries achieve food independence.

The target audience they aim at is diverse, from big agricultural corporations to small family farms, from innovators and advisors with high tech-literacy levels to farmers that spend most time right in the fields and have no broad experience or tight connections to different software and applications. So, the team worked on the affordability and accessibility of the technology and strived to reflect that in the branding approach and website, helping them communicate with their clients and uncover the product’s benefits. Let’s check how the designers from tubik achieved that goal.

Identity Design

The branding design process started with extensive research covering the agriculture and ag-tech current state in the USA, the existing presence of the sector on the web, the pain points of the target audience, and the touchpoints of the brand communication.

Based on everything mentioned above, the key advantages of the product that branding had to transfer were defined as:

• sustainability
• affordability
• accuracy of real-time data
• rich information

As well, the team aimed at making a visual branding design system that would have a range from more strict and business-like to more illustrative and emotional.

One of the core tools supporting both emotionality and usability in brand design for FarmSense is color. The palette features bright contrast shades of natural colors employing the psychology of color and giving instant visual connection to the topic of agriculture, summer, soil, fields, insects, and plants: green, orange, yellow, and blue. The latter is also traditionally associated with tech-related and digital products.

Having agreed upon colors, the team started working on the logo. The initial logo design approach was based on data as a core of the problem-solving power of the product. The creative search based on that resulted in a set of brand sign options reflecting that idea via lines and dots forming abstract shapes and building association with digital data processing and statistics visualization as well as fields seen from the bird-watch perspective. The basic shape chosen for the brand symbol was a circle.

Here’s a glance at the logo design process, from sketches through variations to the polished sign. The first version of the symbol developed in this direction was an abstract round sign consisting of vertical lines.

First sketches to think over the idea and find the composition

Digital symbol development

Testing the symbol with the brand name typographic part

Monochrome version of the combination mark

The version of the symbol with soft edges

Icons designed to test how the symbol can be further developed into other types of graphics

Another idea for the symbol at this stage of the creative search was to transfer the visual metaphor of the insect or the sun rising above the field, shaped by the lines. The latter was taken into deeper consideration.

Logo symbol sketching stage

Digital logo symbol development

Combination mark for the brand identity

Monochromatic version of the combination mark

The set of branded items was also presented to show how this version of the logo and color palette could work for various marketing goals: banners, printed advertisements, social media posting, business cards, etc.

Although the general idea looked effective, after discussions with clients and deeper testing, we together made the decision to move to another iteration, as this version of the symbol, even looking different, could bring up associations with some political campaigns that took place earlier in the USA. So, the second approach was also based on aerial views on the fields of crops, but this time irregular and asymmetric, cut by roads in various directions.

For this version, the color palette excluded blue, and the basic shape was square. The creative search was done on the sign composition and detailing.

The idea development resulted in the bright three-color symbol with a moderate level of detail and a bold, readable typographic part.

And here’s how it could be developed into the design system for branded items.

Posters design

Truck livery design

However, the deeper the team dived into the visual concept for the FarmSense brand, the more the client’s team got certain that they would like to combine the discussed approach and palette to their existing logo and reconsider it to make its design bright, up-to-date, and recognizable as well as flexible for various communication objectives.

The previous FarmSense logo

So, the final iteration started at the intersection of the existing logo and the ideas considered in the previous versions. The logo had to become simpler and less detailed to stay clear and informative in various sizes and get packed into a new color palette giving a quick connection to both agriculture and digital technology. Again, it started from basic sketching to think over the idea and moved to the polished logo.

Finally, the option with strict thin lines and a thin, elegant sans-serif typographic part was chosen as an approved brand sign.

So, based on that solution, the consistent set of branded items was designed for indoor and outdoor advertising and brand communication.

Billboards and banners designed for outdoor advertising

Business card design

Rollup design

Exhibition stand design

Truck livery design

With the brand graphics above, it’s also easy to see that another important aspect of identity design for FarmSense was creating custom illustrations. They covered four major goals:

• pictures set the atmosphere and apparent association with the agricultural theme
• specially created graphics helped to visualize the flow and benefits of highly-technological processes which are hard or even impossible to show via photos or videos
• custom graphics helped the brand to stand out of the crowd among the players in the agricultural sector, mostly using photo content which is often quite generic and just setting the theme
• the hero illustrations featuring people added a powerful human element and made brand communication more friendly and emotional

The creative process for the illustration also moved from rough sketches to present the idea and discuss it with the clients to the transformation of the approved ideas into bright digital artworks. Here’s a glance at the process for hero illustrations which had to become one of the first visual touchpoints of the product introduction on the website as a channel of communication.

And here’s the process for creating custom graphics reflecting the main benefits of the FarmSense technology.

Web Design

The next stage of customer experience design, extending the efficiency of the product presentation and amplifying brand communication online, was redesigning a website. At the initial stage, the team worked on developing a structure that would be effective and straightforward for the diverse target audience of the product.

Overview of the UX wireframing stage to consider the solid and straightforward website structure and navigation

At the UI design stage, the bright branded colors were used not only for illustrations and other graphics but also as background colors for different website sections, supporting usability, scannability, and readability of web pages.

Here’s a glance at the home page of the website, catchy, friendly, and informative, amplifying the message with a hero illustration sharing the peaceful, sunny, and positive atmosphere and giving instant connection to the topic of farming that employs modern technology.

The set of original illustrations used across the website pages proves itself as a powerful tool for visual communication and storytelling. It supports the text content, sets the mood, and helps establish consistency and integrity in the website’s performance.

Also, an infographic with custom illustrations was created to visualize how the technology works and make its benefits more accessible.

Here’s a closer glance at the set of artistic color icons supporting different text messages and creating visual triggers for essential functions or benefits to make them more noticeable and well-organized for website visitors.

To make the website work effectively and look attractive on any device, the tablet and mobile versions were also well-thought-out. They were arranged to provide a smooth and integral user experience at any stage of interaction.

For our team, the FarmSense project was a great chance to collaborate with the representatives of the modern ag-tech industry developing with a rocketing speed now and utilizing innovations to improve farming experience and outcome, which is crucial for the whole world.

New design case studies from our team are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

Nibble Health. Identity and UX Design for Healthcare Fintech Service

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

Nonconventional Show. Website Design for Podcast

Fulfill. Illustrations and Web Design for 3PLs Marketplace

Glup. Delivery App Branding and UX Design

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

Crezco. Brand Identity and UI/UX Design for Fintech Service

Carricare. Identity and UX Design for Safe Delivery Service

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: FarmSense. Brand Identity and Website Design for Agricultural Technology появились сначала на Design4Users.

Project

Brand identity and website design for a new-age shipping and fulfillment service.

Client

ShipDaddy is a modern company that covers shipping and fulfillment services to other smaller but growing ecommerce companies and brands that have a product sold online but cannot fulfill by themselves for any reason. ShipDaddy solves this problem by warehousing their pallets, shipping products directly to customers, and repalletizing their inventory if it needs to be shipped to other places in bulk. Put shortly, the service takes over all the needed effort on shipping so that their clients could focus on other aspects of their business growth.

The ShipDaddy team came to us with two aspects to cover from the design perspective:

• logo and identity design for a company brand and diverse marketing goals
• website based on a consistent approach with visual branding and a super high level of usability for any category of the service clients

Tubik agency team created a brand identity and a website that would help redefine a third-party logistics company and let the world know that ShipDaddy people genially care about the success of their clients.

Process

One general direction to take into account for the entire design process was the harmonic combination of friendliness and seriousness: ShipDaddy is a super friendly and open company that deals with serious challenges. The ability to work on both branding and user experience on the web allowed for a comprehensive and consistent design approach for all the channels of company communication with the target audience.

Logo Design

The clients wanted the logo to be friendly, approachable, and cool. It had to give ShipDaddy customers the feeling of working with a partner in helping to build their business, not just a boring and impersonal shipping firm. What’s more, the service goes above and beyond shipping: it acts as a full-on consulting company that helps businesses optimize their entire ecommerce strategy, including shipping and logistics. The best solution to reflect the message was found in creating a mascot that would make communication of the brand with the client emotional and humanized as well as could cover a diversity of marketing goals and campaigns.

The creative process moved through the traditional stages from discussion and research to sketches and then a polished digital version. Focusing on people, Tubik created a cute and friendly brand identity based on the image of the company’s COO. The mascot was a human character that was friendly and funny but also quite adult and serious enough.

The final logo presented a combination mark made up of a mascot and a typographic part with a company name in a bold and highly readable font. The color palette included the primary colors (blue, yellow, red) as they look good in both print and digital presentations.

What’s more, the mascot was developed further in a variety of states and plots to get integrated into the website, social media, branded items, and marketing campaigns.

Packaging design

Stickers design

Favicon for the website and welcome screen for the mobile version of the website

Social media posting

Web Design

The website was designed following the branding guidelines and the chosen palette of corporate colors. As the mascot was chosen as the main tool of communication, it was decided to integrate it broadly into the website and illustrate most of the functions and content with it. To cover that goal, 20+ variations of ShipDaddy were drawn, depending on the context of the website sections and blocks. Also, they were used for branded stickers.

At the stage of the website UI, the creative team came up with an idea to connect the drawn character with the real-world environment. In the design process, it got clear that such an approach draws too much attention and may distract visitors from the content. Therefore, that idea was implemented only on 2 pages, the first screens of the home page and the Company page.

Let’s take a look at the website pages. All the website was made on Webflow – in our previous web design case study we told about the benefits and functions of this tool in detail.

The home page applies the split screen based on color contrast to make the text content readable and the CTA button instantly noticeable. The motion of a mascot cheerfully walking through the photographed warehouse adds fun, atmosphere, and emotion from the first seconds.

Another page combining illustration and photography into one visual effect was a Company page.

Mascot Motion: APNG for Webflow

To make the user experience dynamic, engaging, and memorable, as well as activate the maximum potential of a mascot, we decided to make the character live with animation on all website pages.

All animations were made in APNG format instead of the usual GIF for the following reasons:

• much better image quality with equal size (compare the samples here)
• APNG works efficiently with Webflow
• mobile devices support APNG as well as desktop, which makes the user experience the same across all platforms.

Breakpoints

Recently, 3 new breakpoints for large monitors have been added to Webflow. In addition to adapting to tablet and mobile, you can now modify the website design at 1280px, 1440px and 1920px width. That helped us to be even more flexible in adjusting the first screens of all pages so that they would look more consistent and proportional even on the largest monitors.

404 Page

If, for some reason, visitors click on an outdated or broken link and get to the 404 error page, they get the experience spiced with a bit of fun with a nice animation. That helps to smoothen the negative effect of dealing with an error and supports a friendly atmosphere of communication. A solid visual hierarchy of the page and an instantly noticeable CTA button help a visitor quickly understand what to do next.

Blog

In Webflow, you can create full-fledged blogs with any design, functionality, and navigation, including categories, author pages, search, subscription, and so on. The client gets access to the admin dashboard, where he adds articles in a simple and intuitive editor, and in a few seconds, they appear on the website. The best benefit of a blog for a company website is that you can greatly increase the organic traffic through regular posts and cross-links in the articles.

The main page of ShipDaddy Blog

Author’s page on ShipDaddy Blog

Blog article page

Page Transitions

Since quite a lot of character animations are integrated into the website, and individual blocks of text are animated as well, they don’t overload the transition process. The motion graphics are light-weighted, so the user experience is not affected badly. And so that the visitor could see all the content at once and avoid the situations when something is loaded faster while something longer, we made the transitions between the pages through the curtain, which disappears only when all the content is fully loaded.

ShipDaddy project is a bright example of a tight and friendly collaboration of the creative team and the stakeholders in the desire to reach the most customer-centric solutions possible.

New design case studies are coming soon. Stay tuned!

Design Case Studies

Here’s a set of case studies sharing the design solutions and approaches for some other design projects by tubik team.

CSConnect. Website Design for Immersive Experience Marketing Platform

Fulfill. Illustrations and Web Design for 3PLs Marketplace

Roebuck. Mobile Design and Illustrations for Educational App

Kaiten. Identity and Product Design for Food Marketplace

Glup. Delivery App Branding and UX Design

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

PointZero25. Identity and Website Design for Event Agency

Nonconventional Show. Website Design for Podcast

Crezco. Brand Identity and UI/UX Design for Fintech Service

FarmSense. Identity and Web Design for Agricultural Technology

Carricare. Identity and UX Design for Safe Delivery Service

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Design Case Study: Identity and Website for Shipping Service появились сначала на Design4Users.

For the last decade or so, we’ve witnessed the rocketing rise of demand for diverse delivery services, getting even more popular in the world of online shopping. In this case study from the tubik agency design team, we will unveil the story of our collaboration with one of them: welcome to check the creative process of identity design and mobile application for Carricare, the service that helps customers get their parcels delivered safely and in perfect time.

Client and Project

Carricare is a service based in the UK; its objective is to effectively connect couriers and customers expecting the order to set perfect conditions and timing for delivery. It is an instant and real-time notification platform for delivery couriers that helps clients with last-minute delivery notifications, allowing them to manage their time better. Therefore, it aims at solving a fundamental problem of courier delivery, when the parcels aren’t safe if brought at the wrong time and left just at the door – or leading the courier’s coming up with the idea of what to do. Automating different user scenarios, the service makes the delivery process smooth and effective for both the courier and the addressee.

The first stage of brand design was all about absorbing, sharing, and analyzing various information. We dived into discussions about the client’s goals, visions, and brand value, as well as researched the market segment to develop a solid brand approach before the actual design of its identity started.

The service mainly focused on two critical aspects appreciated by target users: the safety of all sides of a delivery case – couriers, clients, and the delivered parcels – and the high convenience of taking them for the addressees. That’s how the brand name, Carricare, was up, combining two major concepts – carry and care – and echoing the idea out into the tagline: we carry and we care about your parcel, your time, and your convenience.

In the research process, the graphic designer emerged into the topic of visual elements that support the delivery process in the United Kingdom, from history to the modern state. The mood board of diverse stamps and icons transferring important messages, like the parcel’s fragility or the need to protect it from wet conditions, inspired the general approach to branding, echoing these well-recognized meanings and adding new ones to the set.

Another key aspect to consider was brand colors choice. In this case, the brand uses a bold and contrasting combination of colors, all well-grounded by the service essence: primary colors are blue and red that echo the UK flag colors, while the additional color is cardboard color setting the apparent association with packaging and boxes used for parcels.

So, logo design presents a combination mark flexible for plenty of practical goals. The bold typographic part is supported with a set of informational graphics reflecting the parcel delivery theme:

• parcel symbol
• fragility symbol
• water protection symbol
• parcel in hands symbol, transferring the ideas of courier delivery and care for the parcel
• line waves adding association to the typical postal stamps
• the heart symbolizing care and using the color contrasting to the rest of the graphic elements.

Here you can take a look at the ideas of different logo options and elements’ placement to cover various brand identity goals.

To make the logo work in an even more dynamic way in the digital environment, we’ve also made the animated logo version.

Here’s how the logo works on the branded boxes. Take a look at how QR code presenting the primary interactive element is integrated into the wavy pattern.

And these are the stickers, another key element developed for the courier and addressee interaction.

In addition, to satisfy the need for custom graphics, a special consistent system of icons was developed to link together branding and app design, also echoing the branded color palette and reflecting a variety of user scenarios that may arise.

Another task for the creative team was to think over a variety of graphic assets for marketing goals and outdoor advertising, such as posters, billboards, city lightboxes, etc.

Posters design

Billboard design

City light box design

Intending to strengthen online marketing and amplify brand recognizability, we’ve also worked on the general stylistic concept as well as the set of design templates and ideas for social media posting and advertising that would consistently reflect the identity.

So, this stage of the design process resulted in an eye-pleasing system of identity elements combining aesthetics and practicality, both essential for the service brand image.

UX Design

The mobile application was designed to meet the needs of two different categories of users: the courier and the recipient. The app offered several scenarios of delivery flow and was based on the delivery process improvement as a core feature: it aimed at providing successful parcel deliveries even when the recipient is away. Approved couriers scan the QR code, and the recipients get a notification and choose if they just open the door and get it when they are home, get the parcel back to the depot, leave it with a neighbor, or ask the courier to leave it in a safe place.

The user interface of the mobile application is nice and clean in the best traditions: minimalist and highly functional layout, readable typography, light airy background, and bright color accents make the app intuitive and easy to use on the go and for users of different ages. Custom illustrations help to not only enhance the messages but also add aesthetic and emotional appeal to the interface as well as keep close bonds with the rest of the branded items.

One more significant detail to consider was the app icon design that would be noticeable and digitally friendly, contributing its two cents to the general brand style of the service.

Working on the Carricare project, our team has got another great experience of connecting the physical and digital worlds employing beautiful and functional design.

New design case studies from our team are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the tubik team.

Kaiten. Identity and Product Design for Food Marketplace

Glup. Delivery App Branding and UX Design

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

PointZero25. Identity and Website Design for Event Agency

Roebuck. Mobile Design and Illustrations for Educational App

Nonconventional Show. Website Design for Podcast

uMake. Branding and Website for 3D Design Tool

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

Crezco. Brand Identity and UI/UX Design for Fintech Service

FarmSense. Identity and Web Design for Agricultural Technology

OOP. Brand Identity Design for Online Flea Market

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Brand Identity and UX Design for Safe Delivery Service появились сначала на Design4Users.

Project

Creating a system with which fashion designers can make mood boards with the help of AI and get all the needed information

Process

Designer AI is a digital service that connects fashion design to the power of artificial intelligence. It allows fashion designers and brands to communicate with the relevant consumer base, gain knowledge of their needs and preferences and create what buyers want. The design solutions had to appeal to the meticulous and aesthetics-driven target audience of fashion designers, as well as get solid and super-intuitive user interface design for users that could be of various tech-literacy levels.

Logo and Identity

The first strategic task was to agree upon the general visual stylistic concept and brand image. So, the first stage of design was devoted to logo and identity development assigned to graphic designer Arthur Avakyan.

The brand sign presents the typographic logo in which one part becomes the background for another. This way, the logo designer reaches the harmonic and artistic combination of elements that reflect the idea of fashion and technology working together. The biggest challenge was to find the perfect combination of the solid font for the “designer” word and the custom-created lettering for the AI part that would make the needed contrast.

Font and color explorations for the combination of two parts of the logo

The stages of logo design from sketching to the polished final composition

For the identity, it was agreed to take bold color contrast as a visual basis.

Business card design

Dashboard User Interface

A clear, minimalist dashboard design by Tubik UI/UX designer Anton Morozov was based on a dark theme to enhance the perception of visuals, intuitive navigation, and trendy branding.

The header contains several critical elements: an easily found search icon, the control for language choice, and the control to access the profile menu. For navigation through the functionality, the dashboard uses the sidebar giving quick access to core zones of interaction: projects, storyboards, invoices, transactions, and payments. It doesn’t hide in a hamburger menu or any other interactive element so that the users could switch between the pages quickly. What’s more, it makes the navigation super simple for users with middle and low tech-literacy levels. The currently active page is visually marked with the color prompt in the sidebar, and the icons support the titles in the menu: this way different zones of visual perception are activated, as icons set the elements quicker to see while the text helps to decode them correctly. The sans-serif font is clear and easily readable.

The Projects screen uses a simple scannable structure featuring the tabs of existing projects in the workspace and the tappable zone of creating a new project with a schematic prompt: a frame, a plus icon, and the textual explanation specify it. The tab informs the user about the project name, participants, the number of storyboards made for it, and the star icon to mark the favs or the most actual project.

Projects screen

Inside the project, users can see the storyboards giving an instant visual connection to the style with images preview that gets colored when hovered. The same visual prompt is used for the functionality of adding a new storyboard and the plus icon in the avatar-based list of participants allows for adding more of them.

A particular project screen

In creating a storyboard, the designer sets the needed requirements. Again, the outline icons organizing the options are presented with text labels for perfect clarity, while the bright and catchy CTA button has no chance to be left unnoticed. The custom icons were designed by Tubik graphic designer Yaroslava Yatsuba.

So, to sum up, the dashboard is all built around the visuals, which will be manipulated, and the convenience of usage for people with different tech-literacy levels. High readability, dark background making photos even deeper, elegant custom icons, and a well-balanced grid all help users feel it like home.

Here’s the set of interactions to let you see how it looks in action. Smooth motion for loading and feedback by our motion designer Kirill Sunny makes the interactions more dynamic and sets clear communication with the product.

Landing Page and Illustrations

Another important task was designing a beautiful and informative landing page that would support a web marketing strategy. The client wanted to amplify them with custom hero illustrations and storytelling illustrations, so that was another design task for Arthur Avakyan.

The illustration had to reflect the visual connection to fashion illustration style to set the needed emotional appeal, user the brand colors, and attract users’ attention with its aesthetic elegant style.

Neat outline illustrations with color accents reflecting different benefits and aspects of using the tool

Hero illustration for the above-the-fold area needed special attention as it was the first prominent visual to attract the target audience. It was also developed in style close to the classic fashion illustration and moved through several iterations of the creative search for a catchy and informative image.

Chalk-style outline illustration of the mannequin with a dynamic color accent

Digital sketch of the model character wearing the bright dress and visually integrating the elements of artificial intelligence involved in the design process

Two versions of the composition for the hero illustration

The landing page uses contrast color blocks for different pieces of content and charming artwork, instantly setting the theme. Above the fold, the page uses the dark theme echoing the one in the dashboard, minimalist airy composition, and solid visual hierarchy allowing the visitor to scan the page in split seconds. Outline minimalistic CTA buttons are visually highlighted with color contrast.

Here’s the structure of the whole landing page when you are scrolling it down, based on color contrast to separate the content yet giving a consistent eye-pleasing look.

With the mobile-first trend, sure, the designer also paid attention to responsive mobile design as well.

More Design Case Studies

Tasty Burger. UI Design for Food Ordering App

Slumber. Mobile UI Design for Healthy Sleeping

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Bitex. UX Design for Stock Analysis App

Inspora. Brand and UI Design for Virtual Stylist

Nature Encyclopedia. UI Design for Education

Perfect Recipes App. UX Design for Cooking and Shopping

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Dashboard and Graphics for Service for Fashion Designers появились сначала на Design4Users.

Project

Dicey is a super cheerful and unpredictable party game for adults. As it often happens, creators came up with something for themselves and then shared it with the world: after getting bored playing the same drinking games over and over, they decided to create a new one—something fresh, exciting, and inclusive. So, they developed a simple concept focused around 4 different card categories: Group Play, Face Off, Wild Card, and Rules. Each category contains hilarious minigames designed to encourage creativity and group interaction. So, the target audience of the game is social drinkers of legal drinking age. It was aimed at groups of 4 or more participants and had to create camaraderie through a one-of-a-kind social gaming experience.

Here’s a quick introduction on how to play:

The task for the designer was to create a logo and a funny character that would catch attention, looked original, created the needed atmosphere and mood. Actually, that was one of the primary reasons for the clients to reach our team: they wanted to build the brand strategy around an illustrated character. As they mentioned in the brief, “the character should be reflective of the game itself—playful, mischievous, and a little bit goofy. Ideally, the character will appear frequently on our social media channels and branded swag.” So, from the start, the designer had to keep in mind that the images obtained as the result of the design process will be used for both print and digital.

The idea of a mascot was totally reasonable for the brand goals. The business practice of successful companies shows that a well-crafted mascot can work even more effectively than product endorsement with the help of a famous person. Mascots can reflect any traits of character, any style needed for product positioning and communicate via a diverse set of visuals. They broaden the horizons of personification. With mascots, designers and marketing specialists can create unexpected and catchy looks or make fantastic characters alive.

Let’s check what we came to.

The creative process for this project didn’t get separate parts for logo and mascot character design. Even at the initial stage of pencil sketching, the designers searched for the interaction and composition of both. Below you can see the sketches featuring the stage of the creative process: here the illustrator showed several different stylistic directions for a character and possible style of wordmark to match.

Although all the options were catchy and playful, there wasn’t much discussion about the choice: the variant that transformed a special polygonal dice from the game into the funny character was agreed upon as the best choice. So, the designer moved on to creating a digital version. So, meet Dicey monster, whose motto is “Up to no good”. He is a real symbol of the fun-loving chaos and mischievousness the game brings out.

The wordmark uses smooth lines, it’s elegant and stylish but also playful and friendly. Here it is in black-and-white variants.

As the brand sign was intended for social media graphics as well, the designer offered several color options for banners, avatars, etc.

The concept of the branded stickers looked this way.

Then the designer worked on the stylistics of the play cards. Again, it started with sketches to find the compositions that would reflect the key message.

After deciding upon the concept, the designer digitized the mascot illustrations for the play cards and cards of a tutorial with the instructions. Here are two concepts of card design with different typography. What’s more, one version features the text in all caps, while the other uses the title case for the card names. Anyway, both fonts look funny and entertaining. The cards show how flexible is the mascot to show the variety of moods, feelings, situations, and messages to the player.

Would you like to play Dicey with your friends?

Useful Case Studies

For those, who are interested to see more practical case studies with creative flows for a logo and identity design, here is the set of them.

AppShack. Logo Design for a Digital Agency

Brand Intro Cartoon for Wedding Dresses Brand

LunnScape. Identity Design for a Landscape Company

Binned. Brand Identity Design for Cleaning Service

Reborn. Identity Design for a Restaurant

Inspora. Brand and UI Design for Virtual Stylist

Andre. Logo and Identity Redesign for Landscape Firm

Originally written for Tubik Blog

Сообщение Graphic Design Case Study: Creating a Mascot for a Party Game появились сначала на Design4Users.

It may seem difficult to design an absolutely unique symbol because there are so many brands around. However, skilled and experienced designers can find the way to creating a brand sign which will stand out among thousands of others.

Today we share a case study showing the creative process of a logo design for a digital agency from Sweden. The designer assigned to this case was Arthur Avakyan, whom you may remember from identity design case studies for Binned, Andre, Passfold, Tubik, Saily, Ribbet, and SwiftyBeaver.

Task

Logo redesign and branded items for a full-service digital agency.

Process

Recently, we provided branding services for a digital agency called App Shack. The team from Sweden specializes in web and mobile product development for companies of different sizes. They made a request for the redesign of the already existing sign. The client set the task to renovate the logo since it looked old, plain and weak with a poor color palette. A new brand sign was expected to modernize the appearance of the current company profile so that it could correspond to the peculiarities of the target audience which includes tech-savvy people.

The client liked the idea of the previous logo and asked to improve its styling and color palette. The style chosen for it then had to be developed into the set of branded items such as a business card, envelope, T-shirt, and stickers. The major client’s request was to keep the present logo symbol — a shack illustration. It wasn’t random and had a history. The thing was that the agency started their way as a business in a building similar to a shack so they had lots of warm memories with that which had become a starting point for a new experience.

Logo

The creative process of branding for digital agency set off with logo redesign. It started with brainstorming and analyzing the client’s vision of a new symbol. As they wanted modernization, a new brand sign was expected to be more playful and fresh still simple with abstract elements. In addition, the client asked to keep a blue color palette as it corresponds to their vision of the brand image.

When all the tasks were considered and the direction was chosen, the designer started the creative process. The first stage was silhouette searching. The pencil sketching technique was applied to quickly visualize the first ideas on the paper. Such an approach allows for picturing various concepts without significant efforts and within a short time. Moreover, sketches make the communication much more effective in helping clients and managers to understand designers’ ideas. In addition, if clients want to make some changes, it’s much easier to make them at this creative stage than in a digital version with elaborate details. Here are quick sketches for the App Shack logo.

Also, one of the client’s requests was adding abstract shapes in their brand sign. So, the designer experimented with vector forms trying to illustrate a shack. Flat vector graphics gained a huge popularity a long time ago and remain one of the basic directions for logo design. Simple geometric shapes are elegant and transparent so they are pleasant to our eyes. Considering all the aspects, the designer created several variants in an abstract style followed by the wordmark.

Geometric options based on a rhombus

Geometric option based on a hexagon with rounded angles

Geometric option based on a hexagon with sharp angles

Options offered to agree upon a possible color palette

After some discussions, it was decided to step back to less abstract shape with the minimum of details.

Iteration featuring a less abstract logo with an easily recognizable shape of a house and playing with negative space

Iteration featuring a less abstract logo with an easily recognizable shape of a house and playing with negative space

Iteration featuring a less abstract logo with a recognizable shape of a house with sharp angles

Iteration featuring a less abstract logo with a recognizable shape of a house with rounded angles

App Shack team liked the minimalistic option of a shack which is shown the second in the set above, so the designer moved to the next stage which requires working with colors and polishing the details.

The final logo was completed in a flat minimalistic style. A symbol represented a shack in a rhombic frame. This way designer managed to combine both the illustration of a shack and an abstract element. In one of our previous articles, we’ve mentioned that shapes applied in symbols have a significant influence on a human mind. The psychology of shapes states that our mood can be changed according to the shapes we are looking at. A rhombus is usually associated with clarity and wisdom so such a frame may work effectively for the positive brand image.

The color palette was chosen according to the clients’ expectations. The light blue color gave the feeling of stability and the slight gradient made the logo more playful and modern-looking which responded to a current brand strategy. Also, a monochromatic variant was provided to be used in cases when color couldn’t be applied.

The wordmark typography was chosen that way so it could work in harmony with the brand sign and represent a brand character.

Icon

When the logo was accomplished, the designer started another task — an icon. To support brand recognizability, the icon was based on the brand symbol. The icon frame is wider than in the logo which makes it look clickable. The white symbol on the blue gradient background created enough of contrast so the icon would be noticeable on the different digital screens.

Branded Items

After the key elements of brand identity were approved and tested, the designer continued to work on branded items design. The items included a business card, an envelope, T-shirt, and stickers.

Business card

For many years, this component remains quite important for successful business communication. Moreover, an effective business card creates a positive image for people in the business community as well as shows the reliability of the company to the customers.

The designer created a business card applying the same color palette as in logo design to support brand recognizability. One side includes the core signs of brand identity — a symbol and wordmark, and the other side provides short information about the person and the contacts. Due to the minimalistic design, the card looks stylish and easily readable.

Envelope

Envelopes are important elements of business correspondence so they should have a substantial and official design. An envelope for App Shack is created in consistency with the overall brand identity. It features a branding sign and corporate color palette. Blue is darker than in logo aiming at elegant looks on both physical and digital letters creating deeper contrast and ensuring readability.

T-shirt

Сlothes featuring brand identity elements are used to evaluate corporate spirit within a team as well as mark out the employees of the company on exhibitions, conferences etc. The T-shirt includes a small white logo placed on the blue background with an additional white spot making the T-shirt less official.

Stickers

Stylish stickers are the right choice for brand recognizability. They can be used for various marketing needs. The designer optimized the logo turning it into modern stickers in both monochromatic and colorful versions.

When you design a logo for a full-service digital company, it may be challenging since there are a lot of competitors in this field and it’s hard to create something unique. Nevertheless, creativity and communication with clients can make this process productive and easy.

Useful Case Studies

For those, who are interested to see more practical case studies with creative flows for a logo and identity design, here is the set of them.

LunnScape. Identity Design for a Landscape Company
Binned. Brand Identity Design for Cleaning Service
Reborn. Identity Design for a Restaurant
Andre. Logo and Identity Redesign for Landscape Firm
SwiftyBeaver. Logo for Mac Application
Saily. Logo for Local C2C E-commerce Application
Creative Stages of Logo Design

Originally written for Tubik Blog

Сообщение Design Case Study: Creating Logo for a Digital Agency появились сначала на Design4Users.

We have already shared case studies with the stories of creating logos and brand identity concepts for Ribbet, Passfold, Saily, SwiftyBeaver, Andre, and Reborn. The new story is about brand identity designed for Binned, the US-based cleaning service, supporting a cleaner and healthier environment for the local community by washing and deodorizing the trash bins outdoors.

Project

Create a brand identity for a trash bin cleaning service based in the US.

Process

Binned provides a service that cleans and deodorizes outdoor trash cans to promote a healthier environment in local communities. Based on that, a detailed description of the service and the brand image which the client wanted to set for the target audience, the designer was assigned to create the logo and a set of branded items that would grow brand awareness.

Logo

At the stage of the creative search, several directions were tested, including a minimalistic lettemark and also lettermarks showing the initial letter combined with bubbles setting the association with washing and cleaning. Another set of options included elephant mascot to evoke bathing, water, and environmental awareness.

Having reviewed the versions, the client tended to choose the logo presented as a lettermark but wanted it performed with original and friendly mood. So, the next stage developed this direction and the designer presented the set of colorful lettermarks applying the shapes of the wave to echo the idea of water splashes and cleaning and various gradients to make the image noticeable and catchy. Various color options for lettermark logos were also tested for visual impact.

The lettermark design most closely matched the business brand: the final version of “B” was developed as a visually appealing “splash” in watery blues. Also, the client was provided with the combination mark combining lettermark with the entire brand name in a simple yet bold font. These brand identifiers strongly evoke a sense of water, cleanliness, and fun.

The client was finally presented with vertical and horizontal variations in color, as well as a monochrome version, for the lettermark design. This approach provided higher flexibility for further marketing needs.

Horizontal version

Vertical version

The monochrome version of the logo is easily recognized and stands out on a variety of backgrounds and surfaces.

Also, the animated variant of the logo was designed to be applied on the website and in social marketing: the motion smoothly imitated the natural movement of water waves and splashes looking attractive and catchy.

After the logo was approved, the next stage of the design process was aimed at creating a branded idea supporting general identity.

Business cards

Business cards and other stationery items designed for the service reflect the minimalist color palette and typography of the brand identity.

Hangers

The set of hangers were also designed in the same visual concept: their purpose is informing users that it’s time for the bin to be cleaned with the key reasons why. The hangers also featured the funny and cute mascot – yellow bin: it was later used in the promo video for Binned which we will show you in our next case study.

Vehicle

The branding was carried through to the design of other company assets, including the truck livery, which features a bold and easily recognizable brand identity.

T-shirt

The logo stands up well to use on items such as apparel, where the monochrome background of items such as T-shirts allows the brand identity to pop.

Brand guidelines

The client was provided with a full set of guidelines for logo and identity use, including color palettes, fonts, and placement. Practice shows that the guidelines play a strategic role for brand development: all the further contributors to this process will get clear instructions about correct and wrong ways to use the graphics created for this brand. The document included several sections and informed about the idea which became the basis of a logo, its structure and specifications, color and monochrome versions which could be used for different purposes. Also, it showed examples of incorrect usage in order to avoid poor visual performance. In addition, all the branded items created for this project were included in the guidelines and described in detail.

To share the details about this project with our readers and clients, we added a new interactive case study in our portfolio.

If you want to know more about the creative stages of the design process for logos, welcome to read our free e-book “Logo Design”. Don’t miss the updates here, new case studies on branding, web and mobile design are coming soon!

Useful Reading

Creative Stages of Logo Design

The Role of Branding in UI Design

6 Creative Stages of Design for Branding

Identity Design: 5 Basic Types of Logos

How to Use the Power of Mascots in Branding and UI Design

Originally written for Tubik Blog

Сообщение Design Case Study: Brand Identity for Cleaning Service появились сначала на Design4Users.

We have already published case studies with the stories of creating logos and brand identity concepts at the early stages of their business path. However, this time the story will have another flavor as we are presenting you the case of logo redesign for a company that is already recognized and actively operating on the market. The task for Tubik team was to create the new brand identity not breaking already gained links and associations.

Task

Redesign of a logo and creating the corporate identity for a commercial and holistic landscape firm Andre operating in landscape maintenance, tree care and design.

Process

First of all, it was important for the designer to study the conditions and philosophy of existing logo functionality, details about company activities and business goals and customer’s wishes about the redesign process. It should be mentioned that redesign for existing companies and products can have different levels of breakaway from the existing versions: some companies decide upon fully new design which has nothing in common with the current branding, while others keep the track of changes carefully and gradually, with minor alterations eliminating the risk of losing recognizability on the market.

The second approach was taken as a basis for this particular story because Andre is a company that has already won its audience on the market. That means any design change should be done with respect to the company’s history and philosophy as well as brand image grown through the years. Therefore, new design had to take its roots from the existing branding, but offer some refreshment and add some trend.

Certainly, to find the sign representing the brand, the designer needs to know as much as possible about the brand, its business goals and statement. Andre is a medium-sized company based in the USA and providing all sorts of services linked to landscape care and design of any complexity. The company is family-owned so its name origins from the last name of the family. The customers wanted a new logo to be quite classic, memorable, enduring and setting the strong association with land care. So, it was important initially to provide the visual sign that will instantly inform observers about the nature of the business and create positive vibes via the harmonic combination of shapes and colors.

After the market research and getting deep into the requirements and background of the company, the designer worked over the first series of sketches and offered the first version for the redesign. It was based on the round shape and featured green leaves as the central element of the composition. The designer also selected the corresponding version for the name lettering so that it looked readable and harmonic in combination with the image, supporting it but not overloading general visual presentation. The combination of several shades of green with light-blue set the image connected to key concepts of business activities: nature, landscape, plants, trees, sky. The designer applied smooth and rounded lines of different stroke weight and provided the variants filled with color as well as glyph one.

Another concept offered more linear and geometric variant also featuring the leaf motif and using a shape inside reflecting the form of capital A letter.

Although the offered style was appropriate, the customers insisted on applying the mascot in the logo image. The choice was made in favor of a bird and the designer offered the graphic option featuring the bird as a logo image. It also was applying the form of the leaf in the image used separately, but in combination with lettering, the leaf was placed closer to the letters.

One variant of a logo featuring the bird mascot used the image with the shorter beak and an eye featuring the mimic expression of the smile.

The idea of “smiling” positive expression was also tried in the variant in which the bird was inscribed into the circle. The beak directed upwards moved out of the circle setting the feeling of progressive flight, while the wing featured the form and visual marks of the leaf.

The general concept of applying the bird in the logo was set and agreed upon, but the customer and the designer decided on trying another iteration experimenting on simplification of the bird’s silhouette to make the logo not only attractive and meaningful but also clearly visible and legible in any size. This stage of creative search resulted in a new shape combining the visual concept of a bird and of a leaf in one image.

The final choice was made in this direction, which efficiently presented the mascot in clear simple forms, preserved color combination associated with the nature of the offered services and vibes of green and natural background.

Now let’s continue this story to unveil the further process of applying the logo and chosen the stylistic approach for the set of branded items presenting general corporate identity of the brand.

On the basis of this stylistic approach, the designer developed several variations applying the same color palette, typography, mascot and general visual perception for building the consistent and harmonic corporate style presented via different visual details on branded items. For all of them, three core visual elements supported the consistency of performance: the mascot showing the cute hummingbird, green leaves instantly associated with trees and plants and the lettering showing the brand name of the company.

Business Card

The first item to get into the set was a business card. No wonder: in the modern world, the business cards is not a sort of fashion, but a must-have for serious branding and business communication, especially in the domain of services. It is the real sign of respect to the customer. So, it should be not only informative but also stylish and easily readable. The designer provided two options of placement, horizontal and vertical, to set higher level of flexibility for possible goals and wishes that company can have in the future.

Vehicle branding

The next object of design exploration was branding for corporate vehicles. The company uses several options of vehicles which regularly do considerable business routes, therefore, neglecting such an effective advertising carrier would be unreasonable. So, the designer worked over the variants of harmonic placement of catchy and stylish branding elements for different models of vehicles.

Light background provided effective combination with the green palette of identity design presentation and set the high level of visibility and readability, important for this method of advertising.

Correspondence

One more direction of corporate branding for Andre company had to deal with correspondence, both physical and digital. In this field, letterhead and envelope were created for physical letters and also the special template featuring branding signs was designed for corporate emails.

Banner Design for indoor trade show

No secret that branding is not only about the logo and brand name but also the general style of visual components dealing with the brand, such as photos for websites and blog posts, banners of all kinds, posters and so on. One of the design tasks was to create the banner for an indoor trade show. For it, the designer created unique hand-made letting for the slogan copy to add originality for general visual perception and setting the strong emotional associations with a brand.

Jar design

Another object of design was a jar for candies or other stuff of this sort. The concept below shows the monochrome design with high level of readability which could efficiently work for the objects of this kind.

T-shirt

One more task for the designer was certainly connected with corporate T-shirts which could be effectively used as another nice and natural carrier of information enhancing brand recognizability and awareness. Again, the designer chose the light background as the basis of providing the airy and universal solution to the fast and clear presentation of the logo. Still, other variants featuring different color combinations and visual elements placement were offered to the set so that they could be used for a variety of purposes in advertising campaigns and everyday brand presentation.

On the basis of all the design solutions, the clients got the brand guidelines setting all the details of designed solutions as well as wrong variants of using the logo that could harm the perception of the brand image.

This case of a comprehensive design of corporate identity has become another proof that user research, market research, thorough attention to the customer’s requirements, and inspired creative search together make a great basis for efficient, informative, and attractive branding.

If you want to know more about creative stages of the design process for logos, welcome to read our free e-book Logo Design.

More Branding Design Case Studies

Quisine. Branding Design for Food Delivery Service

Logo Design: Collection of Creative Logos for a Variety of Brands

Dicey. Logo and Mascot Design for Party Game

MYWONY. Storytelling with Brand Intro Design

Inspora. Brand and UI Design for Virtual Stylist

AppShack. Logo Design for a Digital Agency

LunnScape. Identity Design for a Landscape Company

Binned. Brand Identity Design for Cleaning Service

Reborn. Identity Design for a Restaurant

Originally written for Tubik Blog

Сообщение Design Case Study: Corporate Branding for Landscape Firm появились сначала на Design4Users.

Task

Design of a logo for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.

Tools

Pencil sketching, Adobe Illustrator, Adobe After Effects

Process

As we mentioned in a case study on UI and UX design, SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language. It is aiming at developers as its basic target audience. The product supports all the devices belonging to the Apple device family.

The design practice of previous projects accomplished by studio designers, such as Saily App or Passfold, proved that tight interconnection of design solutions on branding and user interface for the same product features a higher level of efficiency. Both mentioned cases showed that in brand positioning and promotion, using the concept of strong corporate style and applying the elements of branding such as logo, lettering and illustrations consistently was the effective strategy. It is also important to remember that the user interface of an application or a website is not just a sort of static or moving images — it is the field of active interaction. Interaction with the product via the interface enhances much higher memorability potential of brand elements as well as general stylistic concepts. Following this approach for the SwiftyBeaver project, user interface designer Ludmila Shevchenko and logo designer Arthur Avakyan worked in tight collaboration to get the design solutions that will effectively support each other.

Naturally, the initial stage of the general concept search tried the variants of mascot. As the name of the product includes “Beaver”, in the first sketching set the designer presented variants of this animal as a key mascot. There was also a variant of the original presentation of “S” and “B” as two basic letters of the product name. In addition, this first set included a bit more abstract version based on the set of lines featuring the movement of a beaver’s tail.

The variant based on lines was accepted as the basic concept practically at once. Although the mascots can be a powerful tool of branding, this time the strategy was different. The target audience, as well as the nature of the product, is quite specific so a more abstract version of the logo could show more flexibility in its expressive potential. Founder and CEO of SwiftyBeaver Sebastian Kreutzberger was very attentive to details and open to discussions. He decided upon the variant with stripes because it made a logo meaningful as logs the app is based on like the logs of trees are stripes so it presented a strong visual metaphor. Additionally, he liked the colored stripes of famous 70s and 80s logos so he wanted to have a logo that would look vintage and at the same time super modern. So, this direction was developed further.

Moreover, this version got closer to the general visual design of the user interface for the application. As it was described in the previous case study, UI design widely used color lines as markers for categories of log entries, and the chosen concept of logo provided a strong connection between UI design and branding. Therefore, the next stage of the design process of elaborate and thorough work on the slightest nuances. Different versions of curves and length of the lines were tried and discussed in search of the most harmonic variant.

The color palette also echoed the colors chosen for UI design and supported them with smooth gradients. So, the user interface of the platform, landing page, and logo were conjoint via colored elements.

The original version of the logo was colorful, but the monochromatic version was also accomplished and tested to provide branding solutions with a high level of flexibility.

Another issue to consider was the choice of font for company name lettering featured with a logo image. Several options that could work effectively with the logo and correspond with the nature and general design of the product were offered and discussed. The set of potential variants included diverse variants from strict and straight to smooth and curvy. Finally, the font was chosen to provide a good combination with the fonts of the app interface. The client chose that particular font because found it appropriately curved and perfectly matching the curves in the logo.

The approved variant of logo image and lettering was also supplied with the design of the animated version. It was accomplished with the help of Tubik Studio motion designer Kirill. The designer and the client took a considerable amount of time and discussion optimizing the physics of the ball to look and feel as natural as possible.

And one more important task to move on with was the design of an app icon. To prove its efficiency, designers tested it on different devices and in different sizes to ensure that it didn’t lose its recognizability or didn’t get dirty in a smaller size.

Logo design for SwiftyBeaver was one more case proving that there are no unimportant details in branding. It was one more project full of elaborate sketching, thorough work on the slightest hues and gradients, numerous variants with different length, width, and placement of the elements to make a catchy, harmonic and stylish logo that will represent the nature of its product.

Useful Case Studies

For those, who are interested to see more practical case studies with creative flows for a logo and identity design, here is the set of them.

LunnScape. Identity Design for a Landscape Company
Binned. Brand Identity Design for Cleaning Service
Reborn. Identity Design for a Restaurant
Andre. Logo and Identity Redesign for Landscape Firm
SwiftyBeaver. Logo for Mac Application
Saily. Logo for Local C2C E-commerce Application
Creative Stages of Logo Design

Originally written for Tubik Blog

Сообщение Case Study: SwiftyBeaver. Designing App Logo появились сначала на Design4Users.

Being a symbolic sign, logo is one of the most important parts of a company or project identity. It should combine lots of magic ingredient of success: pure and distinctive shapes and colors as well as the overall image being both original and meaningful. A designer assigned to create the logo gets a very responsible job and has to get through lots of ideas and updates before the creation of the final version satisfying the customer.

The designer for Tubik Studio Arthur Avakyan is already experienced in such things so he always considers lots of those issues and he did the same working on the logo for Ribbet project

Tools:

Pencil sketching, markers, Adobe Illustrator

Task:

Designing the logo for the online photo editor with a wide set of tools.

Process:

The designer started working out the idea of lettering compositions that could be used for logo style.

First sketch variants of new lettering

Lettering processed in Adobe Illustrator

However, the customer wanted to use the visual elements that would be associated with the mascot of the company. The word used as the name of the company — Ribbet — is one of the variants to express the sound made by a frog or a toad, so the image of a frog has been originally the mascot of the company. They wanted to preserve it in the logo in order to create the consistency with other visual elements of branding as well as the name of the company. Having analyzed the experience of the other competitors on the market, they came to the conclusion that it would work efficiently and would create better web-presence. Being widely functional, the service lacked in the style which would distinguish it from the competitors. So, it was agreed to create the variants combining lettering with the visual elements reflecting the mascot.

It should be said that the logo was created in tight and deep connection with the whole concept of the Ribbet site design. Tubik Studio has been working with this customer on the general design of the site and that was the reason why the company decided on creating the logo which would correspond with the general conception. By the way, that was a very efficient decision as the designer creating the logo was able to work together with designers developing overall redesign of the site at all the stages of the project. Very soon the users will see an absolutely new version of the Ribbet site style.

Originally the company didn’t have a visualized logo using any image — they used only a lettering composition reflecting the name of the site. So, the task was to create a unique logo which company could use in all its products and social networks profiles.

Therefore, as the online graphic editor already had the general style of the site developed and it included mostly dark colors and shades with some blue color accents and was quite strict, elegant and serious, the concept of the logo had to correspond to it. The website was totally redesigned and the lettering used for logo needed fully new concept too.

Trying to get away from the previous idea, the author offered a neat geometric originally made lettering composition.

Trying new versions of lettering in the redesigned style of the site

When the customer asked to develop the idea of the visual element showing the mascot, the first variants of visualizing the frog were based on the image of a frog’s pad, but they didn’t seem really clear to make necessary associations with a frog in different sizes, so the designer decided to try other variants.

The variant of visualizing the mascot with the image of a frog’s pad

All first versions were created by means of traditional pencil sketching aiming to keep elegant and serious stylistic features. At the same time, the designer worked on the other version of lettering, more gentle and rounded than the previous.

First sketches visualizing the company mascot for the logo

The combination of new visual elements with the new style of lettering

The collaboration with the customer was kept first of all through revision of the sketches and afterward if those sketches had been approved, they were processed in Adobe Illustrator.

The first version of the frog seemed to be a bit complicated for the customer so they asked to simplify it by eliminating some details and making the image clearly perceived. There was created the variant with the half-head of a frog, which was not clearly associated with the frog so it wasn’t accepted.

The simplified version of a half-head frog image

Combinations and versions of lettering and images of a frog with different details and shaping

The customer asked to add a little fun and joy to the image so that they could see if the character will work. Taking this into account and meeting the customer’s wish, the author added some details, trying to play out a smiling mouth.

The emotionally marked character of the mascot in combination with various lettering styles

The version was rather stylish; however, it didn’t match with the whole stylistics of the site, so this variant was put aside on the agreement of both the customer and the designer. The task became more distinct: to create a more natural image of the frog adding some details, as the practice showed that oversimplified version could confuse a user and prevent the customers from achieving their aims.

The customer selected and showed the samples of real logos which they liked and thought appropriate in the perspective of brand identification. Those samples showed that the main accent should be still put on lettering. After creating and reviewing numerous variants of lettering the customer and the designer agreed on one as the best version.

Working out sophisticated lettering versions

Then there was a long and thorough process of specifying the details to the approved version, such as lengthening/shortening or moving some strokes and elements. There were tons of tiny but really numerous corrections and alterations in order to get the most harmonic version. It is natural as the logo was based at purely original and uniquely created lettering. At last, the final version was agreed upon.

Thorough work on details in the final version of lettering

Nevertheless, the designer didn’t forget about the customer’s desire to visualize the frog as the mascot of the site. So, the designers of Tubik Studio got together at brainstorming session and developed the idea of using previous images of a frog and animating them in a functional feature of preloader.

Brainstorming session in Tubik Studio

The final image of a frog animated for a preloader on the site

In addition, there was created a simple and rounded variant of a frog image which could be used together with the lettering or independently.

New versions of visualizing the mascot for logo

Various combinations of lettering with the image of the mascot

So, it can be seen, that the designer has made great efforts to meet all the needs and wishes of the customer, that is why his work was highly appreciated by the customer. In a while, all the work on the website redesign by Tubik Studio together with the new logo will be presented to the users of the Ribbet service.

The final version of Ribbet logo

This case has become one more example showing how many attempts should typically be made in the process of logo creation. The designer has to do his best and be always ready to listen carefully to the customer. In addition, it is vital to be ready for research and deep analysis of existing products in the sphere in order to create original and highly competitive product satisfying customers, increasing brand identity and attracting users.

Originally written for Tubik Blog

Сообщение Design Case Study: Ribbet. Logo for Online Editor появились сначала на Design4Users.