Tag Archives: tubik studio

copy content in user interfaces UI design

Tips on Applying Copy Content in User Interfaces

Words are a powerful weapon. They can bring both success and failure depending on how you put them together. They can motivate or confuse, strengthen or weaken, call or push away. That’s why designing a digital product, it’s vital to remember that high-quality copy is as essential as the details of visual performance.

 

In one of our previous articles, we’ve already considered the big role of textual content in UI design, covering the definition of copy and its functions in graphic user interfaces. Important point to remember from it here is the words cannot be fully replaced with the graphics whatever amazing, high-quality and professional they are going to be. Efficient and engaging copy content in user interfaces is defined by two equally significant basic criteria: the quality of writing and the appropriate look. Words and visual elements should mutually support each other, exist in harmony and provide organic consistency. So, every single piece of copy should be thoughtfully analyzed and created in a way corresponding to general design concept and enhancing positive user experience via successful interaction. 

 

Could you imagine an interface containing badly-written copy with the same type sizes, fonts, and colors? The chances are big that it would cost users great effort to solve their problems or get needed information with the product, so they would simply choose other product that is more user-friendly and less time-consuming. Let’s check what types of copy content designers and copywriters deal with creating websites or mobile applications, and think over the points needing special attention.

 

copywriting tips

 

Visual hierarchy

 

To organize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present the content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc. In the aspect of creating copy content for web pages and mobile app screens, there are two aspects important to consider: page scanning patterns and typographic hierarchy. 

 

Understanding the importance of visual performance and readability of copy in digital products and its impact on user experience, numerous usability experts explore this issue comprehensively and collect statistics providing valuable data for designers. Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, UXPin team and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

 

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials etc. How could designers employ this knowledge? First of all, placing the information of key importance or core interest on the most scanned spots and trying to use short catching headlines and bold headers to draw users’ attention.

 

Z-pattern is applied to pages which are not so heavily concentrated on copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area. In this case, designers place core information in the spots of highest attention, such as top corners, and put the other points requiring attention along the top and bottom lines.

 

website design tubik studio

The Big Landscape

 

Here we can see the design concept for a website which presents the online magazine «The Big Landscape». The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception. The designer followed Z-scanning-pattern placing vital elements such as the logo and CTA button in the corners of the top line while the bottom line informs users about the website creators and provides with the ability to contact via social networks instantly. 

 

Typographic hierarchy

 

Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and combination of types and fonts. It is aimed at creating contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating type fonts, sizes, and colors as well as their placement and alignment. Typographic hierarchy is presented with common types of copy content used in UI design.

 

Headlines

 

A headline is the first thing that users should see in any interface. It is a large, bold word or phrase which transfers and emphasizes the core informative message on the page. It’s essential for headlines to be catchy and short, so that they could draw users’ attention, and meaningful in order to inform users about the theme and benefits of the content of the page or screen. According to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5-6 work effectively, not less than extensive headlines presenting a full sentence. 

 

Another point to remember: it’s good when headline is visually supported by other elements on the page or screen, still it also should be understandable and meaningful without such context.

 

website design for photographers

Photography Workshops 

 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind the web interface. The bold headline is placed on the left which makes it noticeable but the major accent still remains on the head picture.

 

landing page UI design tubik studio

Website on cooking seafood

 

tubik_studio_website_ui_bakery

Vinny’s Bakery

 

These are two examples of the websites concentrated on providing content around the same theme — food. They both have minimalist design with centrally located headlines. However, the headlines differ with the message they send to the users as well as nature of the websites differs in its core: one of them stimulates uniting users around the action (cooking seafood) while the other is focused in presenting the goods (bread and bakery). The first example presents a website collecting recipes of meals with seafood from all over the world, so its headline contains a CTA with a key element — action verb in imperative form “Let’s cook!”, which dynamically tunes users into the activity. On the other hand, we can see another concept — a website for a small bakery selling homemade bread. The lyrical headline makes users feel warm, sets strong positive emotional connection and lets them instantly imagine the smell of bakery products which are sold via the website.

 

Subheaders

 

It’s impossible to put all the significant information in a headline, that’s why you need subheaders. These are brief, concise and catchy phrases that are similar to headlines, although they typically mark out the key points in separate sections while headlines summarize the theme or message of the whole page. Following the principles of visual hierarchy, fonts chosen for subheaders are usually smaller than for headlines but bigger than the rest of the copy. Traditionally, they are also bold and short. 

 

Landing Page Animation Tubik Studio

Organic — landing page

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

Subheaders play a big role in landing page design. These two concepts for landing pages above are good examples of how subheaders inform users about the data provided in different sections. Bold subheaders point out the main idea of body copy helping users find the information they need easily and quickly.

 

Body copy

 

Body copy is usually a part of text presenting the description or some essential information placed in a compact block, usually under a subheader or a headline. Fonts are thinner and smaller than in headlines and subheaders, sometimes they are presented in italic for even more prominent visual contrast.

 

There is no unified opinion about the best length of body copy. Some content creators support the approach that long copy is more informative and serious-looking, while the others claim that only short copy is effective because Internet users never want to read too much. Here in Tubik we support the approach that the length of effective and user-friendly copy depends directly on target audience: users as well as products are incredibly different, they have diverse preferences, goals and wishes when search for web resources or mobile apps. Both long and short copy have their own pros and cons, and each of them can be appropriate than depending on target audience of the product and its conversion goals.

 

Short copy is often effective for mobile interfaces and landing pages: their users are usually keen to see concise and highly informative copy content. Moreover, mobile interfaces have limited amount of space, so too much copy won’t look nice and will demand additional effort for reading, which can be the reason for poor user experience. Long copy is good for web resources that provide users with complex information on specific topics as well as presentation of the products which aren’t well-known for users and need additional informative support.

 

website design UI

Architecture Firm

 

Here is the example of a web page where long copy is useful. It’s a design concept featuring a website for architectural bureau following minimalistic and functional approach in creative practice and demonstrating it via website visual performance. The aim of such websites is to tell the company’s story, present professional level and achievements, so detailed copy works efficiently in this case.

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

This design concept also presents a website deeply based on copy: it’s an educational project setting the online encyclopedia about specific family of birds. Although it contains great amount of information presented in text, this type of content is logically divided into many brief and concentrated copy blocks supported with prominent headlines as well as bright and catchy illustrations. This approach makes interaction with the website more dynamic which is especially effective for a teenage part of target readers that presumably often perceive encyclopedias as boring stuff.

 

tubik toonie help screens interaction

Toonie Alarm tutorial

 

As we mentioned above, short copy is useful for mobile interfaces since they are limited in space. The interface of brief tutorial for Toonie Alarm app demonstrates the how copy is divided into short blocks in order to leave enough «air» on the screen and make copy readable.

 

Call-to-action elements with copy

 

The core elements that make UI interactive are those which contain a call-to-action (CTA). Some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized icons such as a telephone receiver for a phone call or the envelope for mail. However, in cases when the image of an icon is not so obvious or can be misleading, it is more effective to use double scheme, when the icon, button, or link is supported with the copy.

 

The copy for call-to-action elements consists of one or two words or a linked phrase in a body copy. Verbs in the imperative form are one of the frequently applied mechanisms of engaging users.  Designers are recommended to use various techniques of creating contrast, first of all via color, in CTA elements, so that they could stand out in the layout and draw user’s attention quickly.

 

tubikstudio swiftybeaver landing

Landing page for SwiftyBeaver

 

travel agency website UI

Travel Agency Website

 

The CTA buttons on these two landing pages are both centrally located, although they employ different types of copy. The first one consists of the four-word-phrase, while the other applies only one word. However, both look good and work effectively since they both contain the verb in the imperative form and inform target audience about appropriate action solving their potential task on this website.

 

good_sign_app_tubikstudio

Good Sign App Concept 

 

