Tag Archives: typography

ted talks graphic design typography books

TED-talks: Typography, Books, Graphic Design.

It’s not a secret how diverse and influential is graphic design nowadays. It covers multiple purposes and serves great deal of diverse spheres of human life and activity. Today it is enhanced and strengthened by broad opportunities of modern technologies, but new generations of the best designers keep following the roots and getting inspired from the experts.

 

One of the ways to inspiration we find productive and highly professional here in Tubik Studio is TED videos. Perhaps you remember the collections we have already suggested watching: 20 TED talks for designers about diverse design issues and 10 TED-talks for creatives from different spheres. Today we’re going to recommend you a new set of professional and informative TED and TEDx-talks that we find interesting, useful and helpful. 

 

Here is the collection of 10 TED-talks all with the descriptions given on the TED website or YouTube presentations. This time they are focused on the issues of graphic design. Most of them are already classic, sometimes even could be called legendary, and that makes them even more precious as they have been successfully checked with the time and practice. The ability to analyze take the best from the past usually broadens the creative horizons and becomes a solid foundation from innovative thinking. So, enjoy watching and feel the energy of great masters!

 

My life in typefaces — Matthew Carter

 

Pick up a book, magazine or screen, and more than likely you’ll come across some typography designed by Matthew Carter. In this charming talk, the man behind typefaces such as Verdana, Georgia and Bell Centennial (designed just for phone books — remember them?), takes us on a spin through a career focused on the very last pixel of each letter of a font.

 

 

Intricate beauty by design — Marian Bantjes

 

In graphic design, Marian Bantjes says, throwing your individuality into a project is heresy. She explains how she built her career doing just that, bringing her signature delicate illustrations to storefronts, valentines and even genetic diagrams.

 

 

The art of first impressions — in design and life — Chip Kidd

 

Book designer Chip Kidd knows all too well how often we judge things by first appearances. In this hilarious, fast-paced talk, he explains the two techniques designers use to communicate instantly — clarity and mystery — and when, why and how they work. He celebrates beautiful, useful pieces of design, skewers less successful work, and shares the thinking behind some of his own iconic book covers.

 

 

Designing books is no laughing matter. OK, it is. — Chip Kidd

 

Chip Kidd doesn’t judge books by their cover, he creates covers that embody the book — and he does it with a wicked sense of humor. In one of the funniest talks from TED2012, he shows the art and deep thought of his cover designs. This talk is from The Design Studio session at TED2012, guest-curated by Chee Pearlman and David Rockwell.

 

 

Can design save newspapers? — Jacek Utko

 

Jacek Utko is an extraordinary Polish newspaper designer whose redesigns for papers in Eastern Europe not only win awards, but increase circulation by up to 100%. Can good design save the newspaper? It just might.

 

 

Why write? Penmanship for the 21st Century — Jake Weidmann

 

What is the future of writing in the digital age, and why does it matter? In this surprising talk, Master Penman Jake Weidmann explores the connections between the pen and how we learn, think, and carry our cultural heritage at a time when the very act of writing is being dropped from school curricula across the country.

 

Jake Weidmann became the youngest person to receive his Master Penman certificate in July 2011. He works across several mediums including drawing in pencil and charcoal; pen and ink; painting in acrylic, airbrush, oil and gouache; sculpting in wood, bone, antler and clay; and is versed in numerous forms of calligraphy. He is best known for the integration of flourishing and hand- lettering in his art. Jake also designs his own hand-made pens. He, like his pens, travels the globe, reintroducing this Old World art form and cultivating its relevance in the world of today, of tomorrow, and forevermore.

 

 

The beauty of data visualization — David McCandless

 

David McCandless turns complex data sets (like worldwide military spending, media buzz, Facebook status updates) into beautiful, simple diagrams that tease out unseen patterns and connections. Good design, he suggests, is the best way to navigate information glut — and it may just change the way we see the world.

 

 

Wake up & smell the fonts — Sarah Hyndman

 

Sarah shares with us a story of type and invites us to consider our emotional response to the printed word. Each font/typeface has a personality that influences our interpretation of the words we read by evoking our emotions and setting the scene. We all understand this instinctively but it happens on a subconscious level. Sarah shows us that conscious awareness of the emotional life of fonts can be entertaining and ultimately give us more control over the decisions we make.

 

Designer Sarah Hyndman explores typography as we experience it in our every day lives under the banner of Type Tasting. Since the launch in 2013 she’s curated an exhibition at the V&A for the London Design Festival, been interviewed on Radio 4’s Today, taken Type Tasting to South by Southwest in Austin, Texas and has been commissioned to write a book.

 

Sarah has been a graphic designer for over 15 years, working in agencies before setting up design company With Relish. After studying an MA in Typo/Graphics at the London College of Communication she was invited back as a guest tutor.

 

 

Typography — now you see it — Shelley Gruendler

 

Dr Shelley Gruendler is a typographer, designer, and educator who teaches, lectures, and publishes internationally on typography and design. When she is not traveling the world as the founding director of Type Camp International, she is proud to live in the Canadian Typographic Archipelago.

 

 

The art of kinetic typography — Dan Boyarski

 

Dan Boyarski is professor and former head of the School of Design at Carnegie Mellon University, where he has been for thirty-two years. His interests lie in visualizing complex information, interface and interaction design, and how word, image, sound, and movement may be combined for effective communication. In the spring of 1999, the Design Management Institute awarded Dan the Muriel Cooper Prize for «outstanding achievement in advancing design, technology, and communications in the digital environment.»

 

 

Check out the updates here, new collections of wise creative thoughts are already around the corner!

tubikstudio website design ui

Tubik Monthly Review. May.

The summer has come full of bright colors and moments of life. Traditionally, we start it reviewing and analysing what happened during the last month. So, let’s look together what May has brought to studio life.

 

