Tag Archives: graphic designer

typography tips for designers

20 Wise Thoughts by Typography Master Erik Spiekermann

Good design is often based on a careful mix of tradition and innovation. And revolutionary inventions are solidly based on the findings by previous generations of professionals. So, whatever a domain of creative work you have chosen as your job, it’s important to sometimes stop and look back, listening to wise and experienced voices of people being in that job for years.

 

Earlier we have already shared numerous expert quotes, tips, video talks and books worth reviewing to support our readers with useful resources. In particular, you could check the insights into Design Is a Job by Mike Monteiro and  Designing for Emotion by Aarron Walter—the books belong to the series A Book Apart for designers offering the diversity of expert tips, case studies, and resources. Today continuing on this way, we are sharing a new set of quotes by Erik Spiekermann, a famous German typographer, designer and writer, an honorary professor at the University of the Arts Bremen and ArtCenter College of Design. Having passed the long way in graphic design from 1970s, being an author of books and articles as well as awards winner, he is justly recognized as a guru of typography and avidly shares his experience and expertise. So, here we will save a bunch of 20 useful expert tips for Tubik Quotes Collection — we got them from his blog, his interview for 99U and other published writings.  Join in and let’s look into his thoughts together to know a bit more about the master.

 

erik spiekermann photo

 

I’m very much a word person, so that’s why typography for me is the obvious extension. It just makes my words visible.

 

Inher­ent qual­ity is part of absolute qual­ity and with­out it things will appear shoddy. The users may not know why, but they always sense it.

 

These days, information is a commodity being sold. And designers—including the newly defined subset of information designers and information architects—have a responsible role to play. We are interpreters, not merely translators, between sender and receiver. What we say and how we say it makes a difference. If we want to speak to people, we need to know their language. In order to design for understanding, we need to understand design.

 

Erik Spiekermann Quotes Design 06

 

The materials shape your idea.

 

I learned that a brand isn’t a logo. There has to be implementation. You can design anything, but if the rubber doesn’t hit the road, you’ll be remembered as a great strategist but the client won’t call you again. You have to have a strategy, and you also have to be able to visualize it—one doesn’t go without the other.

 

Erik Spiekermann Quotes Design 05

The attention someone gives to what he or she makes is reflected in the end result, whether it is obvious or not.

 

I’ve always designed typefaces for specific solutions. In other words, a problem. Everything has always been done for a specific purpose. As a designer, you work for somebody else. That’s not negative. I work for a client, and I solve their problems. I bring my artistic vision to it, my creativity, whatever you want to call it. But essentially, I’m being paid to blow somebody else’s trumpet.

 

You are what you are seen to be.

 

Erik Spiekermann Quotes Design 04

 

The function has to be the brand. If it works well, it has to be branded at the same time.

 

If a design project is to be considered successful—and success is the true measure of quality—it must not only add an aesthetic dimension, but solve the problem at hand.

 

I mean, everyone puts their history into their work.

Erik Spiekermann Quotes Design 02

 

When I do typography, it’s 150 percent effort.

 

I know a lot of advertising agencies that thrive on overtime because they have a dozen interns who work for free and they spend their weekends doing free pitches. We don’t do free pitches because we don’t have any free time. Our time is valuable, and I’m not giving away ideas to some prospective client. That’s giving away the most valuable resource you have.

 

Work is gas. Work will fill any given volume.

Erik Spiekermann Quotes Design 03

 

 

Clients need to understand that they’ve hired us to do something they are not good at. And that they need to pay us for our knowledge, skills, experience and, yes: attitude.

 

 

My advice, now and always, is learn, learn, learn—starting right here.

 

Contrary to popular belief, designers are not artists. We employ artistic methods to visualize thinking and process, but, unlike artists, we work to solve a client’s problem, not present our own view of the world.

Erik Spiekermann Quotes Design 07

Being a designer is all about attitude. Sure, you have to know your craft, but as we both found out, you can pick most of that up over time if you’re prepared to listen, watch, and learn. Without the right attitude, however, you’ll always be a vendor to some people, a crazy artist to others.

 

So what’s new? The present generation of UI/UX designers may think that they invented a new way of designing, but we’ve had these issues forever. Trying to fit a lot of text onto the how-to page inside a pharmaceutical package is probably more difficult than doing the same on a screen. There’s no zoom on that paper, so it has to be really well done just for that one version and circumstance. My method? Think. Consider. Sketch. Think again. And look around you. It’s all been done before, albeit with different code.

 

Inspiration. From real life. I open my eyes and I travel and I look. And I read everything.

 

Erik Spiekermann Quotes Design 01

 

Bonus: video talks with Erik Spiekermann on design, typography and life lessons

 

Typographic Design in the Digital Domain

 

 

Erik Spiekermann: Typomaniac

 

 

