Tag Archives: Photoshop

tubik studio wireframing UI UX

UX Wireframing: Bedrock of Interface Usability.

In 4th BC Plato said: “The beginning is the most important part of the work”. Almost 24 centuries since then his words are still up-to-date in our realias. Buildings require a stable foundation to stand and give shelter for long as well as any project needs to be well-planned from the very beginning to avoid problems at the further stages. Wireframing is the early step of UI/UX design process when the structure of the project is being formed. The usability and efficiency of final product often depend on how well the wireframe is created at the very first steps of the design process. However, today designers still haven’t agreed upon the common opinion about wireframing: some of them consider it to be a key part of the design process while the others regard wireframing as the waste of time. But where does the truth lie?

 

We’ve already touched upon the topic of wireframing in our article about creating mobile applications, and since the topic remains actual and debatable, this time we want to devote the full article to the roots, nature, benefits and diverse issues of wireframing process as well as the reasons why it’s advisable for designers to apply it.

 

tubikstudio ui ux design

 

What’s a wireframe?

 

Wireframe is a simplified and schematic visual representation of a layout for website pages or screens of an application interface. Wireframes are similar to architectural blueprints: they are usually black and white illustrations, sometimes with bright marks or spots to outline specific areas or points, that give a clear vision of the project structure and connections between different parts.

 

Wireframing is effective at the beginning of design process when the main objective is to create product’s structure. Designers use wireframes to outline visual and typographic hierarchy on user interfaces, set the interactive zones and elements, plan transitions and interactions, organize the general interface clearly for the target audience. Since a wireframe is focused on the structure, not the visual and emotional perception of the details, designers try to keep it simple. They mostly limit it to monochromatic color schemes, with boxes and lines representing copy, pictures and all the interactive elements on the page.

 

Tubik Studio designer UX screens

 

Earlier we presented the typical creative flow for digital product we have here in Tubik by example of creating mobile apps and mentioned the set of stages in this process:

  • setting the task and initial scope of works
  • estimation
  • user/market research
  • UX wireframing
  • prototyping
  • UI design
  • animation
  • software architecture planning
  • iOS development
  • testing
  • release
  • updates.

 

According to this list, it’s easy to see that UX wireframing is not the first stage of digital product creation, but it’s usually the initial phase of actual design, when the future website or application gets its first visual presentation, the sketch of its face and figure. The chances are high that the actual participants in creating digital products would agree with the idea offered by UXPin team in their book on wireframing: «Whether you’re building the next hot startup or a solid website or mobile application, wireframes are invaluable in keeping everyone on the same page – not just product managers, designers, and engineers. And they can be changed really quickly to accommodate the collaborative and iterative nature of product design and development, especially in agile startups and enterprises.»

 

Why do you need wireframing?

 

Wireframing is a fast and cheap way to plan the structure of the page or screen design. What’s more, it gives numerous advantageous opportunities not only for designers but for the whole development team and for clients too. First of all, a wireframe is the first visual representation of a designer’s abstract idea. This step ensures that the developers and the clients get a clear understanding of the project’s design. Furthermore, in case the client wants to make some changes, a wireframe is much easier to reshape since it doesn’t take much efforts and time to create one.

 

The other benefit a team gets from the wireframes is that developers can clearly see the placement of the elements on the page. Some software for creating wireframes allows seeing all the sizes and spacing by clicking a single button that saves time for both designer and development team. In addition, wireframing is quite inspiring for designers. It is flexible and provides much room for experiments which make the creative process more productive and presents the field for fresh outstanding solutions.

 

tubikstudio teamwork

 

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

 

All in all, wireframing is an effective tool that can save time and money for both the team and the client. It helps organize development and design processes and reduce chances of problems on the future steps.

 

Types of wireframes

 

There is an opinion that a wireframe is exceptionally a low-fidelity paper sketch of the page structure with boxes and lines illustrating visual elements. Nevertheless, today modern technologies help designers create wireframes of different fidelity level within a short time and without great effort. Typically we can define 3 widely-used types of wireframes.

 

