如何设计网站？

How to design the site? In this article we will look at such aspects of website designing as: choosing an editor for preparing the site layout, defining sizes of the site, how to save sources, how to work with text and more. This article is mainly targeted for beginning web designers.

如何设计网站？ 在本文中，我们将研究网站设计的各个方面，例如：选择用于准备网站布局的编辑器，定义网站的大小，如何保存源代码，如何使用文本等等。 本文主要针对初学者。

哪个编辑器更好地进行网站设计？ (Which editor is better to do website design?)

You can design your future Internet website in any graphical editor in which you are accustomed to working. Personally for me, for example, it is more convenient to use the Adobe Illustrator, although most designers tend to use Photoshop for these purposes. This is partially due to the fact, that browsers do not display vector images. As a result, in the process of preparing the site layout, all graphic elements are translated in a raster. Most often it is jpg. However if you need a transparent or semi-transparent background – we can use use png or gif (rarely). But most designers use Photoshop, not only because it is one of the best editors for raster graphics, which html understands, and also because this program is sufficiently well known, and therefore, most wanting to become designers usually begin studying computer graphics from Adobe Photoshop. Here are two main reasons why Photoshop is considered the most convenient program to make website design. And, if you do not typeset your own website, it is necessary to use it because html web designers are used to get the source in psd. Although, again, you can make the design in any convenient graphical editor.

您可以在习惯使用的任何图形编辑器中设计将来的Internet网站。 例如，对我个人而言，使用Adobe Illustrator更为方便，尽管大多数设计师倾向于将Photoshop用于这些目的。 部分原因是浏览器不显示矢量图像。 结果，在准备站点布局的过程中，所有图形元素都被转换成栅格。 最常见的是jpg。 但是，如果您需要透明或半透明的背景–我们可以(很少)使用png或gif。 但是大多数设计人员都使用Photoshop，不仅因为它是html理解的最好的光栅图形编辑器之一，而且还因为该程序众所周知，因此，大多数想成为设计人员的人通常都开始从Adobe Photoshop学习计算机图形学。 。 这是为什么Photoshop被认为是进行网站设计最方便的程序的两个主要原因。 并且，如果您不排版自己的网站，则必须使用它，因为html网站设计人员习惯于在psd中获取源代码。 同样，尽管您可以在任何方便的图形编辑器中进行设计。

建立网站要使用什么尺寸？ (What size to use to make a website?)

First, if you are ordered to design the site, you need to forget about such a concept as dpi or metric system. Blocks sizes and inserted images on the site are specified in pixels or percentage (of the width / height) of the browser window (or a parent element).

首先，如果您被要求设计站点，则需要忘记诸如dpi或公制这样的概念。 站点上的块大小和插入的图像以浏览器窗口(或父元素)的像素或百分比(宽度/高度)指定。

If the sizes in our website are defined in percentage, this site is called adaptive (or fluid / responsive). Adaptive and responsive sites are rather convenient. But, if you do not fully understand what you are doing, you better use fixed sizes. If your customer insists on the adaptive or responsive design of the site, then before doing the design, please think very well, which blocks will be stretched by increasing the window, and what will not be stretched. You can design it in the following way – make a few files with several standard sizes (eg: 1280×1024, 1920×1280 and 1024×768), that will clearly show how the website will look depending on the screen resolution. Write in the annex to the template – maximum and minimum block sizes.

如果我们网站上的尺寸以百分比定义，则此网站称为自适应网站(或动态网站/响应网站)。 自适应和响应站点非常方便。 但是，如果您不完全了解自己在做什么，则最好使用固定大小。 如果您的客户坚持对站点进行自适应或响应式设计，那么在进行设计之前，请仔细考虑一下，哪些块将通过增加窗口来拉伸，而哪些不会被拉伸。 您可以通过以下方式进行设计-制作一些具有几种标准尺寸的文件(例如：1280×1024、1920×1280和1024×768)，这些文件可以清楚地显示网站的外观，具体取决于屏幕分辨率。 在模板的附件中写-最大和最小块大小。

那么，网站的固定价值是多少？ (So what’s a fixed value should be a website?)