The month brought out new shots published on Dribbble by studio designers: there were presented diverse design concepts of websites and landing pages, mobile applications, interface animation and character animation, lettering, logo and branding design. Follow the links if you are interested to see all the details full-size.

 

tubik studio landing page toys

Henderson — Handmade Toys by Vladyslav Taran

 

contact list design concept tubik studio

Contact List Concept by Eugene Cameel

 

tubik studio ui design dark

Dark Side of UI Design by Marina Yalanska

 

online magazine design tubik studio

Daily Bugle Online Magazine by Dima Panchenko

 

tubik studio ice ui website

Tubik Studio | Ice by Ernest Asanov

 

tubikstudio_ui_swiftybeaver

SwiftyBeaver. UI Design for Mac App by Marina Yalanska

 

landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko

 

tubik studio logo design case study

Case Study: SwiftyBeaver Logo by Marina Yalanska

 

lettering tubik studio design

Rapture Lettering by Denys Boldyriev

 

tubik studio application recipes and cooking

GIF Animation for Recipes and Cooking by Sergey Valiukh

 

monster intro animation tubik studio

Epic Monster Intro Animation by Kirill

 

Contact List Concept Scrolls Tubik

Contact List Concept Scrolls by Eugene Cameel

 

We have published some new articles about general and specific design issues as well as practical case studies here in Tubik Blog. In case you missed any of them, here’s the list of topics considered in May:

 

  • Dark Side of UI. Benefits of Dark Background. The article continues the topic of effective color choices in user interface design. This time it is devoted to the benefits and pitfalls of dark background in UI design solutions for websites and mobile applications.
  • SwiftyBeaver. UX & UI Design for a Mac Application. Fresh case study on UX and UI design process. Detailed description of creating user interface for SwiftyBeaver, a Mac application presenting the first integrated logging platform for Apple’s Swift programming language.
  • Case Study: SwiftyBeaver. Designing Logo. New case study on logo design continuing the story of comprehensive design process for SwiftyBeaver, the integrated logging platform for Apple’s Swift programming language. Packed with graphics demonstrating various creative stages.
  • Landing Page. Direct Flight to High Conversion. The article is devoted to the basics of landing pages design. Considers the issues of conversion, CTA, USP, copy, visuals and other elements of efficient landing. Packed with examples by studio designers and recommended reading.

 

swiftybeaver article tubik studio

 

This month we also actively shared our ideas and experience answering questions about design issues on Quora. Here are the most popular ones which got most readers’ attention in May and some of them got featured in Quora Digest:

 

Why are illustrations important for UX design?

— Why hasn’t Facebook updated their UI to a more modern design?

What is the difference between UI and wireframe?

— In website design, what are the pros and cons of dark text over light background vs light text over dark background, and is one better than the other?

 

Tubik studio on Quora

May was full of unforgettable moments of brainstorming, collaboration, creativity and friendship which we, as usual, actively shared with our followers in studio Instagram page.

 

tubik studio designers instagram

 

Tubik studio design team

 

Getting closer to global design community and all those who have keen  interest in this field, we shared our ideas and experience via Medium and kept everyone updated with studio news via Twitter, Tumblr and Flipboard.

 

So, welcome to join us wherever it’s convenient for you. Bright and positive summer to everyone, we are ready for a new month, new projects, ideas and meetings, fresh design concepts and wise tips from experts. Stay tuned!


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

SwiftyBeaver ui by Tubik studio case study

Landing Page. Direct Flight to High Conversion.

Today we would like to discuss the topic which goes far broader than pure design issues. It lies on the crossroads of design, marketing, user research, psychology and other spheres dealing with people, their behavior and solving their problems. Today we are talking about landing pages. Let’s think over the most popular questions often asked about landing page design.

 

What is landing page?

 

Landing page in its basic wide meaning is the term used for analytics to describe any page where the user started his or her journey around your site, in other words, where a user lands on the website. However, today the other, more specific meaning is used much more often to define a landing page. Behind this term, people understand the special web page created for presentation of the specific product, service, features or options so that the visitor could get necessary information quickly and easily not being distracted.

 

That is why the analysts say a landing page is in most cases much more efficient than home page. Home page can have too many options and getting through all of them to find the particular product the user can get distracted from making the decision, lose interest or even get annoyed.

 

landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko

 

What is conversion and why is it important?

 

Talking about the sphere of design for businesses and products, especially in terms of their marketing and promotion, the word conversion is perhaps the most popular and widely used. In its most general definition, conversion means transformation, and depending on the field this words is applied for, it will be used for different objects.

 

Initially in terms of e-commerce, where landing pages have perhaps the widest field of application, conversion is the index showing how many visitors actually moved to the end of the way they were offered actually buying a product. So, for e-commerce conversion transforms visitors (users) into buyers.

 

However, nowadays landing pages go far beyond e-commerce, therefore understanding of conversion also gets broader. In modern terms of comprehensive and numerous functions and needs, which users are able to fulfill with online resources and digital products, conversion is the rate of cases when visitors did the action they were called to. And that can be not only buying something.

 

In terms of landing page, conversion can be also fixed in case of:

— moving to direct use of a product

— subscription

— transition to the other page

— downloading an app or a file

— providing some information

— answering the question in the survey

— starting free/discounted trial use of a product

— browsing a library

— reading more detailed description of the product or service etc.

 

Tubik studio landing page design

 

Here we can see a concept of a landing page designed by Konst. It presents a website of a rock group. Different blocks of the page provide different calls to action not overloading the user with the information. Therefore, a visitor needs split seconds to scan the page and find the necessary section that enables to see more about the topic of a particular interest.

 

website animation tubik studio

 

Conversion means that your page transforms passive users into active. They don’t just observe the information given to them, but also do the action which is offered by this page. So, conversion is one of the most important indices of the page efficiency which is vital for business. Landing pages are focused on engaging visitors with data performance and stimulating them to make the action which in vast majority of cases is a part of a business plan.

 

