Hello and welcome back! When it comes to designing screen layouts for apps, websites, even everyday machines (think ATMs, for instance), it is important to have a clear vision before jumping into development. For today’s post, I’ll be walking through a brief explanation of my UI design process.
- Write it out
Plan out the intended functionalities of your application. If you’re designing an app, for instance, you may need multiple screens – a login screen with Auth0 verification, a display screen that requires database integration, etc. A simple bulleted list with features can help streamline what needs to go where. You would also brainstorm the language and platform of choice in this step. - Create a diagram
With your list in hand, you can start creating a diagram. Diagrams help with the routing between your intended screens. More specifically, it can help outline the user’s options from each screen – for instance, once a user is on a certain screen can they go back to the previous one? If not, which screen do they need to navigate to in order to do so? Diagraming helps raise these types of questions. I personally use a tool called Lucid Charts for this step, but there are plenty of other diagramming sites/apps out there. - Create wireframes
You have your screens and routing planned, so now it’s time to layout where and how these features/routes will be implemented. This is where wireframing comes in – wireframes are best described as the ‘skeleton’ of an app screen/web page. These extremely basic layouts detail where images, text, buttons, and other interact-able features will be on a screen. It is important to note that wireframes do not implement any stylistic choices (i.e. colors, fonts); the main goal for wireframes is to layout features. Adobe XD is my usual wireframe app of choice. - Code
Finally, we’re at the coding stage! This is where your planned diagrams and wireframes serve as a guide for development. It’s important to note that both diagrams and wireframes are subject to change in this step – not everything is set in stone, and often times design choices made in the previous steps may reveal to be inadequate for its intended use. Adaptability is key in this stage!
This would be my simplified development process. However, in an ideal situation, you would have a testing stage before coding. This would mean the creation of paper prototypes and the introduction of user testing – using paper prototypes to mock features, test users would intuitively select ‘buttons’ and navigate ‘screens’ of an application. As silly as it sounds, observing what test users select in this stage can distinguish which features are necessary, and which ones aren’t. There would also be another testing stage post coding – this would be a more refined test, where usage thresholds and stress testing would be implemented.
There are many steps in the development of application UI, so highly encourage you to take the time to fully investigate features and processes before jumping into coding!