Low-fidelity wireframes. They are black and white illustrations focused on a “big picture” of the page. UI elements are shown as boxes and lines without detailed annotations. The wireframes of this kind are quite abstract, but they give a chance to see the basic structure of the user interface.

 

Tubik Studio UI sketches

 

Medium-fidelity wireframes. This type is created in a monochrome palette, often gray-scale which makes it similar to the previous one. The wireframes can be created both manually or via digital tools so that the UI components are more detailed and realistic. Copy elements such as headlines and headers are distinguished that assists to establish typographic hierarchy. Placeholders are filled with images and the comments describing their destination.

 

SwiftyBeaver UX by Tubik Studio

The UX wireframes for SwiftyBeaver project

 

High-fidelity wireframes. These wireframes are created via digital tools. The core difference from the other types is that high-fidelity wireframes are built in color and present the screens in the view close to the final visual performance. The fonts are styled and visual elements are created with textures and shadows. The designer pays more attention to the sizes and alignment of UI components. It’s actually the static version of the app or website presented page-by-page or screen-by-screen. So, in distinction from the previous stage, they are called UI wireframes.

 

UI design by Tubik Studio

UI Wireframes for Saily App

 

Wireframing vs Prototyping

 

High-fidelity wireframes tend to be often confused with prototypes because they are created in colors and look realistic, similar to a fully accomplished project. Nevertheless, these concepts present different stages of design process, have different aims and focuses. As we’ve already mentioned, wireframes are focused mostly on the structure of the page. On the other hand, prototypes are created to give the more detailed look at the UI elements, their style and alignment: the biggest difference is that prototypes give the opportunity to test the interactions between the user and the interface similar to the final product. As we mentioned in UI/UX Glossary, the original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. However, prototypes should not be seen as the analog of the final product as they aren’t those: their main aim is to enable a designer, a customer and a user to check the correctness and appropriateness of the design solutions.

 

Interactions need to be thought out well and similar to the final result and checked thoroughly before the development team starts their work. Making alterations, adding elements and changing transitions is much more time-consuming and expensive at the stage of development, that’s why it’s important to check the usability of the UI elements in advance. Prototyping is much more efficient and useful as the step between UX design and UI design. So, here in Tubik we support the workflow having the sequence «UX – prototype – UI».

 

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

 

Prototypes are created on the basis of the static wireframes, making them clickable and interactive, so the designer can try out if the interface is clear and usable for a real user. This kind of testing is a key step in the design process because it allows identifying possible problems and difficulties with user interactions. There are various prototyping tools providing functionality on checking usability of the design solutions, and research platforms which make the process even easier.

 

invision prototyping tool tubikstudio review

 

Efficient wireframing tools

 

Today, designers are not limited in choosing tools for wireframing: there are plenty them, free and paid, to set up the productive design flow. The number of tools is growing so fast that it’s easy to get lost among them.

 

Wireframing is an integral part of the design process here at Tubik, so our designers need a flexible and effective tool for creating wireframes which can be effective both for individual and complex team tasks. The long path of probes has led us to Sketch.

 

Sketch is a professional design software that allows creating the variety of art and design projects. The program is vector-based and gives the opportunity to work with layers and shapes which can be easily manipulated via the tools panel. Sketch is an effective tool for UI/UX designers because it can be applied at different stages of the design workflow starting from wireframing. The features which we see as advantages are quite convincing.

 

It’s vector-based. This means designers can use vector shapes and scale them without losing quality. Moreover, the artboard is still pixel aware which is a core thing for creating quality web and app design.

 

Effective guidelines. You can see dimensions of the components and spacing between them only by holding the alt key. This is helpful not only for designers but also for developers. When designer shares the wireframes with the development team, they can define the placement and details of UI components and layout without designer’s explanations.

 

Grids. Unlike many other tools, Sketch provides in-build grid feature that saves designers’ time since they don’t need to create it beforehand.

 

Native font rendering. It often happens that fonts in a browser look absolutely different compared to the PSD and it ruins the whole picture. Nevertheless, Sketch uses native font rendering that makes fonts feel more natural and accurate in browsers.

 

