Not only people are met by their clothes, but also websites. The dress of the site is its design. A high-quality and attractive design of the resource makes a favorable impression on users, thereby ensuring their loyalty and willingness to devote their time to further viewing. In addition to quality, originality and uniqueness of design are important. Well-worn topics repel visitors. But developing a unique design is expensive. That is why many novice webmasters are wondering how to draw a website design with their own hands.
It is necessary
- - pencil;
- - paper;
- - raster graphics editor GIMP or Photoshop;
- - optional: vector graphics editor (for example, CorelDraw);
- - optional: 3D modeling environment (3DStudio, Blender);
- - modern browser;
- - access to the Internet.
Instructions
Step 1
Develop a website design concept. Decide on the style, color scheme, page layout (size of the site header, the location of the menu, text blocks, images). It's good if the design concept is based on original ideas. But if they are lacking, you can draw inspiration from the analysis of existing solutions. For example, browsing catalogs of popular CMS themes. The result of the work can be a sketch of the site page, made in pencil on a sheet of paper, indicating the zones of fixed and varying sizes.
Step 2
Create a blank site page template in a raster graphics editor. Open a new document in a graphical editor. Document sizes should be much larger than the minimum page size both horizontally (even if you do not intend to create a "fluid" design) and vertically. Add a new transparent layer. In the added layer, use 1 pixel lines to draw an image of the page template respecting the actual dimensions of the elements. For fixed-width page designs, designate margins that will be filled with the background color.
Step 3
Download from the internet or design your own page design elements. Logo and unique design elements can be created in the 3D modeling environment, vector or raster editor. High-resolution thematic images are found in large numbers in free online photobanks. There are also free icon collections on the Internet that you can freely use in your projects.
Step 4
Draw a website design. Add transparent layers to a document containing a template for a website page in a graphical editor. Select and fill in them the areas that match the background of the page. Fill areas with gradient fill and periodic textures. Insert logo, static images, icons. Draw block boundaries. Add some text. Place each finished design element, static image and logo on a separate layer. Move images in layers in order to achieve the required layout.
Step 5
Save the working "source" of the site design in the "native" format of the graphic editor. This will allow you to return later to editing it.