Erik Spiekermann – Type Is Visible Language

 


Welcome to check the quotes by Mike Monteiro from «Design Is a Job» and by Aarron Walter from «Designing for Emotion«

Welcome to check issues of Tubik Quotes Collection on brandingusabilityuser-centered design and content strategy

Welcome to read or download Tubik Magazine free books on logo designdesign for business and problem-solving web design

design_review_tubik_studio

Tubik 2017. Bright Year in a Big Review.

Full of productive work and a wide variety of creative challenges, the year 2017 is almost over. For Tubik it was dynamic, bright, rich in meetings, shots, interesting projects and non-stop professional growth. The company got bigger, more experienced and diverse. And again, we start the new stage of our workflow remembering the most significant points of what has already been done, so today won’t be an exception. Let’s take a moment to turn back for a while and remember some outstanding things that marked the year 2017 for our team.

 

Keeping our active position on Dribbble, we published over 120 shots. Welcome to look through the set of top positions in the categories of UI/UX design, animation, branding and illustration. Following the links, you will be able to see all their detailed descriptions and full-size attachments.

 

Top Ten UI shots

 

bright vibe calendar UI design tubik

Bright Vibe Calendar

 

financial_service_website_tubik

Financial Service Website

 

dating_app_landing_page_tubik

Dating App Landing Page

 

design agency landing page

Digital Agency Landing Page

 

web ui design city guide

Big City Guide

 

home budget app mobile interface

Home Budget App

 

bikers website blog

StarDust Biker Website

 

underwater world encyclopedia design tubik

Underwater World Encyclopedia

 

music streaming app design

BeatSync Music Streaming App

 

Homey app smart home UI

Homey App

 

Top Twenty Animated shots

 

watering_tracker_app_ui_tubik

Watering Tracker App

 

jewellery ecommerce app

Jewellery E-commerce App

 

loading_animation_iphonex_tubik

Loading Animation for iPhoneX

 

home budget web interface

Home Budget Dashboard Animation

 

burger_app_ui_animation_tubik

Tasty Burger App

 

californication_bus_animation_tubik

Californication Bus Animation

 

dance academy landing page animation

Dance Academy Landing Page

 

cinema app interaction UI

Cinema App

 

upper_app_ui_design_tubik_studio

Upper App

 

Upper App Animation

Upper App Landing Animation

 

business_card_app_animation_tubik

Business Card App

 

gourmet_website_interactions_tubik

The Gourmet Website

 

bookshop website animation

Bookshop Website

 

car app interface

Car Stats Animation

 

mood messenger landing page

Mood Messenger Landing Page

 

Animated stickers mood messenger design tubik

Animated Stickers for Mood Messenger

 

navigation_in_ui_animation_tubik

Navigation in UI

 

mobile_game_interactions_tubik

Mobile Game Interactions

 

tubik_photo_app

Photo App Interactions

 

menu_interactions_ui_animation_tubik

Menu Interactions Concept

 

Top Ten Illustration shots

 

design_party_graphic_design_tubik

Design Party

 

star_wars_stickers_fanart_tubik

Star Wars Fan Art Stickers

 

creative_ux_design_illustration_tubik

Creative UX

 

halloween_pumpkin_animation_tubik

Creative Pumpkin

 

opera video animation case study

Opera Video: Summer Heat Illustration

 

illustration_design_in_progress_tubik

Design in Progress

 

add_color_illustration_tubik

Add the Color

 

building_ui_illustration_tubik

Building UI

 

business_graphic_design_tubik

Business Teamwork

 

golden_ratio_ui_design_illustration_tubik

Golden Ratio in UI Design

 

Top Five Branding Shots

 

binned logo animation design

Binned Logo Animation

 

logo_animation_tubik_design

Whizzly Logo Animation

 

brand identity design case study

Reborn Business Cards

 

lunnscape_branding_case_study_tubik

LunnScape Branding

 

forcecop_logo_design_tubik

ForceCop Logo

 

Top 5 tubik.arts shots

 

tubik_arts_character_animation_hagrid

Character Animation: Rubeus Hagrid

 

tubik_arts_flickids_pirates_character_animation

Character Animation: Flickids Pirates

 

tubik_arts_orks_vs_aliens_nagari_cg_design

Character Design: Sorceress Nagari

 

tubik_arts_orks_vs_aliens_nazmordul_illustration

Character Design: Orc Nazmordul

 

tubik_arts_thorin_character_illustration

Character Design: Thorin Oakenshield

 

Top Ten Articles in Tubik Blog

 

The year melting away has been really fruitful for Tubik Blog: we shared around 100 articles and case studies with our readers and subscribers. Here’s the top ten of them (the extended list of the most popular articles can be found here).

 