Jeff Eisenberg, a successful businessman and head of an advertising agency, gives a brilliant thought about the importance of conversion: «It’s much easier to double your business by doubling your conversion rate than by doubling your traffic». His words are proved by practice of numerous businesses that direct target users to landing pages providing specific data and saving their most precious resource — time.

 

Why is landing page needed?

 

As we mentioned in the case study about designing a landing page, it is easy to answer this question with a little metaphore. Imagine, you are going to visit, let’s say, New York to walk around Manhattan. That is the dream of your life. Finally you find the service which offers to take you to New York City fast and cheap. Great, isn’t it? You pack your bag, you charge your camera, you get up full of admiration as the dream of your life is going to get real. And then you are taken by those amazing people who offered you the realization of your dream to the entrance point of New York City. They leave you there to find Manhattan or any other place you want by youself. How do you like it now? Who knows, perhaps you will be not so happy after exhausting journey around the huge city looking for the place you want. Wouldn’t it feel great to be taken right to the destination, fresh and ready to admire and absorb positive emotions? Wouldn’t you as a customer be happier to reach your goal faster and easier? Sure, yes.

 

That is actually what a landing page does. When a person obtains the information from the outer source about the specific product, feature, information or service and clicks through the link to its provider, sure, he or she doesn’t dream to spend a lot of time looking for desired product or page among all the links and information provided on your homepage. The user wants to «land» directly at that very place which will make possible for him or her to get what they want as fast as possible and getting enough (but not too much) information to support their decision-making process. So, creating a well-thought-out landing page is really vital to strengthen marketing strategy and increase conversion rates.

 

Tubik studio UI animation

 

As a practical example, here is the design concept Museu by Ernest Asanov. It presents a landing page promoting art exhibitions. The idea behind it is to make this sort of promotion aesthetic and unobtrusive for the user as well as highly informative. The balance of minimalism and utility appealing is kept by means of style, color and motion.

 

In the book «Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions» by Tim Ash, Maura Ginty and Rich Page, the authors provide concise set of rules which designers and marketers should remember about creating a digital interactive product. It’s high time to remember them now:

 

The Rules of Web Awareness:
- If the visitor can’t find something easily, it does not exist.
- If you emphasize too many items, all of them lose importance.
- Any delay increases frustration.

 

These thoughts make the solid ground for using landing pages in case when you need to concentrate user’s attention on something important, to make it noticeable and easily available. Landing page is a tool to emphasize one item, to make it quickly found and to reduce delays in cases when target user seeks for specific operations, services or items. As the author of highly informative article «The ultimate guide to designing landing pages that convert» Cameron Chapman mentions, «One of the biggest mistakes a marketer can make is sending traffic from any kind of advertising or PR campaign to their home page. Your home page likely has little direction or direct connection to the campaign sending traffic to it. That can leave visitors confused.»

 

What does a landing page consist of?

 

Actually, landing page is a field for broad creativity and depending on the target audience and objectives behind it, it can be very different. There isn’t a single guide for the fixed scheme and construction of a landing page, but there is a basic thing that should be provided by any landing page. It doesn’t matter what size is the page, how many parts it includes, how many visual elements it uses, the most important thing for any page is that it should provide VALUE.

 

In general, typical landing pages often have:

 

1) General idea of the presented object (product, service, activity etc.) with call-to-action element. Users need to be provided with basic description of the benefits, preferably not too detailed but concise and useful. The aim of this element is to inform the user and provide a clear and noticeable oportunity to actively use this information via call to action element which can be presented with a button, link, contact form, subscrition field etc.

 

2) Testimonials and signs of trust. People usually tend to trust more to what is already used or tried by other people and recommended as worth attention. Therefore, testimonials from clients, considerable numbers of followers in social networks, awards and certificates can have a great impact on conversion rate.

 

3) Description of the main features. This block of information can be used as an additional information supporting description of basic functionality. It supplies a visitor with more details about the product or service, its abilities and technical characteristics, its influence on life and productivity and the like. It certainly makes the landing page longer and requires more attention from users so applying this block should be always thoroughly analyzed.

 

Tubik studio landing page design

 

The example provided above is a concept of landing page accomplished and presented on Dribbble by Sergey Valiukh. As you can see, it involves all the elements mentioned above.  The aim of the page is to promote a shop of organic food. It is composed in several blocks presenting the name of the shop, products, highlighting some important aspects of service, call to actions and testimonials. The designer sets the purpose to make it informative but not overloaded, appealing but not aggressive. To make the experience more attractive and engaging, the process of scrolling the page was livened up with animation and the visual elements were selected to support the general theme and provide immediate visual perception of basic idea.

 

Landing Page Animation Tubik Studio

 

What are important aspects of an efficient landing page?

 
— Target audience analysis
 

No landing page should be designed without a solid basis of research and analysis. Landing page is not an object of pure art, it is a part of promotion and presentation strategy. Designer working on a landing page should keep in mind that any marketing campaign comes from definition of the goals and target audience. So, a landing page should be designed as a virtual bridge connecting target customer with a product or service. For a webpage with high conversion rates, design decisions have to be based on analysis of target audience’s preferences, abilities and psychological characteristics. Design of a landing page that will work for everyone is utopia, standing far from real business achievements and results.

 
— Market and competition analysis
 

One more aspect designer should dedicate time and effort for is analysis of the competition. Earlier we have already considered the connection between UI/UX design and advertising basics in the article «10 advertising basics to apply in web and app design» and one of the points was devoted to the aspect of competition analysis. As far as landing page is actually an active part of marketing process, the analysis of the market is inevitable for good result. Knowing the competitors, you will be able to create original ideas of presentation that will not get lost among other numerous products and services.

 
— Copy
 

