How to Design a Mobile Application in 5 Steps - Part 3
Interface Design
đ 2020.06.02 - đ€ BorbĂ©ly Viktor
This is part 3 of my 5-part âHow to Design a Mobile Application in 5 Stepsâ article series. In the previous part, we discussed validating the idea. Letâs continue with designing user interfaces (UI).
By now youâve reached the point where you know exactly for whom and what you want to produce. Youâve also presented your idea to others. If not only in the family-friend circle, then youâve officially validated it! Thatâs it! Now thereâs nothing left but to form a lovable digital product from it.
This sounds simple, as so many tools are available for this that you can throw out the draft in moments if you donât like it and make a new one instead. This is also the difficulty of it, because how will you know when itâs good enough?
Gamification
How does this come in here, you might ask? I donât want to make a game, just a usable product. Well, thatâs not what this is about. Gamification is not a very old concept. This, freely after the words of ĂdĂĄm Pusztai, a domestic gamification expert, sounds roughly like this: âApplication of game elements, basically in a non-game environment.â Well, we havenât gotten any further with this. So what is this? Roughly itâs about paying attention to the user during design to keep them in a process, even if itâs not sufficiently exciting, e.g., paying an electricity bill.
Thereâs a whole science to this, I wonât detail it now, but we think of things like:
- the user knows which screen theyâre on and how they can move forward from here
- they always get feedback after an action: button color changes; pop-up window with info, etc.
- they know where they are in the process (progress indicator: on page 3 out of 5, so 2 more need to be filled out, e.g., on a form)
- satisfies some need; solves their problem; minimizes their loss; can possess something; gets encouragement, etc.
Iâll write more about this in another post. After this much professional preparation, here comes the essence, our glittering-flashing interface with which weâll dazzle our user.
Interface Design
You donât necessarily have to learn a new tool because of design. If this would take a lot of your time and energy, discard this direction! You get much further if you make the main screens visible in a short time. Highlight certain details that you consider important. Play with the logo, with arrangements!
There are excellent tools for this. You wouldnât even think that the well-proven checkered (or plain) notebook is more than enough at the beginning. With a handful of colored markers/pens, youâre capable of wonders. This is the most natural thing at hand. I encourage you to draw the first few designs by hand. Afterward, it will be a good memory to look back at these when the product is already working.
To start, you take your phone, put it on paper, draw around it, and you already have your 1:1 scale template. You just need to draw the screen into it. Whatâs good about this is that with this method, you can easily produce 10-20-100 screens in a short time. Simple, right!?
A good tool is one you use easily and gladly.
Okay, youâre still a tech guy, then some big guns are needed here. Thereâs Figma or InVision, excellently usable online editors even for free. Great for group collaboration. Designs can be shared with each other, just like a OneDrive doc. They can even be tried on phone through a link. Providing a surprisingly rich experience.
If youâre a Mac user, Sketch can be yours for $9 a month. Apple is famous for its tools made for designers, and this is also an excellent tool.
Axure is another paid program thatâs worth its price. Itâs specifically for prototyping, for designing wireframes.
The classic Adobe XD tool certainly comes with far more functions than youâll ever need. Beautiful transitions, responsive interfaces, animations, interactions can be created with it. Worth trying.
I intentionally left for the end the Flutter UI kit that integrates well into Android Studio (AS). If you have an affinity for coding (hopefully this is the case), I also recommend this combination. Flutter gets excellent support not only in AS but also in Visual Studio Code (VS Code) with the installation of a few extensions. If you start in this direction, essentially half your application is already there. At least the interfaces and some rudimentary interaction for the start. This can then be further developed and is good for developing the complete application. As a bonus, immediately for Android and iOS. And the framework thinks about optimal operation. You just have to rely on your imagination.
In the next part, we continue with MVP. If you liked this part, subscribe to the newsletter to be notified about new parts. Iâm curious about your opinion, write to me!