Now that we have some requirements, it’s time to start designing our application. The best choice is draft in a piece of paper a preview of the different pages, sections, windows, UI elements we need in our application. It could be useful to draw a flow between all the pages (in case of a web application) or Activities (in case of an Android application). At this time with should pay attention to UX (user experience) related to the UI, too.
As I said, first we should draw in a piece of paper which represents our web page or android activity all the different elements we want to include, such us buttons, list, embedded videos, etc. There are a lot of tools that allow us draw our designs in an application an save the files in our computer, but the first try should be in a piece of paper because we can modify the design faster than in a commercial software. Once we have a final draft, we can create a document with our designs for future reference. This designs are commonly called storyboards or wireframes.
Once we have our wireframes or storyboards, we can create a document to add extra information about the design. For each wireframe or storyboard, we can create a card that includes the title of the UI element designed, the image of the storyboard/wireframe, a description of each element inside the design; possible colors, spaces, etc.; information about the iteration with the user… When we design a web app, it is convenient to design the sitemap tree too.
Why should we have a document such as this? It could save a lot of time once we begin to develop our source code, because we’ll know how to place all the elements in our application. Another aspect to take into account is the themes, colors, icons, images we need for our application. Everything we can have in advance, will help us to save a lot of coding time. Of course we can change our opinion about the design, but changes are little if we have a previous design.
Thus, my experience has taught me that it is useful to have a draft about the UI, and that’s not at all, what theme to apply (including styles, colors, fonts, etc.) to the app, icons in several sizes and colors, images or backgrounds, etc. The main keys:
- Draw your designs in a piece of paper.
- Redraw those designs using a specified software using colors and styles.
- Think about type fonts.
- Icons are very useful, you can design yours or use an icon bank.
- The same with pictures and backgrounds.
- Think about the users! How the feel when they use your application, how easy and usable is your application, etc.
Again, if you want to use an agile process, you can design just what you need at each time, but think that all you have designed at this moment should be consistent with future designs.
Great! We can almost begin with coding! Just one or two tips more but in future post, don’t miss it!