In what editor is better to do the site design?
Make a design for the future Internet resource can be in the graphics editor in which you used to work. For me, for example, it is more convenient to use Adobe Illustrator, although most designers tend to use Photoshop for these purposes. It is connected, in part, with the fact that browsers do not display vector images. That is, for the layout of the site all the graphical elements are converted to bitmap. Most often it is .jpg. If you need a transparent or translucent background – use .png or .gif. But most designers use Photoshop not only because it is one of the best raster graphics editors, graphics that understand html, but also because this program is well known, and, accordingly, most who want to become designers are beginning to study computer graphics with Adobe Photoshop. Here are two main reasons why Photoshop is considered the most convenient program to make a website design. And, if you will not design your own site, it is worth using it, because the html setters used to get sources in .psd. Although, again, you can make a design in any convenient for you graphic editor.
What size to make the site?
First, if we ordered the site design, you must at the time to forget about such a concept as dpi and the metric system. Dimensions of blocks and embedded images in the layout of the site are specified in pixels or percentage of the width / height of the browser window.
If the size of our site is specified as a percentage, such a site is called a rubber site. Rubber sites are not always convenient. So, if you do not fully understand what you’re doing, it is better to create a site design a fixed size. If your customer insists on a rubber site design, then, before you make a design, please think very carefully which blocks you have to stretch when the window increases, and which – no. Display this in the design can be as follows – to make several files of several standard sizes (for example: 1280×1024, 1920×1280 and 1024×768), which will reflect, as will look site, depending on the monitor resolution. Write in the appendix to the template, the maximum and minimum dimensions of blocks.
So what is the fixed size of the site should be?
When we make a business card or leaflet layout, we know the final size of the finished product. In the case of website design, however, everything is a little more complicated. Not all monitors have the same resolution, that is, the number of pixels in width and height. And this must be taken into account in the design. Most monitors have a resolution of 1024 or 1280 pixels wide. As a rule, this is what most people look up to. However, you shouldn’t make text blocks wider than 800 pixels. If the resolution of 800 x 600 pixels, we lose in the appearance of the site – it’s not terrible. But when the line does not fit on our monitor, it becomes extremely inconvenient to read.
It is best to make the site 1024 pixels wide and add “free space” to our layout to a size of 1280. The site in the layout can be left, right or center aligned. With or without indentation. And this “free space” is not necessarily a white field. It could be any other color or consist of repeating graphical elements. Or you could have a seamless texture. You can, of course, use as a background a non-repeating image, stretch it to 100% width and prohibit scrolling, but this is first – not very convenient, and secondly – a site with a background image is very heavy and will take a long time to load.
How to save the source code?
Sources are best saved with the extension .psd, where each graphic element is on its own layer. Moreover, it is desirable to name the layers so that they can be understood. For example: “General background of the site,” “Background of the text block. Layers can be grouped by meaning. For example, the text and the background on which the text is located, grouped and called this group “main text block. Or group the link block with the background and call the group “links so-and-so”. In general, try to make this psd so that the html coder did not call you every five minutes and did not find out what you wanted to say.
So how do you make a beautiful website design?
The word combination “beautiful site” can easily scare a competent webmaster. The site, first of all, should be functional, and secondly – the site should load quickly and be convenient for users. And “Beauty” is important to a much lesser extent. In addition, the taste and color of all the felt-tip pens are different. So someone can hardly teach you to make a “beautiful”. Creating a new design, it would be nice to think, first of all, about the functionality of this resource. And have the elements so that the visitor can easily find the information he needs. Just is worth to take care of that hit the site the user did not run away from it immediately, scared or guided by gagging. To do this, do not spolzovat in the design of a lot of animated objects. Such sites resemble sites with pornography, from which just about to get on your computer horrible viruses.
The only exception can be made for those who create a resource with information such as “My name is Kolya, this is my dog. Such people should immediately cut off their hands.
Working with text
First, never forget about the typography. Colors of text and background colors should be maximum contrast in brightness, the main text readable, and the navigation is noticeable. And do not forget that if the user does not have any font installed, it will be replaced by the browser in the “default” font. This is fraught with the fact that your site will lose a lot in appearance. So use common fonts in the design.
If, however, your customer is stubborn and insists on a corporate font, you can try to solve this problem in several ways:
- Kill the customer. But this brings no money, is a violation of the current penal code and has little to do with design.
- Rasterize the font and insert the text with a picture. However, this is not better than the first option. Firstly: the letters appear serif and read it will be difficult, and secondly: this text will not be indexed by search engines and to achieve high positions in extradition will be quite difficult, and thirdly: pictures are of a larger size and this site will be slow to load. Especially if the user goes online via modem.
- Upload the font on the user’s computer by means of CSS. This is practically impossible, as the user is unlikely to agree to the installation of unknown fonts, wasting time and traffic.
- Choose more common fonts, similar to the corporate one you need and install them in descending order from more similar to more popular. That is, make a job layout designer, in which he will prescribe these fonts. If your computer does not have the font you want, the browser looks at what it can be replaced, and chooses the first of the list, which is installed on your computer. Although there will be a problem if the customer’s computer does not have the right font.
- Use the service Cufon from jquery. This will allow with minimal sacrifice to load non-standard fonts on your site. It works only with Tru Type fonts (fonts in .ttf format).
- Redesign the brand letter of the customer’s company and change the corporate font to Arial.