Tag Archives: icons

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!

andre landscape tubik studio logo design

Case Study: Andre. Rebranding Logo.

Branding is never about just visual perception or verbal message. Branding is about the whole image people get hearing the name of a company or seeing its brand identity signs. So, designing the signs and symbols which make a brand recognizable and transferring the appropriate message is a job with great responsibility. Still, there is one more stage of the process when this sort of responsibility get another shade. It happens at the point of branding redesign.

 

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

 

andre logo design by tubik

 

Task

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

 

Tools

Pencil sketching, Wacom Intuous pen tablet, Adobe Illustrator, Adobe Photoshop

 

Process

 

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

 

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

 

andre logo design case study

 

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

 

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

 

andre logo design Tubik

 

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

 

Andre logo design Tubik

 

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

 

Andre logo design Tubik

 

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

 

andre logo design Tubik

 

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

 

Andre logo design Tubik

 

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

 

Andre logo birds Tubik studio

 

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

 

Andre logo design final by Tubik
This case of logo design has proved once again that user research, market research, thorough attention to the customer’s requirements and inspired creative search together make a great basis for efficient, informative and attractive branding. Don’t miss the next case which will show the application of the described branding solutions on diverse set of branded items.

 

Andre logo design final Tubik


Welcome to see other works by Arthur Avakyan on Dribbble and Behance

Welcome to see designs by Tubik Studio on Dribbble and Behance

tubikstudio animation ui

Food for Thought. 10 Tasty UI Concepts for Eating and Cooking.

Many decades ago famous writer George Bernard Shaw, known for his sharp tongue and sparkling sence of humor, said: “There is no love sincerer than the love of food.” With the course of time nothing actually has changed: food is still among the most important, discussed and loved aspects of everyday life. The sphere of design features it in diverse faces and directions combining traditional visualization with new techniques and approaches.

 

UI design is no exception. The basic idea behind UI/UX design is to create interfaces solving problems and satisfying users’ wishes. As eating is one of basic human needs, no wonder we can find numerous applications and websites devoted to this theme. We also take active part bringing new ideas and polishing existing solutions in design projects and concepts for websites and mobile apps. As well as with real meals presentation, visual design for digital products of this sort is a real food for thought.

 

Like with nicely performed meal, well-done attractive UI is able to increase the level of users’ expectations and catch their attention and senses immediately. However, even the most creative delivery of a meal is not able to save the situation if the food itself is low-quality and vapid. The same happens with UI. If designer doesn’t think much about the product itself, its logic, convenience, effective layout, being focused only on beautiful presentation, the risk of creating dead product is incredibly high.

 

In our previous article devoted to role of icons in UI we mentioned: the best chefs always say that everything put on the plate should be edible. According to the latest trends, we support the same idea when it comes to icons as well as the other elements of layout: everything that is put on the screen should be functional. Therefore, any icon used in the interface should have its meaning and function. Without it, an icon is just a kind of empty stub, making the layout of the screen or web page dirty with the unnecessary elements. This philosophy works well with other interface elements like copy, illustrations, photos, animation, color combinations, typography choices etc.

 

Here we have collected 10 different UI design concepts accomplished by studio designers. They represent different aspects reflecting topic of food: some of them are devoted to cooking theme, some present the direction of eating out, the others are connected to selling food. The nature of functionality platforms are also different: the concepts feature interfaces of  mobile applications, websites and landing pages. If you are interested to see more details, just follow the links. Let’s review them all. Bon appetit!

 

Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu by Sergey Valiukh

 

The first of presented concepts is a mobile application for restaurant visitors. It features animated interaction with the screen presenting basic view of restaurant menu.  The names of categories are presented via effective combination of highly readable copy and clear meaningful icons for quick visual perception. Simple design with animated accents which immitate interaction with physical objects is a good way to bring positive user experience.

 

App screens by Tubik Studio

GIF for the Resto App  by Sergey Valiukh

 