This is a concept for an unusual Good Sign app that gives you a new sign to look for, and you make your wish every time you see it in real life. Such an extraordinary app has also unusual CTA buttons like “Make a wish”.

 

book swap app tubik studio

Book Swap App

 

There’s no need to create CTA buttons exceptionally in bright colors — their main task is to be easily noticeable in the general layout. If the interface is bright and colorful, why don’t you make the contrast with light background which will make bright copy even more prominent, like in a concept for the Book Swap app above?

 

Captions

 

Caption is the short text under a picture describing its content. In web interfaces fonts are usually small and often italic, and in mobile interfaces the sizes of fonts depend on a size of a picture.

 

gym landing page fragment

Gym Landing Page

 

Here is a concept for the landing page of a gym. The captions here have bold fonts that make them easy to read. They are shown only when the picture is hovered which makes interaction more engaging for the users.

 

Points to consider

 

All in all, creating a quality copy content isn’t that hard if you keep in mind the typographic hierarchy principles. And here are some basic tips of presenting the copy:

 

  • Create catchy headlines. They draw users’ attention and often become the point of decision whether user continues interaction with the page or bounces it.
  • Make headlines short, but keep them highly informative. 
  • Subheaders relate to separate section, so they guide users through the content in the interface.
  • Use brief concise copy for mobile interfaces and landing pages.
  • Consider using long copy for web resources aimed at providing informative content.
  • Use verbs in the imperative form to encourage people to actions.
  • Use contrast colors for call-to-action elements, so that they could draw user’s attention more effectively. However, don’t forget to test readability of the text on the CTA elements: it has a crucial impact on usability and conversion rates.
  • A caption should preferably describe or add the data that isn’t obvious from the image.
  • Give strong preference to present tenses in captions.
  • Always ground your solutions on preliminary user research and don’t neglect testing different options.

 

Recommended reading

 

Here is the collection of recommended articles for further reading in case you would like to read more on the theme.

 

The 5 pillars of visual hierarchy in Web design

6 principles of visual hierarchy for designers

On Visual Hierarchy

F-Shaped Pattern For Reading Web Content

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

Effective Writing For Your UI: Things to Avoid

The Ideal Length of Everything Online, Backed by Research

Copywriting in UI. Words that Make Design Go Round.

 

Our next publication will continue the comprehensive theme of visual hierarchy and its effective practices in web and mobile interfaces. Don’t miss!


 

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

wedding planner app UI design

Case Study: Wedding Planner. UI Design Concept.

Perhaps, everyone, who once tried to organize any public event, knows that this sort of job is no joke. Remember Mary Fiore, the main character of the well-known romantic comedy «The Wedding Planner»? She had to plan a great deal of things and organize a crowd of people to make everything work like a clock and result in a perfect wedding. No wonder, people pay so much attention to this sacramental day: it marks one of the most important life decisions and events. Still, organization of this event is surely a big pain, especially for those who don’t know what to expect and how many aspects should be considered.

 

Obviously, technology taking over at least a part of effort could be the great help. After organizing her own wedding and moving through all the path, Tubik designer Olga Popova decided to think over the interface solutions for the Wedding Planner app, a virtual assistant for those who would like to have the perfectly organized wedding. Having felt all the problems and wishes of the target audience for this sort of a digital product, she didn’t want to waste the experience and transformed it into a simple and functional UI concept. 

 

tubik studio UI designer

 

Task

 

UI/UX design for a simple and multifunctional wedding planner and task manager.

 

Process

 

Organizing such a big and important event as wedding, the participants of the process know that they should be ruled by cold and focused mind instead of romantic flare and butterflies in the stomach. Forgetting little details or planning the time wrongly can spoil all the celebration. That is the core idea behind the app user interface: it’s main aim is enabling users to plan the tasks and mark them easily and quickly. Moreover, the designer had to consider that the app could be used by people of different age, physical abilities and tech literacy, so the functionality and operability had to be based on simple and clear solutions.

 

wedding planner app UI design

 

As the content of the app is mostly presented with short copy blocks and readability is the core factor, light background was chosen as a basis. Colored sections also were accomplished in a color palette using tender pastel  colors and hues as well as applying gradients. This choice of color combinations set the appropriate mood of the general wedding theme usually associated with delicacy, softness and sophistication. Moreover, such a general palette enabled designer to add prominent and easily visible contrast for call-to-action elements: this is particularly important as the approach supporting fast visual perception of the core elements for the apps which are often used on-the-go.

 

The aspect of readability also determined the choice of clear and simple font instead of highly decorated and complex fonts that present a huge seduction for adding more romance. Still, looking proper and stylish on wedding cards or invitations, it could serve a dirty trick with the users of the app: the screens would perhaps look stylish and romantic, but copy blocks would transform into unreadable mess which is intolerable for a task manager. This was the case when simplicity had the edge over sophistication and decoration.

 

Let’s check out the basic screens of the app. Here you see the main screen of the task manager. It presents the tasks and plans organized by days in chronological order. Having finished the task users can mark them as complete by tick or put a negative mark if the task wasn’t accomplished. If the date already passed, the app marks the undone tasks by itself so that the user could easily see them scrolling the list. In the top right corner of the screen, users can see the easily recognized button that allows adding a new task to the list.

 

wedding planner app UI design

 

As you can see, time and date are not the only marker to organize the tasks along. Another important feature that makes this app different from general to-do lists and sets its link to the specific nature of planning weddings is the set of categories to classify the tasks and plans. Tapping the plus-button to add a new position, the user is offered to choose the category to which it sticks. Every category is marked with an icon, so reviewing the main screen with the list of tasks, a user can quickly scan what aspects they have to deal with that day, be it meeting a photographer, ordering flowers, making a menu etc. This approach enhances usability and sets the basis for positive user experience.

 

wedding planner app UI design

 

Setting the new task, users can add all the necessary details: locations, telephone numbers, special notes and simple memos. Then, reviewing the tasks, they can tap the icons and see the chronological schedule of all the positions planned for this particular category.

 

wedding planner app UI design

 

If the task includes involving responsible people, adding the contact, user gets the ability to call or text this contact right from the task position in the planner. It helps to speed up the experience making all the needed operation without the necessity to move to other apps or contact list of the mobile phone.

 

wedding planner app UI design

 

Therefore, this clear and simple app can be a real cure and reliable helping hand for wedding organizers. It’s usability is based on the non-distracting color palette, readable copy blocks, quick classification of the tasks and instant access to contacting people responsible for their accomplishment.

 
wedding planner app UI design
 

Don’t miss new case studies on UI/UX design, development, animation and branding here in Tubik Blog: lots of projects and processes are prepared to be unveiled for our readers very soon.


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

year in review tubik studio design

Tubik Studio 2016. Year in Review.

Bright, fast and furious, the year 2016 is over. For Tubik Studio it was dynamic, bright, rich in meetings, shots, interesting projects and non-stop professional growth. The company got bigger, more experienced and diverse. Traditionally, we start every new stage of our workflow remembering the most significant points of what has already been done, and today won’t be an exception. Let’s take a moment to turn back for a while and remember some outstanding things that marked 2016 for our team.

 

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

 

Top Twenty UI/UX shots

 

tubik studio web design

Page 404

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

tubikstudio library widget

Library Widget

 

tubikstudio ui webdesign

Comics Shop Home Page

 

graphic design tutorial tubik studio

Singify App Tutorial

 

Christmas graphic design tubik studio

Magic Christmas App

 

tubikstudio homepage design

Event Agency Webpage

web design UI concept tubik studio

The Big Landscape

 

tubik_studio_website_ui_bakery

Vinny’s Bakery

 

health care app UI design

Health Care App

 

website design tubik studio

Adventure Agency Website

 

landing page UI design tubik studio

Website on cooking seafood

 

tubikstudio graphic design illustration