Famous guru of advertising David Ogilvy said: «Every word in the copy must count.» This is a simple but unavoidable truth if you deal with a landing page. Decision on the amount of copy used on the page should be the aspect of thorough research and testing as it directly and highly influences conversions.

 

However, it doesn’t mean that every landing page should contain minimal number of words. If it presents a famous company product or service or informs about special offers, sometimes short and concentrated copy is enough to encourage users. However, if a new unknown product or service is presented, it is important to provide users with more information persuading them to follow call to action.

 

Tubik studio landing page ui

 

The provided example shows the design concept of a landing page for a non-profit organization accomplished by Polina. It uses considerable copy blocks and supporting visual elements to set the understanding of the club activity.

 

tubik studio landing page design

 

— Branding elements

 

It is obvious that elements of branding such as a logo, corporate colors and typefaces, slogan and other identity traits should be strongly presented on a landing page. They should provide strong connection of a presented product, service or activity with the company or brand visual and verbal identity. This improves efficiency of general marketing strategy.

 
— Visuals
 

As it was explained previously in the post about visual perception in UI, people in general have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed in images of high level of abstraction. In vast majority of cases people fix and percieve pictorial elements like icons and illustrations faster than words. Great proportion of users are visually-driven creatures by nature. As it is shown in all the examples provided higher, using attractive and informative graphics in landing pages enables users to catch the idea and scan the page much faster and saves their time as well as involves their aesthetic perception in the process.

 
— USP and CTA
 

These are two magic words to make a landing page efficient. USP (Unique Selling Point) is the most important benefit (or set of benefits) people can get with your product. CTA (Call to Action) has to encourage people to realize the conversion. Effective landing page quickly informs a user about unique selling points and provides noticeable, clear and easily-available calls to action. Design solutions and techniques for actionable CTA are worth the separate detailed discussion which we will start here in Tubik Blog soon in our next articles.

 
Short loading time
 

One of the aspects influencing design solutions for landing pages should be reasonable time of page loading. Users do not like to lose their time, and landing page is not a piece of unique something that will be an exception. Don’t make the visitors wait. All the design solutions should be thought-out carefully not to overload the page and prolong its time of loading unnecessarily.

 
— Video Presentation
 

Video presentation can become a very good way to present a product without making users read long copy blocks. It involves all the sences of perception into process. Video can make the page active and interesting. However, there is a pitfall to remember about: video has a considerable impact on page loading time. So, it should be really worth watching to become a design element of an efficient landing page.

 
— Responsive design
 

Several years ago one of the articles on Think with Google provided interesting facts and statistics about the importance of resonsive design for web products. Among them, we can learn that:

  • 61% of users said that if they didn’t find what they were looking for right away on a mobile site, they’d quickly move on to another site
  • 79% of people who don’t like what they find on one site will go back and search for another site
  • 50% of people said that even if they like a business, they will use them less often if the website isn’t mobile-friendly.

 

Perhaps, today those numbers are even higher as more and more people are using mobile technologies on everyday basis. Neglecting this aspect may negatively influence conversion rates.

 
— Absence of distraction
 

As it was mentioned above, landing page should concentrate people’s attention around a particular object. So, it should get rid of any elements that can distract user’s attention and highlight the parts directly influencing the conversion. The less additional links are used, the better. Call to action elements should get the fastest and highest level of attention. In this case user will get the best navigation to the goal.

 

tubikstudio swiftybeaver landing

 

Here is a landing page for SwiftyBeaver native Mac application whose design was accomplished by Ludmila Shevchenko. As we can see it is designed in minimalistic manner and concentrates users’ attention on short copy about the product’s functionality and CTA enabling to request a free beta access. Although the page provides other important links, they are designed in a way not distracting from the main elements providing conversion.

 

Why should you test your landing page?

 

In one of our earlier articles «Basic Grammar for Designers. Must and Mustn’t in Design» as well as in practical case studies we have already mentioned the importance of testing. Experts in usability say and practice proves that it’s impossible to be fully objective about the project you work on, especially if it’s a long-term one. Moreover, designer is not a magician turning into anyone who will use the product to understand the best way of doing anything. Therefore, creating the idea is not enough. You should test it to grab the real practical data and improve your product.

 

Let’s also remember David Ogilvy, who said: «The most important word in the vocabulary of advertising is TEST. Never stop testing, and your advertising will never stop improving.» Testing landing page enables to understand users’ behaviour and fix the solutions that are not effective and user-friendly.

 

Studies based on practical landing pages testing prove that even such a small change as color of a CTA element or placement of logo on the page, let alone the copy of the headline and CTA or length of general informative copy blocks, have a huge impact on conversion rates. Collecting statistics and analytics data and their careful analysis is a good way to effective design solutions providing high conversions and sales.

 

Recommended materials

 

Diverse issues of applying landing pages have been an object of professionals’ attention. In terms of design issues, we could recommend the following articles for those who would like to know more:

 

Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions

 

Landing Page Conversion Course (9 parts)

 

Classic landing page mistakes you’re probably still making

 

The ultimate guide to designing landing pages that convert

 

What Happens When You Analyze 100 Landing Page Examples?

 

10 great landing page designs

 

10 Key Landing Page Features That Draw in Prospects

 

7 Landing Page Call-to-Action Formulas for Higher Conversions

 

Want Conversions? Start with User-Friendly, Useful Landing Pages


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

Tubik Studio UI UX designer

SwiftyBeaver. UX & UI Design for a Mac Application.

Today we would like to present you a new case study on UX and UI design. This time it is a full design path for SwiftyBeaver project.

 

SwiftyBeaver ui by Tubik studio case study

 

Task

 

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

 

Tools

 

Sketch, Adobe Illustrator, Adobe After Effects.

 

Process

 

SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language, also supporting Objective-C. First of all, it is aiming at developers as its basic target audience. The product supports all the devices belonging to Apple device family. User interface designer had to consider basic and advanced needs of people involved in developing process to make it easier, faster and more productive. The assignment to work over design solutions was given to one of Tubik Studio UI/UX designers Ludmila Shevchenko who says that the project was really a memorable task totally different from everything she had accomplished before. To get more detailed description of the product and its functionality, welcome to read its presentation on Medium. And now let’s look a bit closer at some steps of user interface design for the product.

 

Tubik Studio UI UX designer

 

In software engineering logging should be mentioned among key factors of developers’ routine. It is an integral part of development process helping developers to understand flow, logic and state of an application. Log entries inform them about the state of the application as well as the issues of its actual operating. Therefore, user interface for this sort of product needs to support high level of visibility for changes, intuitive navigation and presentation of big data bulks with high level of readability and visual marking of key details. The basic objective was to design a platform which will be easy to use, informative, supporting broad functionality for professionals and seamlessly integrated with any Apple device.

 

At UX design stage the designer worked over layout and navigation design solutions concentrated around three basic issues:
— the way log entries should be shown in the stream, as a general feed or separated by filters
— the method log entries or the part of the stream history will be saved
— the channels of creating code or working over the existing code.

 

SwiftyBeaver UX by Tubik Studio

 

Obviously, this part of design process, based on specific knowledge about the field, needed tons of discussions and tight collaboration with a client, the founder and CEO of SwiftyBeaver Sebastian Kreutzberger. Being a developer himself, he brought out the idea which was deeply user-centered and problem-solving in terms of application for developing process, thus his detailed explanations of the operations were helpful for setting convenient and efficient layout, transitions and navigation of the interface at UX wireframing stage. Thorough analysis of the target audience and unique selling points of the product allowed paying attention to the practical aspects of the product’s functionality.

 

UI design was concentrated around two major challenges: to present data efficiently in a way that will be quite traditional for developers but at the same time to make it a bit more engaging and stylish via non-distracting design elements and animation. Therefore, the design concept was based using dark background common for coding platforms and software as well as bright color accents and gradients to add some style and make important accents noticeable.

 

So, visual presentation was not the only thing about colored elements. Using common color marking recognizable for developers, the platform supported easy navigation and visibility of key elements. Colors marked types of logging entries both in the names of categories and the stream feed. The designer offered four UI concepts on this basis, with different fonts and variants of visual marking entries and errors.

 

SwiftyBeaver UI concepts by Tubik Studio

 

Having agreed upon the general stylistic concept with the customer, the designer moved on in course of layout simplification. The interface of the product is data-driven therefore it has to exclude any sort of distraction and avoid repetitive elements to prevent the interface from being cluttered. So, it was decided to exclude the copy featuring the type of log entry in the fields of messages. Only color marker was left becoming the central element of the connection between log entry and the categories whose names were provided in the upper part of the screen.

 

The provided set of screens featured different concepts for visual presentation of color markers and entries saved by the user. Understanding the importance of navigability for the interface of such high practical value and information intensity, the designer tried to use the maximum of conventions power. The markers using the colors easily decodable by developers were also supported by the star sign as a popular and clear marker of saving the object to favorites or elements needing further attention later.

 

Among all the versions, the final decision was made upon the most minimalistic one. It used colored lines along the message body and small yellow star for saved entries. All the colored elements as well as the background color and shades of hovered elements were carefully tested to get the high level of visibility and pleasant-looking efficient contrast.

 

SwiftyBeaver ui screens tubikstudio

 

One more key element of design that needed deep attention was a choice of fonts. Actually, in design process around any interface the choice of an appropriate font has a great influence on general usability and presentation of the product. However, in such a specific interface as SwiftyBeaver, which is highly concentrated on textual material, the weight of font choice got even bigger. Moreover, the product is not rich in graphics materials such as icons or illustrations, so font becomes a major element of visual design for the product. The designer took her time to test various solutions and select the font which would be both beautiful and easily readable for users.

 

The background was accomplished in different shades of very dark blue which appeared to be more harmonic and smooth in creating pleasant contrast than black color. To make the entries text more readable, the background behind them is changing slightly in shades one by one: it marks the limits of every entry but without unnecessary distraction for the user. Hovered elements were highlighted while the others were dimmed. Slight gradients made the color markers look more stylish.

 

SwiftyBeaver Style Guide by Tubik Studio

 

The aspect of entry length also was an object of deep consideration. There was such a way to go: the stream could show the fields of fixed height and if the entry was longer it could be hidden showing only a part of the message and opening full view on click. However, after research and testing this solution wasn’t found effective. It was decided to show the full text of each entry as it was more user-centered and excluded additional operations and clicks. Therefore, the designer paid deeper attention to the slightest aspects of kerning and spacing of the lines and work with efficient copy placement.

 

SwiftyBeaver UI screens Tubik Studio

 

The work on landing page for the product was also an interesting and challenging design task as far as the product doesn’t offer a lot of visual material for user engagement and attraction. Therefore, the main accent again was made around the colored accents echoing the design solutions of the application interface layout.

 

tubikstudio swiftybeaver landing

 

In addition, Ludmila accomplished graphic design task which resulted in illustrations presenting the features and benefits of the product.

 

SwiftyBeaver Illustration by Tubik Studio

 

Another design task accomplished by Tubik Studio for SwiftyBeaver was work on logo design for the app.

 

swiftybeaver logo design

 

We will tell about it in our next case study, coming very soon. Don’t miss!


Welcome to see designs by Ludmila Shevchenko on Dribbble and Behance

Welcome to see designs by Tubik Studio on Dribbble and Behance

tubik studio graphic designer

Graphic Design. Communication Beyond Words.

