Nowadays, World Wide Web connects people from all around the world whatever their aims and wishes are. Personal and professional communication, ordering and delivery of goods and services, education and mentoring, searching for new information, advertising, watching films, tracking everyday stuff and accounting finances, and so on, and so forth—seems, there’s no sphere to which the Internet wouldn’t add its own two cents. This reality presents new challenges for designers.
Today we would like to present you the new issue of Tubik Magazine. This time the free e-book called Problem-Solving Web Design presents the overview of theory, practices and design cases for user-friendly and attractive websites and landing pages. We have collected tips and ideas sharing our experience in this field.
Benjamin Franklin once said: “Beware of little expenses; a small leak will sink a great ship.” Management of finance and accounts has been an actual issue for a long time; still, for the recent decades, it has got a new perspective with the advent of modern technologies and the internet which is becoming more and more accessible. It presents a new challenge for designers and developers in terms of digital products which will help people to track and manage their money flows both professionally or just for themselves.
This theme built up the foundations for a new UI design concept created in terms of Tubik UI Fridays: one of the creative sessions was devoted to Home Budget, the application for finance management. The creative team of UI/UX designers Ernest Asanov and Dima Panchenko and motion designers Kirill Erokhin and Andrey Pixy worked under art direction by Sergey Valiukh. Let’s review what design solutions were presented for the task.
UI/UX design for the web and mobile versions of a personal budget manager
Describing the functionality of the app in general terms, Home Budget allows users to manage their expenses and incomes, creating the extended database for tracking financial flows or changes and getting comprehensive stats. The app was planned to have two variants: the web version presented with an informative dashboard and the mobile version giving simpler information and enabling to add new data quickly and easily.
For both variants of interfaces, the designers agreed about the dark background of the layout and the fonts which would have the high level of legibility for both letters and numbers.
The web dashboard was aimed at presenting extended stats for the particular period. The choice of generally dark interface enabled the designer to create the attractive layout with prominently visible colored details drawing users’ attention to the interactive zones of key importance.
With the dashboard, the users can get the data about their expenses and incomes processed and shown as a variety of statistics for a particular period. As we can see, different blocks of data are organized around cards. The presented page features the overview of the core blocks for the period of the recent week. The horizontal menu in the top part presents the navigation zone enabling the user to set the default periods of overview such as last week or last month as well as choose the custom period they are interested in.
The cards present such information blocks of data:
— the menu with quick access to popular categories of expenses
— information on total expenses and frequency of transactions
— the list of popular transactions
— the cloud of expenses and weekly average rate in comparison to the previous period
— the line graphs of expenses and income for the chosen period graded by day on the horizontal axis and sums on the vertical axis
— the map with the pins marking the most frequent locations of spending money
— the block of recommendations based on financial operations of the period.
Another visual detail that could be mentioned is that for the graphs and markers presenting actual financial changes, the designer applied green and red colors which are widely recognized as signs of positive and negative financial balance. Also, the list of popular categories supports the presentation of each particular category with both name and icon to enhance navigation and make interactions intuitive.
Here’s a piece of animated interactions with the dashboard. Slight unobtrusive motion of the layout elements supports natural microinteractions. When the graphs expand, the other blocks shrink naturally leaving the names of theme blocks visible and readable so that users could continue transitions easily.
The other direction of the creative process was focused on the UI for a mobile app. While the dashboard is aimed at not only adding information but also presenting the results of its analysis, the mobile interface has the other core focus of functionality: first of all it is concentrated on having the user informed about the operation of the current day and enables to add new data in different environments and on the go.
Here is the feed of the latest financial operations, marked by categories shown via icons. The top part of the screen shows the tab of the users’ basic data and marks the credit card used currently. Also, you can see the graph reflecting the flow of finances during the day showed with vertical bars. To interact with it, users can apply horizontal scrolling. When the tab is active, the bottom shadow gives a prompt on that imitating interaction with physical objects.
To get the access to the core zones of interaction, the users can press the hamburger button located in the bottom left corner which supports usability for those, who use devices with big screens. The application also shows the important notifications or recommendations to the user: they are shown in the top part of the screen, under the profile tab and over the bar chart zone. The notifications are presented in different colors that mark the nature of the message, for instance, applying orange for warnings and blue for reminders.
Also, the user can interact with each particular position in the list. Left swipe opens the menu of options marked with icons: the entry can be quickly edited, shared or deleted.
The mobile interface was also supported with animations. The one above shows the interaction with the hamburger menu divided into three sections.
Another piece of animation shows interaction with the feed of financial operations for the current day. The warning notification adds more dynamic experience, attracting user’s attention with pulsing movement, and can be removed with a left swipe.
This project has started the deeper immersion into the world of digital products for finance management for Tubik team and that was definitely the inspiring experience to be continued in further creative sessions. Follow the updates for new concepts and welcome to check the previous cases from Tubik UI Friday: landing page for Big City Guide and mobile interface for Night in Berlin app.
Have you ever felt the urge to leave the planned and predictable routine and do something impulsive? Maybe go to the random concert of an unknown band, or visit the exhibition you are walking by? Certainly, you know that feeling. Nowadays, people move in the circle of the everyday drills and the desire to drop everything naturally appears from time to time. But when the moment comes, we often don’t know the places to go or where to find interesting events. Here is how we have come up with the idea for a new mobile app concept called Night in Berlin.
Night in Berlin is one of the design projects accomplished in terms of Tubik UI Fridays. In one of previous case studies, we told about our new tradition presenting the set of creative sessions when the designers have a day to work on the design concepts out of current projects. The concepts are created within a particular general idea of a digital product but with all the passion and freedom for the designers’ artistic souls. Today’s case study describes the creative process of the unusual mobile application design.
UI\UX and motion design for a mobile event app.
During UI Fridays the designers sometimes receive objectives far from ordinary. In this way, the team has an opportunity to create something absolutely unique. This time, the task given to the designers was to design a mobile application of the future. To specify the task, the art director gave them the background story. The designers had to imagine themselves in Berlin of 2019 where every night is extremely eventful. Their objective was to create the design concept for the mobile application that would come in handy to people who love hanging out at night. When the task was set, Tubik designers Ludmila Shevchenko, Eugene Cameel and Olga Popova started their work with art direction by Sergey Valiukh.
After active brainstorming, the designers’ team determined the concept of the app. It should be a simple application which enables people, who love socializing and visiting the latest events, to see the list of all the events, parties, exhibitions and the like taking place in Berlin. In order to add the effect of bright impulsive decisions, the list is shown at a particular time and only for the current day. The core thing the designers were supposed to keep in mind that the application is meant for the users of the future, so the design needs to be absolutely original and extraordinary. Let’s see what the team managed to create.
The first screen featured the onboarding with the countdown to the time when the list becomes available. The chosen gradient colors accurately convey the atmosphere of the night since they are associated with lights in night clubs. The illustration of the Fernsehturm, the famous television tower in central Berlin, is made in the corresponding colors, so the design of the screen looks solid. The app’s name is situated at the left bottom part of the screen. All the functionality is hidden behind the hamburger menu button placed in the top left corner allowing to make the focus on the countdown.
The screen above presents the list itself, informing the user about the variety of events. The data is organized along the cards for every event, which users can review scrolling vertically. Each card shows the key details about the event: its type, title and the time when it starts as well as the thematic image in the background. Being interested, the user can tap on the card and see more details about the offer.
When the users tap on the event card, they see the event screen. This concept features the exhibition in the art gallery, which is marked in the top right corner. The name of the artist and the exhibition are situated in the center of the page. The background image presents an actual artwork by the artists so the users are able to quickly catch the style and artistic manner, read the description and see the time when the event starts. All that combination provides the information to the user quickly, in clear and stylish manner.
When the static variants of the screens were ready, motion designer Kirill Erokhin started working on the animations.
Here is the animated version of the onboarding screen. The major element is the countdown numbers which are smoothly animated. The background is moving similar to haze changing the colors.
This animation presents the screen with the list of events showing the user interactions. The data is organized along the cards for every event, which users can review scrolling vertically. The user can tap on the card and see more details about the event. The arrow button on the top of the screen brings the user back to the list.
Work over the design concepts of this kinds gives designers the prominent chances to think out of the box. It stimulates their creativity which beams brighter when given regular practice. Follow our blog and check out our Dribbble page not to miss the updates on the Tubik UI Fridays. More concepts and case studies are coming very soon. Meanwhile, you can be interested in reviewing another case study for the creative design concept called Big City Guide. Stay tuned!
People say the world is a book and those who do not travel read only one page. It’s hard to argue since traveling is always a chance to learn new things, meet new people and do something absolutely extraordinary. What’s more, a nice trip can become a source of life energy and inspiration. Today, travelers have more opportunities than ever before and the World Wide Web plays the significant role here. The Internet provides loads of information about various countries and their cultures helping travelers decide where to wend their way.
Tubik designer Tania Bashkatova loves traveling as much as design, so she often combines these passions to create sophisticated concepts devoted to travelings and nature. Today we present the case study on the design concept of the website for travelers called the Big City Guide.
UI/UX design for onboarding landing page presenting a website about big cities all over the world.
The Big City Guide (BCG) is one of the first works made in terms of Tubik UI Fridays. Those following Tubik team on Dribbble already know about our new tradition which is the set of creative sessions when the designers have a day to work on the design concepts out of current projects. The concepts are created within a particular general idea of a digital product but with all the passion and freedom for the designers’ artistic souls.
During one of these creative sessions, the task was given to design the landing page for the online resource providing the information about big cities around the world. Typically for the design of landing pages, the designer decided to apply expressive and informative potential of the background images. The objective set for the visual design was to convey the mood and the atmosphere via one photo for each city. The solution found for this aim was the animated widget with horizontal scrolling presenting three big cities in order to create the efficient visual perception of the information for the target readers. The three different capital cities were chosen to show how dissimilar styles can be united in one design.
The first page of the BCG concept presents Berlin. The city is filled with various sights so it was the difficult choice to make. The designer tested many pictures to find the one which would bring the right mood of the city. In the end, there were two variants.
Both pictures make an effective design but the second conveys the atmosphere of solid and futuristic Berlin better so the designer favored it. The name of the city becomes the center of the composition, bold and quickly readable in strong uppercase letters. The word sets the high perspective of the famous tower. The letters are arranged among the spires in the way which gives the feeling they always were there.
The second featured city is Madrid. It is often thought that Spanish capital city fully consists of medieval buildings but that’s not exactly true. Today Madrid is one of the modern European business centers, so the designer decided to present the modern side of the city. Here is one of the examples made while searching for the best fitting picture.
Yet the priority has been given to the bridge in contemporary style. Keeping the consistent scheme with the previous page, the center of the composition remains the name of the city. The word shows the deep perspective with the modern construction echoing the form of the swirl or vortex. The subheading presents the motivating line gives the mood of the energetic and bright city. Here is the final result.
Every new day brings new knowledge. Searching for the perfect background photo the designer missed the fact that there is not only Madrid in Spain but also another one in Iowa, USA. The Internet played a joke with the designer mixing photos of two Madrids, so it’s impossible to distinguish them for those who haven’t visited all the corners of these places. Well, that’s good to take lessons from the errors, and this case gave us all the chance to learn something new.
The last city featured is Stockholm. It is full of magnificent ancient buildings and modern-styled places, so the designer experimented with various photos of the city places. Here is the example with the picture of the underground in Stockholm which presents the part of the creative search for the visual concept.
However, all the urban photos couldn’t convey the unique atmosphere of Stockholm. That’s why the designer comes from the other side. Stockholm is one of the biggest Scandinavian cities, so nothing can deliver the Nordic vibes better than its nature.
This is the final variant of the Stockholm page. The content elements on the page are placed similarly to the previous with the name of the city in the center. The word is harmonically inscribed into the thematic picture with deep and magnificent Nordic forest. The subheading presents the motivating line whose message naturally combines with the image and the associations set by the city.
The onboarding landing page applies simple structure recognizable for users. The left part of the header features a clickable logo BCG taking users to the home page. The header menu allows people to see the full list of cities, go to the blog or learn the maps. Also, the service provides the registration feature. The search icon completes the header.
The vital part of any city guide is the description copy. Since the pages are focused on the name of the city, short copy is placed at the left bottom part of the page. CTA button under the text provides users with an opportunity to read more if they are interested in detailed information. The users can also find social network links easily in the footer.
The final stage of work on the landing page was the animation of the presented layouts, accomplished by motion designer Kirill Erokhin.
The static variants of pages have different colors of the background, but in the final animated version, all pages are united with one color. Smooth animation adds the dynamic nature of traveling and supports the feeling of consistent interaction. Navigation through the pages can be accomplished in two ways: via navigation button and with the help of progress bar placed on the top of the page. They both use the same contrast color to keep the visual consistency and make all the ways of navigation clear.
As we can see, despite the fact that all cities differ by style and energy they bring, the designer managed to keep them in a single tone creating the feeling of the website unity. Moreover, such a construction of the landing page makes it flexible for further alterations, for example, adding more pages of the cities which are particularly popular with readers of the website.
Tubik UI Fridays go on for more concepts and case studies we will share with you soon. So, follow our blog and Dribbble not to miss the updates.
Design for e-commerce platforms is a special field of knowledge and practice. On the one hand, there are more and more users with an average or high level of tech literacy, who trust this way of shopping and are open to buying online. On the other hand, the level of competition in the field is also becoming more diverse and comprehensive with the constantly increasing number of services and platforms for selling and buying via the Internet.
In one of the chapters of our e-book «Design for Business», the success of e-commerce activity depends on several factors among which:
— the quality of the product or service offered
— the quality of the content presenting the offer to customers
— the quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.
So, it’s easy to see that UI/UX design for digital products of this kind plays the vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of the target user.
Today’s case study is all about this theme: it presents the UI concept for Vinny’s Bakery website.
UI/UX design of a website for a small elite bakery selling fresh hand-made bread.
Designing e-commerce website or mobile app, designers should definitely consider the following aspects:
security of users’ data
effective use of visual elements
clear data presentation via menus, catalogs etc.
user’s ability to leave feedback about goods and services
easily available general and contact information about the business providing goods or services
design that supports the offer not overshadowing it.
Grounded on these general principles, Tubik designer Ernest Asanov studied the trends on the market and analyzed the potential target audience of customers who would actually buy the goods, not just watched the offers. On the basis of the obtained data, in UI design he followed the philosophy of minimalism which is user-friendly, attractive and informative.
The website promotes a small bakery selling homemade bread. The home page presents 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. On the basis of the design solutions, it is easy to assume that this is the service positioning itself as a producer and seller 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.
The next webpage to look at is the catalog of the offered products: again, it supports the user with the prominent and high-quality photos of actual products with brief core information on every position. Users can also quickly review the rating of every item and its price. Horizontal scroll is applied for seeing more positions, that’s why the last item is shown not in a full view to let the user see that this is the direction of scrolling. Call-to-action button, via which the user can add the item to the cart, is designed with a different color comparing to all the other elements of the interface, and this technique allows making CTA prominent and seen immediately. Such an interface lets users add goods right from the catalog without the necessity to go to the page of this particular position. It’s a user-friendly way to go, especially for loyal customers who know well the quality and tastes of the presented bread and wouldn’t like to spend their time on additional transitions just to put the item into their cart. Still, if the user wants to know more about the particular item, it’s easy to do by just clicking or tapping on it in the list.
Clicking on a particular item, users get the access to more detailed information about the bakery item, including the description, weight of the pack, nutritional rates, rating, price and CTA button. The photo of the item remains the only pictorial element of visual support which makes the interface concise and non-distracting.
Here you can see the full set of the transitions: you can see that header and footer are fixed, the horizontal scrolling opens more positions in the catalog and strengthens the feeling of the minimalistic and focused interface. The interactions are supported with smooth and unobtrusive animation making the interface even more stylish via the imitation of interaction with physical objects in the real world.
Another aspect to mention generally about this web design concept is typography which set one more object of the thorough creative search for the designer and resulted in the combination of fonts, that are effectively contrast and easily readable. Color applied for headings, presented in bold and prominent font and applying uppercase letters echoes the color typical for the freshly baked bread, while the color of copy blocks sets the visual association with the flour on the baker’s table — the element which is used on the background imitating the cooking worktop. Therefore, all those elements get visually connected to each other and present the web interface which looks harmonic and consistent. These are the feelings playing the significant role in building up the positive user experience and attracting buyers to use the service again and again.
No doubt, new day will bring fresh challenges which will result in practical case studies for Tubik Blog readers. Stay tuned, have a tasty day and don’t miss the new posts!
Messengers have definitely become an integral part of everyday life for thousands of people: they are easy-to-use, quick and simple, and so helpful in exchanging information on the go and from anywhere you are. Moreover, with the rocketing progress of smartphone technologies, messengers are adding more and more functionality: right from the messenger you can send images and sometimes even files or documents, you can create group conversations, change the visual layout of the interface, classify your contacts etc. Recent years have also shown the instant wish people demonstrate in involving diverse graphics like emoji, stickers, animations, doodles and the like to make the chats brighter and to set the definite mood of communication.
One of the features, presented with iOS 10, became a great respond to this trend: Apple opened iMessenger to the third-party developers via the feature called iMessenger Apps. having created the apps for iOS, developers are now able to synchronize their content with iMessenger, be it a sticker, an audio file or even some interactive stuff. If the path has been overcome correctly, the content can be integrated right into the messenger.
Recently we have tested this feature in practice, having opened the sticker pack from Toonie Alarm directly to iMessenger, so today we offer our readers a brief tutorial on how to do it. Those, who will find this tutorial interesting and applicable in practice, presumably have the practice of work with Xcode and feel confident in coding UIKit-based iOS application.
So, first of all, let’s mention once again that today we are working on the case when you have and iOS app, which is launched and operating, and its content (like images, photos, emoji, stickers, audio etc) can be potentially applicable to the process of communication via iMessage.
As we have dealt with stickers as a sort of shared content, a couple of words should be mentioned about the recommended format for the messages. For sticker packs, the file sizes recommended by Apple are:
Small: 100 x 100 pt @3x scale (300 x 300 pixel image)
Medium: 136 x 136 pt @3x scale (378 x 378 pixel image)
Large: 206 x 206 pt @3x scale (618 x 618 pixel image)
There are also the following limitations to the images used in the sticker packs:
Images can be no larger than 500 KB in file size.
Images can be no smaller than 100 x 100 pt (300 x 300 pixels).
Images can be no larger than 206 x 206 pt (618 x 618 pixels).
Image files must be PNG, APNG, JPEG, or GIF format; PNG for static stickers and APNG for animated ones are recommended because they handle scaling and transparent backgrounds much better than JPEG and GIF respectively.
If everything mentioned above is your case, then you have to start submitting the app content to iMessenger in the following way.
Add iMessage extension to your app
In project targets press «+» and select iMessage extension, as the screenshot shows:
We will have an automatically generated MSMessagesAppViewController inheritor called MessagesViewController. It acts as the general view controller but is used to manage your Messages extensions.
When this controller loads, we should load stickers and present them in MSStickerBrowserViewController. The browser provides drag-and-drop functionality: the user can press and hold a sticker to peel it from the browser, then drag the sticker to any balloon in the transcript. The user can also tap stickers to add them to the Messages app’s input field.
The browser presents the stickers provided by its MSStickerBrowserViewController property. The data source can dynamically change the list of stickers at runtime. You can also customize the size of the stickers inside the browser.
In the method createStickerBrowser, we create MSStickerBrowserViewController with small stickers and present it on our main view controller (MessagesViewController) as the child view controller. Data source for this browser is MessagesViewController
In the method loadStickers we load data(Stickers objects) from Core data and map it to MSSticker objects. To create MSSticker, you should describe the file URL with an appropriate image (LINK!), localized description limited to 150 characters, which will be used as an accessibility description of the sticker. Also, you can track errors which occur in SKSticker initialization via last output parameter — error.
As a browser data source, MessagesViewController should implement MSStickerBrowserViewDataSource protocol which consists of two important methods. The first (numberOfStickerBrowserView) says how much stickers we should present and the second (stickerAtIndex) should return SKSticker for each index.
How to share data from the particular app with the extension?
In the case of Toonie Alarm, we had data in Core data database.
In the case of the same app group, create the app group in the Apple developer portal. If you need the detailed instruction on it, check it here.
Add it to your app ID and use for application target and extension. (select in target -> capabilities -> app groups).
After this, you will have the shared container for the app and the extension. And SQLite database will have this path:
NSURL*storeURL = [[NSFileManagerdefaultManager>] containerURLForSecurityApplicationGroupIdentifier:@»your group id»];
If you use some UserDefaults, you will need the following code:
NSUserDefaults *mySharedDefaults = [[NSUserDefaults alloc] initWithSuiteName: @»your group id»];
In case you want to use some classes from the app in your extension, just select your target in File inspector.
If you had an old app on App Store and now want to add iMessages extension and share some data from Core data store, you will need to move existing database to the shared container instead of creating the new one.
Due to these operations, Toonie Alarm users now can use all the stickers they win in the app for their chats in iMessenger, totally for free. For apps of this kind, which have original and bright graphic alarms, simplification in the process of adding content to the native messenger is definitely a user-friendly policy which both the developers and designers here set as their primary aim.
If you want to get more insights into the theme, here is the list of recommended materials to review:
A picture is able to tell a lot instantly. It can inform, call associations, set the mood and atmosphere, give the insights and wake up curiosity, get people inspired or engage further considerations and do that all in a beautiful and attractive manner. Still, to spark all that amazing potential, the picture needs to be created by a professional, who knows how to do that magic via talent, skills and experience.
Having the whole set of such professionals on-board, we finished the last year with an interesting and challenging project. In December Tubik team got the chance of creative collaboration with Opera to work on the bright and catchy year-in-review video. You could already have seen the video and design process presentation in Tubik Portfolio, and today we invite our readers to take a deeper look at this design story in a new case study.
Design of a short animated video «Opera 2016: Year in Review» within a tight timeline.
Introducing a customer, Opera is a web browser developed by Opera Software. According to Opera Software, it had more than 350 million users worldwide in the 4th quarter 2014. Total Opera mobile users reached 291 million in June 2015. According to SlashGeek, Opera has originated features later adopted by other web browsers, including Speed Dial, pop-up blocking, browser sessions, private browsing, and tabbed browsing.
The initial stage of project discussion with the customer showed that they needed an animated video accomplished in an attractive manner immediately setting the positive and cheerful mood. The video had to present the essential milestones of the year when Opera, one of the actively used web browsers around the world, presented fresh innovative features to its numerous users. Opera team enjoyed bright colors and lifestyle object compositions and the approach they wished to use for the video was to devote each composition to a specific month when a particular feature was delivered. It was agreed that the visual performance should feature the 3D flat style, minimalistic animations and lush colors — everything that Tubik team is strong at.
Meanwhile, the early stage of discussions on creative process also established the biggest challenge of the project: the timeline was extremely short. The team of designers had only 5 days for design and animation of 8 complex flat illustrations full of details, transforming the company message, looking bright and fresh and keeping visual consistency to look natural in one video. This was the type of project that proved the great power of teamwork when all the participants of the creative process worked like a clock.
The first creative stage of the project had to result in a set of flat illustrations presenting the prominent innovations of the year: Ad Blocker, Battery Saver, Video Pop Out, Personal News, VPN, Faster Startup, Currency Converter. All the illustrations had to present the interiors decorated with bright details close and clear for every user, and also set the atmosphere of the particular season and the visual element showing the presented browser feature. In this way, combined in the video and replacing each other, the illustrations would support the feeling of the year flowing. Here is the final set presented to motion designers who had to do further work on breathing life into the pictures.
This is the intro illustration opening the video, setting the cheerful mood and giving the strong link with the brand.
This illustration presents the feature of native Ad-Blocker, which Opera presented in spring, so the color palette corresponds to the shades traditionally associated with this time of the year.
The next illustration presents the feature of Battery Saver, which got active in late spring: the season is supported with general bright and sunny color palette, flowers in the vase and green trees outside the window.
Another illustration was designed to present the feature of Video Pop Out, enabling users to watch videos while browsing. Big window shows the green plants and blue sky and the diagonal light shadows let us guess the shiny sun, the table sets the scene with a couple of books and a glass of lemonade, and even the video on the screen shows the sea shore and people having fun — everything allows viewers to understand easily that this user-friendly innovation was added in summer.
The next artwork is associated with the feature of a personal newsreader. A bit darker sky, a bit longer shadows, some clouds, the cup of tea and red-ripe apples on the tree say: when users got the ability to read the news right from their browser, the summer had almost finished.
The feature of built-in VPN enhancing the privacy of browsing was set up in autumn, which us immediately clear from the view with yellow trees outside, while the passport seen on the table sets the strong connection with the matter of privacy.
Next illustration featured the faster speed of start-up loading, so the key visual element of the composition is the speedometer shown on the computer screen. It immediately sets association with the issue of speed while the color palette chosen for this artwork enables users to feel the vibes of deep autumn.
The last innovation to present was the built-in currency converter enabling users to shop online faster and easier. Some details in the picture, like the calculator, the decorative recognizable model of a shop placed on the shelf, the delivery truck behind the window as well as the layout on the screen set the atmosphere of shopping, while the outside view and the gifts let us know it’s the busy time of buying Christmas presents.
Having a full set of illustrations approved by the client, motion designers came into play and presented the variants of transitions, while graphic designers worked on the fonts for the short descriptions to be used in the video. The fonts had to look highly readable and correspond to the general stylistic concept.
The sample of animated transitions between the slides livened up with the natural movements of the details close to motion in real life.
The sample of the fonts used on the slide in combination with the illustration
Five days of hard and coordinated work of the design team resulted in the final video of about 40 seconds showing the full set of key innovations Opera presented in 2016.
In one of the previous articles, devoted to design processes and work styles, we mentioned: the studio experience lets us believe that teamwork organized wisely and thoughtfully doesn’t take away designers’ individual space or freedom — vice versa, it adds to it the power of solid support and prospective ways for bigger and more complex, therefore more interesting and challenging projects and tasks. The project for Opera became one of the convincing proofs.
In their testimonial to Tubik team, Opera Software team mentioned: «The loose storyboard and tight timeline we presented you with were undoubtedly a challenge but everyone is very happy with how well your team delivered on it!» No doubt, this project became not only a great and absorbing challenge but also the case of fruitful collaboration and bright finale for the extremely busy design year.
No doubt, animation of interfaces still belongs to the most debatable issues between designers and developers. Animated UI elements often set the challenge to developers, so to enhance usability of an app or a website, the motion should be grounded on user research and add its two cents to the positive user experience. Developers in Tubik are open to this sort challenges: earlier we have already shown the case on coding motion for Toonie Alarm, this time we are continuing the theme with a practical case of developing animated interactions for Upper App.
Back to Basics: Core Animation and UIViewPropertyAnimator
Supporting designers and developers in creating attractive and functional interfaces for iOS apps, in 2006 Apple presented Core Animation, a system for animating views and UI elements of the app. Basically, it is a graphics compositing framework used by MacOS, iOS, watchOS, and tvOS to produce user interfaces with motion. It is not a replacement for the app views: instead, it is a technology that integrates with views to provide support for animating their content. However, the animation is not the only part of this framework: Core Animation presents the infrastructure for compositing and manipulating visual content. The framework uses GPU to accelerate rendering screen objects. Core Animation divides the visual content into individual objects that are called layers and arranges them in a tree hierarchy known as the layer tree.
The fundamental class that represents these layout objects is the CALayer class. It looks similar to UIViews implementation. The CALayer class manages image-based content and allows performing animations on that content. The main task of the layer is to manage the visual content but it also has visual attributes that can be set such as a background color, border, and shadow. In addition to managing visual content, the layer maintains information about the geometry of its content (such as position, size, and transform) used to present it on the screen. Modifying the properties of the layer is the way to initiate animations on the layer content or geometry. The app runs an animation. Layout, Display, Prepare and Commit phases are performed once before the animation starts. At this time the model layer is updated. The animation itself is rendered in a separate process on the render server using the presentation layer.
iOS 10 provides a new way to animate that is UIViewPropertyAnimator. UIViewPropertyAnimator was presented in 2016 and it provides more extensive functionality on operations with animated interfaces. Vital to mention, it can be accessed only via iOS 10+ and tvOS 10+. The class allows developers to animate changes to views and dynamically modify the animations before they finish. This means programmers can stop (pause) in-progress animation, restart it at a later date if they wish and even dynamically modify the animated properties, for example, change the animation end-point to the top-right of the screen when it was previously the bottom-left. Developers can simply call the startAnimation() function on this instance to start the animation or animations. Anything that can be animated by the previous UIView API is eligible to be used in a UIViewPropertyAnimator instance. Here are its options:
Transform (as long as it is a transformation in the 2D space, for 3D only with CoreAnimation)
UIViewPropertyAnimator gives programmatic control over the timing and execution of the animations. Let’s sum up what are the core differences of UIViewPropertyAnimator from CAAnimation:
1. After the creation of the UIViewPropertyAnimator object, the object of CAAnimation isn’t created for the layer;
2. After starting UIViewPropertyAnimator (by calling method startAnimation()) CAAnimation is created and added to the layer for animated UIView
3. Animation exists until it’s completed or deleted
The big advantage of UIViewPropertyAnimator is that it’s new and has been created on the basis of modern requirements and needs, taking into account the specific features of Swift.
The comment in the API informs that Apple Company pushes this class as the default for creating animations on UIView. At the moment, it is recommended for creating animations in UIKit and it’s going to replace the methods UIView.animate(withDuration:)
Here is a simple example of using UIViewPropertyAnimator in practical case:
For comparison, here’s an example of code for the same animation, but accomplished with CoreAnimation framework:
Now let’s look closer how animation was created with UIViewPropertyAnimator for Upper App application, a simple and elegant to-do list for iPhones: here we present the case of interactions with the menu.
UIViewPropertyAnimaton is really helpful in the process of iOS development: it simplifies the way for creating quite complex animations saving time and effort. Keep and eye on new posts: they will present fresh practical cases.
Famous author and motivational speaker Zig Ziglar once said: «You were born to win, but to be a winner, you must plan to win, prepare to win, and expect to win.» Planning our day and managing our tasks is the significant job we have to do regularly and devotedly in case we seek for success. Tons of books, articles and interviews from successful and productive people generally send the global message: to be productive you have to plan your day and tasks distributing your time and effort wisely.
Would you like to have a reliable helping hand in the process of planning your days and setting goals effectively and without any distractions? Welcome to try Upper, simple and elegant free application for iPhones, designed and developed by Tubik team. Today this motivating to-do list is featured and spinning up at Product Hunt, so we’ve also decided to unveil some details of design and functionality with our readers.
Full-cycle UI/UX design for the simple and motivational productivity app for iPhones.
Creating the to-do list application, Tubik team realized the high scale of competition in this sphere of utilities: that was a step into the red ocean. Still, as it usually happens in the fields covering wide and diverse target audience, a variety of the products is another user-friendly feature: it allows choosing the styles and features every particular user likes. Continuing the theme of personal productivity, which was started with our previous app Toonie Alarm, we’ve established the goal to present the app of totally different look and functionality deeply focused on personal and professional motivation.
In UX perspective, the app interface was concentrated on extremely simple interactions and intuitive navigation, while in UI design the core concerns gathered around high readability level and visual hierarchy that would allow users to use the app easily in any environment and on the go. In addition, working over the visual performance of the app user interface, Tubik designer Ernest Asanov made a general stylistic concept choice in favor of minimalist and elegant solutions.
The basic idea set behind Upper was creating helpful to-do list, deeply concentrating user’s attention on the tasks and deadline. That’s why it doesn’t include complex functionality, distractions or decorations. It presents only the features and elements needed for time and task management.
Functions and features provide the following:
All the features of the app are free for everyone
Upper Streak Challenge motivate users to complete all the tasks for the day
Statistics of tasks completion
Simple and clear navigation
Easy adding, deleting and marking tasks
Eye-pleasing slight animation
Instant sharing achievements with friends
Design and Layout
Interactions: The basic functionality of the app is built around user’s ability to create the list of tasks which can be saved for the particular date and time, easily deleted or marked complete. In addition, Upper analyzes task completion progress and shows stats to keep users updated and motivated. The absence of distractions, simple screen design and thought-out typography make the content highly readable and allow using the app easily in any environment and on-the-go.
Basic functional buttons are placed in the bottom of the screen, which supports usability for users with big devices. Different swipe gestures allow a user to mark the task complete or delete it from the list. Core information such as dates, the words for the closest days (tomorrow, today), the number of tasks and days in Upper Streak are presented in uppercase font, supporting both efficient visual hierarchy of the layout elements and the harmonic consistency in combination with the product brand name.
Upper Streak: The original feature of Upper App is user motivation with special challenge of non-breaking plans and increasing productivity potential: the app motivates to complete all the planned tasks via Upper Streak Challenge. Streak is the period during which users don’t interrupt completing the tasks with Upper: it shows the achievement in being consistent and productive and encourages not to stop and break the progress. Seeing your determination, the app will challenge you with bigger number of tasks, so users are motivated to get organized and complete the plans with Upper without missing a day.
Color and style: The app is designed in minimalist and elegant style of layout based deeply on quick functionality and intuitive navigation. What is more, users are provided with the variety of skins and can choose between dark, light and red skin depending on their personal taste and wishes. At the moment the app is presented in dark skin, but next update coming very soon will let users activate any of the three palettes.
User-friendly navigation, supported with slight eye-pleasing animation, will help users to focus on their tasks. No ads, no complications, no extra copy, interface motivating to create short concise notes for the tasks – nothing will distract from the goals. Application provides the simple calendar, allows saving notes conveniently, check stats and plan anything from everyday stuff to business objectives.
To get more information on design and interactions, you can also review the full presentation of Upper App design or check full pack of the details via Upper Press Kit.
One of the life aspects whose importance is never faded or lost in any country is the issue of healthcare. This is the factor having, perhaps, the biggest impact on not only personal and professional life of an individual, but also general productivity and welfare of the whole country. With the rapid growth of technology, it would be irrational not to apply the great potential of modern innovation in the sphere of health care and medical services. Recent years have shown increasing interest of professionals and stakeholders in setting creative experiments and searching for new innovative solutions helping doctors to take the advantage of technology in saving lives, enhancing and speeding up health care. As a result of this massive concern, the bunch of apps and websites useful for doctors and patients have already come into play, and the field is still actively progressing. The role of design is literally vital here, in many cases providing real support in the matters of life and death.
Our today’s case study is devoted to this vitally actual theme and presents the design concept of the web application for doctors called HealthCare App. Having explored the specific nature of this type of digital products, Tubik designer Eugene Cameel thought over the solutions concentrated on fast and intuitive interaction for making communication between a doctor and a patient easy and fast while saving and looking for the data optimized and organized. Let’s look at the details of the concept closer.
UI/UX design of a web application for doctors
As we mentioned in our recent article about UX wireframing, this initial part of creative process lays the foundation of future functionality before the aspects of visual performance and style are approached. Work over wireframes is based on definition and analysis of the target audience and its potential pains which the future product is going to solve. The target audience of HealthCare App was primarily doctors and the key objective of the product was set as optimization of huge amount of data which doctors deal with on a regular basis. Every single piece of information about every patient is vital for making the right decision, so creating the interface, the designer was focused on making it organized, clear and easy-to-use. Intuitive navigation was set as the biggest priority to make the app applicable even for people with low or medium level of tech literacy.
Basically, the app provides doctors with the functionality of saving and organizing data about patients with the ability to find it quickly in database when it’s needed. Also, doctor’s can plan and save appointments in the calendar as well as the history of medical examinations for patients under supervision. Application also saves history of diagnoses, prescribed medicines, personal data and complex medication plans with marking the stages. Another useful feature is that the users of the app get the access to the stats and explorations on different issues at different level of coverage, from local to general statistics and recommendations by WHO.
Let’s check UX solutions for three basic screens presenting appointments, calendar and statistics.
The app features the sidebar with five tabs located on the left side of the screen and the header featuring the title of the information field (calendar, appointments etc.), the current date and search field, well-seen and easily accessible in case any data should be found quickly. The main field of the Calendar screen presented below organizes data about all the appointments in three modes along the period of time reviewed — month, week and day, switched via top menu. This part also gives particular dates shown on the screen. All the data is organized in special cards while the timeline located on the left lets to catch the timing. The user can review all the planned appointments or things to do, getting more extensive data after tapping the necessary tab, or add new appointments to the free spaces in the schedule. In preview, notes show the full name of the patient, time of the planned appointment and mark of the visit nature (urgent, follow-up therapy etc.)
The screen of a particular appointment shows the dynamic head menu which can be scrolled horizontally and presents the list of patients. Then lower we can see the tab presenting detailed information about the current patient, who is being examined, including name, gender, doctor’s name, ID number, address and contacts. The biggest interactive field on the page shows three basic categories to organize data: medical background, lab results, insurance and charges.
The third screen shows various stats which can be useful for the doctor in exploration a particular case or diagnosis. The tab below the header allows user to switch between the categories of stats coverage and set a particular month or year for the required data.
The essential issues to consider about UI design, going deeper into convenient and functional visual presentation of the data in the app, were color palette and typography. As you can see, the designer made his choice in contrast color palette with deep blue general background including the sidebar and header part, that worked well for creating deep contrast with bright orange active icons and basic data in header written in white. Contrarily, the main operative field of the app uses white background which looks natural for the app in health care sphere and serves several important goals:
— it supports high level of readability and quick perception of text-based content, which is crucial for healthcare operation with patient’s data, especially in cases of emergency;
— it provides the great field of creating prominent contrast for key interaction elements, such as buttons or icons;
— it creates the strong association with paper on which the data is fixed and in this way sets the pleasant feel of interaction close to typical operations with physical paper documentation, which can be beneficial for people of older generation, who usually tend to feel better in well-known environment;
— it adds the space and air to the screen which is helpful to avoid the feeling of the screen overloaded with information and can hinder quick perception of core data fields.
The screen of the current appointment shows for main areas of data: diagnoses, problems, medications and complex medication plans.
The calendar screen uses light pastel colors for cards which again set the association to the traditional interaction with physical objects when doctors and receptionists use colorful notes to mark the data and organize it on the noticeboard.
Statistics screen shows graphs and charts in minimalistic manner with appliance of contrast colors easily distinguished by human eye. For all the screens, the designer uses simple san serif font, highly legible and readable. Concentration on functionality doesn’t prevent the designer from giving the app simple and elegant appearance with the touch of style and creativity.
Animated transitions were also added to present some basic interactions with the app: inputting data, operating with pricing and completing the reception.
This case has actively opened the direction of design for medical industry and healthcare here in Tubik and proved how many special features and aspects of the job should be taken into account by the designer. The tasks of this kind are definitely challenging, but highly rewarding in both creative and humanity values. No doubt, new day will bring fresh challenges which will result in practical case studies for Tubik Blog readers. Stay tuned and healthy!