Another piece of interaction for the same app shows one more block of its functionality. It’s a simple restaurant app for checking in and receiving feedback from clients and visitors of different restaurants. The main idea was to provide a simple and easy-to-use interface based on animation and color accents. Restaurant profile shows how many visitors were there and how many of them liked it. The whole app enables to vote for several different features of each restaurant such as «cuisine», «drinks», «comfort», «service» etc. Visual support with high-quality photo content featuring food and drinks enhances stylish looks and feeling the theme.

 

recipe website design Tubik Studio

Cooking Website by Ludmila Shevchenko

 

Here is the concept of a cooking website where users can find interesting recipes, add their ones and read useful articles devoted to food topic. The piece of interface is iPad version of layout. The designer chooses light background adding air to the screens and providing environment for efficient readability for different blocks of copy. Color markers are used to define the categories of content.

 

ipad interactions animation

iPad App Interactions by Sergey Valiukh

 

This one is an iPad application for booking tables in restaurants. To show its functionality and strengthen it with gorgeous food images, the designer chose an experimental bar profile page. It’s a venue where users can order fruit and seafood, and the profile page which contains everything to go with booking a table, sharing and saving this venue. Animation shows the interactions of user flow showing what happens once the «Book» button is tapped.

 

tubik_studio_website_ui_bakery

Vinny’s Bakery by Ernest Asanov

 

This one a the design concept of a website for a small bakery selling homemade bread. Here you can see the home page presenting the service, providing the links giving more information about the company and the items it offers as well as links to social accounts. The designer was keen to activate different techniques of visual perception via headline, images, background and copy block so that users could get the basic information immediately and got the warm feeling of freshly baked bread. He followed the philosophy of minimalism which is user-friendly, attractive and informative. On the basis of the design solutions it is easy to assume that this is the service positioning itself as a producer of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Harmony is the style provided by the webpage: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action.

 

Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh

 

The aim of the landing page above 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.

 

tubikstudio ui design

Tubik Studio | BuonApp by Ernest Asanov

 

Here is the interface of a social network for those who like cooking and want to communicate and get updated about this topic in fast and easy way. The app enables using all the scope of social functions: sharing recipes, making discussions, chatting, following, uploading images, collecting favorites and so on. Nice and smooth animations supports general stylistic concept and shows interactions within app functionality. As we usually do here in Tubik Studio, the designer followed the idea of keeping the balance of usability and attractive looks of the interface.

 

ui animation cafe app tubikstudio

Cafe Coupon App by Dima Panchenko

 

No doubt, good food is the great way to feel the world more positive and that is the key message behind the presented animated interface design. This is the concept of a mobile application for a chain of cafes providing the functionality for saving coupons and discounts and then using them buying tasty stuff. Interface animation is added to make the screen and interactions more lively and engaging and enable easy microinteractions. Icons and illustrations look bright and add positive vibes, even small layout elements like the icon for notifications are reflecting the basic theme and support consistency of general stylistic concept.

 

tubik studio healthy food animation

Healthy Food App by Ernest Asanov

 

Here you can see the screens of the mobile app organized around the idea of healthy lifestyle and providing recipes and tips on healthy food. Engaging graphic elements and correspondent color solutions are used to set the theme as well as enable fast visual perception of information which is supported with unobtrusive motion design accents. Animation is also used to show various interactions with a product. Together all those features support user-friendly, attractive and informative interface design.

 

tubik studio application recipes and cooking

GIF Animation for Recipes and Cooking by Sergey Valiukh

 

This is a design concept for the recipe application. With it, users can add recipes to their collections or find the ones online, categorize and organize their recipe books and categories, form menus and shopping plans. So, here you can see some interactions livened with motion design. They feature the process when the user is choosing the item from the list of categories and then from the list of particular recipes in one category. The implementation of the concept will be soon available free at GitHub.

 

So, practice shows the diversity of techniques and methods to make an app or website tasty and attractive. Nevertheless, to retain users, trendy and pleasantly-looking design should just cover effective functionality and user-friendly solutions. Otherwise, beautiful design will work like a cover without a sweet inside and that is the fastest way to lose the users. Put usability and functionality first, think over the logic, transitions and intuitive navigation — and visual design will become a great icing on the cake!

 