Ryiadh Tour Guide

 

tubik studio design

Weather App Concept

 

mobile app design tubik studio

Moneywise App

 

travel app tutorial tubik studio

Travel App Tutorial

 

snake battle app UI design

Snake Battle

 

toonie alarm UI design

Toonie Alarm

 

online magazine design tubik studio

Daily Bugle Online Magazine

 

book swap app tubik studio

Book Swap App

 

Top Twenty Animated shots

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

landing page animation Tubik studio

Magic.co landing page animation

 

 

tubik_studio_book_swap

Book Swap App

 

Landing Page Animation Tubik Studio

Organic — landing page animation

 

tubik studio healthy food animation

Healthy Food App 

 

tubik studio application recipes and cooking

Recipes App

 

tubikstudio ui design

BuonApp

 

website design UI

Architecture Firm

 

Tubik studio UI animation

Museu

tubik studio ice ui website

Ice Website

 

tubikstudio ui animation website design

Bjorn Website

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

apple even animation tubik studio

Apple Event Animated Graphics

 

gym landing page concept by Tubik

Gym Landing Page

 

tubik studio animated illustration

Lowrider

 

tubik_toonie_help_screens_interaction

Toonie Alarm tutorial

 

animation design

Night Run Animation

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

animated tutorial

Social Network Tutorial

 

motion design tubik studio

Rocket Animation

 

Top Ten Branding shots

 

business cards design

Deetu Business Cards

 

logo design music app tubik studio

Switch-up logo

 

logo design tubik studio

fOxygenic logo

 

andre logo design tubik studio

Andre logo 

 

logo design branding tubik

Pickitout logo

 

lion browser logo tubik studio

Lion browser logo icon

 

snake battle logo for game app

Snake Battle Logo

horsy logo design branding

Horsy Logo

 

logo design by Tubik studio

Elephun logo

 

logo animation tubik studio

Realli logo

 

Top Ten Illustration shots

 

Rio 2016 Illustration tubik studio

Rio 2016

 

graphic design illustration tubik studio

Californication Bus

 

tubikstudio space wallpapers

Free Space Wallpapers

 

character illustration tubik studio

Indian Dreamcatcher

 

Christmas graphic design tubik studio

Christmas Spirit Illustration

 

game character design tubik studio

Ulf the Viking

 

tubik illustration jazz tales book

Tales of the Jazz Age Book Cover

 

tubik studio illustration graphic design

Muscles Magazine

 

star-wars-rogue-one_tubik_studio_illustration

Star Wars Rogue One Illustration

 

badges illustration tubik studio

PukaPal Badges

 

Top Ten Articles in Tubik Blog

 

2016 brought a great deal of new posts in Tubik Blog to share our ideas, case studies and experience. Here is the list of some articles which got shared and read by big number of readers.

 

tubik blog article

Visual Perception: Icons vs Copy in UI

 

Tubik Studio Interface Animation

UI Animation: Microinteraction for Macroresult

 

toonie alarm time picker

The Ultimate Guide to Creating a Mobile Application

 

book swap app design

UI Animation: Eye-Pleasing, Problem-Solving.

 

lion browser logo tubik studio

Logo Design: Creative Stages.

 

tubikstudio ui ux design

UI/UX Glossary: Steps to Usability.

 

web design tubik studio

Home Sweet Home. Strategies of Home Page Design.

 

tubik studio ui design dark

Dark Side of UI: Benefits of Dark Background.

 

ios-developers-tubik-studio

Review of Popular Trends and Tools for Developers in 2016

 

UI design trends

Review of Popular Design Trends for Interfaces in 2016

 

Top Five Tubik News

 

Growing diversity of services

In 2016 we formed the full team of specialists able to create and maintain a digital product from scratch to release: today we are a comprehensive full-cycle digital agency, with experienced specialists in the domains of branding, UI/UX design for websites and applications, graphic design of any complexity, motion design, iOS and web-development, QA testing.

 

collaboration-process-app-design

 

Variety of outsource projects

2016 brought us the great bunch of outsource design and development projects for diversity of businesses and organizations. They established broad experience of collaboration with different customers, including big and well-known clients. One of the latest projects of 2016 was a «year-in-review» video for Opera.

 

 

In-house iOS application: Toonie Alarm

In 2016, to get closer to our outsource clients, we have set the purpose to create in-house studio products helpful for their target audience and adding some social value as well as giving us comprehensive experience of full path for creating and promoting digital products. In the domain of iOS app design, the product created and released by Tubik in 2016 is Toonie Alarm, entertaining and funny free alarm app for iPhones rewarding users for waking up with cute stickers. 

 


 

In-house content project: Design4Users

Design4Users is a blog devoted to diverse design issues solving users’ problems. It is organized via the basic categories such as «Branding» «Product» «Print» and «UI/UX» and plenty of more detailed tags in the mentioned domains. This resource was started with the aim to provide designers, customers and all those who are interested in this sphere of human activity with a wide variety of useful and interesting content supported with attractive and functional design. The blog is designed, developed and curated fully by Tubik studio team.

 

design4users blog

 

Free e-books by Tubik team

Additional big news was the start of Tubik Magazine, the set of free e-books from us about different aspects, approaches and tips on design and development. The first issue called Design for Business presented a variety of business points and terms important to consider for designers working over goal-centered design for companies and brands. The second ebook called Logo design was devoted to creative stages and strategies of efficient logo design. Both books are supported with practical cases. Welcome to read them or download totally for free.

 

tubik studio free ebook design for business

 

Bright moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page. No doubt, we also didn’t miss the chance to share our ideas, news, tips and experience via Medium and Quora as well as kept everyone updated with studio news via Twitter, FacebookTumblr and Flipboard.

 

new-year-photo

 

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

 

 

Warm greetings for everyone from Tubik Studio, we wish you amazing and successful year 2017!

video speeches for ui ux designers

15 Must-See Expert Speeches for UI/UX Designers

The year is counting its last days. As we could see in the article devoted to design trends in 2016, it’s been a bright, dynamic and diverse year for global design community. In addition to new trends and interesting digital products, it strengthened one of the core features of creative and career growth in the field of UI/UX design for digital products: to be highly professional and flexible for new challenges of the modern high technology, designers have to learn and improve themselves in non-stop mode. 

 

The domain of user experience and user interface design is so young, but already well-established: that’s amazing to see how many people, who started their career when the positions of UI and UX designers didn’t even exist in the list of specialities of higher educational institutions, now have grown into experts able to open the stunning area of knowledge and practice. And that’s a real luck for professionals all over the world to be able to share their findings via both real and online conferences with a view to getting the global design community stronger and more flexible for the sake of creating user-friendly problem-solving problems.

 

Today we would like to share and recommend you the collection of videos featuring deep and informative speeches from recognized experts in the sphere of creating digital products. They are devoted to different aspects of design for users and will definitely bring helpful and useful professional tips to UI/UX designers working over websites and mobile applications. So, enjoy watching, absorb knowledge and get inspired!

 

Hooked: How to Build Habit-Forming Products

by Nir Eyal

 

 

Designing Meaningful Animation

by Val Head

 

 

The Top 10 Things You Need to Know about Perception

by Susan Weinschenk

 

 

Designing Emotional Experiences

by Aarron Walter

 

 

Mind tricks & 7 Secrets of Behavioural Economics for UX Designer

by Lanny Geffen

 

 

How product design can change the world

by Christiaan Maats

 

 

How to manage for collective creativity

by Linda Hill

 

 

The complex relationship between data and design in UX

by Rochelle King

 

 

The art of innovation

by Guy Kawasaki

 

 

Why UX is not only the Responsibility of the UX’er

by Janne Jul Jensen

 

 

The Cognitive Abilities of Human Beings — Why Some Things are so Darn Hard!

by Janne Jul Jensen

 

 

Building a Winning UX Strategy Using the Kano Model