It’s fast. Sketch is a tool oriented on web and app design, so the functionality is more concise compared to other software in the field. This makes it lighter, so it works much faster not overloading the computer which saves time (and nerve!) for designers.

 

tubik studio design process ux

 

Yet, there is one specific feature about Sketch: it works only on Mac and there are no exceptions. Nevertheless, if you don’t have one, you shouldn’t give up. There is still a classic option — Adobe Photoshop. Yes, it may work a bit slower but it is an efficient tool for creating wireframes, and many designers are sincerely linked to it as a multipurpose tool. Moreover, you should remember that not all the customers are ready to accept the assets in Sketch, so Photoshop will save the game in this case. It proved itself as the efficient tool. Among newer options, the star of Adobe Experience Design (XD) is also rising and winning its positions on the market and in design flows.

 

And, for the last point here, if you are keen to creating interactive high-fidelity wireframes, you’ll need additional tools to make them clickable prototypes. For this stage, we could single out InVision and UXPin: these tools help to add the interactivity to wireframes creating efficient samples for gathering feedbacks from the team and clients.

 

Tips on how to make your wireframing efficient

 

There are no big secrets about creating a quality wireframe still some tips on how to make it more productive can be mentioned for the bottom line:

 

Do thorough research beforehand. Do not start wireframing process before you outline the goals, USP, target audience and the problems which should be solved with the product.

 

Keep them simple. The aim of a wireframe is to create a structure of the page design, details go after.

 

Use a monochromatic palette for UX wireframes. Our experience proves that design process is more productive if the designer leaves detalization for the next step.

 

Write annotation. If the designer plans to present a wireframe to the team, it would be good to include annotations. They help to catch and understand the ideas quicker and deeper.

 

Gather feedback. Try to ask opinions of your team members and perhaps even potential users, if possible, at this stage. It is an effective way to improve your work and save your time for later stages needing more sophisticated design.

 

Use a grid. It helps to place all the components in the efficient way for users’ perception.

 

tubik studio wireframing UI UX

 

Recommended reading

 

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

The Guide to Wireframing (E-book)

The Wireframe Perfectionist’s Guide

Using Wireframes to Streamline Your Development Process

What is a Wireframe: Designing Your UX Backbone

Jargonbuster: mockups, wireframes, prototypes

What’s the difference between wireframes and prototypes?

10 tips to improve your wireframes in the web design process

9 Free to Use Wireframing Tools


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

Welcome to read the articles about UI Navigation Elements

Tubik Studio Dribbble shot

Tubik Monthly Review. October.

New month has come bringing new ideas, new projects and new hopes. Nevertheless, as usual, we start it reviewing what was done in October to sum up a bit of our efforts and present them in our Tubik Monthly Review. So, let’s remember together what this month was full of except hard and inspired work on current projects.

 

In October we enriched Tubik Studio Dribbble page with new shots. Here is the full collection of Tubik Studio shots, which can be checked full size with the attachments if you follow the links.

 

tubik studio website

Basic Grammar for Designers by Marina Yalanska

 

tubik studio character illustration

BIGGIE & 2Pac by Arthur Avakyan

 

hamburger_menu tubik studio

Hamburger Menu Animation by Valentyn Khenkin

 

ribbet animation tubikstudio

Ribbet Collage by Kirill

 

tubik studio ui design passfold

Case study: PassFold by Marina Yalanska

 

tubik studio ui concept

Veggie App Concept by Polina Makarevych

 

tubik studio design ui

Calendar App by Ludmila Shevchenko

 

passfold logo tubikstudio

Case study: PassFold Logo by Marina Yalanska

 

ribbet animation tubik studio

Ribbet Collage 2 by Kirill

 

passfold logo design tubik

Passfold logo options by Arthur Avakyan

 

illustration tubik studio

Night Work… by Ildar Aleksandrov

 

icon logo tubik studio

Saily ghost icon version by Arthur Avakyan

 

tubik studio sticker design

Halloween Sticker (Freebie) by Ildar Aleksandrov

 