Psychology in Design. Principles Helping to Understand Users: the post about general principles of psychology which can help designers know users better and create user-friendly web and mobile interfaces.

 

Best Practices for Website Header Design: the set of insights on the definition, structure, and composition of a website header as a strategic part of the website with a variety of examples and approaches.

 

UI/UX Design Glossary. Navigation Elements: another set of UI/UX Design Glossary, explaining terms in the field of user interface design. Focused on navigation elements: buttons, menus, switches, icons etc.

 

Color Theory: Brief Guide For Designers: the article concentrated on the basics of color theory and color combinations in design. Learn more about the color wheel, RGB, CMYK and models of color harmony.

 

Color in Design: Influence on Users’ Actions: considerations devoted to the issue of using various colors in user interfaces and branding design, associations and the influence of color choice on user behavior.

 

Mobile UI Design: 15 Basic Types of Screens: mobile applications evolve with user’s needs offering new functionality, still, there are screens common for many apps and they are the focus of this article.

 

Gestalt Theory for Efficient UX: Principle of Similarity: the article considering Gestalt theory application in interface design: this time it’s focused on similarity principle of effective content grouping in UI.

 

Gestalt Theory for UX Design: Principle of Proximity: the second post in the series devoted to applying Gestalt principles in design of user-friendly web and mobile interfaces, today about the principle of proximity.

 

How Human Memory Works: Tips for UX Designers: insights into the ways human memory works and the factors of its influence on UX design solutions for websites and mobile apps.

 

Information Architecture. Basics for Designers: the article providing insights into the basics of information architecture for designers and setting the link between IA, UX and UI for websites and applications.

 

most popular design articles in tubik blog

 

Top Six Tubik News

 

Upper App Launch

 

At the beginning of 2017, following the successful launch of Toonie Alarm, Tubik team we rolled out another iOS application for everyday use called Upper App. It is a simple and elegant to-do list designed in minimalistic manned and aimed at easy task tracking. The application got itself the App of the Day on Product Hunt and once again allowed us to go through all the process from the initial idea of the product to branding, design, development and marketing of our own product. No doubt, this kind of experience was highly helpful for our work on outsourcing project.

 

upper app UI design case study

 

tubik.arts launch

 

One more big news was establishing tubik.arts department focused on creating CG, characters and environment for various games, book illustrations and complex motion design.

 

tubik_arts_cg_orc_nazmordul_animation

 

Behance Portfolio Reviews

 

In 2017 Tubik hosted Behance Portfolio Reviews events twice in Dnipro, Ukraine. These creative meetups let the local design community get one more platform for communication on professional issues and allowed novice designers to get useful tips and recommendations from experts.

 

behance portfolio reviews

behance portfolio reviews dnipro

behance portfolio reviews dnipro tubik

 

Full Cycle for Product Creation

 

This year our team has grown to add not only the designers but also web and mobile developers, therefore the range of services which we can offer to our clients has broadened significantly. At the moment we are able to accomplish the creation of any digital product from scratch. Research, branding, graphic design, UI/UX design, motion design and video production, iOS, front-end and back-end development as well as copywriting for slogans and brand names — in 2017 we successfully dealt with all those positions and even more custom ones.

 

Tubik Academy

 

The year has also been marked with the first group of UI/UX designers who have completed the intensive course of UI/UX design in Tubik Academy — and two of them are already going through their internship in the studio.

 

tubik academy ui ux designers

 

Problem-Solving Web Design — Free Ebook

 

In 2017 we shared one more issue of Tubik Magazine: a free ebook Problem-Solving Web Design devoted to design of user-friendly and goal-oriented websites and landing pages.

 

problem solving web design free book

 

Bright moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page. And as usual, we also didn’t miss the chance to share our ideas, news, tips and experience via Medium and Quora at which we got the positions of top writers in the domains devoted to design. Also, we kept everyone updated with studio news via TwitterFacebookTumblr and Flipboard.

 

new year tubik studio team

 

Even this quite concise review makes obvious that 2017 was full of everything for us. And we are ready for new challenges, perspectives and projects which will definitely open many new unforgettable creative pages.

Warm greetings for everyone from the Tubik team, we wish you the amazing and successful year 2018!


Welcome to read the Review of Popular Interface Design Trends in 2017

logo_design_tips_tubik_blog

Shape and Color in Logo Design. Practical Cases.

Paul Rand said that design is the silent ambassador of your brand. Continuing his thought we can add that a logo design is a heart of a brand identity which presents a personality of a company or a product. If you want to set the connection with the target audience and tell the story of a brand, starting with a logo would be a good choice.

 

Today we describe visual components of a logo which are vital for compelling visual perception and also show practical cases of applying psychology of color and shapes in design for branding.

 

Psychology in logo design

 