by Jared Spool

 

 

User eXperience

by Jesse James Garrett

 

 

Designing Better Conversations

by Justin Davis

 

 

Empathy: your secret weapon in designing for the web

by Nathalie Nahai

 


Originally collected for Design4Users

Welcome to check out 20 TED-talks for Designers

Christmas Eve Illustration Tubik Studio

Christmas in Creative Graphic Design Concepts

There is the season of a year, when people get closer, fire gets warmer and brighter, love gets deeper and gifts are the most precious. The time, loved by people all over the world for its magic and special spirit. The time, when we believe in fairy-tales and build new dreams and hopes for the future. The Christmas time.

 

Christmas is almost here, bringing good cheer and sweet moments. Surely, we couldn’t stay on the sidelines of the holiday atmosphere around and presented a bunch of festive designs on Dribbble and Behance. Today, with the warmest greetings and best wishes to our readers, we’d also like to share this bright set here. 

 

Hadcrafted Christmas lettering

 

 Merry Christmas lettering by Tubik

 

This hand-written lettering was created by Tubik Studio designer to congratulate everyone with a bright Christmas gift: it got into original free wallpapers for iPhones and desktops. 

 

Holiday characters

 

christmas characters illustration

 

This digital artwork presents the original version of three winter holiday characters loved and known all over the world: Santa Claus, his elf and Rudolph the Reindeer. They are designed in the artistic manner of digital flat illustration and catch the most prominent details transferring the nature and mood of every character as well as making them instantly recognizable.

 

Christmas Magic App UI

 

christmas app UI tubik studio

 

Have you ever wondered if there is a magic Christmas app including all kinds of stuff you would like to do? Here it is! This is the design concept of the app collecting variety of tips about decorations, recipes, gifts and tons of other things for winter holidays. Everything to set the magic right in your hand. You can also check out full Christmas Magic pack with interface design, icons and illustrations on Behance.

 

Christmas Eve Illustration

 

Christmas Eve Illustration 

 

This artwork presents a flat illustration full of details and decorations usually associated with Christmas season: Christmas tree, flashlights, ornaments, stockings on the fireplace, bells, candy canes and sweets. For many people they are vital to feel the atmosphere of bright and festive Christmas Eve, that’s why such thorough attention was paid to all the composition and its details.

 

Merry Christmas Illustration Pack

 

Christmas illustration pack

 

Here is another pack of flat illustrations featuring bright Christmas details. Everyone knows: when it comes to winter holidays, it’s never enough of decorations!

 

Christmas Spirit Illustration

 

Christmas spirit illustration

 

One more illustration called Christmas Spirit allows us to dive deep into the atmosphere of this long-awaited, amazing and enjoyable part of winter season.

 

With all our heart, Tubik team wishes you nice and peaceful holidays, tasty feast, cheerful parties, bright gifts and unbelievable meetings. Catch the vibe, guys! Merry Christmas!


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

UI design trends

Review of Popular Design Trends for Interfaces in 2016

The year is going away so fast: seems each day just melts away like a snowflake. Traditionally, before the holidays start, it is the high time to turn away and revise what deserves to be remembered.

 

We have already reviewed the most popular trends and tools for developers in 2016, today the theme will be continued with significant design trends that couldn’t be left without attention. No doubt, this design year was globally dynamic, creative, full of news and events. Having worked over diverse design projects and tasks as well as in-house studio products here in Tubik Studio, we prepared our list of trends in design for web and app interfaces, which got popular this year, illustrating some of the mentioned points with works by studio designers. Let’s get started.

 

Flat design

 

Flat design has significantly grown its presence and diversity this year, both in interface design and branding. The design approach is known for its minimalist and concise use of visual expressive means and has established itself as a style favorable for enhancing usability and visual harmony of user interfaces. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images.

The features of flat design supporting its steady popularity in interface design include:

  • simplicity of shapes and elements
  • minimalism
  • functionality
  • bold and highly readable typography
  • clear and strict visual hierarchy
  • close attention to details
  • thoughtful appliance of bright colors and contrast supporting quick visual perception
  • avoiding textures, gradients and complex forms
  • applying the principles of grids, geometric approach and visual balance.

 

ui animation cafe app tubikstudio

 

Here in Tubik we have checked high potential of flat design for interfaces on practice, with not only numerous outsource projects, but also the iOS app Toonie Alarm, designed and developed by studio team. Thoughtful integration of flat design via diverse interface elements, including icons, illustrations, buttons, tabs and the like, proved itself efficient for making UI bright, attractive, clear, intuitive and easy-to-use.

 

Toonie Alarm UI design

 

Moreover, this year flat design has set the strong link between branding and UI design, mutually supporting each other in digital products.  One of the fields broadly strengthening this trend was creating logos and app icons flat and simplified. This trend has featured itself not only in brand new projects, but also for well-established websites, apps, companies and products, which have presented new redesigned logos and corporate style visuals redesigned according to the principles of flat design.

 

Conversational UI

 

Another broadly discussed trend is conversational UI which has been the object for hot debates and theme for many speeches and case studies this year. Basically, the term «conversational UI» is connected with interfaces that enable users to communicate directly to the system in a way imitating conversation with people. In vast majority of cases, this sort of UI involves voice manipulation and recognition as the part of interaction.

 

More and more products are featuring this sort of functionality: some want it just because it’s trendy and fashionable while others find real ways to engage it for problem-solving objectives. Most often it is realized by chat-bots providing a flair of talk to the users. In automated dialogues of this kind, depending on the nature of the product and style of talk which is seen appropriate for the target audience, conversational UI can effectively involve both verbal (language) and non-verbal (emoticons, pictograms etc.) means of communication.

 

Among the advantages of conversational UIs, one of the frequently mentioned is automation of some basic and repetitive operations saving people’s effort for more creative and complex task. It can enhance usability of the product and even make it proactive, giving prompts to the user and improving interaction with the product. Still, there is the trap to overload the product with this sort of communication, based on standard situations and issues while missing non-typical cases or questions which need different solutions. Moreover, by far not all target users are ready to communicate in that way, so this design solution needs to be grounded on extensive user research and testing from the early stages of user experience design. Conversational UI can easily give zest to user interface. Yet, if it’s not analyzed and tested well, conversational UI can do the opposite and spoil user experience by poor interaction.

 

Anyway, this year UI designers have thought over new perspectives of applying conversational UI, in particular in combination with AI technologies, and this trend will definitely grow showing new rays of creativity next year. Conversational UI isn’t just another fad: it is the trend providing total or partial changes to certain areas of interaction design and giving alternative approach to problem-solving and decision making processes.

 

Minimalism

 

This year has given the great bunch of applications and websites designed on the principles of minimalism. They support positive user experience by providing clear and simple interfaces, full of space and air, focused on content and navigation. Minimalist interfaces are characterized with thorough attention to visual elements, not numerous but always transferring a particular message. Minimalist interfaces, both for web and app, also feature sophisticated work with typography and visual hierarchy supporting instant scanning and skimming the content of the page or screen. Moreover, interfaces of this sort usually provide high level of legibility and readability.

 

tubikstudio ui animation website design

 

Custom graphics

 

Desire of originality sprung out in UI design in the area of custom graphic design of all kinds. More and more interfaces apply custom mascots, icons and  illustrations that fulfill multiple goals: adding originality to the visual design concept, enhancing usability, strengthening navigation and marking out the content depending on its nature and functions. Graphic details play crucial role in usability and accessibility of the product and even the slightest changes can bring significant results, speeding up visual perception and understanding interface elements or transitions.

 

Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in the interfaces such as icons and their impact on general efficiency of the product has been an actual topic in global design community for a long time. In addition, images push the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic or non-reading preschoolers.

 