Also we have published new articles here in our Blog. October brought our readers two new case studies about the PassFold project, in which we told about UI design and logo design for the mobile application. Both posts are packed with bright images showing the design flow to our readers. Also we published a new set of Tubik Studio Quote Collection: this time it gathered 30 quotes by famous design experts. Two other articles were concentrated on the ways of optimization and improvement of design process: one post told how to optimize the process of resizing mockups for different screen sizes in Photoshop, while the latest post in the blog was concentrated on the essence and benefits of prototyping for UX design by example of work with Pixate tool.

 

No doubt, in October we published tons of photos showing studio daily life and design processes on our Instagram page

Tubik Studio designer

 

…and were happy to share our articles on our Medium page.

Tubik Studio on Medium

 

So, turning over the October page of Tubik Studio life, we are moving full of inspiration to create something new, useful and bright to share with you in our next monthly review. Happy November to everyone!


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

Tubik Studio optimization method

How to effectively resize mockups for different screen sizes in Photoshop

One of the most common problems in design of applications and its further transition to developing stage is the requirement of app adaptation to different resolutions. It takes certain part of the time devoted to design, and although in big companies the team can include the special person assigned to accomplish this type of staff, in most cases this task rests on the designer’s shoulders.

 

As our UX/UI designer Konst says, it is impossible to consider yourself a UX specialist until your own work process is as efficient as possible. This particular thought makes him constantly explore and study new ways and tricks of optimizing his work and increasing its quality. While many companies and individual designers are moving to work with more modern and specialized software for UI/UX design such as Sketch, there still are a lot of them who work with Photoshop. Moreover, as we have already mentioned before in our previous post, the more tools you can use, the more flexible you are in solving tasks as different tools and soft are efficient for different problems.

 

One of the ways of optimization for his own design process which Konst found for himself enables the designer significantly reduce the time needed for adaptation. Certainly, it is not a silver bullet, but it can be useful for those who have to adapt their designs to many resolutions.

 

tubik studio designer

Tubik Studio designer Konst  working on the project

 

In substance, this method applies drawing in 1x in points with further pixel auto-scaling according to the set density of dpi/ppi.

 

Besides general benefits, there are also the following positive points if the method:
1) It makes possible to use the points indices directly both for margins and types (that is by no means unimportant)
2) It isn’t necessary to scale the design manually in the process of adaptation to a new resolution.
3) It isn’t necessary to scale types visually.

 

So, let’s get started investigating the process itself.

 

First of all, the most important thing is to customize the file of your project correctly. The most important aspect at this stage is the size of the operating zone of the project and the resolution pixel/inch.

 

The definition of point is more or less clear for everybody who worked on design for iOS. However, meaning of resolution should be discussed in more details.

 

Both in web design and design of mobile applications the resolution of 72 dpi is the equivalent of 1x resolution. It became custom on the basis that this is a standard resolution for creation of a new file and in this resolution 1 pixel equals 1 point. Explaining the method, the designer didn’t stop on the position of standard resolution in details providing the link to the detailed Guide on DPI.

 

In the given case, the project we are creating is the one for Iphone 6 with screen resolution of 750*1334 pixels, 2x Retina screen, in other words 375*667 points. While the resolution in pixels can differ, a point is the constant measure and its actual presentation directly depends on the resolution parameter. In our case, we set 144 dpi that is equal to 2x modificator in design of application for iOS. So, now our 1 point is not 1 pixel but 4 pixels. It happens because the point contains more pixels with increasing resolution and now it takes the space of 2 x 2 pixels.

 

Then we can start drawing. It’s important to consider here the following nuances:

  • Set the Rules of the document in Points (Right click — -> points);
  • Avoid divisional measures of the objects in points;
  • Avoid divisional measures of the objects placement;
  • Avoid multiplying the measures from the guideline by any modificator; they should be used directly, i.e. navigation bar is drawn with the height of 44 points, not 88 as we would do in pixels;
  • Instead of pixel grid, it’s better to use the grid of 1 point. It makes drawing more convenient.

 

