GUI (Graphical user interface) makes the work easier and more efficient when a designer makes up all the elements of interface in one lay-out. This way the designer will be able to code all the elements and make screens of them. It facilitates the work significantly when there are screens with a plenty of forms. Besides, it structures and facilitates designer’s efforts because he can see the project entirely (not its separate screens). All the forms will have the same style (sometimes designers fail when the form of one screen differs and he has to make up other structure for each element of another screen).
Having made up the structure for the form fields it can be put into some template which can be used in all forms. It will help to save time at the other stages of implementation.
The following elements are usually put into GUI:
- Form elements and all their states:
- input - focused, disabled, hover (if needed), error;
- select - focused, disabled, hover (if needed), error. (Dropdown lists can be stylized only via Js-libraries but it works out in any case)
- checkbox, radio - checked, unchecked, hover, focused, disabled;
- Datepicker, timepicker;
- input [type="file"] (if needed).
- Links and their states: hover, active, focused, visited.
- Buttons of all sizes and their all possible states: hover, focused, disabled, pressed.
- Headers h1-h6. All of them are not in need.
- Numbered and unnumbered lists, etc.
There is an example of the famous Bootstrap.
Moreover, it is important to see in GUI descriptions all colours used in the project. It will cause no difficulties in case the well-known Material Design is used. The reason of its importance: modern developers use preprocessors CSS where there is a possibility to create variables and use them instead of HEX-codes coloures. Besides, tools of preprocessors can be used to create colours gradation. (For instance, 15 % darker or 15 % lighter).
Properly developed GUI is a half a work on layout. Time can be saved and spent on the nice JS or animation and code scale can be reduced as well that will accelerate web-site speed.
Structure of PSD
It is quite convenient when layers in PSD are collected and defined with colours, for instance, dropdown lists are defined with green and modal screens are defined with red, etc. It is enough to turn a layer on or off to understand how a web-site works and which elements are on the page. The possibility to miss some bugs reduces significantly and precision of work estimation increases. Obviously, there should be no approved variants, mock-ups or something of that kind in hidden layers.
Vertical rhythm
There are many articles on the Internet about modular grids but, basically, only horizontal mockup division is paid attention to. Vertical rhythm is equally important.
In fact, this is a so-called “zebra” for a web-site and this rhythm as well as a pre-prepared palette enables to define line height and vertical and horizontal indents (basically, line height is equal to space between modular grids). Line height and spacing are calculated automatically via different tools (there are a plenty of them for preprocessors). We prefer working with LESS and using such tool as Rhythmless.
If all the sizes and modules are defined once in CSS faster web-sites development will be possible then.
Furthermore, modular grid and vertical rhythm are necessary tools for competent and fast adaptive design development. Owing to pre-prepared defined sizes the work on web-site displaying in a mobile device simplifies significantly.
There are the main rules of making-up that should be strictly observed:
- Bold is to be out when hover is on the link.
- Animation minimization for mobile devices.
- Work optimization with form elements (character set changes of virtual key-board: text, email, url, autocorrection disactivating)
- Deactivating of page scalability for mobile devices.
Do not forget to read the first part of the article about basic principles of responsive design and check out our Dribbble page.