As for custom illustrations or icons, created for specific products, made according to the preferences and needs of the particular target audience and with a view at certain business goals, they are able to make the product work more efficiently solving users’ pains and satisfying wishes. Perhaps, that is one of the most popular reasons why this trend got so popular in 2016 presenting interesting interfaces with custom graphics of diverse styles and performance.

 

Tubik Studio Weather App

 

Another side of this trend is evolving field of wallpapers for desktops and mobile devices featuring original graphic artworks on a variety of topics. It also can be characterized as user-friendly trend giving users the choice of means for self-expression and satisfying personal aesthetic needs.

 

Animated microinteractions

 

Interface animation is one more hot and debatable topic of this year. Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. So, designers and developers work over more and more sophisticated methods to make animation pleasant-looking and problem-solving characteristic of modern apps and websites.

 

One of the frequent methods of adding motion to UI are animated details featuring microinteractions. Microinteractions supported by clear finalization via motion create fast feedback for the user and make the experience positive and efficient while navigation simple and intuitive. Animated buttons, switchers, toggles and other interactive elements inform user in split seconds activating all the potential of fast visual perception.

 

tubik studio button ui

 

As we mentioned in the earlier article, animation in the interface can create pleasant illusion close to natural interaction with physical objects which often doesn’t need too much cognitive process. For example, if you pull the object, press it, move out the tab, the movements should feel natural.  Most users won’t be able to see this sophisticated work accomplished by designers: they will take it for granted and the fact it makes them comfortable will be the biggest praise for design solutions.

toonie switch UI animation

Scroll animation

 

Scroll animation also got new vibes and perspectives of artistic realization. Thought-out movement of layout elements while the webpage is scrolled enhances user experience significantly and creates the harmonic feeling of one integral smooth interaction rather than perceiving several separate parts or blocks of the page. Moreover, this sort of interactions is aesthetically pleasant and engaging, and these emotions are a good factor of retaining users. This year, full of new updates in design tools and software, showed great practices of sophisticated work on scroll animation.

 

Landing Page Animation Tubik Studio

 

Animated tutorials

 

Tutorial is a vital part of onboarding users for most mobile applications. Certainly, wide variety of means and techniques are applied to make it clear, engaging and informative as it is a strategically important element of involving users into further interaction with a digital product. This year designers combined traditional techniques with new popular findings: in particular, custom illustrations and animation brought new vibes to app tutorials, making them more dynamic and enhancing their informative potential.

 

tutorial interface animation tubik studio

 

Diversity of landing pages

 

Surely, landing pages were discovered much earlier than 2016, still this year has brought the new lap of their development and diversity. More and more businesses and social projects take advantage of using them for effective presentation of special services, sales, offers or issues that need focused user’s attention. Landing pages have also grown their presence in the Net as the effective method of promotion for native mobile apps. Accomplished wisely and thoughtfully, grounded on user and market research and testing, broad usage of landing pages can be also seen as the other user-friendly trend, providing users with necessary information and interactions in clear and accessible way saving their time and effort. From the business perspective, they also work well giving businesses the flexible tool for original and effective presentation.

 

web design UI tubik studio

 

Brutalism

 

The trend of brutalism in digital design has rocketed this year getting more and more expressions and diversity. It is often characterized as a webdesign style aiming at breaking standards and predictable design techniques. The websites created in this manner are a sort of rebellion to sophisticated designs with thought-out symmetry and harmony, complex layouts and accents of aesthetic visual performance. Vice versa, brutalism is based on simple and raw appearance, in most cases not loaded with many visual details and sometimes even close to plain HTML page. Used wisely, for the appropriate goals and audience, this approach can bring high level of originality to the website and make it really stand out of the crowd.

 

Contact List Concept Scrolls Tubik

 

Custom grid

 

According to Internet Live Stats, there are over 1 billion websites in the World Wide Web today. This milestone was first reached in September of 2014, as confirmed by NetCraft in its October 2014 Web Server Survey, and first estimated and announced by Internet Live Stats. The number had subsequently declined, reverting back to a level below 1 billion due to the monthly fluctuations in the count of inactive websites before reaching again and stabilizing above the 1 billion mark starting in March of 2016. With more and more websites coming into play, designers have to be more and more creative to not only make them attractive and harmonic, but also give them a feel of uniqueness and original appearance. That is one of the reasons, why experiments with grid also won their place in the list of general design trends of the leaving year. Custom grid is the way to save the feeling of harmonic layout and placement of the elements with higher level of flexibility and originality. However, this sort of experiment requires thorough research and in many cases the final result comes via several iterations tested and analyzed in terms of usability and visual perception.

 

 

web design UI concept tubik studio

 

Bold and catchy typography

 

2016 could also be mentioned as the year of further rigorous practice on typography in global design community. It brought the world loads of new nice typefaces both universal and created with a view to particular objectives or products. Typography continued its progress as one of the crucial aspects of efficient web and app design, and one of the trends in this domain was practices of applying bold and outstanding typography for webpages, catching users’ attention and instantly informing them about the core message. In particular, this approach got its development in the sector of landing pages whose quick and dynamic presentation of core data to users has great influence on conversion rates.

 

tubik_studio_website_ui_bakery

 

Large thematic image

 

One more trend often found in various designs for interfaces is applying prominent images, which could be either photos or illustrations, as the central visual element of the general composition. Important thing is that the image is never just a placeholder of nice looks: it presents a powerful way to strengthen the informative potential of the page or screen, set the theme instantly and focus user’s attention at the significant details. Needless to say, it takes much designer’s effort to choose the one successfully transferring the necessary message and supporting general stylistic concept.

 

UI design trends

 

Handwriting lettering

 

Custom handwriting lettering also got popular as a design trend and is often used for marking out significant details and images in an original way. Special lettering made by professional designers looks fresh and unique, refreshing visual performance of the webpage or screen. On the other hand, being applied in UI design, it demands additional effort to be tested in the layout as it can happen that hand-crafted lettering looks great separately, but doesn’t work effectively in combination with other elements of the interface.

 

Real content instead of Lorem Ipsum

 

This year has featured growing attention to content, its quality and performance. In user interfaces, content and design and interconnected parts that should successfully support each other instead of fighting for users attention. That makes more and more designers prefer applying real content instead of well-known Lorem Ipsum, even in cases of creative stages or presentation of design concepts. It gets designers, clients and users closer to real experience and more natural feel of interactions.

 

landing page UI design tubik studio

 

Videos explaining or presenting products

 

Due to easy access to reviewing videos via YouTube, social networks and other platforms of product presentation, video explainers have quickly established themselves as a popular trend. Naturally, it wouldn’t be logical to neglect such a powerful source of connection with clients and users, so 2016 has brought a great variety of videos presenting the products, companies and services, explaining their benefits and special offers, showing engaging flow of interaction and connection. They took over the responsibilities of the picture which is worth a thousand words: video explainers quickly show the most important features of the product and let the users know what deserves their attention first of all.

 

Example of video explainer designed by Tubik Studio for Toonie Alarm

 

Example of promotional year-in-review video designed by Tubik Studio for Opera

 

Bright and dark color palettes

 

No secret, color is one of the most powerful and influential factors in UI design. One more trend in UI design deserving a place in the list of this year is great variety of color palettes designers choose for applications and websites. Diversity of new fonts and typefaces as well as research of usability studies allow going beyond standards and trying new combinations which will take advantage of diverse colors but with it won’t lack in usability. More and more creatives are discovering new horizons combining traditional techniques with innovative approaches in the domain of work with color.

 

tubik studio application recipes and cooking

 

To sum up, we can certainly say that in the sphere of UI design 2016 has been the year of creative search and experiments, still most of them were focused on usability and desirability of the final products. No doubt, 2017 will not lose its chance to polish these trends and open the new ones. 


Welcome to read the review of popular trends and tools for developers in 2016

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

web-ios-development-trends 2016

Review of Popular Trends and Tools for Developers in 2016

