How to make beautiful UI/UX for your apps

August Radjoe
2 min readJun 5, 2018

--

Using Adobe XD CC 18

Basic explainations

First up-UI is user interface,which refers to how your app looks and hence is related to UX,or User Experience,which means how accessible and user friendly is your app,then is wireframing-which means a UI/UX devoid of any design elements-color contrast,transitions et al. and finally is prototyping-which means showcasing what the actual app will be like without developing it,complete with transitions and all.

What is Adobe XD?

Let’s start with a short introduction on Adobe XD.
Sounds like a really professional emoticon to me,but Adobe XD is a “User interface development software”-that supports motion prototyping and wireframing.Which means that before you make your app,Adobe XD prepares an almost functional front-end of your app,using basically a few tools and drag and drop.Look up “UI” on Dribbble and you’ll get an idea what a UI/UX prototype is.Out of all Adobe products,this is the easiest to learn,so if you have nothing to do over the summer break-this can be an easy addition to your resume.

Now let’s talk about Why Adobe XD:

There are certain competitors to Adobe XD in the market today,namely Sketch and inVision Studio.However I believe,and this is just a believe that stands to be tested in the coming time,and that is that Adobe XD CC 20 (To be released in 2020) will easily over power Sketch,and as for inVision,we will see.

Now first let’s talk about the super-powers of XD-
1.Cross-platform:Mac and Windows

2.Lightweight-super lightweight infact

3.Free

4.Has prototyping tools,which is a little limited honestly

5.Is a part of Adobe environment,which is great at integrating it’s softwares.So I hope that in near future,XD is integrated with Premiere Pro to create stronger and more expressive prototyping tools.

6.XD integrates with Zeplin.io,and if you don’t know Zeplin,maybe I’ll explain it further in an upcoming post,but for now,a basic overview would be:What Zeplin does is that is is like GitHub for sharing design between designers and developers,and allows automatic conversion of elements to HTML/XML.

7.Talked about this before,but Sketch and XD both do not support advanced image manipulation,except XD supports .psd import and belongs to the same environment as Photoshop (and Illustrator).

At this point,there is already a ton of wins over Sketch,namely the cross platform and free part,and add to that-prototyping is an inbuilt feature!

Now I am waiting for inVision Studio to release for Windows,till then I wouldn’t comment on it,but I have heard nothing but good things about it.

Till now,for me,Adobe XD is a clear,clear winner.

(Disclaimer: I have not used a ton of UX dev softwares,like UXpin or the others because of my convenience with XD)

Now,where to learn it from?

Easy one.

By downloading it and tinkering around with it.
Knowledge of basics of Photoshop will definitely empower you to perform better on the platform,but you’re good to go without it as well.

A few tutorials on YouTube should be enough to get you going.
Again,I am 100% available to any queries you have-specific or general and I promise to respond fast enough.

Fin.

--

--

August Radjoe

Now: MS CS @ Boston U / Prev: Ignite Tournaments, DeFi Alliance, Persistence, Eth India Co