How to draw design of the website

How to draw design of the website

Clothes count for first impressions not only people, but also websites. Clothes of the website is its design. Qualitative and attractive design of a resource impresses favourably users, providing thereby their loyalty and readiness to find the time for further viewing. Except quality the originality and uniqueness of design is important. The traveled all over subjects push away visitors. But development of unique design costs much. For this reason many beginning web masters ask a question of how to draw design of the website with own hands.

It is required to you

  • - pencil;
  • - sheet of paper;
  • - editor of raster graphics of GIMP or Photoshop;
  • - optionally: editor of vector graphics (for example, CorelDraw);
  • - optionally: the 3D environment - modeling (3DStudio, Blender);
  • - modern browser;
  • - Internet access.

Instruction

1. Develop the concept of design of the website. Decide on style, the color scheme, configuration of pages (website cap size, arrangement of the menu, blocks of the text, images). It is good if concepts of design are the cornerstone the original ideas. But at their shortcoming it is possible to derive inspiration during the analysis of already existing solutions. For example, viewing directories of themes of popular CMS. The sketch of the page of the website executed by a pencil on the sheet of paper with the indication of zones of the fixed and varying sizes can become result of work.

2. Create preparation of a template of the page of the website in the editor of raster graphics. In the graphics editor open the new document. The sizes of the document should be much more minimum page sizes as in horizontal direction (even if it is not supposed to create ""rubber"" design), and in vertical direction. Add a new transparent layer. In the added layer lines 1 pixel thick draw the image of a template of the page with observance of the actual sizes of elements. For design of pages of the fixed width designate edge areas which will be filled with background color.

3. Load from the Internet or develop independently elements of design of pages. The logo and unique elements of design can be created in the 3D environment - modeling, the vector or raster editor. Thematic images of high resolution in a large number contain in free Internet image banks. There are on the Internet also free collections of icons which can be used freely in the projects.

4. Draw design of the website. Add transparent layers to the document containing preparation of a template of the page of the website in the graphics editor. Select and flood in them the areas corresponding to a page background. Fill areas with graduated fill and periodic textures. Insert a logo, freeze frame images, icons. Outline borders of blocks. Add the text. Place each finished design element, the freeze frame image and a logo in a separate layer. Move images in layers to achieve the required configuration.

5. Save working ""source code"" of design of the website in a ""native"" format of the graphics editor. It will allow to return to its editing subsequently.

Author: «MirrorInfo» Dream Team


Print