The software technology is constantly evolving, and internet users as well as people creating digital products expect innovations and progress in this field. To provide high-quality development services for clients and final users being competitive on the market, it’s highly advisable for designers and programmers to keep an eye on mainstreams in the professional sphere and try the latest and greatest advances. Although it doesn’t always mean that new tools and trends will immediately replace the current, still the strategy of setting up the sails for every wind usually provides higher level of professional flexibility and growth.

 

The year 2016, which is quickly leaving day by day, has brought a lot of news as well as established some already known tools, trends and techniques even more solidly via practice and updates. Web and app developers have got new frameworks, updating technology and powerful development tools. We have discussed what Tubik Studio developers find popular and important to mention in the domain in 2016 and today want to share the ideas with our readers. So, here is the list of broadly used programming languages, frameworks and tools as well as updates which quickly won their place in the process. As usual, this year development trends and popular choices are driven by greater efficiency, increased customization and ease of use. Let’s check what has been found essential in iOS and web development.

 

iOS development

 

The constantly changing world of mobile phones, tablets and other devices means that businesses keep app developers busy all the time requiring high professional level and flexibility. Every latest version and update of iOS operating system brings new facilities, opportunities and challenges for developers. The following stuff was widely used in creating great variety of iOS apps this year.

 

ios development glossary

 

Alamofire

 

Alamofire is a Swift-based HTTP library for iOS and Mac OS X. It uses NSURLSession and the Foundation URL loading system to provide first-class networking capabilities in a convenient Swift interface that simplifies a number of common tasks for the developers. Alamofire offers chainable response and request methods, JSON parameter and response serialization, authentication, network reachability, Unit and Integration test coverage and many other features. It was initially written in Swift and did not inherit anything from Objective-C.

 

ReSwift

 

ReSwift is Redux implementation of the unidirectional data flow architecture in Swift. The ReSwift library allows everybody to dive into the code, understand every line and contribute. It also supports Swift 2.2 through to Swift 3. ReSwift is quickly growing beyond the core library, providing experimental extensions for routing and time traveling through past app states. It provides separating app components into three important concerns: State, Views and State Changes.

 

Firebase

 

Firebase is a BaaS (Backend-as-a-Service) that started as YC11 startup and grew up into a next generation app development platform on Google Cloud Platform. It supports the web, iOS, OS X, and Android platforms. Traditionally configuration of a server requires fetching data via some API that is written in order to retrieve data from the server. Firebase simplifies storing and retrieving the data via a third party service and comes with its own API. The platform was acquired by Google in October 2014 and received a significant number of new features in May 2016. In the new version, Firebase takes many of Google’s existing developer tools, like Google Cloud Messaging and combines them with new and current Firebase services, among which app indexing, crash reporting, hosting, cloud messaging, AdWords, AdMob, storage, real-time database and others.

 

Swift

 

Before Swift came into play, Objective-C had been the main programming language used by developers for OS X and iOS operating systems and their APIs. Swift, introduced at Apple’s 2014 WWDC, brought its own dose of revolution. In general description, Swift is a general-purpose, multi-paradigm, compiled programming language broadening the previous scope of operating systems as it was developed for iOS, OS X, watchOS, tvOS, and Linux. The latest version Swift 3 got improvements which made code-writing more natural and consistent. By downloading Xcode 8 developers can easily use this new version and move automatically from previous to latest Swift 3 syntax.

 

Tubik Studio iOS development

 

Front-end development

 

Front-end developers also mention dynamic progress in the domain of tools and software, mostly based on the updates of already established platforms and programming languages. JavaScript holds its leading positions because the language is usually used to make web pages more interactive, create games, animations, dropdown menus and take extensive control over the web interface. A large number of web development frameworks have come into JavaScript recently and many of them have already established huge communities such as Angular, Meteor, React and Backbone. Let’s look through the most popular JS frameworks and libraries essential to remember as effective and broadly used in 2016.

 

web developer tubik studio

 

Angular.js

 

Angular.js is a complete, JavaScript-based, open-source, front-end web app framework maintained by Google. It is a common technology to provide a solid base foundation for developers working with the latest industry standards and requirements. The framework provides a set of modern features for rapid app development. New version of Angular.js is called “AngularJS 2” and has been provided with the improved structure and development features. Now it enables to get improved and simple form of validation, two-way data binding, routing and animations. The second version is totally different from previous one, requiring ES6 and TypeScript knowledge.

 

Backbone.js

 

Backbone.js is a framework with a RESTful JSON interface and based on the model–view–presenter (MVP) architectural pattern. The main concept of the framework is that all server-side functions should flow through an API, minimizing the amount of code that needs to be composed for achieving the same powerful functionality of more sophisticated web frameworks. Backbone is a popular web development framework for JavaScript developers because its usability modules are easy to understand, and also it presents a straightforward learning curve. For example, Trello is built using Backbone.js for all the models, views, and routes. Backbone.js 1.3.3 was released in April 5, 2016. The bugs of 1.3.0 — 1.3.2 versions were fixed in the 1.3.3 and it also provided new methods and improvements.

 

MeteorJS

 

MeteorJS is a free and open-source JavaScript web framework written using Node.js. It simplifies the development of real-time mobile and web app that can be built with a singular development interface. Any web app built with Meteor is also automatically compatible with mobile devices. The developers can convert the existing web apps into mobile apps and release them in the most popular mobile app stores. Meteor is also full-stack framework supporting native JavaScript language for building modern and scalable web and mobile apps. The public package repository Atmosphere has thousands of published packages that let to create multiplex apps. The latest versions of MeteorJS are 1.4.2.3 — 1.4.3-beta.1. The main feature is enhanced rebuild performance focusing on the complex apps development. The framework has become more modular with parts that can be packaged, maintained and evolved independently.

 

React.js

 

React.js is an open-source JavaScript library for data rendered as HTML. It is maintained by Facebook and the main area of expertise is supporting implementation of a Virtual DOM. The Virtual DOM is compared with the current state of the DOM generating a list of operations that make the current DOM look like the new one. Those operations are applied quickly in a batch. React.js v15.4.0. was released in November 16, 2016. In the new version, React DOM implementation was moved to the React DOM package.The upgrade solves a few problems such as errors of React DOM import in the same file as the snapshot testing renderer. The version can visualize React components in the Chrome Timeline allowing to see which components are mounted, updated and unmounted.

 

CSS frameworks

 

CSS processors emerged in web development many years ago having quite limited set of features in their early version. Yet, nowadays they are the key points for CSS development. The processors extend CSS with variables, operators, interpolations, functions, mixins and many other usable assets. At the moment, Less and SASS are mentioned among the most popular preprocessors with the large feature sets. However, the news that Bootstrap 4 is migrating over to SASS gives it a slight edge over Less in 2016.

 

programming languages fron-end

 

Bootstrap

 

Bootstrap has become even more popular over the last years. Like any effective front-end framework, Bootstrap includes CSS, HTML and JavaScript components. It adheres to responsive web design standards allowing to develop flexible websites of all complexities and sizes. The framework typically includes the latest and best features because it is continually updated. For example, Bootstrap added themes that met Google material design guidelines shortly after they were published and it was also upgraded to use SASS as a CSS preprocessor.

 

Foundation

 

Foundation is a highly advanced front-end framework useful for designing responsive and flexible websites. The framework supports GPU acceleration for smooth animations and has Fastclick.js for fast rendering on mobile devices. It runs on the SASS preprocessor and includes the Foundation-developed data interchange attribute, which allows loading lightweight HTML sections for mobile and bigger HTML sections for larger screens. Foundation is used by Facebook, eBay and Mozilla, but it is quite complex and may not be suitable for beginners. The version 6.3.0-rc3 was released in December 9, 2016. It has a number of the improvements such as the updates of components and fixed errors of previous version.

 

Back-end development

 

