The way Flyphant organizes the process of the interface development for a new project or its updating.
I was often asked how we organize the work on the interface. I was too lazy to describe this process every time, so I started preparing a presentation describing this process, which can be sent to clients. Part of that presentation formed the basis of this article.
The word “interface” means any on-screen information or interactive interface. These are:
- mobile applications,
- applications for desktop computers,
- presentation panels (including touch ones),
- information stationary screens.
The picture projected on the wall or the slate using the projector, gesture/voice controlled is also considered an interface.
Stages of interface development
The full cycle of interface development includes the following steps:
- Use cases
- Interface structure
- Interface prototyping
- Defining of stylistics
- Design concept
- Designing of all screens
- Interface animation
- Preparation of materials for developers
To reduce the overall time of development, the defining of stylistics begins after use cases.
Stage 1: Research
At the research stage, one collects information about the product, the customer, its competitors or close analogues, collects statistics on the use of the current interface (e.g., a website or mobile application) and analyses devices of the intended target audience.
If it is already known who will implement the interface (developers), then one should get acquainted with them and find out their capabilities and limitations.
This stage helps to understand for whom the interface is developed, with what limitations it should be done (screen sizes, interactivity), and the wrong ways of doing something (for example, differ in appearance with competitors).
Stage 2: Use cases
Based on the provided description of the interface work, a list of tasks (use cases) that the user can execute within the interface is created. For example, it can be updating the avatar in the profile.
All tasks are described by steps that need to be taken to solve the task. For example:
- Go to the website
- Log in
- Go to profile
- Click on avatar
- Select a file
- Confirm or change cropping of the image
The compiled lists of steps for each task help to understand the points, where the solution path is too long concerning the remaining tasks. The stage of use cases is most suitable for reducing the way to solve user tasks within the interface.
The example above can be shortened by several steps. For example, saving can be automatic, and cropping the image can be an optional action.
Stage 3: Interface structure
The list of steps in the previous stage is the basis of the interface structure. The number of screens, their summary and position in the overall structure become known.
Stage 4: Interface prototyping
In most cases, we make two schematic prototypes: draft and final one. The exceptions are small interfaces: simple mobile applications or small websites.
Draft prototype is a schematic image of the screens, linked together through the Invision prototyping service. In the draft version, the schemes show zones and descriptions of these zones, for example, a news list or a website header. It is all without details.
Draft prototype helps to understand how big the website will be, how much information will be on each screen, how many times you need to click to get to the right page.
The next step is the final prototype, in which the page layouts are still connected between each other, but all the buttons, texts, checkboxes, forms and other elements are already visible on the pages.
Features, location of the elements of pages relative to each other are planned in the prototypes, but not the appearance. The stage of appearance includes colors, images and icons. At the development stage, it is impossible to say how they will interact with each other, how they will look together, whether or not they will “outcry” each other.
Stage 5: Defining of stylistics
After the research stage, and in parallel with the development stages, defining the future interface stylistics is made.
To select the stylistics, several sets of images (mood boards) are prepared. These sets are represented by website pages, illustrations, buttons, and font compositions, linked together stylistically.
One of these sets will form the basis of the concept design.
Stage 6: Design concept
The design concept is aimed to show design of the website and make the future view of the entire website clear. If the previous stage of stylistics defining only sets the direction, the design concept is aimed to cross the chosen direction with the available interface content.
The design concept can be represented in any size, but we try to minimize it to save time. Usually the concept is represented by 1–3 interface screens. If we are talking about a website, then we try to show the appearance of the same page for several devices. If the interface assumes animation on the screens participating in the concept, then we also show it.
Stage 7: Design of all screens
After the design concept is approved, it’s time to design all the other interface screens. The design concept is an assumption of how the entire interface may look. When it’s time for the design of all screens, then the finalization of the appearance occurs: it becomes clear whether the font size or the interlacing is well selected, whether the thickness of the icon lines is well combined with the text, whether or not the design of the forms (buttons, input fields) is in conflict with other screen elements and many other cases.
The plan for design of all screens is the structure and schematic prototype of the interface. However, the deviations from this plan are not uncommon. So, it can be found out when designing, that the pop-up window will be much clearer and more effective than the sliding information block in the middle of the screen.
All designed screens are assembled into an interactive prototype, which will create the most approximate experience of using the interface without resorting to the services of developers.
Stage 8: Interface animation
This stage often begins from the concept design and continues throughout the entire design stage of all screens.
We try to show only some non-standard cases of interface animation that are not provided by the operating system. For example, there is no need to show how fast the next screen will go in the interface of the application for iOS. However, this can also be considered an animation of the interface.
If you are a developer or manage a team of developers, I highly recommend you to read the article Interface Animation for Developers, which describes the basic principles and reasons for using them in 4 minutes.
As a result of this stage, there are videos showing the interface animation. They are needed not only for the client, but also for the developers who will be guided by these videos.
Stage 9: Preparation of materials for developers
We already have interface layouts in all states. The prototype linking the entire interface together is made. Videos showing animation are ready. We prepare all the necessary materials to help developers to implement the interface.
These materials can be the following:
- font with all icons,
- UI Kit with repeating interface elements and their states.
For icons and other graphics from the interface, for all distances, indents, and sizes it is advisable to use Zeplin, which independently prepares icons and code.
It happens that the research has been carried out, schematic prototypes of the interface have been already done, and the stylistics is known. All what is left to do is to complete all of this and forward it to the developers.
In the case where the interface is already functioning and there are regular users, the above approach will not work. For a living project, this process is too long and excessive.
We are Flyphant. Mobile applications and web development, graphic design, motion graphics — this is all that we are not only able of but also love doing.