Today D4U Review issue introduces a new service by the Icons8 team called omg-img. Its main goal is to make embedding vector icons in HTML super simple, and it uses a huge collection of icons which is continuously growing and at the moment presents about 50K items available. Users do not even need to insert a Javascript code. This was done with support from a production-scale CDN service provided by KeyCDN.

Users can select icons from more than 10 different styles, specify the size of the icon (up to 512px), and even recolor it. Each style has the size it’s designed for, in other words, pixel-perfect size:
iOS: 50×50
Windows 8: 26×26
Windows 10: 32×32
Android 4: 24×24
Android 5: 24×24
Color: 48×48
Office: 16×16, 30×30, 40×40, 80×80

The team keeps developing and testing the service: a couple of useful features are already being prepared for the next release:
– ability to specify the size as 2x, 3x, etc. instead of in pixels in order to keep correct proportions from the pixel-perfect size for each platform
– adding icon effects like background and a horizontal flip (direction).

Full product description and all the links can be found here. At the moment, all the mentioned functionality is available for icons in png format. The same performance is coming soon for svg and will be open for all the users who have an Icons8 license.

By Icons8, the team behind the great collection of icons for different purposes

Сообщение Design Tool: omg-img. When Adding Icon Is a Piece of Cake появились сначала на 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.