To make an effective logo, designers have to consider the tiniest components which it is built of and think about the influence they will have on potential clients. The science studying the impact of various factors on human’s mind and behavior is known as psychology. Knowledge of psychological principles helps to understand human aspirations and motivations which means designers can predict the possible users’ reactions to the certain solutions.

 

People may not notice but mind often reacts to visual objects affecting the emotions and behavior. In our previous articles, we described two psychology branches which study the impact of shapes and colors on people’s visual perception. In short, each color and shape tends to be perceived with its own meaning, so when we look at a visual object our brain receives the certain message and reacts according to what we see.

 

Comprehending the role of the color and shape psychology, design expert can control the meaning a logo contributes. Each component chosen thoughtfully helps people read the meaning of the logo right.

 

logo design

 

Color in logo design

 

The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. That’s why the success of the brand strategy depends largely upon the colors chosen for the logo design.

 

Colors are a vital factor for not only the visual appearance of products but also brand recognition. In the article Color in Design: Influence on Users’ Actions we described the meanings of common colors in branding and here is a short sum up.

 

Red. Confidence, youth, and power.
Orange. Friendly, warm, and energetic.
Yellow. Happiness, optimism, and warmth.
Green. Peace, growth, and health.
Blue. Trust, security, and stability.
Purple. Luxurious, creative, and wise.
Black. Reliable, sophisticated, and experienced.
White. Simple, calm, and clean.

 

The color choice shouldn’t be based on the common meaning alone. Visual perception is quite individual for everyone so the color effects may be different because of the factors such as age, culture, and gender. For example, children like yellow color pretty much, but as we become adults it usually seems less attractive. Moreover, there are many cultural differences in color definition. To make sure the color will work effectively for a brand strategy, it’s vital to consider the preferences of the target audience.

 

andre logo design by tubik

 

Shape in logo design

 

As we already mentioned in the article devoted to the psychology of shapes, all the visual objects can be analyzed in terms of shape. People may not always notice what figures and shapes surround them still they have a great impact on our consciousness and behavior. Many years of research and tests have helped professionals to define what meaning each shape typically brings and how it can influence human perception. Let’s take a closer look.

 

Squares and rectangles meanings: discipline, strength, courage, security, reliability.
Triangles meanings: excitement, risk, danger, balance, stability.
Circles, ovals, and ellipses meanings: eternity, female, universe, magic, mystery
Spirals meanings: growth, creativity, calmness, intelligence
Natural shapes meanings: originality, organic, balance, refreshment
Abstract shapes meanings: the duality of meaning, uniqueness, elaborate.

 

Creating a logo, designers should work on the shapes applied as well as pay attention to the typeface chosen for the wordmark.

 

passfold-logo-tubikstudio

 

Practical cases

 

Tubik designers have great experience in creating compelling brand signs. Let’s see the logo design examples applying color and shape psychology.

 

LunnScape

 

The logo was created for LunnScape company specializing in landscaping services to commercial properties like office and courtyard spaces, parks etc. A brand sign is presented with a mascot of a dragonfly. LunnScape company is based in Florida and the creature is a perfect representative of a regional fauna. Moreover, a logo with an insect helps customers understand the nature of the services.

 

The dragonfly illustration has a simplified style so its wings look like flower leaves. The logo consists of several colors. Turquoise circle with a dragonfly gives a solid stamp effect and brings calming feelings. Also, the color is associated with refreshment and energy, so it creates the right mood around the brand. The wings of the dragonfly combine yellow and pink colors. Together these colors symbolize joy, warmth and a bit of sensitivity making a dragonfly look playful. The wordmark typography complements and also unveils the core brand services of the company due to the thin and elegant font.

 

lunnscape_logo_final-version

 

Andre

 

One more identity design project connected to the theme of landscape and nature was logo for Andre Landscape. The final choice was made on the combination mark presenting the mascot in clear simple forms and elegant lettering echoing the rounded shapes. Symbol resulted in a new shape combining the visual concept of a bird and of a leaf in one image based on the circle. The rounded shape is easily associated with universe and eternity, quite positive stuff to transfer the idea of professional land care. Color combination is also connected with the nature of the offered services with vibes of green and natural background.

andre logo design by Tubik

 

Binned

 

This is the brand sign for trash bin cleaning service called Binned. A logo is presented with a lettermark featuring capital B as it associates with the brand name. The lines in the letter take the shape of waves evoking a sense of water and cleanliness. The logo is followed by the wordmark of the entire brand name. The chosen font is simple yet bold which makes it look neat and reflecting the mood of a brand.

 

The color palette includes tints of blue and green which give string associations of cleanness and refreshment. In addition, the blue color often represents some corporate images since the blue is the color of trust. It usually shows reliability, may give users calming feelings.

 

binned logo animation design

 

Reborn

 