Today’s list is over but studio practice is full of many other interesting examples of design concepts for different purposes and needs of modern users. Don’t miss new presentations in our future posts.


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

Landing page design by Tubikstudio

UI/UX Glossary. Web Design Issues.

Perhaps you remember our previous issue of UI/UX Glossary dedicated to general terms of creating design with high level of usability. We were discussing the difference between UI and UX, which are often confused, explained the process and aims of wireframing and prototyping, presented our explanations of icons and microinteractions.

 

Today continuing the stream we are going to provide some new entries to our glossary, this time concentrated more on web design elements and techniques.

 

Web Design

 

Web Design is a term defining design field featuring all the activities connected with creation and maintenance of websites and pages both as pieces of practical interaction and the product with certain aesthetic qualities. Web design process includes full cycle of production path from the initial idea sketched roughly in pencil to elaborate visual performance, information architecture and updating design in the process of actual website use.

 

Web design as a term can also name the result of mentioned activity direction, which means that this word is used to describe structure, functionality, style and appearance features of a website or a webpage interface. In addition, web design also can include content generation and management.

 

So, it’s easy to see that the term itself is very broad and comprehensive. Due to this fact, web design as a domain of human activity lies on the crossroads of many sciences and practices. Among them we should mention:

  • drawing and composition
  • painting and coloristics
  • logic and schematism
  • analysis and statistics
  • visual arts
  • programming
  • user research
  • psychology
  • copywriting
  • branding and marketing etc.

 

Covering diverse aspects of a website functionality and appearance, some designers work in teams every member of which specializes in a particular sphere while the others can work out different of the mentioned aspects individually. Anyway, in vast majority of cases web design is the sphere of digital products which have to be functional and user-centered. As famous American designer Charles Eames said “Design is a plan for arranging elements in such a way as best to accomplish a particular purpose” and his words totally reflect the idea of modern web design.

 

The authors of the book “Research-Based Web Design & Usability Guidelines” mention: “To ensure the best possible outcome, designers should consider a full range of user-interface issues, and work to create a Web site that enables the best possible human performance.” Working over a website, designers have to concentrate on such aspects as:

 

usability (the website is convenient, clear, logical and easy to use)

utility (the website provides useful content and solves users’ problems)

accessibility (the website is convenient for different categories of users)

desirability (the website is attractive and problem-solving, it retains users and creates positive experience which they are ready to repeat).

 

Here are some examples of web design concepts created by Tubik Studio designers.

 

tubik studio design UI

Randomizer concept by Vladyslav Taran

 

tubikstudio ui animation website design

Tubik Studio | Björn by Ernest Asanov

 

website design concept tubikstudio

BRMC Website by Konst

 

Home Page

 

Home page is the most popular name for the main page of the website. It is called home as it usually provides starting point with many further directions for the user, containing direct links to the most important areas of interaction with a website. In other words, it can be also named initial page or index page. Home page is mostly the start of users’ journey if they are directed to the site by search engines.

 

In addition to essential links to different website parts, home page often contains search field, basic onboarding functionality for personalized sites, different areas of navigations showing users diverse categories of data. It might also contain engaging welcome messages and copy blocks featuring slogan and/or explaining benefits of the website or objects it presents.

 

More than a decade ago famous expert in usability Jakob Nielsen wrote Top 10 Guidelines for Homepage Usability in which he said: “Homepages are the most valuable real estate in the world. Each year, companies and individuals funnel millions of dollars through a space that’s not even a square foot in size. For good reason. A homepage’s impact on a company’s bottom line is far greater than simple measures of e-commerce revenues: The homepage is your company’s face to the world. Increasingly, potential customers will look at your company’s online presence before doing business with you — regardless of whether they plan to close the actual sale online.” Long time has passed since then but clear and user-friendly home page is still the issue of vital importance for an efficient website.

 

Home page is actually a basis of good navigation which is usually the core of positive user experience. Messy interface and badly designed layout can become the reason of user confusion and annoyance.

 

Here are some examples of home pages created by Tubik Studio designers.

 

