How do I plan for UI Design of a Web app/Mobile App?

Few days back one of my friends asked for my help in UI design of his Mobile App. He had a working model of App but the UI/UX was poor. So we started the UI planning for his app.

Here are the simple steps taken:

  1. First of all you need to decide how many screens will be there in app. Like – Welcome Screen/Video/Slideshow, Login/Register Screen, Home Screen, Side Drawer, Functional Screens etc.
  2. Wire-framing – We took 1 paper per screen and wrote all the information on one side of paper we wanted to display on a particular screen keeping the information to be minimal on listing screens and maximum on detailed screens. We user the other side of paper for all the functions that can be performed on this screen like – a favorite icon can be clicked to mark the item favorite etc.
  3. Once you have wire-frames in hand you can decide what color theme to be used.

Wire-framing a UI design on paper can be a lot more helpful than using any software tool for the purpose. Once you have a wireframe on paper you have a plan for UI Design. You can then proceed to wire-framing Software or design software. In my case I use Adobe Fireworks and Illustrator for designing.

Share this post