The logo presents a self-service Chinese restaurant Reborn. The major philosophy of a brand is bringing in the modern way of automated ordering food in the restaurant industry and setting the link between traditions of healthy food and innovations. To transfer all these ideas and create the effective brand image, the red silk ribbon was featured as the initial letter in the wordmark.

 

The ribbon creates spiral shapes which bring the feeling of creativity and innovation. Moreover, it features the slight movement showing the restaurant as a modern business which moves with times.

 

Red is a traditional Chinese color so a logo lets customers understand the specifics of cuisine served at the restaurant. Also, red color demonstrates the confidence and youth of the service as well as contributes to better brand awareness due to its brightness.

brand identity design case study

 

Motion

 

This is a logo concept for modern dance studio called Motion. The company participates in multiple directions of the dancing sphere like organizing classes and workshops, events and tournaments.

 

The brand sign has a shape of a circle. Originally, this shape symbolizes eternity since it has no beginning or end. This way, a logo highlights the diversity of company services. Moreover, one of the common meanings for circles is motion so it perfectly reflects the brand’s name.

 

This logo concept provides the variety of color performance showing the flexibility of general brand strategy. The presented options include yellow, green, and blue colors. Yellow is a principal color which brings the warm and playful emotions. Green and blue colors symbolize balance and harmony.

 

motion_tubik_studio_icon_logo_branding

 

OrBeat

 

Another round logo was designed for OrBeat, the online platform for sharing digitized sound material like music, speech and specific sound sets on the Internet. In addition, the service has the functionality of a social network so the shape sets the association with the circle of friends. Users can create their unique playlists, leave comments, listen to the tracks online and share their sound collection with friends from other social networks.

 

So, setting the connection with the themes of music adding dynamics to everyday life, communication and expressing the metaphor of orbit, the logo is based on rounded shapes and features the variety of shades associated with diverse content on the platform.

 

Logo design by Tubik

 

Whizzly

 

The logo is made for the social network Whizzly showcasing talents and sharing creative projects. The mascot is a monkey which looks quite pretentious because of the sunglasses. The choice of the character can be explained by the common associations connected with this animal. Monkeys are energetic funny representatives of fauna and they know how to draw attention. Rounded forms make the image dynamic and friendly.

 

As the brand’s target audience are talented people, the monkey displays their eccentricity. The colors include the gradient of violet and blue. They are easily associated with the lights which are often used on the stage. Also, we can see the reflection of the brand’s name in the sunglasses. It ensures better brand recognition.

 

whizzly_mascot_logo_design_tubik

 

fOxygenic

 

Here’s the concept applying branding symbol for an app icon. It features a logo for fOxygenic, a mobile application which represents a social network for people loving the active life, open-air sports and events. As you see, the mascot is based on round shape. It may set different levels of association by the resemblance with “O” letter for the word «oxygen» applied in the brand name, motion and active life and the circle of friends as well as in OrBeat logo. Bright warm orange color reflects not only the traditional vision of a fox coloring but also the idea of dynamic life, joy, and great mood. Moreover, the color has high visibility potential which strengthens the icon’s recognizability.

 

logo design tubik studio

 

SwitchUp

 

This is a branding sign for a music app SwitchUp with broad functionality on generating and sharing playlists. A logo features a wordmark and the form of a play button. This shape helps to set the link with the nature of the application. In addition, the keywords behind its branding are “bright”, “dynamic”, “fun” and “positive”, the reason why the triangle is an accurate choice. The thing is that triangle is an energetic and dynamic shape which is associated with motion and direction. The color palette supplements the brand image bringing the feeling of energy and freshness.

logo design music app tubik studio

 

Meditrack

 

The logo concept was designed for a medical app Meditrack used by doctors for planning and organizing the flow of appointments as well as tracking and saving health data for patients. It features the stylized track sign where straight lines go up and down similar to heart rating graph. The combination of blue, light blue and red colors is often associated with health care industry so creates a professional image for a brand.

meditrack_tubik_studio_icon_logo

 

The success of branding highly relates to a logo design. Considering the influence of colors and shape on human psychology, you can create compelling brand signs which set the connection with the target audience by transferring accurate messages and emotions.

 

animated logo design

 

Recommended reading

 

Knock Design Into Shape. Psychology of Shapes.

Color in Design: Influence on Users’ Actions.

Don’t Stay Still. Why Brand Needs an Animated Logo.

Psychology in Design. Principles Helping to Understand Users.

Logo Design: Creative Stages.

6 Creative Stages of Branding Design: Step-by-Step Guide.


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

Welcome to see designs by Tubik on Dribbble and Behance

graphic design stickers tubik

State of the Art: 15 Creative Graphic Design Concepts.