Nowadays lots of programming languages and their frameworks, such as PHP, Java, Ruby and the like, are used for efficient back-end development. Let’s check out the list of popular languages and frameworks often chosen for web projects.

 

web development and programming

 

PHP

 

PHP is an HTML-embedded programming language. The main aim of the language is to allow creating dynamically generated pages quickly. Its frameworks are used for back-end development and widely used for the complex web services. One of the main PHP development concepts is to reuse generic components and modules for faster creation and better performance of the projects. The frameworks allow keeping the codes organized, facilitating scalability and ensuring long-term maintenance.

 

Laravel

 

Laravel is an open-source web framework intended for the development of web apps following the model–view–controller (MVC) architectural pattern. The framework has a lot of fresh features and lightweight templating engine that helps developers complete the most frequent tasks like authentication, sessions, queuing and caching. Laravel has a micro-framework Lumen focusing on lean management. It helps to develop sub-projects and micro-projects and allows programmers to put them into the main framework by just copying the code into the particular project. Laravel 5.3 was released in August 23, 2016. The new features are focused on speeding up developer’s performance by adding the set of extra improvements for common tasks, for instance Laravel Scout (a driver based full-text search engine for Eloquent), Laravel Passport (the technology deploying OAuth2 server), Laravel Mailable, Laravel Notifications, Laravel Echo (an improvement to the existing event broadcasting system), a new $loop variable of Laravel Blade and a huge overhaul of documentations.

 

Yii

 

Yii is an open source, object-oriented, component-based, MVC framework, easy to use for developing web apps and APIs. It has a reliable code generator allowing to save time writing code to connect to the database and also it uses the ActiveRecord pattern for object-relational mapping which means less SQL code to write. The main benefit of the framework is the ability to decrease the complexity of developer’s work. Products created with the Yii framework are characterized as efficient, extensible and easy to maintain. The latest version of Yii was released on October 20, 2016 presenting a complete rewrite of Yii on top of PHP 5.4.0.

 

Symfony

 

Symfony is an open-source web framework built on top of components such as Drupal, Ez Publish, and phpBB. These components are reusable PHP libraries used to complete tasks like creation, routing, object configuration, authentication, templating, etc. Symfony APIs also enable easy integration with third-party apps and Symfony can be used with popular front-end frameworks such as AngularJS. The latest version of Symfony was released in December 13, 2016 with enhanced performance and fixed bugs for providing the reliable workflow.

 

Node.js

 

Node.js is an open-source, cross-platform, JavaScript runtime environment that allows developers to run JavaScript code on the server, outside a browser. It is built on top of Google Chrome’s V8 VM engine supporting JavaScript in the chrome browser. Node.js wins high popularity because it enables to build large scale, real-time and scalable mobile and web apps with only JavaScript. As the Node.js ecosystem grew, the frameworks also started to showing progress and speeding up the development workflow. There are many Node.js frameworks that simplify building real-time web apps, among them the following:

 

Node.js Express — a minimalist and flexible framework built on top of node.js and has taken node.js to the next level by providing high-level wrappers around node.js APIs. The framework offers all the features required for developing high-quality web apps, mobile apps and APIs. Express also qualifies as Node.js rest API framework.

 

KOA — a lightweight framework for developing web apps and APIs. KOA requests flow through middleware in a stack-like manner allowing developers to perform actions downstream then filter and manipulate the response upstream. KOA generators also greatly increase readability and robustness of the app.

 

Sails.js. — a web framework that sets platform for easy building custom, enterprise-grade Node.js apps. The framework is designed to resemble the MVC architecture from frameworks like Ruby on Rails but it has more modern, data-oriented style of web app development. Sails.js has all the features required for building anything from a small scale chat client to an enterprise grade web app.

 

Ruby

 

Ruby is dynamic, object-oriented, open source programming language with a focus on simplicity and productivity. Moreover, Ruby has framework which supports high level of flexibility for developer in the process of creating code for particular aims. Ruby on Rails is a development tool to give web developers libraries providing structure for all the code they write. Actually, it is a server-side web app framework that extends Ruby programming language. This framework uses Ruby to dynamically assemble HTML, CSS, and JavaScript files. Rails helps developers to build websites and web apps abstracting and simplifying common repetitive tasks. Rails 5.0 was released on June 30, 2016, introducing Action Cable, API mode, and Turbolinks 5.

 

ruby-on-rails web development

 

Java EE

 

Java EE is a platform for creating large-scale apps and software in the Java programming language. It includes a runtime development environment as well as an API and has additional features in comparison with the standard edition, including web services, distributed architectures, multi-tier architectures and object-relational mapping.

 

.NET Framework

 

.NET Framework is a technology that supports building and running the next generation apps and web services. The framework consists of the common language runtime and the .NET Framework class library. The common language runtime is the foundation of the .NET Framework. The technology provides language interoperability across several programming languages (each language can use code written in other languages).

 

copywriting for digital products

 

Even this review, briefly describing popular tools and software, shows that the sphere is constantly growing and offering new opportunities for both developers and users. Whatever broad and diverse the list of tools will be, in practice developers choose what is better for them only by taking their own steps and breathing life in digital products via code. The best tool, software and technique is the one that enables to provide the final product which is effective, user-friendly and solid in performance. That’s the biggest intention we had compiling this list: providing developers with food for thought on trying something new and reviewing which important things the year has brought. No doubt, the next year will be even more powerful in innovation for app and web development sphere so let’s look forward to them together!


Welcome to read more articles on web development

toonie alarm UI design

Case Study: Toonie. UI Animation Development.

In most cases, when users deal with animation in the interface, it takes short seconds and feels as natural as a breath. Being far from design and development routine, it’s almost impossible to imagine that these brief and simple interactions take long hours of thorough work presenting mix of science and art. 

 

In our previous articles we had numerous chances to show you diverse UI animations solving users’ problems and enhancing usability, still they were mostly presented in design perspective. Today’s  case study will set the link between design and development for iOS mobile applications: it will show you collaboration of UI designers, motion designers and iOS developers working over animation for Toonie Alarm. Previous case studies already let you see the creative process for user interface and mascot design, but this time you will come along step-by-step guide on how animation was created for the app. 

 

Time Picker animation

 

Time picker in the alarm application is actually the core part of interaction with the app and the primary element at which motion design and development play the vital role for establishing both usability and visual harmony. Let’s see how science, calculations and code are able to transform into beauty and style.

 

toonie alarm UI animation

 

All the content of animation is placed on custom subclass UIView, for this case we call it AnimatedDayView.

 

layers_scheme toonie-ui-animation

 

The bottom layer is Infinite UIScrollView (1 on the scheme above). It is the endless scroll view that includes the copies of the image below.

 

toonie scroll animation

 

There are numerous ways of realization for endless scroll. The main idea of replacement in scroll view is to recalculate the size of the scroll view and replace the invisible previous image showing the new one and adding the one for the future.

 

In the case of animated time picker for Toonie, we took the starting point as 6 AM, therefore the middle point is 6 PM and the ending point is 6 AM of the next day.

 

The next layer is Stars UIImageView (2). This UIImageView is added over the scroll view and goes round its centre; during this process the Alpha of the layer is changed. It means that in the daytime it is transparent while in the evening time it gradually appears.

 

stars_ui-view_scroll_animation

 

The next layer is CALayer for the sun and the moon— SunMoonBackgroundLayer. It isn’t seen on the scheme as it has the same size as AnimatedDayView. It also rotates around its centre which is below the visible frame of the screen (5).

 

On the SunMoonBackgroundLayer, there are two more layers — for the moon (3) and the sun (4). The layer of the moon rotates to the same angle as SunMoonBackgroundLayer but in the opposite direction. The sun rotates to the higher number of radians.

 

