APP Design About UX, UI and Adobe XD
01
UX or UI Design
These are two of the most confused professions in the design industry, while the meanings hidden behind those abbreviations are often misunderstood. UX Design stands for User Experience Design and UI Design Refers to User Interface Design – both working closely together and vital to the product. At the same time, they have very different roles and represent different parts of the design process. Let’s take a look at each of them separately:
What is User Experience Design? The term was coined in the late 90’s by Don Norman, co-founder of the Nielsen Norman Group Design Consultancy. His definition was “UX Design is the process of enhancing user satisfaction with a product by improving the usability, accessibility and pleasure provided in the interaction”, also “User experience encompasses all aspects of the end-user’s interaction
with the company, it’s services and it’s products”. If we think of the code as being the bones of a product, the UX design represents the organs – they are constantly measuring, optimizing and if they are doing their job right, you don’t even know they are there. The UX Designer’s responsibilities include research and analysis, wireframing, prototyping, coordination with UI Designers and developers, tracking goals and integration.
02 03 04
What about User Interface Design? Following the same analogy as before, if the code represents the bones of the body and the UX Design represents the organs, then UI Design represents the cosmetics and presentation of the body. It’s responsibility is to transfer the development, content and layout of a product into an attractive and guiding experience for the user as well as translating the brand to the product. Both UI and UX Design are equally important aspects of a great product’s development.
Principles of App Design Studies show that around 25% of app users open an app a single time and never return. Part of the reason for this is the fact that a good mobile app should be useful, intuitive and aesthetic. When one of this traits is lacking, the user has a much higher chance of losing interest altogether. When designing an app, there are a few principles to keep in mind;
02
01 03 04
Both UI and UX Design are equally important
1
Keep the interface clean – Cluttering the screen with buttons, images and text will make navigation more confusing and will make the app harder to interact with. It’s way better to have several clean screens with clear content and navigation than to fill a single screen with everything the app has to offer.
2
Create coherent navigation paths – The user should be led intuitively through the app’s features and screens. The navigation should require no explaining and the icons should clearly state where they lead if pressed.
3
Keep a good scale – Since mobile screens are a fraction of a desktop display for example, the interactive elements of the app should take the difference into account and be designed in a way that allows a fingertip to fit inside their borders.
4
Create a good contrast – Mobile phones are used both indoors and outdoors. When designing an app, it’s best to create a good contrast that allows the screen to be easily read in varying viewing conditions.
5
Keep the text readable – It’s bad practice to clutter the information just because the screen is smaller.
6
Design for accessibility – Keep in mind that a huge percent of the population is only using the thumb to navigate the app. Place elements that will not be used often and negative or destructive functions in difficult to reach spots, while creating a fluid experience with the most used elements and buttons in easy to access by thumb places.
03
01 02 04
Adobe XD One of the best tools of designing an app is the emerging Adobe XD software. The intuitive UX/UI solution is great for designing mobile apps and websites, as well as sharing the interactive prototypes with team members, clients and reviewers. We’ll take a look at how intuitive it is to design an app for iPhone using the tools provided by Adobe XD. One noteworthy information is that for the software to be installed, the Windows users must operate on a Windows 10 with the Creator’s Update. We’ll now choose the screen size we’ll be developing the application for and right off the bat we’ll be met by the clean interface and the tools provided by Adobe XD. For this example we will be developing a basic fictional boutique app named The Wardrobe. Thinking about the functionality of the app, the first screen should allow you to log into your account, where you have access to personalized offers, your basket, delivery locations, payment information and more.
04
01 02 03
05 Most of the time it is a good practice to set up a grid before starting to place elements. This way we have a better overview of the layout and we easily avoid small positioning inconsistencies. To do that, we have to select the blank artboard and check the grid option in the lower right side of the menu. We’ll be using a square grid for this project, so instead of Layout we’ll select Square and set the size – we’ll use 15 this time. Adobe XD makes it very easy to introduce elements and create interfaces. To create the background all we have to do is create a rectangle of the desired size and drag an image into it. We can either allow the default border of the shape, change it’s colour or turn it off entirely. Now that we have the background, we can drag and drop our logo – we can import it as a .PNG file with transparency, or we can import it as a .SVG vector file; the difference is that if we modify the original .SVG file, the change will apply on every instance of the file that appears in the Adobe XD project.
06 07 08
Once we have our logo in the file, we can use the transform handles to bring it to a size and position we’re happy with. We’ll be using the Type tool found on the left side of the menu to write our tagline near the bottom margin of the image; also with the text selected, on the right side of the menu become available the font, size, positioning, spacing, opacity, colour and more type settings that we’ll be using. For starters, we’ll change from the default font to Gotham and set the weight to Book, we’ll change the size and colour to create a good contrast between the tagline and the logo. Next up we’ll create the slots that will be used for email and password input. We’ll start with creating a rectangle of the appropriate size. We’ll get rid of the border and set the fill colour to a dark grey; we can adjust the roundness of the rectangle from the inner handles next to each corner. To fully round the rectangle we’ll just pull one handle all the way. Now that we have our first slot we can add the type; we’ll be using the Open Sans Medium font, white fill and no border. This will be our first slot, where the user will input the email.
06
05 07 08
Since we also need a password slot, we’ll select the shape and the text within and holding the Alt key we’ll drag the copy down, creating a second shape, renaming the text inside ‘Password’. For the Login button we just copy the shape again and change it’s size, renaming the text inside and changing it’s weight and point size. Since the ‘Sign Up’ and ‘Forgot Password’ options are not used as often, they will be smaller and placed accordingly. Now that we have the Login screen down, we can start working on the next part. After using the artboard tool to make another canvas, we’ll create a switch on the top side to change from the women’s part of the shop to the men’s part. To do this we’ll simply use two rectangles and change the fill of the active one to it’s respective colour. We’ll mark the two rectangles with Women’s and Men’s using the Bodoni Condensed font; on the far right side we’ll place the search and settings icons to be out of the way but easily accessible.
07
05 06 08
Since this will be the category selection screen, we’ll place a photo just underneath the switch, followed by the category list. To create the list, we’ll need to first develop the individual element – in this case the first category. After we’ve done this, we’ll select the element we want to create a list out of and we’ll click on Repeat Grid (right side menu). This will allow us to use as many copies of the first element as we need in a grid; to change the spacing between elements we’ll just click on the empty space and drag the mouse up or down. Next up we need to change the category names and this time we need to double click twice – first to open the grid group, the second to actually edit an element inside. To create the Men’s screen, we’ll just copy the Women’s and paste it in a new artboard. A small change to the switch and the categories is required and to change the image we’ll just drag and drop the new one over it.
08
05 06 07
09 We’ll also design a template for the categories. To do that we’ll design the first element from the list; then we’ll duplicate it so that we have two elements on a row. To create the grid, we simply select both elements and hit Repeat Grid; to edit elements from the grid, a double click to open the group and then we can change whatever we need. Since our list will be longer than what could be seen on a static screen, we need to select the artboard, on the Scrolling option set Vertical and pull the bottom handle until the artboard has the height that we need it. We have to think about navigation so we’ll add an arrow icon to be later used in the prototyping part of the development. The final screen where the product is presented will be designed in the same way as the rest of them.
10 11 12
To create the interactions between the elements of the app we have to jump into Prototype mode from the top menu. Here we can select the element we want to link to a certain screen and just drag it’s arrow to the respective artboard. After that is done, we can observe a small pop up menu that allows the designer to change the artboard it’s targeting, the transition effect, the easing and duration of the animation. To test out the app we can hit the play button from the top right corner.
10
09 11 12
Other UI/UX Solutions
Even though Adobe XD is a great and very intuitive tool, it is definitely not the only such software on the market. One good alternatives is Sketch – a powerful wireframing and designing tool. It’s features number designing vector elements, multi resolution exporting and shared styles and symbols. Mockplus is another powerful and useful prototype tool; it allows you to easily create and link pages and is overall a good alternative to Adobe XD Proto.io is our third great wireframing tool that has some great UI libraries available; aside from creating interactions between elements and pages, the software can also define gestures and is good at testing and sharing the content to other members of the team.
11
09 10 12
What’s Next?
Wireframing and UI/UX Design are some of the most important steps when creating an app. People are attracted to aesthetically pleasing interfaces and with a good User Experience design, any app is off to a great start. The designs or ‘skins’ created in any of the software we talked about should next be exported in varying resolutions and shared with the developers who will code them into functional applications. There are also a few ‘Do it yourself’ solutions that allow the opportunity to create apps without any knowledge of coding. Some examples are Appypie or Bubble which are great at front end building, while Treeline is an innovative tool for back end that can create enterprise level apps with no requirements of coding at all.
12
09 10 11
Cassian Iordache