Today we would like to talk about creation of a design, about how a designer should organize his or her work, what mistakes you should avoid, what aspects you should pay special attention to for creation of a really beautiful design and for its realization to take minimum time.
Write down your ideas
This piece of advice seems obvious. However, very many beginner designers immediately try opening Photoshop and begin to experiment with a background, various shades, textures and elements. Nevertheless, the first thing to do is create a precise plan that will demonstrate:
- Positions of elements;
- A hierarchy;
- Functionality;
- Layout.
Before you choose shades and textures, think about the content of a future page!
Draw top-level elements first
It is most convenient to choose visual appearance and positions of top-level elements of a framework because other solutions you make during your design creation depend on them directly.
A framework is your interface, which contains the main content. It determines the position of content on the page, helps to manage it, edit it, etc. The framework includes the key elements of the website: header, navigation menu, footer, as well as sidebar elements.
If you start creating a design for your site with such a perspective, you will immediately understand what sections your site will have, what elements will be required in different parts of the web page, what else your site will include.
Use a PSD grid
A Photoshop grid is very easy to use. You will need it in creation of any layout. It will be convenient for you to structure your layout, work with different screen sizes of user devices, and create an adaptive design.
The font choice
You need to pay maximum attention to this aspect of design creation. The use of maximum 2 fonts for one site is considered optimal, but, actually, this issue is resolved individually in each case.
The main rules:
- There must be as few as possible fonts, new font is added only if it is really necessary.
- The fonts must be readable enough in different size as well as in a big amount of text information.
- The fonts must look well in the heading, plain text, different prompts, call-to-actions etc.
Color palette
There are no strict rules here. Still you should use a limited color and shade set to avoid too large intensity. Best of all choose colors for basic elements of the interface and objects that depend on them in advance. Moreover, try to make them look in harmony with each other.
Website structure
The simpler the structure of your site will be, the easier it will be for users to orient themselves on it. Always follow this rule. Each section of your site must have some idea; the user must see the main parts of a design and understand what he/she can do here. It is easier to start development with a very simple structure and add elements as you need them.
Rethink each element
The designer often forms the way, which the user will go when viewing the site. Therefore, you should try to make the number of actions minimal.
There are ready- made conventions and development templates that can be and should be used. Still it is important to rethink the use of one or another element every time, because there is always a chance that you add an element by force of habit.
The most vivid example is the “Search” button. Actually, a window for a search query and the Enter key is enough for the user. However, designers continue to habitually add the button on sites thus complicating work for themselves and making their design heavier.
Perfect all components, do not forget about details
If you want your design to look good on different screens, perfect everything, even the smallest component. Treat drawing each button, each frame as a separate project. Remember that design is made of separate components and the more attractive and better all the “bricks” are drawn in detail, the better the whole site will look.
Work on readability and accuracy of each element
Set correct contrast between the background and element colors, do not forget to optimize various edges, frames, captions. It is important not only from aesthetic but also from a practical point of view. Accurately drawn lines even at large zooming of each detail will help users to work with a site from different screens with different resolution.
Make order in your PSD
Always keep your PSD files in order, regardless of how large the project you are working on is, what number of designers are working on it. This rule must always be compulsory for you just like the rule of the use of a grid.
Such habits let you reduce your time for search of a necessary component and image, effectively interact with colleagues, and it will accelerate your work with shared files, etc.
Check your layout in different conditions
Practice shows that the best design solutions are created when a designer strives for maximally attractive layout appearance in ideal conditions (on big screens with good resolution), but at the same time he does not forget to check how it all will look in extreme conditions. For example, it is worth seeing how your design will look if the site is loaded on a small screen. If in this case the structure of page gets broken, you need to try to find an optimal solution.
Check all elements once more before web coding
Remember the “measure thrice and cut once” rule? When you work on your design, it is also very important to apply it. Save the web coder’s time and energy, double check each element and bring everything in order before giving the files for coding. It will also save your time and help to avoid the need to make corrections as well as dissatisfaction of the customer. Besides, neat design without “invisible” layers and other “garbage” will be processed much more correctly during automatic psd to html conversion.