Through its history, mankind has invented loads of different ways to communicate and spread the ideas or information. Nowadays, we can see that graphic design confidently takes its place among the most popular methods using diverse visual means of communication. Having answered the question «What is graphic design?» on Quora recently, we also decided to share a bit more extensive version of our thoughts on graphic design definition with readers here in Tubik Blog.

 

Being quite established sphere of artistic activity, graphic design as a phenomenon and an activity has been already described and explained in many books and articles. Being based on broad practical experience in this direction, we would like to add our definition.

 

In wide and general terms, graphic design could be defined as the art whose aim is communication beyond words.

 

The essense of graphic design

 

Graphic design can be described as the sphere of human activity that lies on the crossroads of several directions, first of all, visual arts, communication and psychology. Basically, graphic designers do the job of communication to others by means of graphic (visual) elements such as images of different style and complexity, types and fonts, pictograms, shapes and sizes, colors and shades, lines and curves etc.

 

Graphic designer makes all those elements of visual perception transfer the message, so he makes them functional. Therefore, we could say that graphic designers are artists applying their talents mostly not in pure art, but communicating and purposeful art.

 

Fields of graphic design

 

Nowadays, graphic design is an incredibly broad sphere for application of artistic talents. In particular, it includes:

— illustration

— identity (logo and branding) design

— printed publications design (general design and layout of newspapers, magazines, books etc.)

— icons and pictograms

— typography

— interface graphics and elements

— print advertisements

— big print items such as posters and billboards

— signs

— packaging etc.

Thus, it’s easily seen that modern designers in this sphere have multiple options to apply their talents.

 

Examples

 

On the basis of experience in Tubik Studio, which is a full-fledged design team, we can offer some examples of digital graphic design created here.

 

tubikstudio graphic design

Girl and flowers by Arthur Avakyan (flat illustration featuring characters)

 

tubikstudio space wallpapers

Free Space Wallpapers by Ludmila Shevchenko (graphic design piece setting the theme)

 

monsters tubikstudio illustration

Monsters Stickers Set by  Ildar Alexandrov (flat illustration featuring characters/ mascots)

 

tubik_illustration_under_water

Underwater Explorer by Denys Boldyriev (flat illustration featuring the character and setting the theme)

 

weather_icons tubik studio

Weather Icons Set by Arthur Avakyan (stroke icons to be used as the part of user interfaces)

 

tubik studio motion design

GIF for the Timeline App by Sergey Valiukh (animated illustration providing the feedback in the process of interaction with the interface)

 

tubik studio design UI

Weather Icons Presentation by Valentyn Khenkin (flat illustration setting the theme and featuring location in the interface)

 

passfold logo tubikstudio

PassFold logo by Arthur Avakyan (the process of designing logo as the part of general branding for the mobile application)

 

Tubik Studio Saily Animation

Saily App screen animations (flat animated illustration as an informative and stylistic part of the app interface)

 

tubik studio pull down

GIF for Pull Down — Space Ship by Tamara (animated graphic design element used in the interface and enhancing microinteraction)

 

Even this small set of examples shows how diverse the tasks for a graphic designer can be, from simple stroke icons (which are actually not so simple as they seem to be) to complex detailed illustrations or full development of all the elements of brand identity.

 

The general aim of all these efforts, though, is to make the image or other graphic element meaningful and symbolic, communicating to the customer or user in a fast and efficient way. Improving communication, making it more impressive, expressive and diverse stands behind most samples of different graphic assets.

 

Qualities and skills

 

Some requirements to the specialists in this sphere of work and art include the following:

— technical artistic skills and preferably qualification in some sort of visual art

— artistic talent and creative nature

— good artistic eye and feeling of harmony

— ability to draw well

— good skills in composition and visual analysis

— ability to work on analysis of target audience and possible options of communication with it

— ability to apply different techniques of drawing and painting, preferably both with manual and digital tools

— ability to learn and self-improve all the time as the sphere is extremely dynamic and diverse etc.

tubikstudio graphic design

 

In one of our previous articles we have answered the question «Can anyone be a graphic designer?», which also highlights some important aspects of the job for those who are interested to make it the path of their career. If you are the one — welcome to see what thoughts we share there.

 

This topic is so deep that one post is, for sure, not enough to cover all the aspects. We are going to tell more in detail about all those directions of graphic design in our further articles here. Stay tuned!


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

tubikstudio ui ux design

UI/UX Design Glossary. Steps to Usability.

Practice shows that structured data is a great way to work optimization and that is one of the reasons why old good stuff like phone directories, dictionaries, vocabularies and glossaries, databases and sets of formulas are still applicable and convenient for everyday use. Order and organization make it easy and fast to find everything needed. And today we decided to make a step to this sort of optimization and provide the first set of definitions for some basic terms in the field of UI/UX design.

 

No doubt, today there are many various publications and online resources providing helpful and informative support for designers and explaining the necessary terms. In our previous articles we also get involved in this global process while describing practical cases of design. Today we would like to systematize some of the explanations here concentrating on UI/UX design issues enhancing usability and support the definitions with the links to the articles where we gave more details on the topic. So, let’s move on!

 

UX (User Experience)

 

It is the general attitude and emotional feedback that user has on different stages of using the product. In terms of digital products, such as websites or applications, UX is a comprehensive term involving all the possible stages of user engagement. UX is based on several key factors such as usability, utility, desirability, attractiveness, speed of work etc. If all the logic and possible issues of product implementation into real life are analyzed and designed properly, it forms positive user experience which means that users are able to satisfy their needs in fast, easy and pleasant way. Positive user experience is one of the strongest factor of retaining users.

 

UX Wireframing

 

It is the process of creating general structure of the designed application or website. It’s usually accomplished via the set of schematic screens or pages of low or middle level of fidelity. The aim of this stage is setting clear and orderly structure of all the layout, transitions and interactions on the basis of user’s problems and pains which the product is going to solve.

 