home page landing tubikstudio

Comics Shop Home Page by Dima Panchenko

 

tubik studio ice ui website

Tubik Studio | Ice by Ernest Asanov

 

Landing Page

 

Recently we published an article devoted to functionality and efficiency of landing pages. Let’s remember key points here.

 

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 of marketing and presentation of particular product or service is 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.

 

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.

 

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.

 

Here are some examples of landing pages created by Tubik Studio designers.

 

Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh

 

tubik studio landing page design

Arts, Culture & Education Curation | Landing by Polina

 

landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko

 

Read more and review the examples on this topic in our previous article

 

Responsive Design

 

The necessity of responsive design is based on the audience you want to cover for your website. Would you like your users to use your site from any device and feel it positive, useful and convenient anyway? Sure, every customer would being aware of growing popularity of mobile devices. And in this case we should say confidently: you obviously need responsive web design for website.

 

The idea behind responsive web design (RWD) is that the content and layout of a website should efficiently adapt according to the sizes and technical abilities of a device it is opened at. For most users, these changes are so subtle that it is easy to say “ Hey, guys, this is the same site on my smartphone which I looked through yesterday at my desktop. Nothing special has changed here!” And somehow these words can be the great praise of designer’s work. That will mean that the designer managed to keep all the meaningful elements and general layout of the desktop version efficiently and at the same time avoid making the page or layout elements too small, hardly seen or impossible to distinguish even on the much smaller screen of a mobile device. That is RWD in action.

 

Nowadays making the site non-mobile-friendly means to lose the part of audience which likes surfing and using the internet sources “on the go”. It’s vital to consider that this part of the audience is mainly the most active part, non-afraid of technologies, fast in browsing necessary information and options, easy-going in making internet purchases and try new products. That’s why neglecting the idea of RWD can bring real loss to the product which otherwise could be highly efficient and bring high conversion rates.

 

In the book «Responsive Web Design» experienced designer Ethan Marcotte says: «…web design is about asking the right questions. And really, that’s what responsive web design is: a possible solution, a way to more fully design for the web’s inherent flexibility. In the first chapter, I said that the ingredients for a responsive design were a fluid grid, flexible images, and media queries. But really, they’re just the vocabulary we’ll use to articulate answers to the problems our users face, a framework for ordering content in an ever-increasing number of devices and browsers. If we’re willing to research the needs of our users, and apply those ingredients carefully, then responsive web design is a powerful approach indeed.»

 

Creating responsive web-design for a web-product means making it pleasant-looking, clear and functional in different sizing with optimal navigation that provides high level of usability. This technique relieves a owner from the necessity to develop several versions of the site as it provides one site with fast adaptation to different technical conditions, so RWD is also generally cheaper than creating several versions of the site. Responsive web-design makes the site flexible, easy to manage and nice to use. Moreover, you don’t need to publish your content several times for different versions and it saves your time or human resources. If these are the features you want your product to obtain, than consider responsive web design for your product from the earliest stages of its design and development. In addition, you will get higher positions in Google search engine as it supports the idea of RWD, so that is important part of general search optimization of your product. Therefore, it’s up to you whether to apply RWD for your web-product or not, but consider all benefits before making your decision.

 

Tubik Studio Tracking App

 

Read about this topic in our previous article

 

Header

 

In terms of web layout elements, header is the upper (top) part of the web page. It is a significant and strategic part of the page as it is what people see before scrolling the page in first seconds of introduction to your website. Therefore, header should be informative and provide the most important information about the digital product so that users could scan it in split seconds. Header is also the area providing broad field for creative design solutions which should be catchy, concise and useful. Headers are often referred to as «Site Menus» and positioned as a key element of navigation in website layout.

 

Headers can include:

 

— basic elements of brand identity: logo, brand name lettering, slogan or company statement, corporate mascot, photo presenting the company or its leader, corporate colors etc.

— copy block setting the theme of the product or service presented

— links to basic categories of website content

— links to the most important social networks

— basic contact information (telephone number, e-mail etc.)

— switcher of the languages in case of multi-lingual interface

