Quadcorechain team ask me to design their mobile live streaming application platform called “QuadStream”. You maybe asking about Quadcorechain? You can read here my blog post about “What is Quadcorechain?”
I used Adobe XD for the application prototype. If you don’t know what is Adobe XD, it is the newest all in one tool for UX/UI designers in making web and mobile application prototype with user engaging experience. One of the reason i prefer XD is because it’s free. I have been using it for awhile and i can say it has a future, oh well Adobe never fail us to give amazing creative apps that’s why. Adobe is famous and leading the industry in creative apps. For sure you already heard or used Photoshop, Illustrator, Premiere Pro, Lightroom, After Effects, Dreamweaver etc. Adobe newly addition Adobe XD is promising and undeniably will lead the way in making web and mobile application prototypes.
3 Things that makes Adobe XD worth to try:
- User Friendly – If you’re familiar using Photoshop, this is easier as less tools are available. This will surely does not require any learning time. It only has Select, Rectangle, Ellipse, Line, Pen, Text, Artboard and Zoom tool. The platform is so minimalistic that is surprisingly effortless to use unlike Photoshop, Illustrator and other creative apps.
- Fast – Let’s compare it again to adobe’s other apps, loading and making a project in XD is faster. Multiple artboards in your project will surely load in just a snap of your finger. I can confidently invite my friends to try this.
- Functional – As expected all functions are working properly. From making shapes, input text, controls and even dragging image inside a shape will work just simple as that. Like in artboards you have predefined screen that you can choose upon making a project. Indeed, XD will be one of the top application in making web and mobile prototypes.
Let’s start in making a project in XD. As simple and effective, this is how you make project with it. Predefined screens are ready and you just have to choose what kind of project are you gonna working. In QuadStream i chose the IphoneX screen.
Aside from the 3 outstanding things i mentioned above, it is also has accessible Adobe XD Design Toolkit. This will surely get your prototype done easily.
To know more you can download the free UI Starter Kits here “Get your starter kits”.
So what is the UI resource or UI kit. This is what it looks like after you download the resource kits, extract the file and you will see two files in it. One for mobile and the other is for web. As I’m making a mobile app i did use the mobile kit.
The Wires – Mobile as it is called by Adobe XD has list of Artboards ready where you can just copy paste to your pages as easy as that.
List of basic artboards are follows:
1. UI Elements
2. Sign Up
4. Activity Feed
5. News Feed
12. Checkout / Payment screens
14. Filters & Search
15. Location & Maps
16. Pop over
17. Photos & Video
Also if you want to download the resources specifically per OS like the latest iOS12 (Apple), Material Design (Android) and Microsoft UWP Design (Windows Application) including icons. You can directly download all here “Get your specific UI kits”.
Let’s dive now an example of how did i come up with the Sign Up page of Quad Stream Mobile Application. From there you can continue working on the other pages.
Here are the final pages of the Quad Stream Mobile Application.
So what now? How will you test it? If you want to test it like an actual app, Adobe XD will allow you to do that by means of Prototype Function. This function allow you to create automatic redirection to a different screen, onboarding flows, or progress indicators. Just like you Tap to trigger transitions, you can use Delay to specify the transition duration. You need to set your home screen and set what screen it will land and so on.
This is the Final Design of QuadStream.
If you want to know more about Adobe XD you can contact me and ask me questions in the comment section below. For project services you can email me just go to Contact tab. 🙂