The stage itself UX design is very complex. Although customers wait more for the visual effect than for the results of the tests, it should be approached equally methodically. Functional design consists of several stages, which, properly implemented, will allow to create a tool dedicated to the end user.
contents
To begin with, it is necessary to think about what elements must be on the site. When a list of them is created, it is necessary to indicate which ones are the most important for both the company and the users. This type of elements can be, for example: contact tab, redirection to profiles in social media, promotions, featured products, etc.
Sketch
As the name suggests, this is a stage of the project in which you will use a sheet of paper and a pencil or a blackboard. The goal is to generate a large number of ideas, determining how the previously written elements should be arranged on the designed page. Then all the ideas or the best of them must be presented to the collaborators and in this way see if the proposed solutions are readable and useful. From the selected ideas in the later stages, the final version of the website will be created.
skeleton
The framework of the page, or functional design, shows the distribution of elements, navigation and interaction on the page. It is a much more structured and arranged representation than a sketch, but it still lacks graphics (colors, pictures, fonts etc.). The skeleton of the site should be as close as possible to the final design.
In the skeleton must be located:
- Text. It is best if it is real and final content that you want to put on the site. Thanks to this, it will be possible to better adjust not only the size of the elements, but also to arrange them in a logical way relative to the content. If it is not possible to insert real content, the designer will insert the content “Lorem Ipsum...” into the given field.
- Navigation tabs. Like the content, the bookmarks should also be true and finally accepted.
- Tables, charts, etc. All additional elements should also be actual. Using real content and elements is so important because it allows you to fit the skeleton of the page well with them. Creating a framework and then matching the content to it is much more difficult, takes a lot more time and often requires a lot of changes to be made.
However, the functional design is not only the skeleton itself, but also its description. It is essential to better understand how a website should behave and why the solution was chosen. The description should include, inter alia:
- goals of the person who enters the site
- business objectives
- points of entry and exit of users
- description of the operation of individual elements
- Argumentation of design decisions
Prototype
The prototype is most easily explained as a sketch on which the interaction is superimposed, which means that it is “clickable”. Thanks to this, you can visualize, for example, transitions between pages, popups or changes of individual elements. The prototype not only allows you to show how the site will function, but you can also conduct research on it and check whether the proposed solutions are really understandable and most optimal for users. If during testing it turns out that users point out errors in the project, it will be much easier and cheaper to correct them at the type stage than if you had to modify an already fully existing page.
When creating a prototype, however, it is worth remembering to focus only on the most important functionalities, so as not to break down into insignificant details, which could lead to a significant lengthening of the work.
The functional design process completes the creation of a prototype, which is finally presented to the customer. As you can see very important is the exploration stage before, when the first sketches and concepts are created.
