Tag Archives: illustration

web design interactions tubik studio

Web of Life. Creative Web Design Concepts.

Nowadays, World Wide Web could definitely be named the web of life. It connects people from all around the world whatever their aims and wishes are about. 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. No doubt, there are both advantages and disadvantages brought by technology and new ways of broader and faster communication of all kinds. Still, today we are going to focus more on the variety of perspectives for positive influence of the web on people’s lives of global society.

 

In the design glossary issue devoted to key terms of web design we mentioned that as a domain of human activity it lies on the crossroads of many sciences and practices. Among them the following should be mentioned:

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

 

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

 

Working over a website, designers have to concentrate on such aspects as:

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

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

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

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

 

Here in Tubik Studio we have felt all the power of web, both from the perspective of professional growth and positive user experience. If you take a virtual trip around Tubik Blog, you’ll see the case studies and articles devoted to the theme of creating websites solving users’ problems, providing natural and effective flow of human-computer interaction and positive experience. Being a team knowing the inside-out of web design and development, today we are going to continue the topic with the collection of practical design concepts presenting design solutions for the variety of websites with different objectives, target audience and visual style. Here you’ll find the concepts for particular web pages, animated web interactions, ideas for landing and home page design and the like. So, let’s get started!

 

Website on travel destinations in Iceland

 

tubik studio ice ui website

Presented concept features the set of interactions with a website devoted to the theme of traveling around Iceland. Working over the color palette, the designer chose the light background featuring the theme of Iceland and a contrast bold headline. Images are used in the scheme one-per-page so that they could support the theme but not overloading the page or distracting the user. Thorough attention was paid to typography and composition as key sides of user-friendly minimalism enhancing usability, navigability and visual harmony transferring the spirit of the presented place. Navigation features the right side menu with titles placed vertically still easily readable due to the choice of font, the rest of the navigation links are hidden in extended menu behind the hamburger button. Animation shows transitions between pages to give the feeling of general design consistency.

 

Design concept for online magazine

 

online magazine design tubik studio

 

The design concept of an online magazine features the page of a particular article presenting a famous person so an image showing the personality becomes the center of composition still doesn’t take too much attention from the text as the bearer of information. All the design is concentrated on user-friendly solutions around readability and stylish non-distracting looks as well. So, the concept is based around clear visual hierarchy applied in general layout of elements and also copy blocks. As for navigation, the page features the header including the title of the website as a central element of the top part composition, two active links to basic categories of publications, link to live mode and search field marked with a magnifier icon.

 

Web design for architecture blog

 

tubik studio design

 

Another concept full of light and air for readable text and stylish visuals. Animated interactions demonstrate the consistency of the flow while scrolling the page with the smooth move of visuals elements, headlines and copy blocks, imitating movement of physical objects while pulling. The presented design of a website has a fixed header which doesn’t hide while the page is scrolled. However, it follows minimalist principles featuring brand name lettering as a center of composition, magnifier icon marking search functionality and hamburger button hiding links to navigation areas.

 

Corporate website for an architectural company

 

website design UI

 

This concept is also devoted to the theme of architecture, still it has different objectives and core target audience: it is the corporate website for a company presenting the variety and potential of its services. The general performance of the webpages is following minimalist and functional approach. The layout is accomplished on the basis of priorities in presenting this particular business field. Taking into account that the nature of the company activity is deeply visual especially in terms of presentation to new clients, the designer selected the background and fonts that have to leave the immediate impression of style and sophistication. The key words brought out in capital letters become the integral part of stylistic concept being also informative and quickly setting the company ideas and approach to work. The visual effects are supported with smooth animation.

 

Landing page for the website of seafood recipes

 

landing page UI design tubik studio

 

This example presents a landing page for a website collecting recipes of meals with seafood from all over the world. As well as in the previous case, dark background is chosen to make the images of meals look even more delicious and also create stylish appearance for general visual presentation of the layout. The landing quickly provides general understanding of the website purpose and content featuring different sections that could be interesting for users.

 

website UI design

 

Website on Swedish ski resorts

 

tubik studio web UI design

 

Obviously, traveling is the great way to get inspired and we really believe it’s true. This concepts adds one more example on this theme. Here is the set of animated interactions for a website Slopes presenting Swedish ski resorts and enabling users to get full scope of information about them. Home page features the video background immediately setting the theme, and color palette based on strong contrast and concise color combinations also visually supports the idea of active winter holidays. The basic points are shown in header for quick availability while all the other variety of content categories is hidden behind the hamburger button to support minimalist design approach.

 

Web interface for design blog

 

design4users blog

 

This case shows the web interface for Design4Users, a content project created, designed and developed by Tubik Studio team. Design of the webpages is accomplished with a view to effective presentation of both copy and visual materials featured in wide variety.

 

webdesign tubik studio

design blog web UI

 

Web design for an online magazine about traveling

 

tubik studio web design

 

Here’s the design concept for a website which presents the online magazine «The Big Landscape». Its target audience is primarily people keen on traveling and learning more about the world. The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception.

 

Website for a design studio

 

tubikstudio ui animation website design

 

It is a promotional webpage of the particular product by design studio. Its purpose is to present the design object via descriptions and visual details providing users with the link to this item in online shop. Thus, this page, which is actually the part of a sales funnel for the e-commerce website, is in charge of attracting users and informing them about the product. Minimalist design full of air makes visual accents noticeable and engaging while general layout presents the actual direction of company services. Broader aim was to transfer the atmosphere and spirit of the brand by means of design solutions.

 

Web platform for an encyclopedia

 

tubik studio web ui design

 