The issue of great importance here was to thoroughly calculate at which number of degrees should each layer be rotated and how far should the scroll go on. The scroll presents the easiest part. The input variable is always time, that is the hour and minutes which user chose on UIDatePicker. With this data, it’s quite simple to calculate the scroll view shifting. Initially it will be zero, which in our case is equal to the time of 6 AM as we set above. Imagine that user has picked the time 9.10 AM. We can understand which number of pixel the view has to shift down or up when we calculate the difference of the time in minutes (190 minutes) and transforming them into pixels. All the scroll ground presents 24 hours, so its height presents 24 hours, therefore 1 minute=image_height/minutes_per_day (60*24). Knowing the value of 1 minute, it’s not difficult to calculate how many pixels are set into 190 minutes. The only thing left to do is to move the scroll on the required number of pixels, which can be also negative in cases when the new time is less than the previous setting.

 

The next important parameter is Alpha of the stars. It can be calculated with understanding at which particular place on the background image we are at the current position. It means that at 6 AM in the top part of the image the stars should have Alpha 0 value because the morning starts. And the stars are ignored, aka kept in Alpha 0, up to 6 PM, and then Alpha value should be gradually increasing so that at midnight Alpha reached 1. The calculation of dynamics and intensity here can be different depending on desired visual effect. The core thing is that we have the basic parameter which we can rely on: the current position on the background image. And it can be easily calculated knowing the time set by the user. With alteration of Alpha motion, attractive visual performance can be effectively reached.

 

To calculate the angle of rotation, we take 360 degrees for 24 hours. So, 0 degree = 6 AM. We calculate the difference in minutes, find the number of degrees per minute and set the degrees required for shifting.

 

Another element of animation is clouds. They appear due to NSTimer. It adds one of the graphic variants for clouds (the app uses three graphic versions) with random coordinate of Alpha (transparency) beyond the limits of the screen on the right side. After that animation of movement (changing the centre) starts from right to left. The timer is launched with the random interval.  After the animation is finished, the cloud is gone.

 

toonie alarm time picker

 

Sun switch

 

Another piece of animation that required attention and creativity was the switch on the Alarm Screen, the actual element of interaction showing that the alarm is set and active or not. Design solution supporting general visual performance of the app was to make the toggle look like the animated sun when alarm was in the active position.

 

toonie switch UI animation

 

Looking over the accomplishment of the presented motion via code, we see that this is the UIView which contains several layers.

 

toonie-ui-switch_animation

 

The first layer is the background of the hole in the switch (1) which has a rectangular shape. Above it, there is the circle — the toggle of the switch (2) which is the centre of the sun. It can move leftwards or rightwards. Another layer is the sun rays (3). They are set as the separate layer because they have the endless animation of rotation.

 

When the switch is off, the rays change their Alpha to 0 and animation stops. Over all the mentioned layers, the largest layer is placed which is the background of the switch (4). This is also the rectangular layer which has a mask CAShapeLayer drawn with two UIBezierPaths.

 

 

The mask cuts off the layer of the required shape and switch gets a look of the final view. For interactive controlling, two Gesture Recognizers are added: UITapGestureRecognizer for pushing and UIPanGestureRecognized for pulling the toggle.

 

This practical case shows that making animation which will realize its problem-solving potential looking attractive and natural is a demanding task requiring thoughtful approach and collaboration of designers and developers for users’ sake. If you want to test everything described above in real interaction, just set Toonie and see how it works. And don’t miss new cases telling more stories of creative process.


Welcome to set up Toonie Alarm via App Store

Welcome to read case studies about user interface design and mascot design for Toonie Alarm

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

tubik studio web design

6 Big Reasons to Start a Website

For centuries, people have found hundreds of ways to communicate and collaborate for both professional and personal aims. Still, since the time when the Internet came into play, these directions of human activity have witnessed really prominent progress. It got especially significant and impressive for the last decade, with broader availability of the Internet and development of new technology. Decent ten or twenty years ago having a website was seen a sort of luxury while today it is often a widely-used and important factor of personal, professional and business growth.

 

There is a great number of big and small goals standing behind the incredible variety of websites whose number seems to grow every single minute. According to Internet Live Stats, there are over 1 billion websites in the World Wide Web today. This milestone was first reached in September of 2014, as confirmed by NetCraft in its October 2014 Web Server Survey, and first estimated and announced by Internet Live Stats. The number had subsequently declined, reverting back to a level below 1 billion due to the monthly fluctuations in the count of inactive websites before reaching again and stabilizing above the 1 billion mark starting in March of 2016. In general, this is the sort story of the amazing path from 1 website in 1991 to 1 billion websites in 2014. 

 

No wonder, more and more people are thinking over the idea of setting their websites and they come to this decision along the different ways reaching various life destinations. Let’s review the most popular reasons that make people work over their websites either by themselves or hiring professionals for that job, and in some cases applying both of the mentioned options. The ideas will be supported with web design concepts accomplished by Tubik designers and corresponding to particular objectives.

 

E-commerce

 

Nowadays this reason would definitely take its place in the top. With better technical abilities of presenting goods and services as well as fast and secure payments enabled via the Internet, more and more people take opportunities of buying and selling online, right from their desktop. It can deal even with the case of personal websites, if people both communicate and sell the goods or services they produce via this website. So, getting real financial profit can be named among the prominent reasons of creating a website. Moreover, modern content-management systems support this aim with tools and features strengthening the website rates in search browsers. 

 

tubikstudio ui webdesign

Design concept of online comic bookshop

 

tubik studio UI design

Design concept of online auction

 

tubik studio design UI

Design concept of the randomizer for e-commerce platform

 

tubik_studio_website_ui_bakery

Design concept of the bakery enabling online orders

 

Business presentation

 

Another reason connected with professional activity and encouraging more and more people to start their websites is presentation of their business, whatever is its nature and volume. It can be anything, from simple one-page website giving basic description of the professional and contact data to complex web platforms providing the variety of business directions or extensive portfolio. The core distinguishing feature comparing to the previous position is that this website doesn’t provide full cycle of direct sales from order to payment and delivery, its aim is to present the services or goods as well as the ways of getting them. This can be the reason for not only fully packed websites of broad functionality but also landing pages fulfilling the same need.

 

tubikstudio homepage design

Web design concept for a company organizing open air events

 

website design tubik studio

Web design concept for a company organizing hot-air-balloon rides

 

website design UI

Web design concept for an architectural bureau 

 

tubikstudio ui animation website design

Design concept for the interior design studio

 

Sharing information

 

This is the reason why people set up diverse blogs and websites aimed at sharing information: these can be online magazines and newspapers, thematic collections and bloggers’ reviews etc. It is usually not aimed at direct communication, only providing users with fresh and actual information.

 

online magazine design tubik studio

Design concept of online newspaper

 

web design UI concept tubik studio

Design concept of the online magazine devoted to travelling

 

tubik web design

Web design for the blog devoted to design news and trends

 

Education

 

One more reason to start the website is the ability and wish to provide some materials and/or communication with educative objectives. These can be different stuff, from personal teacher’s blogs to interactive encyclopedias or platforms for online courses.

 

tubik studio web ui design

Web design for online encyclopedia

 

Communication

 

The Internet presents great and easily available opportunities for communications, so communication can be one more good reason for creating a website, like blogs with direct discussions, forums, social networks for general or special themes etc.

 

sport social network design tubik

Design concept of a social network for sport fans

 

Self-expression and practice

 

Sometimes, people create the website with the aim of getting a platform for expressing their creativity and trying particular skills, like, for example, creative writing. Again, complexity and quality of these websites can be very different, still the basic reason behind them is self-expression and growth.

 

tubik studio design

Design concept of a personal blog devoted to architecture

 

Surely, this list is not totally full, it mentions only some of the globally popular reasons for creating websites. Stay tuned and don’t miss the new articles analyzing all the mentioned directions in closer detail.


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

Welcome to read UI/UX glossary on web design