When the project for iPhone 6 is accomplished, it’s time to adapt it for iPhone 6+ or convert the project according to the given settings.
It is known that design for iPhone 6+ needs to be accomplished in 3x, which equals to resolution of 216 pixels per inch. Before, you would have to adjust all the design manually to iPhone 6+ requirements, while with this method it is not required.

 

To make the explanation more applicable, the current instruction will be devoted to re-sizing mock-ups from 5s directly into 6+.

 

1. First of all, we want to check that our mock-up uses correct settings. The size for canvas is set in Points. Resolution 144.

Tubik Studio optimization method

 

The correctness of the settings can be checked in the mock-up itself, if you set on the rulers first points and then pixels, checking the size of the same elements with marque tool. If everything is done right, then the pixel measure should be twice as big as the point measure.

PS optimization Tubik Studio

 

2. Now we start adaptation from 5s into 6+. First, we want to increase the size of the canvas so that it corresponded to the parameters of the new device. To do it, open «Image/Canvas Size…». In the current case we need to enlarge the canvas from 320×568 tо 414х736. Pay attention to the anchor point as the sized will get enlarged relatively to this point. Here the designer chooses the top left corner as to it he has already anchored the elements to its edge and such up-sizing will allow additional work on positioning of these elements.

 

Photoshop optimization Tubik Studio

 

3. This is how the project will look like after up-sizing. Left – before, right – after. As you can see, the canvas actually got bigger.

Photoshop optimization Tubik Studio

 

4. Having checked the pixels/points, it’s possible to see that there are some minor mismatches. 414 points is the right measure but the width of the mock-ups resolution for 6+ is 1242, not 828. The point is that we have set the resolution of 144, i.e. 2x.

Photoshop optimization Tubik Studio

 

5. To correct above mentioned, we move to «Image/Image Size…». There we are able to see the sizes of our canvas in points and its current resolution in pixels. First we choose «Fit To: custom». This parameter allows using further settings correctly.

 

As the size of the canvas in points is correct, we have to adjust its pixel measure. For this aim, we change the resolution from 144 to 216 that is going to correspond to the resolution 3x. After inputting the measure of 216, the number of pixels should change at «2208 x 1242″ which we need.

Tubik Studio Photoshop optimization

 

6. After this we press OK. Now by example of any element with the fixed measure in points we can check if the resolution in pixels changed properly.

Photoshop Optimization Tubik Studio

 

It’s done now! You need only to move the elements of the design and fix them to actual edges, but in general, main objects are already on their places. Therefore, you needn’t worry about the sizes of the icons and buttons if you followed the guidelines.

Photoshop Optimization Tubik Studio

The screens for the project for Unique Publishing, in which Konst applied his method

 

Optimization is the great step to efficiency of the workflow as it can save time and make it free for more creative tasks. Here in Tubik Studio we always share our ideas how to optimize the process saving time and effort but not losing in quality as it is strategically important in work on complex design tasks.


Welcome to see other works by Konst on Dribbble 

Welcome to see other works by Tubik Studio on Dribbble and Behance

Case Study UI UX Design Echo

Case Study: Echo. Designing User Experience and User Interface.

Today we are going to start the set of case studies about various projects and concepts Tubik Studio has worked on. Case study is a great way to share the experience and outline the issues essential to consider while working on projects of different kinds and aims.

 

This time we are going to look closer at the Echo project. You could have seen some stages and elements of this work in Dribbble shots by Sergey Valiukh, the head of Tubik Studio team. Now it is high time we looked through the project in greater detail.

 

Tools

 

Pencil sketching, Adobe Illustrator, Adobe Photoshop, Adobe After Effects, Sketch 3.0, Pixate.

 

Task

 

The task at hand was very clear and at the same time quite broad: to create the social network enabling users to deal with music on their mobiles and other devices. According to this purpose, there were distinguished the following basic functions:

– To download and syncronize media-files from other online platforms and social networks such as YouTube, SoundCloud, Spotify etc.

– To upload the files from the desktop library of media files

– To generate playlists in fast and easy way

– To organize the stream in the image and manner of a radio station.

 

The author also considered the additional functions, one of which was to enable the simultaneous general streaming from several different devices, for example, when people gather at the party or anywhere they want to listen to music together.

 