When we do a mockup of a business card and leaflet, we know the final size of the card. But it is a bit more complicated in case of the design of the site. Because all monitors have different screen resolution, ie the number of pixels in width and height. And this must be considered in the design. Most monitors have a resolution of 1280 or 1920 pixels wide. As a rule, we always rely to this majority. But do not do text blocks wider 800 pixels. When we have the resolution of 800×600 pixels, and we lose in the appearance of the site – it is not so terrible. But when a string does not fit on our monitor, reading becomes extremely uncomfortable.

当我们制作名片和传单的模型时，我们知道名片的最终尺寸。 但是，在网站设计的情况下要复杂一些。 因为所有监视器的屏幕分辨率都不同，即宽度和高度的像素数。 在设计中必须考虑这一点。 大多数监视器的分辨率为1280或1920像素宽。 通常，我们始终依靠这一多数。 但是不要将文字块宽800像素。 当我们具有800×600像素的分辨率时，我们会迷失在网站的外观中–并不是那么糟糕。 但是，当字符串不适合我们的显示器时，阅读会变得非常不舒服。

It is best to make the site 1024 pixels in width and add to our layout some ‘free space’ to the size of 1280. Website in the layout can be aligned to the left, right, or center. With or without margins. Moreover, this ‘free space’ is not necessarily a white field. It may be any other color or consist of repeating graphic elements. As an option – seamless texture. You can also use a non-repeating background image to scale it to 100% width and disable scrolling, but firstly, sometimes it is not very convenient, and secondly – a site with such a background image will be very weighty and long time to load.

最好使网站的宽度为1024像素，并向我们的布局中添加一些“自由空间”以达到1280的大小。布局中的网站可以左，右或居中对齐。 有或没有边距。 而且，这种“自由空间”不一定是白场。 它可以是任何其他颜色或由重复的图形元素组成。 作为一种选择–无缝纹理。 您还可以使用非重复的背景图像将其缩放到100％的宽度并禁用滚动，但是首先，有时它不是很方便，其次-具有此类背景图像的网站将非常重且加载时间长。

如何保存来源？ (How do I save the source?)

It is better to save sources in psd (photoshop), where each graphic element is on its own layer. Moreover, it is desirable to name the layers so that they could be easily understood. For example: ‘general site background’, ‘text block background’ and so on. Layers can be grouped by meaning. For example, the text and the background on which the text is, can be grouped and nameed into a group ‘main text block’. Or you can group a block with links with background into a group called ‘links group XX.’ Briefly, try to make this psd as easy as possible, so your html-coder would not call you every five minutes with various questions.

最好将源保存在psd(photoshop)中，其中每个图形元素都位于其自己的图层上。 此外，希望对层进行命名，以便可以容易地理解它们。 例如：“一般站点背景”，“文本块背景”等等。 层可以按含义分组。 例如，可以将文本和文本所在的背景分组并命名为“主文本块”组。 或者，您可以将具有背景链接的块分组为“链接组XX”。 简而言之，请尝试使该psd尽可能容易，以便您的html编码器不会每隔五分钟就出现各种问题给您打电话。

那么如何制作一个漂亮的网站设计呢？ (So how to make a beautiful website design?)

The phrase ‘beautiful site’ can easily scare a competent webmaster. Site, first of all should be functional, secondly – the site should load quickly and be user-friendly. But ‘beauty’ is usually less important. Besides, everyone is different in taste and color. Thus hardly anyone will be able to teach you how to do a ‘beauty’. Creating a new design, it would be nice to think, first of all, about the functionality of the website. And have elements so that a visitor could easily find the information he needed. As it is necessary to take care that the user came to the site does not run away from it immediately, frightened or guided retching. To do this, you should not use many animated objects in the design. Such sites resemble pornography sites from which is about to climb the terrible viruses to your computer. In addition, they distract attention from the main part of the site – the text. Just do not use in the design of various ‘features’ like a nice little doggies or kitties. The Internet has a lot of this junk. Try to come up with something interesting.

