UI/UX Design Process

by Divvy


It's been a really busy day of designing and tweaking... and more tweaking here at Divvy

After a long day of designing our interface for Divvy, I was inspired to write an article about my personal design process for interfaces and experiences. 

Step 1 Inspiration: I get inspired by browsing sites like Behance and Dribbble and then curating all of the designs I like into a Pinterest board. 

Then I do a google search for something like 

Step 2 Deciding on a colour scheme: You might have noticed the big, bold and bright orange/pink colours we

I drafted interfaces for Divvy using different colour schemes, the best way to do this I found was to make multiple 

Step 3 Compiling the UI: You can pretty much go two ways about designing a user interface in terms of icons, creating your own or downloading a UI kit and using them in your app. 

For Divvy I did both, I made some custom icons but I also used lots of the stock iOS 8 icons so the user would be 

I find it best to sketch out your UI on a piece of paper before designing it in Photoshop or Illustrator etc. 

After sketching it out I then design it, I use Illustrator because I feel that its more precise than Photoshop and you can make multiple artboards so you can keep all of your app screens in one file. 

Step 4 Animations: After the interface is designed I take it into Photoshop and create the animations and movements, I basically just make a ‘Frame Animation Timeline’ and then create UI animations and then export them as gifs.

You can find great animation inspiration on Dribbble.

Step 5 Prototyping: After all of the screens and animations are created, I prototype everything in Marvel it’s really handy to link all of the screens up and add transitions and hotspots, you can then take your prototype and use it on your phone fullscreen so its as close to the final version as possible. 


Thats it, my whole UI/UX workflow summed up into 5 steps.