— search field

— subscription field

— links to interaction with the product such as trial version, downloading from the AppStore etc.

 

Certainly the list above doesn’t mean that all the mentioned elements should be included in one webpage header — in this case, header section would be overloaded with information. On the basis of design tasks, designers, sometimes together with marketologisits, decide on the strategically important options and pick them up from the list or add the others.

 

The choice of typefaces for headers and the background color should get under highly rigorous research and testing as the aspect of readability in header plays vital role. User has to be able to scan and percieve this basic information as fast as possible without any sort of additional effort. Otherwise you risk providing non-user-friendly interface.

 

online magazine design tubik studio

Daily Bugle Online Magazine by Dima Panchenko

 

The design concept for a news website presented above features the header including the title of the website as a central element of the composition, two active links to basic categories of publications, link to live mode and search field marked with a magnifier icon.

 

One more thing to remember is that there are different ways for a header to transform in the process of scrolling the page down. Some websites use fixed header, which always stays visible and active at any point of interaction with the website; others hide the header in the process of scrolling. There are also websites which do not fully hide the header but shrink it in size in the process of scrolling, which means that they hide secondary information and leave only the most important elements of the layout active and available during all the process of interaction.

 

Another design solution which is rather popular in perspective of header functionality is hiding basic links of data categories behind the hamburger button. It is called so as its form consisting of three horisontal lines looks like typical bread-meat-bread hamburger.

 

hamburger button tubik studio

Hamburger button by Kirill

 

This button is usually placed in header and nowadays it is a typical element of interaction. Most users who visit and use websites on the regular basis know that this button hides the core categories of data so this trick does not need additional explanations and prompts. Hamburger menus free the space making the interface more minimalistic and full of air as well as allow massive saving place for other important layout elements. This design technique also provides additional benefits for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices.

 

Although hamburger menus still belong to highly debatable issues of modern web and app design, they are still widely used as header elements. The arguments against hamburger menu are based upon the fact that this design element can be confusing for people who do not use websites regularly and can get misled with the sign which features a high level of abstraction. So the decision about applying hamburger button should be made after user research and definition of target audience’s abilities and needs.

 

Tubik studio UI design

 

Structure – Architecture Blog by Ernest Asanov

 

The presented design concept of a website has a fixed header which doesn’t hide while the page is scrolled. However, it follows minimalistic principles featuring brand name lettering as a center of composition, magnifier icon marking search functionality and hamburger button hiding links to navigation areas.

 

In one of the articles devoted to practices of header design, its author Bogdan Sandu mentions an important point that should be kept in mind:

 

People judge the quality of a website in just few seconds and a second impression is something absent on Internet. In conclusion, a website must be eye-catching else, it would be nothing more than a big failure.

 

Header can become a great help in presenting the essential data to the user quickly and providing positive user experience via clear navigation. However, that doesn’t mean that every website needs a header. There are many creative solutions providing designs applying typical header functionality in other zones of the layout. Every case of website design needs analysis and research of target audience for the product or service. 

 

Footer

 

According to everything mentioned above, it’s easy to understand that footer is the lower (bottom) part of the webpage. Footer usually becomes a marker of the end of a webpage. Also, being one more zone of global website navigation, in most cases footer provides additional field for useful links and data.

 

Footer can include:

 

— name and logo of the company or product

— links to user support sections, for example, FAQ page, About page, Privacy Policy, Terms and Conditions etc.

— credits to website creators

— contact info and forms

— links to company or product accounts in social networks

— testimonials and badges

— certification signs

— subscription field etc.

 

As well as header, footer is not the element found in 100% of websites. For instance, with some design tasks when designers apply infinite scrolling technique, traditional footer is not an effective navigation zone. However, in case of infinite scrolling, the idea of fixed footer can be also applicable and support navigation not losing this area. It should be said that for most users footer is a common place of looking for contact information, credits and sitemaps, so playing on this habit can be beneficial and fixed footer can become a good way in case when page has long scrolling area. Decision on using footer is always based on the idea of effective usability. Anyway, if footer is applied it should get in harmonic combination with all the other design solutions of the website layout and support general stylistic concept.

 