In one of our previous articles we provided a bit of metaphor on that. When we think about building the house, for example, we usually mean the process of physical appearance of the construction rather than tons of projects, drawings and calculations made on paper. And yes, physically it’s possible to build the house without any project as well as it’s possible to create the interface out of thin air. However, in this case you shouldn’t be surprised if one day the house will crack and collapse without any visible reasons as well as the app looking amazing and stylish won’t bring you any loyal users. If you want to have a reliable house, a durable mechanism, a powerful application or a highly-functional website, the recipe is the same – take your time for thorough planning and projecting. This is not going to waste your time, vise versa, it will save your time you would otherwise have to spend on redesign and attempts to find out why your product doesn’t work properly.

 

That is the aim of UX part of design process. UX wireframing stage should be heavily based on user research, competition research and analysis of all the data obtained. In the outcome, it creates the clear scheme whose complexity depends on the product functionality and reflects all the system of transitions and interactions as well as placement of all the elements of the interface based on their optimal use flow. In some cases, wireframing done in pencil sketching or rough drafts is enough, although preferably it is accomplished with the special tools and software optimizing design process and increasing performance.

 

UX design Tubik Studio

Read more on this topic in our previous article

 

UI (User Interface)

 

User Interface is actually a finalized interactive field in which the user interacts with the product. It includes all the tools of increasing usability and satisfying target users’ needs and wishes. All the features of visual perception as well sound and tactile feelings influencing the product use and interaction with is should be analyzed and optimized here to the purpose of the app or a website is designed. For example, such aspects as color palette, types and fonts, shapes and forms, illustration and animation and so on and so forth are able to affect the performance of the final product greatly in both positive and negative way.

 

In general terms, the UX research and wireframing stage is about how the website or application works while UI is how it looks. Both these stages include work on successful interactions, but UX deals more with logic, connections and user behavior while UI stage provides visual representation of all the concept. It means that ideally designer should first work on UX part with concentration on layout, making it more powerful, thought-out, clear and easy to use. Without this vital work you highly risk creating pure mess out of the user interface.

 

After the UX part is tested by prototype, agreed upon and the concept of layout, transitions and features are accepted, the designer starts the UI design part. This is the time when a newborn heart and brain of your product is clothed with its skin and bones. Here the product gets its real color scheme, forms and features of the layout details, styles, animated elements and so on.

 

All the UI solutions directly influence the positive or negative user experience, so the processes of UX wireframing and UI design should mutually support each other and follow the same strategy otherwise the efficient solutions of one stage will not work on the other.

 

Here are some of fresh UI design examples for different types of products from Tubik Studio portfolio on Dribbble:

 

tubik studio web ui design

Birds of Paradise Encyclopedia by Vladyslav Taran

 

home page landing tubikstudio

Comics Shop Home Page by Dima Panchenko

 

tubik illustration interface

Simple Blog App by Sergey Valiukh

 

Read more on this topic in our previous article

 

Prototyping

 

The original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to enable a designer, a customer and a user to check the correctness and appropriateness of the design solutions.

 

The value of prototypes in the sphere of app and webdesign has rocketed for the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings and wireframes. Certainly, that doesn’t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, prototype will be the great help.

 

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective. Prototyping is much more efficient and useful as the step between UX design and UI design. So, the workflow should have such a sequence: UX – prototype – UI.

 

The prototypes on UI stage are created more for presentation of application general looks than for testing and improving its functional features. And this is the trap in which it is easier to be confused. Prototyping all the details on the final stage of UI in most cases is not so reasonable as it could seem. It will be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo-version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise it would be much harder to change inefficient solution after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.

 

Read more on this topic in our previous article

 

Icon

 

An app or desktop icon is an image which having a kind of symbolic and metaphoric potential becomes the element of navigation in the process of interaction. In deeper explanation, icon is the visual symbol representing some action, thing, person, real or virtual.

 

Tubik studio icons

 

In many cases icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the app screen or webpage therefore making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have the problems of copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of navigation and explanation with being the aesthetic element of the visual representation of the product, supporting the general style and having their own character.

Read more on this topic in our previous article

 

Microinteraction

 

Microinteraction is one particular case of user’s interaction with the product completing one particular task. For example, when you press the “like” button (anyhow it looks like) and see that your like has been counted (the number has changed, the button changed the color or became inactive, the copy on the button informed you that you have done the action, the copy under the button or other interactive element informs that you are in the list of those who liked, and so on), that is the case of microinteraction. When you fill in the proper text field with the search request and send it to the system, that is one more case. Microinteractions happen when we follow or unfollow someone in a social network, rate the blog post or set the timer – hundreds of things we do, in most cases not willing to think over those simple steps too much. Microinteractions in most cases aren’t even consciously fixed by the user – and that is actually one of the important tasks for a designer to make them as natural, clear and fast as possible.

tubikstudio ui design

BuonApp by Ernest Asanov

 

Read more on this topic in our previous article


 

The first set of our design glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets. If there are any specific terms you would like to see explained, described and illustrated, feel free to contact via direct message in our Facebook page or Twitter as well as our Quora representative. New definitions are coming soon!


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

Welcome to read us on Quora

Tubik Studio Weather App

Weather in UI Design. Come Rain or Shine

Perhaps, one of the most diverse objects of modern digital design is weather. Graphic designers work out loads of icons and illustrations in different styles, UI/UX designers create new concepts of weather applications and widgets, so users get more and more options for getting such a simple but vital information as weather forecast and the like. Despite the bulk of numerous weather apps which is growing bigger and bigger, it is still one of the most popular topics for designers as it goes to basics of human everyday life.

 

Users have a great benefit, being able to choose among loads of weather apps and services of different complexity, style, features, colors and so on. Moreover, the target audience of this sort of product is almost unlimited and totally diverse, therefore different ideas and concepts if done according to the laws of basic visual efficiency and common sense, will find their users.

 