This case realized the idea of web encyclopedia devoted to the theme of birds-of-paradise. The designer concentrated on main aspects of usability and utility of such a resource for readers and at the same time set the goal to make it attractive and giving clear message of the site features with general stylistic concept. Animated transitions make  scrolling interactions engaging and add style to general performance.

 

Web design for photography workshops service

 

website design for photographers

 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind this web interface, visual elements inform users and provide quick harmonic perception of the nature of the services while animation is provided to show the transitions between content blocks.

 

Landing page for coffee delivery service

 

web design UI tubik studio

 

It’s not a secret that drinking coffee is the daily habit, sometimes even obsession, for many people, and different services speeding up the process of getting a cup “on the go” are getting more and more popular. This example shows you a design concept of a landing page which presents an experimental service «Coffee Wings» providing coffee delivery by drones. Landing was created in the manner combining traditional visual elements setting positive associations with coffee and images of innovative technologies involved to this user-friendly service. Copy blocks are not overloaded so that visitors could get the idea and benefits of the service quickly and clearly and obtain more information, if they want, following the calls to action.

 

Design concepts for 404 page

 

web page illustration

 

There are tons of design solutions for 404 webpage, which is strategically important for any website, and still this design object is always actual. This sample shows web design accomplished with some artistic approach featuring the original illustration of the penguin directing everyone back from the Pole where nothing can be found.

 

tubik studio web design

 

Another concepts shows different stylistic approach and features a page 404 for e-commerce website. It is based on harmonic interconnection of the background and actual layout elements such as header, CTA button and copy.

 

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


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

Welcome to read UI/UX glossary on web design

Toonie Alarm UI design

Case Study: Toonie Alarm. App UI Design.

Designing a product for everyday use, it is vital to ground it on the thorough market research, thought-out design presentation and deep analysis of the target audience. No wonder: the stuff like note-apps, alarms, to-do lists, calculators, calendars and the like surround users in their everyday life, help in common situations and sometimes add color to the routine. We have checked that well and now would like to present you the first case telling the design story of the brand new alarm app for iOS called Toonie Alarm which today is featured on Product Hunt and has reached top-5 in the category Tech in 4 hours after featuring.

 

Toonie Alarm UI design

 

Task:

 

Full-cycle UI/UX design for the simple and engaging alarm app for iPhones.

 

Process:

 

The design process for this case was different from typical ones in the studio as before it we had worked more on outsource projects which means that creating initial product concept and setting the task was done mainly by the client’s side. The process for Toonie Alarm took the other direction and gave us what it was set for: the feeling of full product creation process from the very first steps. We had to set the idea and test it competitive potential, establish its USP and marketing plan, branding and usability foundation and all the other stuff like this.

 

Initially the idea behind the app was to create a simple alarm clock with attractive design and consistent element of motivation and support for such a basic and often far-from-pleasant process as waking up. The basic brand image was set as fun, cute, bright and cheerful, and marketing research supported this concept with the analysis of competition and ideas on adding original features to the app.

 

User research and analysis enabled the team to form the USP for the product on the basis of the following set of key features:

  • All the features of the app free for everyone
  • Simple, clear and intuitive navigation
  • Bright and pretty interface
  • Huge set of beautiful stickers
  • Achievements and rewards for waking up
  • Eye-pleasing interactive animation
  • Animated time picker
  • Instant sharing achievement with friends.

 

Let’s look over the details of UI created by Tubik designers.

 

Cute Mascot

 

In one of our previous articles we have already mentioned the great role of mascots in branding and UI design. As for Toonie Alarm, the idea of applying the mascot was set almost instantly as mascot is not only a sort of communicator between interface and user, but also a great representative of the brand able to enhance its recognizability. Moreover, it has a great impact on easy establishing the voice and tone of the product, creating the feeling of natural communication and supporting the mood. That was the point when Toonie was born to be a funny cheerful bird, whose mission is to make the world  brighter and help users to interact with the alarm. It informs users about news, rewards, errors and just adds some fun and color to everyday life.

 

Toonie Alarm mascot design

 

toonie alarm mascot design

 

App Tutorial

 

App tutorial is an important part of the interface which helps users to get informed on the basic interactions. In Toonie Alarm it consists of three screens that tell the user about the functionality of the app. Small concise copy blocks are supported by smooth and pleasant animation of transitions to create the feeling of integrity and cheerful mascot featured as the consistent element and the center of the screen graphic composition.

 

Toonie Alarm Tutorial design

 

Home Screen

 

The home screen shows the alarms which user already set for particular time and days and the tab with funny stickers already collected for waking up. Active alarms toggles feature the animated sun. Left swipe opens active options for the particular alarm.

 

Toonie Alarm UI design

 

Stickers Screen

 

Various stickers become the reward for waking up at the particular period. Moreover, waking up several times at this time, users can level up their stickers and enrich their collection. All the stickers can be shared to social networks to mark users’ achievements.

 

toonie alarm stickers

 

Toonie alarm stickers screen

 

Time Picker

 

Another prominent feature of the app is the animated time picker. The app has simple navigation and nice motion makes it even more intuitive. Picking time for the alarm, users can enjoy animated march of night and day.

 

Toonie Alarm time picker screen

 

Animated Stickers

 

Animated stickers make interaction even more lively and enjoyable and also enhance user experience making the interface attractive and playful.

 

toonie alarm stickers

 

Logo Style

 

Logo design keeps style of lettering associated with fun and entertainment and creating harmonic link to the fonts typical for cute cartoons.

 

Toonie Alarm logo

 

Product Video

 

To catch more details and see the interactions with the app in real, welcome to review the video guide on Toonie Alarm.

 

 

You can also review the presentation of Toonie Alarm design on Behance or check full pack of the details via Toonie Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Toonie Alarm via App Store

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