Getting started with UX/UI apps design
First steps for inexperienced or non-designers into the mobile app world
User Experience (UX) and User Interface (UI) design are trending terms nowadays. In the same way, creating apps is currently one of the most attractive markets for developers, designers and digital creators all over the world. The reason is clear: smartphones are ubiquitous and the potential uses for apps are infinite.
Only well-designed apps will retain the customer’s attention, and thus create value for the user. This is the basis for most business models, from what we will expect some profit.
When facing your first app design, you will need to understand some basic concepts and answer preliminary questions. Once you do that, you can put hands to work and start the process.
This article summarizes some valuable information and resources that will save you much time when starting your first projects. In addition to that, we will cover some guidelines and good practices that will help you during the design process.
Do you like video-game design? Check this article about UX based on nostalgia:
WHAT DO I NEED TO KNOW BEFORE STARTING?
This is the basis for your design work. Make sure that you understand every point of this chapter, and feel free to ask any question if you need further information.
1. DESIGN TOOLS
You will need tools to design and test your app. I definitely recommend Adobe XD for beginners, which is very intuitive and offers you many options. Furthermore, it is free! However, you can find many other solutions like Sketch, Framer, Figma and InVision. Depending on the case, it may be a good idea to have a look at them.
We cover the basics of Adobe XD in our next article:
For the color scheme of your UI, you should definitely try the Color Tool of the Material Design. It is a very simple and effective tool that helps you to choose the right color palette for your app, previewing sample mockups. More important, you can check the legibility of text with different combinations of font and background colors.
Color Tool allows you to export the color palette for Android and iOS so that developers can apply it directly into the code.
In addition to the general UX/UI tool, it will be good if you can use Adobe Photoshop or any other image and photo editor like GIMP or Photo Pos Pro. If you do not use such tools, do not worry! There are plenty of free resources on the Internet.
Here you have the complete list for the tools I have mentioned:
- Adobe XD (free!)
- Sketch (macOS only)
- Framer (macOS only)
- InVision (free!)
- Figma (online, free test!)
- Color Tool (online, free!)
- Adobe Photoshop
- GIMP (free!)
- Photo Pos Pro (free!)
2. TARGET DEVICES
I will focus on Android and iOS. Most mobile and wearable devices use these operative systems nowadays, so designing for them will be the most common case.
However, designing UX for Android and iOS platforms can be different in some aspects. You can read here some interesting information about the different behavior of Android and iOS users.
You will need to prepare every image or video of your app for different sizes and screen densities, based on the different target devices. There are thousands of different Android devices, but Google recommends to design for some standard screen specifications. The most common approach is to design for medium-density (MDPI) or high-density (HDPI) resolutions and then convert your images by proportionally scaling them.
Luckily, Adobe XD and other tools are already prepared to export your images into the standard formats, as we will see in the second article of this series.
For iOS design, Apple establishes 3 different resolutions based on their standard devices. The process is considerably simpler.
You can also check the metrics for most common mobile and wearable devices on the Material Design online documentation.
3. ONLINE (FREE) RESOURCES
You don’t need to re-design the whole UI app paradigm when creating your app. Of course, experienced designers may develop new concepts and open the path to new trends. But for a beginner, it is recommended to follow the guidelines and make use of online resources as much as possible.
Of course, take care of copyright laws. You can only use free-of-use resources for your app! However, there are plenty of free images, icons, and templates that you can download without any risk.
As a starting point, I strongly urge you to visit the Material Design website and browse through it to learn about good design practices.
And here is the gold for the UX/UI starters: the following list contains some of the most useful websites from where you can download free UI resources.
- Material Design — Free Icons
- Adobe XD — free resources
- UpLabs — free design templates and resources
- XD Guru — free UI kits for Abode XD
- FlatIcon — free icons
- Freebiesui — free resources for UI design
- Google Fonts — free typographic resources
- Pexels — Free high-quality stock photos
The amount of free resources is really high. If you need something specific for your app, consider taking some minutes to explore the Internet before creating anything from scratch.
4. SOME EXTRA GENERAL TIPS
- UX’s aim is to create positive experiences for the user. This means that you will need to think about who will be the users of your app, and how will they use the app.
- To create those positive experiences, you can follow the latest trends and just imitate what other apps do. Investigate the market! For example, try to minimize the user journey and keep the navigation as simple as possible.
- The User Interface (UI) is one of the key parts of your app. Again, follow the common trends and simplify the color scheme to make things clear and visible, or make use of full-screen images or videos if they fit the case of use of your app.
UX and UI design require much work time, creativity, prototyping, iterating and correcting your own failures. You will probably find it when doing your own projects. Nevertheless, there are lots of guidelines, examples, resources, mockups, and kits that you can use to ease the design process.
Do not try to be the most original app designer in the world during your first week: usually, it is better not to fail than doing something unique.
Innovation is always spinning forward. Just like a Drill.