In the review of effective footer designs, Nathan Leigh Davis and the Creative Bloq team emphasize: «Designing a great footer is not about finding the best way to layout a lot of unrelated content, but the ability to prioritise and disregard unnecessary or superfluous information.» First of all, footer should provide information support and in this way strengthen the chances of positive user experience.»

 

The new 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 in which we are going to tell more about the types and fucntions of buttons, menus and other interactive elements of user interfaces. 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

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

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

tubikstudio ui design dark background

Dark Side of UI. Benefits of Dark Background.

The aspect of using dark colors and shades in backgrounds of user interfaces still belongs to highly debatable issues. No wonder it’s so actual: choosing appropriate background plays vital role on all the product efficiency as it can become a key factor enhancing or, vise versa, killing other design solutions around the layout and functionality. Today our article will be devoted to benefits and pitfalls of using dark background in UI design, so let’s move on the dark side.

 

In our earlier article we have already analyzed the factors that can influence the choice of general color scheme and basic background color as well as mentioned some important points to consider in the process. This time we will concentrate in more detail on strong and weak sides of dark-colored design for websites and mobile applications. Experience of practical work on creating and testing diverse user interfaces here in Tubik Studio has proved that dark background can be powerful and appealing solution providing positive user experience. Let’s just take it for granted and discuss when and where we can make it work at maximum.

 

Visual perception of dark

 

One of the polls whose results were published rather long time time ago, in 2009, in ProBlogger already features some interesting points. The readers were asked what sort of background they prefer on blogs. Almost half of the readers answered that light background is preferable – and that is reasonable as blogs are traditionally text-driven, so the aspect of readability outweighs the others. However, 10% of respondents answered that they prefer dark backgrounds and more than one third mentioned that the choice should depend on the blog nature and content. Such a big proportion of users should not be neglected by designers in the process of looking for design solutions. Moreover, in case of less text-driven content concentration in digital product such as website or application the proportion can become even bigger. This is a good example showing that user research and surveys should be the important part of design process. Knowing what users want or at least what they are ready for can push the limits of traditional vision.

 

The scientific research provided around the issue by Richard H. Hall and Patrick Hanna highlights the important point about visual perception of the background color and its performance. Having analyzed practical experiments by different scientists done earlier in the sphere of web pages performance and readability, the authors sum up: «They found that combinations with positive polarity resulted in better performance (that is dark text on light background), and, as with studies mentioned previously, the greater the contrast between color combinations the better the performance.» Therefore, dark-colored background can be as efficient as light-colored in case when other aspects, in particular contrast and legibility of the layout elements, are designed and tested appropriately. The research contains a lot of interesting and useful information based on user testing in perspective of different color combinations and their effectiveness, so it is highly recommended to designers.

 

Ribbet ui by Tubik studio

 

The aspect of readability

 

One of famous gurus of user experience design Jacob Nielsen mentioned: «Use colors with high contrast between the text and the background. Optimal legibility requires black text on white background (so-called positive text). White text on a black background (negative text) is almost as good. Although the contrast ratio is the same as for positive text, the inverted color scheme throws people off a little and slows their reading slightly. Legibility suffers much more for color schemes that make the text any lighter than pure black, especially if the background is made any darker than pure white.»

 

Indeed, readability is the vital aspect influencing performance of the product and it deals not only with text. It goes beyond the limits of copy and means that all the meaningful symbols including letters, numbers, pictograms and icons should be noticed and recognized easily in the interface. Thus, the designer choosing in favor of dark background should be prepared to especially thorough selection and testing fonts, icons and images on different devices.

 

tubikstudio swiftybeaver landing

 

Best web and app design practices, for example the collection of Best black websites on Awwwards feature loads of successful design solutions which, using dark background as a basis of color scheme, still don’t suffer from low readability. To avoid this problem, during design process it is important to remember:

 

— dark background absorbs some part of light from the other elements so there should be enough empty space or “air” between the elements;

 