Tubik Studio designers, working on various UI/UX projects, have also presented different design concepts for weather applications. So, this post is sharing our works and ideas on the topic.

 

Basic points of UI for weather applications

 

Design of the user interface for a weather application is usually concentrated on the idea of being informative and clear. This really is the thing which does not include a lot of copy on the screen, so it is very important to find the scheme and layout in which the user will need just a quick glance to get all the data he or she needs. That provides the broad space of creativity for designers as well as becomes a great challenge as any kind of weather app requires keeping the wise balance between the creative visual representation and extremely high level of usability.

 

Both aspects – visual and usable – need to be taken into account. If designer doesn’t think thoroughly enough on solutions providing easy and pleasant user experience and enhancing usability as the basic point, the app will risk losing the audience because functionality is the first thing that retains users to such kind of basic apps. On the other hand, concentration only on the layout and transitions while seeing visual design as the secondary and minor aspect is also the high risk, since being usable and well thought-out but visually boring and usual the app will not attract users’ attention and could get lost among the numerous competitors. So, designer should think over both perspectives and look for the ideas to make the design concept pleasant-looking, clear, efficient and understandable.

 

Tubik studio icons

 

Practice shows that the limitations for designer’s creativity in case of weather applications are much lower than in a lot of other types of products. As weather apps do not usually use long copy on the screens and apply a lot of visual details, the aspects of readability and efficient data presentation are different from for example the screens of a blog app or a social network. Therefore, designers can try various color pallets and combinations, different forms and shapes, interesting textures, visual effects or interface animation, original fonts or unique icons – anything that will support clear visual perception of the data necessary for a user.

 

Colors and shapes

 

In case of UI design for weather applications there is no strict trend, requirement or recommendation about using light or dark background. It happens, for instance, with more copy-based products in which the aspect of readability is activated with perception of big amount of text: in this case it could be recommended to try light background for making the layout more user-friendly and text more legible. In case of weather apps and widgets any combinations of colors, sometimes very unexpected, could work efficiently as far as they provide visual support for the data and enable the user to see and understand what they need in fast and easy way.

 

Moreover, interesting combinations of colors and shapes can also provide a kind of aesthetic pleasure for the user that can become a reason to choose this particular product among the competitors along the personal user’s taste. So, the range of colors is perhaps one of the widest in this case of design work. The weather concept accomplished by Sergey Valiukh for Fuse has become a good case of practical example.

 

weather app ui design by Tubik Studio

Weather App Screens by Sergey Valiukh

 

Organization of the data on the screen is one more important aspect to think over. One of the fresh Dribbble shots by Tubik Studio designer Tamara features organization of the data along the cards with the basic and additional information needed for the user. The user can choose the place (filtered as city, region, country and the like) and get the card which shows basic data such as temperature and weather characteristics (sunny, cloudy, cold, etc.) and additional data such as date and time according to the local time zone. It can be especially useful for users who travel a lot and need to know how to estimate their time and routines considering local situation.

 

tubik studio design

Weather Concept by Tamara

 

Graphic elements

 

Graphic elements for weather applications are among the most essential things to put time and effort in. Weather apps, as it was already mentioned, are highly visual and data perception has to take seconds so graphic elements should first of all be concentrated on increasing usability. A designer has to remember that this kind of app could be used on different devices, in different environments (bright or poor light around, for example), very often on the go. People with different levels of sight will need to use it. So, to be useful and usable, the app should apply the graphic material which will be not only visually appealing and stylish but also easily perceived in various conditions.

 

Among the graphic elements vital for efficient weather app, icons should be mentioned the first. In one of our previous articles we have already described importance of elaborate work on this vital element of any interface. In case of weather apps icons have great field of expression as they actually become highly informative elements. Being aware of this, designer Arthur Avakyan created the original set of weather icons for Tubik Studio, which is now available on Envato, Creative Market and Tubik Lab. All the icons follow the laws and standards of proportions and composition and will look recognizable and meaningful in different variants of color pallets and combinations. Also they all were tested by designer in the range of sizes to check that their recognizability doesn’t decrease in any case of use.

 

weather_icons tubik studio

Weather Icons Set by Arthur Avakyan

 

To represent how these icons work in layout, Valentyn Khenkin presented the concepts of weather app seen on iPad screen. It shows the location, the weather around — the temperature, pressure and other details. And the majority of screen space is covered by the illustration of the city which creates nice style and is recognizable as a support of the feature of location.

 

tubik illustration design

Weather Icons Presentation by Valentyn Khenkin

 

illustration weather tubik studio

Weather App by Valentyn Khenkin

 

Interface animation can become a good way to liven up the graphic elements as you can see in the animated interface by Sergey Valiukh. Animation adds movement and action, enhances efficient and fast microinteractions and makes perception of the data even faster and somehow entertaining.

tubik studio behance weather app

GIF for the Weather App by Sergey Valiukh

 

So, designing UI for weather applications, designers have a broad perspective for their ideas and concepts, choosing different design solutions and it is rather easy to move out of the box. However, any ideas made about the layout, graphic elements and animations have to pursue the goal of creating user-friendly, fast and clear interface which could preferably have the great support of attractive and stylish looks.

tubikstudio designer illustration

 

Extensive discussions appear and follow the topic — and certainly, they will move on to the future — about the weather apps design and finding the best solution which could be universal for everyone. Nevertheless, every day millions of users, having different tastes and preferences, different favorite styles and characters, different feelings of what feels comfortable and looks nice for them in particular, use this sort of simple apps as a part of their routine. The more variants of looks and features will be designed, the wider range of diverse options that endless target audience will get to find the one which fits their particular needs and wishes. And that is, obviously, a user-friendly way.


 

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