Web design (that is, work ONLY with sites) is slowly becoming obsolete. Its place is taken by UX UI design. It includes both work with sites and work with any other interfaces (mobile applications, web applications, etc.).
Accordingly, UX UI designers (interface designers) are more in demand than ordinary web designers. This is a fine line and it is very difficult to understand (the difference), but it is there, albeit minimal.
Collection of references
Once you’ve finished with the structure, it’s time to get a little inspiration to work on. References, that is, the work of other designers, will help us with this.
The collection of references can be divided into 2 stages:
- References for your topic
- References on any other topic
In the first case, references on our topic will help us in drawing up the future style of our design. This should be done if the client left this item at the discretion of the designer in the brief.
If, in the brief, the client has described the future style to the smallest detail (fonts, colors, shapes, and so on), then take all the initial data from the brief. If not, then with the help of references on your topic, you can decide on the style.
For example, if you take 5 sites from the fashion industry, you will notice that 4 of them use serif fonts in their design, the shapes of buttons and other elements are made in a strict style, and the color palette is predominantly pastel tones. Accordingly, you can adhere to just such a style if you are developing a design for a fashion project.
In addition, you can take references on any other topic and look for the most successful design solutions that can be adapted to your project. In this way, you will be inspired to work and you will have a rough picture of what composition will be in your design and how the elements will be arranged with each other.
Prototype
With ready-made references, you can start developing a prototype of the future site. A prototype is an intermediate option between the final design and the designed structure. It already looks like a finished site, but without a detailed study.
During prototyping, you are already working directly with the composition and layout, selecting fonts.
In the prototype, you can:
- Instead of pictures, draw regular rectangles or circles
- Instead of icons, make symbols in the form of ordinary squares
- Don’t stick to strict indents
All this can be finalized in the final design. A prototype is needed so that you can visually see how the final design will look like. The stage requires agreement with the customer.
Final design
So we come directly to the design itself in its usual sense. As you can see, the work of a designer is 80% of analysis and design, and only 20% of the design itself.
At this stage, you need to add colors to your prototype, align everything strictly on the grid and adjust the indents, add pictures and icons where they should be.
During the final design process, you may deviate slightly from the prototype in favor of some more aesthetically pleasing design solutions. But not much, because the previous stage was agreed with the customer, and he expects approximately the result that was agreed with him.
After you have the final design ready, you can make a small animation of the interface in order to better “sell” the finished design to the customer. This item is optional, but it will create a wow effect very well.
After approval, you have to prepare your design for transfer to development.
Design preparation for development
At this stage, you need to make it as easy as possible for the developer so that he does not contact you with a bunch of questions. Thus, you save time for yourself and the developer.
What should be done?
First, prepare a small style guide (UI-kit) of your design. Specify what colors you used in the design, what fonts and their styles, various UI elements and their states. That is, so that the developer does not have to guess how the button will behave on hover, and so on.
In general, a style guide (UI-kit) should be formed at the prototype stage, so that later it would be easier for you to work. Depending on the project, style guides can be simple (as in the photo above) or more voluminous (when developing complex interfaces).
Secondly, prepare all the pictures and photos that you used on the site. Take care in advance to reduce their weight, because the “lighter” the pictures, the faster the site loads.
Thirdly, prepare for download all the icons that you used in the design. Icons must be in svg format.
Fourthly, where you conceived some animations or other behaviors of objects – describe them in the comments or in a separate file. This will give the developer a clear understanding of how the elements in the design should behave.
You send the prepared design to the customer, you receive your remuneration for the work, and on this we can say that you have fulfilled your obligations. You can also offer design support to the client, in which you will make some changes to the design over a certain period.
Naturally, this will be a separate service and will be paid separately. Here, decide for yourself.