Prototyping & Design Resources

I was working on the prototype of our app last week, and you can play around with it here: https://marvelapp.com/21912gd. I'll be sharing my tools and process below.

I mostly stick to Google's Material Design as I find it neat and logical. There are also usually Material Design libraries available for most frontend libraries/frameworks.

Angular Material (Angular): https://material.angularjs.org/latest/
Material UI (React): http://www.material-ui.com/#/

Wireframes

Firstly, I come up with wireframes on paper. I just draw rectangles freehand and then sketch out how pages should look like. This should be a quick process that takes maybe 30 mins.

Wireframes

I also add notes in another colour to show what page you move to when you press on buttons, etc.

You can see that I followed Material Design in the mockups, and being familiar with the design style helped me to quickly layout the components. The layouts may look familiar as I used Youtube's Android app and Telegram as references. Don't be afraid to copy good design. :P

Mockups

Next, I create the hi-fidelity mockups using a design kit and Photoshop.

There are quite a few free UI kits available out there, but I'll link some of them here.

This is the one I used for my prototype, Material Design kit from UI8:
https://ui8.net/products/free-material-ui-kit

Invision has quite a few free UI kits, which are also available in Sketch, and they're all beautiful.

Do: https://www.invisionapp.com/do
Now: https://www.invisionapp.com/now
Tethr: https://www.invisionapp.com/tethr

I usually use Photoshop for this step. If you're not familiar with Photoshop, you can use some other tool to design the mockups, like Balsamiq, which gives you a drag-and-drag interface. Unfortunately, I found that most mockup design programs only have free trial versions, and you have to pay after x days or pay to unlock the edit function. So sticking to using the free design kits might be the best choice.

Mockup of main app screen

Mockup of profile page

Adding Interactions

Usually, I stop at either the wireframes or mockup stage for building school projects. However, it might be useful to create a more interactive prototype for users to test out the interactions. This might come in handy for collecting user feedback.

For this, there are quite a few apps out there that let you do so with amazing features... However, most of them are paid. I'm a poor student so I stick to using Marvel.

Marvel is basically a glorified Powerpoint that allows you to add animations and interaction areas to bring your static mockups to life. It also allows you to display your prototype on your Android or iOS phone so that it looks more real to your user.

I put together my static mockups in Marvel and added interaction areas to the buttons so that the pages transition when I press on the buttons, as if it's a real app. Here's my prototype: https://marvelapp.com/21912gd.

You Can Do Design

My groupmates in CS3216 from various groups so far were quite amazed when I managed to sketch out wireframes quickly and bring together everyone's ideas of the app. I got the impression that they feel design is too hard, or that they need to have some sort of talent for it. However, like most skills, it can be learned.

It takes a bit of practice to get familiar with the process, but design skills can be learned and polished with experience. I first learned ui design in poly 6 years ago, and have been practising it on and off all this time to get to this level. It's not something that I knew right away or picked up very quickly, but it's doable.

Hope this post helps you in planning and designing your apps somehow. :)