“美丽的网站”一词很容易吓到合格的网站管理员。 首先，站点应该可以正常运行，其次-站点应该可以快速加载并且易于使用。 但是“美容”通常不太重要。 此外，每个人的口味和颜色都不同。 因此，几乎没有人能够教您如何进行“美容”。 创建一个新的设计，首先考虑一下网站的功能将是很不错的。 并具有使访问者可以轻松找到所需信息的元素。 由于有必要注意，用户来到该站点时不会立即逃离，受到惊吓或引导退潮。 为此，您不应在设计中使用许多动画对象。 这些网站类似于色情网站，这些网站即将将可怕的病毒爬到您的计算机上。 此外，它们分散了站点主要部分(文本)的注意力。 只是不要在设计中使用各种“功能”，例如漂亮的小狗或小猫。 互联网上有很多垃圾邮件。 尝试提出一些有趣的东西。

Exceptions can be made only for those who create such a resource with information ‘My name is Nick, this is my dog. “Such people should immediately cut off his hands :-)

只有使用信息创建此类资源的人才能例外：“我叫尼克，这是我的狗。 “这些人应该立即切断他的手：-)

处理文字 (Working with text)

First, never forget about typography. Text and background colors should be contrast and bright, main text should be readable and navigation noticeable. Do not forget that if a user does not set a specific font, it will be replaced (by the browser) to the ‘default’ browser font. This creates the risk that your site will lose a lot in appearance. So use common fonts in design.

首先，永远不要忘记排版。 文字和背景色应为对比色和明亮色，主要文字应易于阅读且导航应醒目。 不要忘记，如果用户未设置特定字体，它将(由浏览器)替换为“默认”浏览器字体。 这带来了您的网站外观损失很多的风险。 因此，请在设计中使用常见字体。

But if your customer is stubborned and insists on the corporate font, this problem can be solved in several ways:

但是，如果您的客户固执并坚持使用公司字体，则可以通过以下几种方法解决此问题：

• ‘Kill’ the customer. But it does not make money, this also is a violation of a criminal code and has little to do with design.
  “杀死”顾客。 但这并不赚钱，这也违反了刑法，与设计无关。
• Rasterize the font and paste the text as image. However, it is not better than the first variant. First of all: the letters will get serifs and it will be difficult to read; secondly, this text will not be indexed by search engines and achieve high positions in issuance of search engines; third: pictures are greater in size and this site will be long enough to load. Especially, if a user connects to the Internet via a modem.
  光栅化字体并将文本粘贴为图像。 但是，它并不比第一个变体好。 首先：字母会变成衬线，很难阅读； 其次，该文本将不会被搜索引擎收录，并在发布搜索引擎中占据较高的位置； 第三：图片更大，该站点将足够长以加载。 特别是如果用户通过调制解调器连接到Internet。
• Load the font on the user’s computer using CSS. But it can be almost impossible, because the user will hardly give consent to install unknown fonts to him, losing this traffic and time
  使用CSS将字体加载到用户的计算机上。 但这几乎是不可能的，因为用户几乎不会同意向他安装未知字体，从而浪费了流量和时间
• Choose more common fonts that are similar for the necessary corporate font and prescribe them descending from the more similar to the more popular. That is to make the job a typesetter (coder), in which he will prescribe these fonts. It will act as if the computer does not have the desired font, the browser looks at what it can be replaced, and selects the first from the list, which is installed on the computer. Although there is a problem if the customer’s computer does not have the desired font.
  选择与必要的公司字体相似的更多常见字体，并为它们指定从相似程度更高的字体开始流行。 那就是使这项工作成为排字员(编码员)，他将在其中指定这些字体。 它将表现为计算机没有所需的字体，浏览器将查看可以替换的字体，然后从列表中选择第一个，该字体已安装在计算机上。 虽然如果客户的计算机没有所需的字体会出现问题。
• You may consider to use Cufon service by jQuery. This will allow to load custom fonts to your website with minimal casualties. It only works with True Type fonts (in ttf format)
  您可能考虑使用jQuery的Cufon服务。 这将允许以最少的人员伤亡将自定义字体加载到您的网站。 它仅适用于True Type字体(ttf格式)
• Remake the brand book of the customer and change the font on corporate Arial.
  重制客户的品牌书，并更改Arial公司上的字体。

翻译自: https://www.script-tutorials.com/how-to-design-the-site/