User Interface Development Flow. 8-step Process
This article describes the User Interface(UI) development flow in Django Stars from the idea to the final result. Let’s move to the starting point.
This article about UI development flow is originally posted on Django Stars blog.
You have an idea, and we have tools to implement it. But what should we start with? We start with the investigation of the business domain, user audience and the use cases of the product. That helps to understand the target audience in a better way, and to build the User Interface(UI) focused on the user needs. This may affect the size and position of buttons, forms, fonts and many other aspects of the interface structure. Let`s compare the FinTech app and the application from the Taxi & Transportation domain. The first one would include lots of forms, lists, graphs, and transitions. The second one would be oriented on the large and suitable controls, that are easy to use during the ride. In both cases, the interface should be ergonomic and user-friendly but you expect it to differ a lot, right?
Brainstorming & Sketching
Once the project’s concept is clear we move to the brainstorming area, to transform our ideas regarding your interface into reality. We bring a pen and a piece of paper. That’s more efficient in terms of time compared to the advanced tools such as Balsamiq Mockups, Sketch, Photoshop, and InVision.
User Flow Diagram
Once sketching is completed we receive the structure of the interface. But how should user interact with it? User Flow Diagram comes into play here. The diagram helps to understand the logic of the product by showing every possible interaction with the UI, the roadmap of those interactions and the interface state at every point.
Structure and Flow Validation
When we finish with the UI sketches and the User Flow Diagram we ask our clients to confirm it. Structure and flow serve as a base of the building(for the User Interface design). That’s very important stage in the UI development. We do not move forward without those being confirmed. That’s much easier to make changes to the interface at this stage. We can take a complex website design as an example. If you change the structure after the design implementation, you may face the situation when you have successfully broken the color scheme, UI controls, visual style and other parts by simply changing the placement of several elements. In that case, you will probably need to refuse those changes or re-develop the design partly or even completely.
Choosing the Style of the Interface
When customer confirms the structure and the flow — that’s a signal to move forward. What’s next? We choose the style for the interface. There is a wide choice. That can be minimalist, material design, skeuomorphism, metro interface or any other. While choosing one, we ask our clients for some links to examples they like(that includes styles and effects and helps us to understand you in a better way) and about the plans for the future. We pay attention to the current trends, possible interface scaling, and the time needed for the design development and implementation by the development team.
Style Validation
At this stage we make a presentation of our versions of the design to our clients, explaining why these or those decisions were made. Customer may disagree with some moments at the very start, as he might not be aware of the full picture and possible pitfalls. The goal here is to end up with a solution that satisfies the client’s vision and follows the best UX practices.
Choosing and Creating the Preview Form
Once all the listed above is completed, we become ready to show you how your design will look like. It can be presented in various forms. Based on expected fidelity level and the time you are ready to spend that might be one of the following:
Wireframe
The fastest one for the implementation. That’s a low detailed presentation of the design. Wireframe shows the structure and the description of user interactions with the interface. Regularly it is made in a form of gray blocks.
Mockup
Mockup is a medium or high detailed static representation of the design. It renders the content showing you how your design will look in static. It’s easier for perception compared to gray blocked wireframe, and it is still pretty fast to implement compared to the prototype or the animated UI flow.
Clickable Prototype
The prototype is a highly detailed representation of the final product that simulates user interaction with the interface. It allows you to click through your app and check the complete flow and animations. However, prototype creation is pretty time-consuming.
Animated UI Flow
Animated UI flow is a video recorded simulation of the user interaction with your app. The creation of such representation is the most time consuming(as it includes the creation of the prototype + the video editing process). However, that’s a pretty suitable way to present your product to colleagues and possible investors in future.
You May Also Like:
Design Validation
There are people with the exact picture of the design in their heads and there are those who are only guessing. Anyway, everyone has its own vision. On the design validation stage, you see the result and provide us with the comments and suggestions. We, on the other side, adjusting it to meet your expectations.
Summary
Let`s develop the user interface step by step, validate every stage of the development, and сonsistently move to the final goal. Such approach saves time, allows to locate the places for improvement on time, and decreases the possibility of extra investments on further stages of the product development.
The article is written by Dmytro Puchkov(DMYTRO PUCHKOV) — UI/UX Design Lead at Django Stars. This article about UI development flow is originally posted on Django Stars blog.
Specially shared with The Startup community.
You are always welcome to ask questions and share topics you want to read about!
If you find this post useful, please tap the 👏 button below :)
