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 to 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.

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 allows designer to use the indices of the points 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 a point is more or less clear for everybody who worked on design for iOS. However, the meaning of resolution should be discussed in more detail.

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 the 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 detail 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 the 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 a 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 the design of the 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 the 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 the design for iPhone 6+ needs to be accomplished in 3x, which equals the 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 of the canvas is set in Points. Resolution 144.

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.

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 the positioning of these elements.

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.

4. Having checked the pixels/points, it’s possible to see that there are some minor mismatches. 414 points are 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.

5. To correct the 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.

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

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

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

Optimization is a great step to the 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 on 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.

Originally written for Tubik Blog

Сообщение How to Resize Mockups for Different Screen Sizes in Photoshop появились сначала на Design4Users.

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 the Tubik 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 synchronize 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 a 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 on 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 a 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 in this market, it’s necessary to think also about something original in design so that the service can stand out from 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. The next stage of design was going to provide the implementation of the mobile version into the web.

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)

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 it 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.

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) — allows users to download audio files, create playlists as well as send invitations to listen to the playlists for the limited number of people.
– Home Mode — allows users to play the songs from the playlist remotely on different devices within the radius of a room
– Listener Mode — allows users to download and listen to both own and friends’ playlists.

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 a 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 that reflected the activity of the followers to the user’s posts in the service or in social networks.

In the 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 the slide menu was the same as for iOS but the appearance was different.

For the web version of the service, the designer used a typical structure when the 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 the mobile applications to the web.

Everything mentioned above shows that the designer didn’t make the attempt to 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.

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, standard screen such as settings or profile editing were designed in the simple style with light background and dark text.

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.

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 a detailed review of the comments, opportunity to leave the comment, make a repost or share in any social network linked with the application.

Redesign

One of the most important stages while designing the UX/UI of an application or website 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.

To provide a maximum of cleanness and simplicity, all the screens were designed with a light background, elegant and laconic custom icons. The feed screen contained less data and the posts had a bigger size. Extended feed looked much simpler although saving the idea of animation.

The transition from feed to extended feed was realized by tapping or clicking at the 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.

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

Work on this project gave the team valuable experience. It shows that modern UI/UX designer should always consider user’s needs and wishes that are vital in creating a successful experience and therefore provide a high level of desirability. Moreover, the 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.

More Design Case Studies

If you are interested to see more practical case studies with creative flows for UI/UX design, here is the set of them.

Watering Tracker. Mobile UI Design for Home Needs

Tasty Burger. Mobile App for Food Ordering

Big City Guide. Landing Page Design

Vinny’s Bakery. UI Design for E-Commerce

Health Care App. UI for Doctors

Slumber. Mobile UI Design for Healthy Sleeping

Kubrick Life. Educational Biography Website

Designer AI. Dashboard and Graphics for Fashion Service

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Originally written for Tubik Blog

Сообщение Design Case Study: Echo. User Interface for Music App появились сначала на Design4Users.