Famous graphic designer Stefan Sagmeister said “You can have an art experience in front of a Rembrandt… or in front of a piece of graphic design.” It’s hard to disagree with the expression since there are so many beautiful breathtaking graphic design concepts today. Various modern tools allow designers to create gorgeous graphic concepts that could easily be called artworks. However, graphic design isn’t purely artistic field. In one of our previous articles, we’ve defined graphic design as the sphere of human activity that lies at the crossroads of several directions, first of all, visual arts, communication, and psychology. By means of graphic (visual) elements such as images, types and fonts, pictograms, shapes and sizes, colors and shades, lines and curves graphic designers do the job of communication. Every visual element transfers the message, so it becomes functional.

 

Graphic design broadly covers all spheres of human life which deal with visual communication, from books and posters to sophisticated mobile applications or 3D animation. Today’s post presents 15 creative concepts by Tubik which we gathered to show you the diversity of graphic design.

 

Character concepts

 

tubikstudio graphic design

Girl and Flowers

 

The first concept introducing this set is an illustration of a girl with flowers. The work is a representation of flat design which is seen in the simplicity of shapes and visual elements. Despite the minimalist style the illustration accurately transfers bright and warm feeling of the springtime. The designer applied the color palette which shows a little girl’s sensitivity and purity. And, the final accent was made via shadows giving the flat picture more vivid look.

 

tubik_illustration_under_water

Underwater Explorer

 

Next concept is a flat design illustration presenting a character of underwater explorer. The designer applied various techniques combining classic and new approaches to flat design. Along with minimalistic shapes, there are noise textures across the illustration which are unusual for the direction. The dark background and bright elements, including the character’s costume, create deep contrast and enhance visual perception. One more detail complementing the illustration is the light lines which are barely seen still they make the picture complete.

 

Character design is used for different video and mobile games, the reason why designers often need to create more than one character for the particular project. The trick is that all the characters should be made in one original style so that they would be recognizable for gamers. Let’s look at the Wild West set of characters by Tubik.

 

illustration by tubikstudio

Sheriff Foxx

 

The first character created for this set was a sheriff named Jimmy Foxx. The designer has chosen the unique style of drawing putting accents to the details which transfer character traits. Creating the sheriff personality, the designer aimed at illustrating fearless and fair man with the sense of humor. The prominent mustache makes Jimmy look serious still there might be the smile hidden behind it. The main attribute is the big hat with the star signifying sheriff’s power.

 

character illustration tubik studio

Indian Dreamcatcher

 

Good stories require the presence of culture spirit, so the native American character was an obvious choice continuing this set. The designer sticks to the style applied to the first character. The character wears typical attributes such as a feather and painted mask. His eyes are closed which makes a character look wise. The circle around the character, which by the way is shown in the first illustration too, is decorated with a skull of a bird. Such an item usually serves for magical rituals so the character seems mysterious.

 

character design illustration tubik

Wild West Bandit

 

It’s hard to imagine a wild west story without a bandit terrorizing the citizens. The designer presents us a bad guy through the well-thought details. The bandit has a massive chin with a dimple and the dark straight hair. The cigarette and the golden tooth give him a brutal look. The hat and scarf are embellished with the skull signs to show that he’s a dangerous man.

 

City illustrations

 

There are many paintings and drawings illustrating the beautiful sights of various cities. Today designers have an opportunity to show cities from the different perspective — as digital artworks. Here is the set of city illustrations by Tubik.

 

city illustration digital art tubik

Hallo Lofoten

 

The first illustration presents Norwegian city Lofoten. Beautiful colors, nature, bright buildings and amazing mountains of this city have inspired the designer to create the illustration. The unique idea of this set of concepts is that they are framed like post stamps. The illustration is another example of the flat design which is created with simple geometric shapes. Lines on the water presents the reflection of the building so it feels more natural. Bright colors and various tones transfer the atmosphere of the city.

 

city illustration digital art tubik

Buongiorno Roma

 

Next city chosen for this set was Rome. The designer applies the complementary scheme of colors mixing blue and yellow, which makes the illustration full of contrasts similar the bright Italian city. Famous buildings are formed with simple shapes so the viewer can easily recognize the city. The designer creates lights and shadows on the landmark via different tones sticking to the minimalistic style.

 

guten tag bavaria illustration tubik

Guten Tag Bavaria

 

The last concept of the series illustrates Bavaria. The Neuschwanstein Castle, the nineteenth-century palace known all over the world, is presented as a magical place full of spring vibes. The mild color scheme is pleasant for human eyes enhancing visual perception.

 

Posters

 

Nowadays, graphic designers experiment a lot with poster creation following modern design directions such as flat design and applying various techniques. Digital artists design original posters which accurately bring people into the atmosphere of the films, cartoons, and other performances or events.

 

flat illustration

Star Wars Rouge One Illustration

 