— length of the line can make copy bulks more readable and digestible for users;

 

— the issues of interlinear space design as well as length of text line can have great impact on readability, especially on dark background, so paragraph size, kerning and leading should be thought over carefully;

 

— dark doesn’t always mean black so in every particular case of design it is reasonable to take some time testing different sorts of dark backgrounds and colors presenting the content, being open to experiments;

 

— shades, gradients and glows can influence readability;

 

— sans-serif fonts are usually more legible while serif fonts look more elegant, applying this factor in practice can enhance readability of the content.

 

tubikstudio ui design

 

The aspect of contrast

 

One more interesting thing to consider in the aspect of visual perception is the table presented by webdesign.about.com. The table demonstrating levels of contrast and performance of different color combinations features the interesting fact: black part of the table is the only one that provides good contrast with practically all the colors. Tested carefully in every particular case of design interface, this factor can be the reason to try dark background as a variant of design solution.

 

contrast table

 

In the aspect of readability, contrast is also one of the factors able to make the content more recognizable and legible.

 

One of earlier investigations of the aspects of contrast and readability states such a tip: «With a dark background, ensure you do not have overly-bright lettering: tone down white lettering to a pale gray, or dull the colour used to minimize extreme contrast and glare; this principle is used when doing slides, as well: at least 5% gray is used to cut the glare of bright white. Interestingly, this still «reads» as white. Also, make the text bold, so it has enough body not to be «eaten alive» by the darkness.» This test as well as others can provide new variants of toning in providing efficient and natural contest on a webpage or app screen.

 

One more thing to mention is that dark background being somehow heavier and deeper usually provides great opportunities for presenting graphic content such as pictures, photos, illustrations, posters and ads. Good composition and following the principles of visual hierarchy can significantly enhance visual perception of this sort of layout elements. This factor makes dark background highly efficient and attractive in cases when interface is based more on graphic material than on copy.

 

Tubik Studio UI design

 

The aspect of emotional perception

 

Color psychology is another thing to consider choosing a background which will be not only the effective field of presentation but also the carrier of its own message. Dark colors are usually associated with elegance and mystery. Moreover, black is often associated with elegance, formality, prestige and power. That is, perhaps, one of the reasons why many powerful brands build their visual presentation around black-and-white scheme with dark dominating and light presenting and informing the recipient. Playing out this aspect in interface design can provide additional support to other design solutions and general presentation of the product.

 

Tubik studio UI animation

 

 

Benefits of dark background

 

According to all the points mentioned above, we can sum up that dark background applied in user interfaces can provide essential benefits, among which:

  • style and elegance
  • feel of mystery
  • luxury and prestigious look
  • broad field of using contrast
  • support of visual hierarchy
  • depth in reflection of presented content
  • visual appeal

 

website animation tubik studio

 

Points to consider

 

On the other hand, dark background requires thorough attention and analysis of the smallest details which can get lost in layout if they are not presented properly. Among them we should consider:

  • User research. Practical surveys, theoretic investigations and experiments are important sources of data about the target audience, its wishes and expectations that is the basis for choosing effective and attractive design schemes.
  • Competition research. Market research of close competitors gives understanding which design solutions have already been applied by other players on the market and this factor influences choosing original design solutions to make product noticeable.
  • User testing. Dark background being more vulnerable in the aspects of readability and legibility should be rigorously tested on all the sorts of devices and in diverse resolutions.
  • Environment factor. Analysis of typical conditions in which the product will be used by target audience can provide additional reasons for or against the option of dark background.
  • Amount of content. The number of elements and blocks which have to be featured on the screen or web page can influence the decision around the background: darker backgrounds leaving too little space between elements are extremely hard for perception.
  • Nature of content. Dark background can feature better performance for interfaces based on graphic elements rather than big bulk of copy to read.

 

tubik studio_social_network

 

Recommended reading

 

The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention

 

Visual Perception: An Introduction

 

Art and Visual Perception: A Psychology of the Creative Eye

 

Colour Choices on Web Pages: Contrast vs Readability

 

The Dos and Don’ts of Dark Web Design


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