Photos are an important means of recording life. With smartphones so popular today, who doesn't have hundreds or thousands of photos in their phones? These pictures that record key moments are precious moments that cannot be replicated for every photographer. It is for this reason that many users have an unparalleled enthusiasm for photography and photo editing and beautification. Today's project is to design a photo editing app.
Now the user audience of photo editing apps is very wide, but in the overall proportion, young people are the main body, and young women account b2b data for a larger proportion. In today's case, UI designer Tania Bashkatova and graphic designer Yaroslava Yatsuba of Tubik Studio are in charge.
Mission brief
UI and UX design of mobile image editing apps.
Preprocessing process
Considering that the largest audience of users is female users between the ages of 15 and 35, the designer will create a selfie and photo editing APP for these users. At present, this APP is temporarily named Cuteen, and Slogan is named "Meet the most beautiful." you".
When designing UX for this APP, it needs to meet its most basic six characteristics, and in terms of style, it can ensure a modern, youthful, feminine and interesting UI design. In addition, our team also decided to create a set of custom icons to use in the UI, combined with a relatively bright color scheme.
Before starting the hands-on design, the designer conducts research on the user and the market. The information collected at this stage can reflect user expectations and is very useful for product design. The team brainstorms based on research results, and the designer embodies her core design ideas throughout the UX design scheme and style preferences.
UX design
The designer's first task is to present all functions in an intuitive form, ensuring that every user can easily edit pictures. To make this process more efficient, designers first created wireframes to organize the information architecture of the entire interface. Wireframing will visualize the layout of the screen and visualized elements quickly, allowing both developers and customers to understand intuitively.
The Cuteen app contains 6 basic functions that need to be presented in the most efficient way. The designer offers two different layout schemes. In the first scheme, which included the circular banner at the top and the brand name, the designer designed several layout variants of the icon and camera button that included basic functions. Among them, the photo button is the interactive element with the highest priority. It should have the characteristics of call to action, so it should have sufficient contrast with other elements of the background.
There are three layouts of UI components in this scheme. The first one is to separate the camera button from the function, while the other two schemes try to make the button and the function area visually related.
The second solution focuses on the presentation of functionality. The banner was removed, the icon was placed at the top of the screen, and the photo button as a CTA element was placed in the middle. This structure allows users to focus better, reduces possible distractions, and makes navigation more intuitive. In addition, the designer has added a stream that shows the latest popular effects, so users can see the latest and most popular effects without filtering.
These two schemes have their own advantages and disadvantages, so the designer decided to compare the advantages and disadvantages of the two layout schemes in the UI design stage.
UI design
The main strategy of UI design is to create stylish and entertaining style. Considering that the app is mainly aimed at young female users, the designers decided to use a bright color scheme with gradient effects. And CTA elements like the camera button are bright pink. Such color matching and beautiful design strategies are very in line with the temperament and preferences of female users.
As for the icons of six different functions, they are presented in six contrasting colors. In this way, different functions are associated with different colors, so that users can quickly identify them without reading the icon labels as they become familiar with the application. In addition, in order to make the whole interface look more comfortable and pleasant, the designer used