No matter if you’re a fan of Star Wars or not, you obviously know what they are. This graphic design concept is devoted to the recent episode of Star Wars (Rogue One) which inspired the designer to create the original poster. The illustration presents main characters of the movie in minimalistic style. They are shown as focused, strong and brave heroes ready to fight for the better. Dark blue background creates the atmosphere of the deep space. Small but bright details such as characters’ clothes make this poster contrasting and interesting for the viewers.

 

pikachu poster tubik studio design

Pikachu Poster

 

Many people will associate last summer with the hype about mobile game Go Pokemon. Designers couldn’t stay unaffected so there are various design concepts devoted to the topic. Here is graphic design poster featuring one of the favorite pokemons Pikachu. The character’s body isn’t highlighted with lines still people can recognize the pokemon’s silhouette due to face parts and the yellow color of the background. Unusual presentation of the character is complemented with white lighting which is the special power of the little creature. Pokemon’s shadow is performed via repeating a word, “Pika” to be more specific. Such a creative idea will definitely strike a fan right in the heart.

 

poster design tubik studio

Suicide Squad Poster

 

Continuing the topic of mainstream, here is the poster for Suicide Squad movie. One of the brightest and deepest characters of a film is Joker who’s well-known for all DC comics fans. Creating this poster, the designer tried to catch and transfer the character’s features by means of digital graphics. The poster is dark transferring character’s mood still with the original lettering which presents laughing. Moreover, if you take a closer look at the poster, you’ll find small Joker’s signs hidden everywhere.

 

Covers

 

The cover illustration is a substantive art direction which deserves great respect. Graphic designers usually work long and hard to create one single composition that will do its function best. Let’s look at the cover designs by Tubik.

 

tubik studio illustration graphic design

Muscles Magazine

 

The first example presents a cover page for the magazine devoted to sports and active life. The issue shown here is about relations of sport and business. The idea behind the central illustration featuring the athlete was to immediately introduce the topic and at the same time add some fun and style. Graphic elements fully replace the photos creating the original look for the magazine.

 

tubik_illustration_jazz_tales_book

Tales of the Jazz

 

Many graphic designers secretly dream to create the cover design for their favorite book. Here is an interpretation of cover page for a collection of short stories by F. Scott Fitzgerald called Tales of the Jazz Age. The girl on the cover looks like a typical lady of the jazz age setting the right mood for the viewers. The mild color scheme and noise texture are nice to the visual perception.

 

Stickers

 

Today stickers are everywhere, printed and digital, especially popular in mobile apps. Tubik designers constantly work on original sticker packs for apps, websites and promotional campaigns.

 

healthy_stickers_shot_tubik_studio

 

stickers_tubik_studio_digital_art

Healthy Stickers

 

This design concept presents stickers of vegetables and fruit. They are meant to stimulate everyone to follow the healthy lifestyle and add energy to people as well. Bright colors make vegetables and fruit look juicy and yummy so it’s hard to resist the desire of tasting one of them in real life which means the stimulation works well. This flat picture is good for both printed and digital use.

 

Animated stickers mood messenger design tubik

Animated Stickers for Mood Messenger

 

Today stickers are popular in various messengers. This concept shows stickers designed for Mood Messenger. Each sticker presents a different emotion so that the users could chat quickly showing their friends how they feel. Detailed faces on this concepts are able to transfer any emotion clearly. Attractive illustrations can make applications interesting and fun for users setting great benefits for the owners.

 

Reviewing creative graphic design artworks is always inspiring. These fifteen concepts are only a few examples but there are much more of them waiting for you to look. Stay tuned and get inspired!


Welcome to see the designs by Tubik Studio on Dribbble and Behance

opera video design case study tubik

Case Study: Opera. Year-in-Review Video Design.

A picture is able to tell a lot instantly. It can inform, call associations,  set the mood and atmosphere, give the insights and wake up curiosity, get people inspired or engage further considerations and do that all in a beautiful and attractive manner. Still, to spark all that amazing potential, the picture needs to be created by a professional, who knows how to do that magic via talent, skills and experience.

 

Having the whole set of such professionals on-board, we finished the last year with an interesting and challenging project. In December Tubik team got the chance of creative collaboration with Opera to work on the bright and catchy year-in-review video. You could already have seen the video and design process presentation in Tubik Portfolio, and today we invite our readers to take a deeper look at this design story in a new case study.

 

opera video graphic design case study tubik

 

Task

 

Design of a short animated video «Opera 2016: Year in Review» within a tight timeline.

 

Process

 

Introducing a customer, Opera is a web browser developed by Opera Software. According to Opera Software, it had more than 350 million users worldwide in the 4th quarter 2014. Total Opera mobile users reached 291 million in June 2015. According to SlashGeek, Opera has originated features later adopted by other web browsers, including Speed Dial, pop-up blocking, browser sessions, private browsing, and tabbed browsing.

 

