In this article, we will look at aspects of website design, such as choosing an editor to prepare a site layout, determining the size of a site, and also talk about the format in which sources are saved, how to work with text and much more.
This article is mostly addressed to novice web designers.
What editor to use?
You can design a future website with the help of any graphic editor in which you are accustomed to work. I prefer to use Adobe Illustrator, although most designers want to use Photoshop for these purposes. Partly because browsers do not display vector graphics.
As a result, in the process of preparing the site layers, all graphic elements are converted to raster. For the most part - in the format jpeg. However, if you need a transparent or translucent background - you can use graphics of the png or gif format (less often).
Most designers use Photoshop not only because it is one of the best editors for raster graphics, which HTML understands, but rather because this program is well known and, therefore, most novice designers usually start learning computer graphics with Adobe Photoshop.
These are the main reasons why Photoshop is considered the most convenient program for drawing web design.
How big is the site worth making?
Firstly, if you ordered a site design - forget about such concepts as dpi or metric system. Blocks and images inserted into a site are measured in pixels or percentages (in width / height) of the size of the browser window (or parent element).
If the size of the site is given as a percentage, it is an adaptive (or rubber / responsive) design. Responsive or responsive design is a pretty handy thing. But, if you do not fully understand what you are doing, use fixed sizes.
If the customer insists on an adaptive or responsive design, then before starting the task, think carefully about which blocks will stretch when the browser window is resized, and which are not. You can create a design in this way.
Create several files under standard screen resolutions (for example, 1280 by 1024, 1920 by 1280 and 1024 by 768). With their help, you will get a visual idea of what the site looks like at various resolutions. In the annex to the template list the maximum and minimum block sizes.
What should be the size of a web page?
When we make a business card or flyer layout, we know its final size. In the case of site design, things are a little more complicated.
All monitors have different resolutions (the number of pixels in width and height). This is what must be considered when designing a website. Most monitors currently have a resolution of 1280 or 1920 pixels wide. As a rule, we rely on these values. But do not make text blocks wider than 800 pixels.
When the resolution of the monitor is 800 by 600, and we lose the external attractiveness of the site, it’s half the trouble. But when a line of text does not fit on the screen, it becomes a problem of functionality.
It is best to make sites with a width of 1024 pixels and leave in the template some “free space” in width to the size of 1280 pixels.
The layout of the site can be aligned to the left - right edges or center. Moreover, this “free space” does not have to be white fields. It can be filled with any color or repeating pattern.
Alternatively, you can create a texture similar to the design. You can also use a non-repeating background image, increased to 100% in width with the scrolling feature turned off, but, firstly, sometimes it is not very convenient, and secondly - a site with this kind of background will become quite “heavy” and will require significant time to load.