Working on the task, the designer had to take into account two important pre-conditions:

– High level of competition as there are a lot of already promoted and popular music services in the web and app sphere

– The maximum possible level of adaptability and responsiveness of all the versions of the application that was expected to be used on all possible kinds of gadgets. It was vital to provide 100% adaptability of all the features in order to maintain high usability level.

 

Process

 

User Experience (UX)

 

Music is an integral part of human life, but at the same time that is not the sphere where people would like to make any additional efforts. For most listeners in most cases music is where a person relaxes or, vice versa, gets energy — not the place for hard work demanding elaborate skills. The wider is the target audience of the music service, the simpler and clearer it should be. Everything the user needs here is clear navigation and fast work. However, considering the number of competitors on this market, it’s necessary to think also about something original in design so that the service can stand out of the crowd.

 

Taking all these issues into account, the designer started the work on the site from the research of existing products and creating the concept of user experience. The decision was made to begin with designing the mobile version which was supposed to be more widely used and simpler for the target users. Next stage of design was going to provide the implementation of the mobile version into web.

 

Screens for user experience

Working out the screens

 

On the basis of the review and analysis of existing social networks, the following screens were planned:

– Launcher screens (educational steps animation)

– Sign-in screen (including login, registration, password recovery)

– User main screen (feed, profile, stream creation, audio files addition, search, slide menu)

– Screen of settings and editing profile

 

Let’s look into details of all the screens mentioned.

 

Launcher screens (educational steps animation)/ Sign-in screen (including login, registration, password recovery)

 

The launch of the application started with the slides which were animating while scrolling and the user got the basic description of the service. After the last slide, the sign-up/sign-in screen appeared with the basic set of standard operations (e-mail — password — password recovery). The service was integrated into all widely used social networks so it provided direct logging in with the profiles on Facebook, Twitter, Google+ and so on. After registration, the application made possible to link up all the user’s accounts in social networks to share the streams and see the friends’ streams. Therefore, after the user signs up, he/she is offered to follow the friends from other accounts or find new friends according to musical tastes.

 

Profile Screen Echo Case Study

 

User main screen (feed, profile, stream creation, audio files addition, search, slide menu)

 

The profile was designed to work in 3 different modes:

– DJ Mode (Party Mode) — made possible to download audio files, create playlists as well as send invitations to listen to the playlists for the limited number of people.

– Home Mode — made possible to play the songs from the playlist remotely on different devices within the radius of a room

– Listener Mode — made possible to download and listen to both own and friends’ playlists.

 

Feed Screen for Echo Case Study

 

Extended feed screen for Echo case study

 

Player screen for Echo case study

 

Screen of settings and editing profile

 

This screen contained standard settings: connect or disconnect with social networks, push notifications settings, changing the password, deactivation of the account, signing out.

 

Due to the fact that many screens were required and the convenient transition was needed, the designer chose to construct the application with slide menu. The sandwich button on the left enabled opening the menu panel for the transition to different sections. Also, there was the list of users recommended for following. These recommendations were based on musical tastes, location, circles of friendship etc. In addition, there was a separate notifications screen which reflected the activity of the followers to the user’s posts in the service or in social networks.

 

Navigation menu screen for Echo case study
In iPad version, the split-view was implemented. The sandwich menu and slide menu were set on the left edge of the screen. The size of the posts adjusted to the tablet.

 

In the mobile application, the difference between Android and iOS is that the design of the upper bar (navigation bar for iOS and action bar for Android) has different functional abilities. In general, action bar for Android, in addition to navigation, includes filters, sharing, data about the current screen. Considering these UI peculiarities of the action bar for Android, the content of slide menus was reflected identically in both versions as the acceptable controller for both operating systems in the aspect of mobile applications. For Android version design was completed according to the guides of material design so the structure of slide menu was the same as for iOS but the appearance was different.

 

For the web version of the service, the designer used typical structure when header and slide menu duplicated the functionality of the application with alterations on the size of the desktop for the web-version. Therefore, there were more posts visible in the feed in case of adaptation of mobile application to the web.

 