The initial stage of project discussion with the customer showed that they needed an animated video accomplished in an attractive manner immediately setting the positive and cheerful mood. The video had to present the essential milestones of the year when Opera, one of the actively used web browsers around the world, presented fresh innovative features to its numerous users. Opera team enjoyed bright colors and lifestyle object compositions and the approach they wished to use for the video was to devote each composition to a specific month when a particular feature was delivered. It was agreed that the visual performance should feature the 3D flat style, minimalistic animations and lush colors — everything that Tubik team is strong at.

 

Meanwhile, the early stage of discussions on creative process also established the biggest challenge of the project: the timeline was extremely short. The team of designers had only 5 days for design and animation of 8 complex flat illustrations full of details, transforming the company message, looking bright and fresh and keeping visual consistency to look natural in one video. This was the type of project that proved the great power of teamwork when all the participants of the creative process worked like a clock.

 

Illustrations

 

The first creative stage of the project had to result in a set of flat illustrations presenting the prominent innovations of the year: Ad Blocker, Battery Saver, Video Pop Out, Personal News, VPN, Faster Startup, Currency Converter. All the illustrations had to present the interiors decorated with bright details close and clear for every user, and also set the atmosphere of the particular season and the visual element showing the presented browser feature. In this way, combined in the video and replacing each other, the illustrations would support the feeling of the year flowing. Here is the final set presented to motion designers who had to do further work on breathing life into the pictures.

 

opera video animation case study

 

This is the intro illustration opening the video, setting the cheerful mood and giving the strong link with the brand.

 

opera video animation case study

 

This illustration presents the feature of native Ad-Blocker, which Opera presented in spring, so the color palette corresponds to the shades traditionally associated with this time of the year.

 

opera video animation case study

 

The next illustration presents the feature of Battery Saver, which got active in late spring: the season is supported with general bright and sunny color palette, flowers in the vase and green trees outside the window.

 

opera video animation case study

 

Another illustration was designed to present the feature of Video Pop Out, enabling users to watch videos while browsing. Big window shows the green plants and blue sky and the diagonal light shadows let us guess the shiny sun, the table sets the scene with a couple of books and a glass of lemonade, and even the video on the screen shows the sea shore and people having fun — everything allows viewers to understand easily that this user-friendly innovation was added in summer.

 

opera video animation case study

 

The next artwork is associated with the feature of a personal newsreader. A bit darker sky, a bit longer shadows, some clouds, the cup of tea and red-ripe apples on the tree say: when users got the ability to read the news right from their browser, the summer had almost finished. 

 

opera video animation case study

 

The feature of built-in VPN enhancing the privacy of browsing was set up in autumn, which us immediately clear from the view with yellow trees outside, while the passport seen on the table sets the strong connection with the matter of privacy.

 

opera video animation case study

 

Next illustration featured the faster speed of start-up loading, so the key visual element of the composition is the speedometer shown on the computer screen. It immediately sets association with the issue of speed while the color palette chosen for this artwork enables users to feel the vibes of deep autumn.

 

opera video animation case study

 

The last innovation to present was the built-in currency converter enabling users to shop online faster and easier. Some details in the picture, like the calculator, the decorative recognizable model of a shop placed on the shelf, the delivery truck behind the window as well as the layout on the screen set the atmosphere of shopping, while the outside view and the gifts let us know it’s the busy time of buying Christmas presents. 

 

Having a full set of illustrations approved by the client, motion designers came into play and presented the variants of transitions, while graphic designers worked on the fonts for the short descriptions to be used in the video. The fonts had to look highly readable and correspond to the general stylistic concept.

 

opera video animation case study

The sample of animated transitions between the slides livened up with the natural movements of the details close to motion in real life.

 

opera video animation case study

The sample of the fonts used on the slide in combination with the illustration

 

Final video

 

Five days of hard and coordinated work of the design team resulted in the final video of about 40 seconds showing the full set of key innovations Opera presented in 2016.

 

 

In one of the previous articles, devoted to design processes and work styles, we mentioned: the studio experience lets us believe that teamwork organized wisely and thoughtfully doesn’t take away designers’ individual space or freedom — vice versa, it adds to it the power of solid support and prospective ways for bigger and more complex, therefore more interesting and challenging projects and tasks. The project for Opera became one of the convincing proofs.

 

opera video design case study tubik

 

In their testimonial to Tubik team, Opera Software team mentioned: «The loose storyboard and tight timeline we presented you with were undoubtedly a challenge but everyone is very happy with how well your team delivered on it!» No doubt, this project became not only a great and absorbing challenge but also the case of fruitful collaboration and bright finale for the extremely busy design year.


Welcome to check out the presentation of Opera project in Tubik Portfolio

Welcome to see the designs by Tubik Studio on Dribbble and Behance