Everything mentioned above shows that the designer didn’t make the attempt of experimenting and that was motivated by the desire to provide the highest possible usability and utility level. As it has already been outlined before, the application was created for fast and easy usage in everyday situations, so from the user experience standpoint, any experiments and extreme innovations in the typical scheme of social network could scare users, make them feel the application confusing and result in poor user experience.

 

So, the main area of designing something original to distinguish the application was UI.

 

User Interface (UI)

 

The Blur effect was taken as the basis: the bars with data or statements blurred the background. The following animation was used on the player screen: the basic background showed the artwork, which presented the album cover for the composition playing. The background of the screen was blurred with the round unblurred central part, around which the effect of the rotating playing record was created with typical visual details.

UI player screen for Echo case study

 

The visual design of the screens was distinctly distinguished according to their functionality. The screens of entertaining character (feed, profile, navigation bar) were designed with wide application of blur effect: it was dimmed out and the text data was presented in white color. However, a standard screen such as settings or profile editing were designed in the simple style with light background and dark text.

 

Navigation Menu and Profile screens for Echo case study

 

The feed screen reflected the stream of friends and included the artwork being the album cover for the composition playing, the avatar and name of the user whose post is playing, location, the name of the song and the playlist it is downloaded from, the number of likes, views and online listening.

 

UI iPad Feed screen for Echo case study

 

One more screen designed here was extended feed screen. Tapping or clicking on the stream, the user could obtain extended data including all the information from the feed screen described above together with detailed review of the comments, opportunity to leave the comment, make a repost or share in any social network linked with the application.

 

UI Feed and Extended Feed screens for Echo Case Study

 

Redesign

 

One of the most important stages while designing UX/UI of an application or web-site is its testing. Practice shows that sometimes ideas, which look brilliant on the first glance, turn out to be absolutely impractical for target users. That happened with the first version of the Echo project described above.

 

Having analyzed the results of user-testing and having worked with focus groups, the author obtained the information that the original design doesn’t work as it was desired. The thing getting the most negative feedback from users was blur effect in extended feed screen. The screen looked dirty and the text seemed unreadable. Animation and non-standard effects demanded long loading that is unacceptable for such simple operations. The feed screen contained too little body of the stream with overloaded controllers whose functionality was not really essential on that screen.

 

So, on the basis of user feedback, there was made the decision to change the design of the screens. The solution found for them was the following: the blur effect was totally eliminated because its appearance in PSD was absolutely different from what was seen in real, especially low-resolution screens.

 

UI Navigation menu and Profile screens v2 for Echo case study
To provide the maximum of cleanness and simplicity, all the screens were designed with a light background, elegant and laconic uniquely designed icons. The feed screen contained fewer data and the posts had a bigger size. Extended feed looked much simpler although saving the idea of animation.

 

Feed and Extended feed screens v2 for Echo case study

 

Player Transfer Animation for Echo case study

 

Transition from feed to extended feed was realized by tapping or clicking at artwork on the feed screen: it was given in smaller size in feed and got bigger while transition proportionally to the whole screen and under it all the information about the post (the avatar and name of the user whose post is playing, location, the name of the song and the playlist it is downloaded from, the number of likes, views and online listening, detailed review of the comments, opportunity to leave the comment, make a repost or share in any social network linked with the application) was shown on the white background. To make it even more convenient, in the case of vertical scrolling of this screen the big image of the artwork hid into the navigation bar leaving the place for the content below.

 

Extended Feed Animation for Echo case study

 

Web-version was simplified to the one-page site with the functionality of viewing the screens and profile.

 

Web feed screen for Echo case study

 

Work on this project gave our team valuable experience. It shows that modern UI/UX designer should always consider user’s needs and wishes that are vital in creating the successful experience and therefore provide the high level of desirability. Moreover, Echo project also proved that a designer should always be ready to update or even redesign his work and this decision has to be based on real testing of the product.

 


Welcome to see other works by Sergey Valiukh on Dribbble and Behance

Welcome to see other works by Tubik Studio on Dribbble and Behance