Правила верстки сайта: Правила верстки сайта: что нужно знать, с чего начать, список советов

Правила верстки сайта: что нужно знать, с чего начать, список советов

Итак, вы дошли до интересной задачи — при помощи кода создать визуальную часть своего будущего сайта. Сам процесс называется версткой. Для того, чтобы у вас получился достойный проект, нужно соблюдать определенные правила верстки для сайта.

Ваша цель при верстке — это создать такой продукт, чтобы он одинаково хорошо смотрелся на разных устройствах пользователей. Что нужно знать для такой верстки — мы опишем в нашей статье.

Процесс верстки сайта

Среди зрелых программистов часто бытует мнение, что процесс верстки сайта — это сущий пустяк. Возможно, это так, если сравнивать с разработкой сложного программного обеспечения на основе нейронной сети. Но это никак не снимает ответственности с верстальщика за соответствие его проекта определенным современным критериям. А именно:

• скорость загрузки сайта должна быть максимально высокой;

• сайт должен быть сверстан по последним стандартам HTML;

• сайт должен корректно отображаться в разных браузерах;

• сайт должен корректно выводиться на разных экранах;

• проект должен соответствовать СЕО-требованиям поисковых систем

• и др.

Плюс ко всему должен быть соблюден процесс корректной валидности. То есть в конце работы сайт должен быть «пропущен» через валидатор, который проверяет на наличие ошибок в коде. И, естественно, ошибок быть не должно.

Основные правила верстки сайта

Итак, для того, чтобы проект получился жизнеспособным и успешным, нужно соблюдать следующие основные правила верстки сайта:

1. Кроссбраузерность. Сайт обязательно должен быть сверстан таким образом, чтобы одинаково хорошо смотреться во всех популярных браузерах.

2. Успешная валидность. В конце ресурс должен успешно пройти валидацию. И желательно, чтобы это сделали все страницы сайта.

3. Соответствие дизайна. Если сайт верстается по определенному макету дизайнера, то он должен быть выполнен со 100%-м сходством и соблюдением шрифтов, цвета, отступов и т. д. 

4. Несколько документов. Если проект занимает больше одной страницы, то CSS стили и JavaScript скрипты должны быть вынесены в отдельные документы.

5. Величины. В таблице CSS нужно использовать одинаковые измерения величин. Если это «px», то «рх» везде, если «еm», то «em» везде и т. д.

6. Корректность. Сайт должен быть сверстан таким образом, чтобы после вас в коде мог разобраться другой разработчик.

7. Комментарии. Если проводите какие-то эксперименты с кодом или просто на странице большое разнообразие элементов, не забывайте комментировать их и для себя, и для других.

8. Имена. Имя идентификатора и имя класса должны быть написаны интуитивно понятным языком с использованием только латинских букв.

9. Нормы. Нужно соблюдать нормы современного HTML и негласные нормы программистов в написании кода.

10. Оформление. Должно быть однообразное оформление кода с соблюдением необходимых отступов, табуляций, пробелов, комментариев. Не только сама страница должна быть красивой, но и написанный код должен быть красивым и легко читаться.

11. Минимизация. Нужно стремиться к тому, чтобы код был минимальным. Не нужно создавать лишних блоков и лишних строк кода, если все можно писать короче. Это касается и таблиц стилей.

Любая верстка должна быть адаптивной или отзывчивой, чтобы смотреться на разных экранах красиво. Поэтому в той или иной реализации можно экспериментировать не только со свойствами блоков, но и с самим макетом. То есть может получиться так, что версии сайта — десктопная от мобильной — будут отличаться не только способом размещения и размерами элементов, но и вообще их наличием на экране. Это могут быть два совершенно разных сайта на первый взгляд. 

При изучении того же HTML и CSS часто говорят о красоте, легкости и минимализме в написании кода. Не ленитесь использовать эти советы и правила верстки сайтов, чтобы получить достойный проект. Изначально может показаться, что это только отнимает лишнее время, но это не так. Поймете это только со временем. Поэтому учите себя сразу писать корректно, правильно и красиво.

 

Схожие статьи

Другое

Как пользоваться текстовым редактором VIM: команды, настройки

Другое

Grid CSS: определение, руководство со шпаргалками и примеры

Другое

Приложения для экономии трафика на компьютере, как с ними работать

Другое

Программист — это технарь или гуманитарий: как переквалифицироваться

Правила написания хорошего кода

Правила написания HTML

На данный момент большинство браузеров отображают сайты, самостоятельно расшифровывая и подправляя ошибки веб-мастеров. Однако нужно быть внимательным при написании HTML – необходимо следовать правилам валидности, т.к. правильная верстка важна для оптимизации сайта, а также поможет не сойти с ума пользователям, которые откроют ваш сайт в браузерах ранних версий.

Используйте <!DOCTYPE html>

Элемент <!DOCTYPE> располагается на первой строке любой HTML-страницы. Он определяет версию языка разметки, который используется на странице. На данный момент рекомендуется использовать doctype вида <!DOCTYPE html> – он является универсальным для любой версии языка.

Используйте правильную структуру документа

Теги <html>, <head>, <body> всегда должны присутствовать в коде, это делает страницу совместимой со стандартами и гарантирует, что она будет корректно отображаться.

Неправильно

<html>
 <head>
  <title>Hello world!</title>
 </head>
 <p>hello world!</p>
</html>

Правильно

<html>
 <head>
  <title>Hello world!</title>
 </head>
 <body>
  <p>hello world!</p>
 </body>
</html>

Определяйте техническую информацию страницы правильно

Мета-теги и стили следует указывать в <head>, а не где-то в теле страницы. Скрипты предпочтительно подключать внизу страницы перед закрывающимся тегом </body>. Преимущество данного подхода в том, что до момента отображения контента страницы браузер загружает только стили, а скрипты он загрузит в последнюю очередь, что позволяет пользователю быстрее увидеть содержимое страницы.

Неправильно

<html>
 <head>
  <title>Hello world!</title>
 </head>
 <body>
  <link rel=»stylesheet» href=»/css/style.css»>
 </body>
</html>

Правильно

<html>
 <head>
  <title>Hello world!</title>
  <link rel=»stylesheet» href=»/css/style.css»>
 </head>
 <body>
 </body>
</html>

Следуйте стандартам разметки

1. Соблюдайте правильную структуру вложенности тегов: указывайте строчные элементы внутри блочных, а не наоборот.

   
   Неправильно

   <strong><p>Hello world!</p></strong>

   
   Правильно

   <p>Hello <strong>world!</strong></p>

2. Корректно закрывайте вложенные элементы.

   
   Неправильно

   <p>Hello <strong>world!</p></strong>

   
   Правильно

   <p><strong>Hello world!</strong></p>

3. Грамотно используйте классы и идентификаторы. Идентификатор элемента должен быть уникальным, в отличие от класса.

   
   Неправильно

   <p>Hello world!</p>
   <p>Привет мир!</p>
   <p>Hello мир!</p>

   
   Правильно

   <p>Hello world!</p>
   <p>Привет мир!</p>
   <p>Hello мир!</p>

4. Не используйте нестандартные теги, которых нет в HTML5.

   
   Неправильно

   <block>
   

    <p>Hello world!</p>
   </block>

   
   Правильно

   <div>
    <p>Hello world!</p>
   </div>

Используйте элементы в соответствии с их семантикой

1. Используйте новые html5 элементы, такие как: header, nav, sidebar, main, article, section, footer, полный список можно посмотреть тут. Они доступно описывают свое предназначение как для браузера и поисковых роботов, так и для веб-разработчика.

   
   Плохой код

   <html>
    <head>
     <title>Страница</title>
    </head>
    <body>
    <div>
     <div></div>
    </div>
    <div></div>
    <div></div>
    </body>
   </html>

   
   Хороший код

   <html>
    <head>
   

     <title>Страница</title>
    </head>
    <body>
     <header>
      <nav></nav>
     </header>
     <main></main>
     <footer></footer>
    </body>
   </html>

2. Всему свое место. Если элемент логически является списком, то верстать его следует тегами списка (<ul>, <ol>), если он является обычным текстом, используйте тег <p>. Также ключевые слова по тексту полезно выделять тегами <strong>, <b> (жирный текст), <em>, <i> (курсив). Но опять же, стоит помнить об удобстве пользователя. Если абзац будет на 50% заполнен словами, выделенными жирным шрифтом, то текст будет пестрить, а взгляд не сфокусируется.

   
   Плохой код

   <div>
    <div>Пункт 1</div>
    <div>Пункт 2</div>
   

    <div>Пункт 3</div>
   </div>

   
   Хороший код

   <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
   </ul>

3. Теги заголовков (h2-h6) очень важны для оптимизации сайта. Естественно, стоит использовать в них ключевые слова, но не забывайте о чувстве меры. В первую очередь стоит думать о том, что ваш сайт создан для пользователя, и информация, опубликованная на нем, должна быть читабельной и структурированной. Также нужно помнить о количестве заголовков разного уровня. Заголовок <h2> должен быть один на странице. <h3> может встретиться 2-3 раза. <h4> и остальные можно использовать 3 и более раз.

Проверяйте html-код на валидность

Это позволяет понять, нужны ли исправления верстки, т.к. чистота и грамотная структура кода являются важными составляющими внутренней оптимизации сайта. Проверить можно тут – https://validator.w3.org/

Используйте альтернативный текст для изображений

Изображения должны всегда включать атрибут alt. Браузер полагается на данный атрибут, чтобы обеспечить контекст для изображения. Атрибут alt должен содержать текст, который будет отображаться в том случае, если картинка не загрузилась.

Неправильно

<img src=»/img/samsung-rb-33J3400ww.jpg»>

Правильно

<img src=»/img/samsung-rb-33J3400ww.jpg» alt=»Холодильник Samsung RB-33J3400WW»>

Не используйте стили в HTML разметке

Это создает страницы, которые загружаются слишком долго и трудно поддерживаются. Прописывайте все стили в отдельном CSS-документе. Старайтесь использовать тег и атрибут style по минимуму.

Пишите комментарии

Комментируйте код, но не переусердствуйте. Комментарии, которые написаны кратко и понятно, могут послужить отличной помощью для других разработчиков, а также важным напоминанием для вас по истечении некоторого времени.

Пример:

<html>
 <head>
  <title>Страница</title>
 </head>
 <body>

<!—Шапка—>
 <header>
  <nav></nav>
 </header>
<!—Шапка конец—>

<!—Контент—>
 <main></main>
<!—Контент конец—>

<!—Подвал—>
 <footer></footer>
<!—Подвал конец—>
 </body>
</html>

Используйте подходящие имена классов

Задавайте имена css-классам в соответствии с содержанием блока, например: шапка – header, подвал – footer, меню – menu, контент – content. Благодаря этому код будет намного понятнее и его легче будет поддерживать.

Плохой код

<ul>
 <li>Пункт меню 1</li>
 <li>Пункт меню 2</li>
 <li>Пункт меню 3</li>
</ul>

Хороший код

<ul>
 <li>Пункт меню 1</li>
 <li>Пункт меню 2</li>
 <li>Пункт меню 3</li>
</ul>

Правила написания CSS

В css также есть правила, следуя которым, можно сохранить код простым, легко читаемым и хорошо организованным.

Сбрасывайте стили браузера по умолчанию

Они могут мешать стилям, которые мы хотим применить на самом деле. Скачать файл для сброса стандартных стилей браузера можно тут – reset.css.

Используйте сокращённые свойства и значения

Плохой код

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;

Хороший код

padding: 5px 10px 15px 20px;

Указывайте селекторы и правила с новой строки

Такой код легко читать и редактировать. Также не стоит забывать о пробеле перед значением свойства.

Плохой код

.element {display:block;position: relative;padding:5px 10px 15px 20px;}

Хороший код

.element {
 display: block;
 position: relative;
 padding: 5px 10px 15px 20px;
}

Указывайте нулевые значения без единиц измерения

Плохой код

padding: 10px 0px;
margin-left: 0%;

Хороший код

padding: 10px 0;
margin-left: 0;

Пишите комментарии

Разделяйте основные блоки комментариями, это улучшит читаемость кода.

Пример:

/*HEADER*/
header {
}
/*HEADER END*/

/*MAIN*/
main {
}
/*MAIN END*/

/*FOOTER*/
footer {
}
/*FOOTER END*/

Проверяйте css-код на валидность

Проверка css на валидность – соответствие стандартам, ничем не отличается от проверки html. Валидация css ничем не отличается от валидации html. Проверить можно здесь – https://jigsaw.w3.org/css-validator/

Заключение

Данные рекомендации и правила – лишь основы, поскольку языки HTML и CSS развиваются все быстрее, разрабатываются новые методы написания правильного кода. Следуя нашим рекомендациям, вы будете уверены, что ваш код является простым, легко читаемым и оптимизированным. А также получите +100 к карме и благодарности от разработчиков, которым предстоит работать над сайтом после вас.

Руководство по макетированию веб-дизайна: 9 самых важных правил, которые должен знать каждый дизайнер!

Руководство по компоновке веб-дизайна — это первое и главное правило, которое должен освоить каждый дизайнер. Многие люди думают, что веб-дизайн просто должен хорошо выглядеть, а все остальное ложится на команду разработчиков. Но это не так. Чтобы веб-сайт был эффективным и полезным для пользователей, недостаточно красивого макета.

Каждый веб-сайт должен быть создан с учетом удобства использования и опыта пользователя, а не только художественного вида. В конце концов, если ваша веб-страница неудобна в использовании и привлекает пользователей, то она недостаточно хороша. А теперь давайте сэкономим вам гораздо больше времени и усилий, перебирая тысячи слов о практике дизайна веб-сайтов. Это все, что вы должны знать о принципах компоновки веб-дизайна. Давайте погрузимся прямо в это!

• Что такое руководство по макету веб-дизайна?

Дизайн веб-сайтов может быть очень сложным предметом для изучения. Но как только вы поймете и будете следовать всем его основам, остальное станет вашим пространством для творчества. Если вам интересно, что такое макет веб-дизайна, то вы попали в нужное место.

В общем, макет веб-сайта представляет собой основу структуры сайта. Думайте об этом как о позвоночнике вашего тела. Без четкого макета веб-дизайнеры не смогут ориентироваться в том, что они должны делать в течение всего проекта. Имейте в виду, что при брифинге и обработке веб-макета вы должны думать как о потребностях клиента, так и о конечном опыте пользователя. Что будет самой важной частью вашего сайта, как вы будете привлекать внимание пользователей и какой элемент следует поставить. Эти вопросы — все, что вы должны задать, когда дело доходит до макета веб-дизайна.

Рекомендации по компоновке веб-дизайна — это правила, которые определяют, что вы должны делать с вашим веб-сайтом. Эти ключевые моменты редко меняются, хотя веб-дизайн — инновационный предмет. В этой статье мы упомянули 9 основных руководств, каждое из которых посвящено разным аспектам веб-дизайна. Эти правила помогут вам сориентироваться во всех проблемах, с которыми вы можете столкнуться, и как их решить, чтобы сделать сайт эффективным.

• 9 Самое важное руководство по компоновке веб-дизайна, которому вы должны следовать

После того, как вы досконально изучили руководство по макету веб-дизайна, пришло время конкретизировать. Ниже приведены 9 правил, которые каждый дизайнер должен знать о рекомендациях по дизайну веб-сайтов. Без лишних слов, давайте познакомимся со всеми!

1. Простота

Что касается дизайна веб-сайта, мы просто не можем недооценивать силу великолепно выглядящего веб-сайта. Однако не все приходят к вам просто посмотреть. И если внешний вид не соответствует доступности информации, посетители все равно уйдут. Ведь пользователи заходят на сайт не только для того, чтобы полюбоваться его визуальной привлекательностью. У них есть какое-то отношение к вашему сайту, и лучший дизайн покажет им, как это сделать с легкостью. Не перегружайте своих посетителей сложной графикой или элементами.

Вместо этого попробуйте отказаться от более простого, но более эффективного макета. Простота почти никогда не выходит из моды, поэтому вы можете быть уверены, что ваш сайт будет выглядеть стильно спустя годы. Простота — ваш лучший друг, но не держите ее вялой. На самом деле, вы все еще можете добиться отличного дизайна с помощью простых правил: 

• Не используйте более пяти цветов на своей веб-странице. На самом деле, смеси из 3 (плюс 1 или 2) более чем достаточно.
• Не используйте слишком много шрифтов. Как и в случае с цветами, чем их больше, тем сложнее становится все. Сделайте свой дизайн гладким и минималистичным, используя максимум 3 шрифта. Вместо этого попробуйте использовать разные размеры для создания контраста или выделения.
• Графика: Мы настоятельно рекомендуем использовать настоящие высококачественные изображения вместо стоковых фотографий. Но держите его чистым, чистым и сосредоточьтесь на том, что вы пытаетесь сказать своим посетителям. Только не добавляйте графику, потому что это выглядит круто.

2. Визуальная иерархия

Далее, сразу после простоты идет визуальная иерархия. Это правило было нашим лучшим руководством с самого первого дня и до сих пор находит отклик. Визуальная иерархия — это то, как вы организуете элементы на макете вашего веб-сайта, чтобы привлечь визуальное внимание. Ваша цель здесь — побудить пользователей выполнить некоторые действия наиболее естественным способом.

Чтобы достичь этого, вам нужно узнать о поведении пользователей и о том, что побуждает их к действию. Основываясь на этом, теперь вы можете определить, что показывать им первым, вторым или даже последним. Разные способы расположения элементов приведут к разным результатам, и вы, как дизайнер, можете это контролировать на 100%. Визуальная иерархия создается за счет размера, размещения и контраста цветов. Обычно мы рекомендуем всегда пытаться выделить слоган бренда, кнопку призыва к действию, чтобы достичь цели конверсии.

3. Навигация

Возможность навигации всегда важна для посетителей. Вы не только поможете им получить то, что они хотят, но и избавите их от суетливых мыслей. Навигация всегда должна быть максимально легкой и простой. Помимо планирования карты сайта для оптимизации навигации, вы также можете попробовать следующее: 

• Сделайте панель навигации и навигацию в нижнем колонтитуле простой и понятной.
• Оставляйте следы, чтобы пользователи знали, где они находятся, пока копаются на вашем сайте. Дайте им знать, что они могут легко проследить путь назад.
• Всегда включайте панель поиска для более быстрого действия. Пользователи могут ввести желаемое ключевое слово и получить то, что они хотят.
• Не заставляйте пользователей копаться от слоя к слою вашего сайта. Сделайте это простым и очевидным.

И последнее, но не менее важное: не забывайте следить за своей навигацией. Это означает, что когда вы используете одну форму навигации на своей первой странице, все остальные должны следовать за ней.

4. Последовательность

Постоянство — ключевой принцип, о котором люди часто забывают. Дизайнерам слишком легко потеряться в собственном творчестве и забыть о важности фирменного стиля.

Кроме того, чтобы придать вашему веб-сайту единый внешний вид, необходимо соблюдать некоторые правила. Например, каждая страница должна соответствовать одной и той же цветовой схеме, выбору шрифта и размещению некоторых конкретных элементов. Поэтому не забывайте о тоне и настроении вашего бренда. Сохраняйте креативность во всем, что касается фирменного стиля, и вы создадите гораздо лучший макет веб-сайта, который будет соответствовать единообразию бренда.

Но это не значит, что все страницы должны быть одинаковыми. Пока вы следуете своему руководству по макету веб-дизайна, поворот здесь и там будет в порядке. На самом деле, если на вашей странице более 5-6 страниц, хорошей идеей может быть создание отдельного макета для каждой из них.

Имейте в виду, что все, что вы размещаете на своем сайте, влияет на удобство использования и взаимодействие с пользователем. Вот почему, помимо простоты, дизайнеры должны сохранять постоянство макета и строго следовать рекомендациям бренда.

5. Оперативность

Уже 2021 год, большую часть времени вы проводите на своем мобильном устройстве, как и ваши пользователи. Большая часть трафика на веб-сайтах сейчас приходится на мобильные устройства, такие как смартфоны или планшеты. И если веб-сайт несовместим с экраном их пользователей, они упускают этот трафик.

Таким образом, для обеспечения максимальной эффективности веб-сайта чрезвычайно важно быстрое реагирование. Если вы еще не уловили тренд прямо сейчас, пусть эта статья станет вашим путеводителем. Адаптивный дизайн позволит вам иметь невероятно гибкий дизайн сайта. Только представьте, как это просто: с адаптивным дизайном каждый элемент можно растянуть, изменить размер, чтобы он соответствовал размеру устройства пользователя. Звучит волшебно, правда? Тем не менее, это дополнительный шаг с HTML, чтобы обеспечить плавный и беспроблемный опыт для ваших пользователей.

Еще одна вещь, которую мы должны упомянуть прямо здесь, касаясь отзывчивости, — это возможность совместимости с различными веб-браузерами. Одними из наиболее часто используемых браузеров являются Chrome, Safari и Firefox. И ваше устройство должно хорошо работать и хорошо выглядеть во всех этих браузерах.

6. Доступность

Мы поймем, если вы сказали, что не слышали о доступности веб-сайтов. Не волнуйтесь, многие другие тоже не знают. Однако, чтобы полностью удовлетворить всех пользователей, вам придется сделать еще один шаг вперед и сделать свой сайт удобным для людей с ограниченными возможностями. Эти люди имеют полное право прокручивать любой сайт и при этом работать с ним плавно. Однако вам не придется разбираться в этом самостоятельно. Инициатива по доступности Интернета и Консорциум Всемирной паутины уже установили правила доступности. Но чтобы дать вам представление обо всех них, мы составили краткий список здесь: 

• Посетители должны знать о содержании и визуальных элементах вашего сайта.
• Ваш веб-сайт должен функционировать по-разному, как визуально, так и с помощью альтернативного текста.
• Ваш контент на странице должен быть простым и понятным.
• Ваш веб-сайт должен быть доступен для использования на различных устройствах, в различных браузерах и с использованием различных технологий 

Если вы хотите углубиться в эту тему, скоро в нашем блоге появится статья о доступности веб-сайтов.

7. Традиционность

Это одна из самых сложных основ в руководстве по компоновке веб-дизайна. Иногда вам придется обменивать уникальность на ожидания пользователей. Звучит сложно, не волнуйтесь, давайте разберем это для вас.

Поскольку мы все в той или иной степени являемся экспертами в использовании Интернета, существует определенное соглашение, с которым мы слишком хорошо знакомы. Например, кнопка навигации всегда находится вверху каждой веб-страницы, или логотип должен быть размещен в левом верхнем углу. Вы хотите больше, у нас есть намного больше примеров. Кликабельный логотип, возвращающий вас на главную страницу, иконка корзины покупок для сайта электронной коммерции. Слайд-шоу изображений или кнопки, которые меняют цвет при нажатии.

Все это мы называем соглашениями веб-сайтов. Итак, вопрос в том, должны ли вы жертвовать уникальностью своего дизайна ради условности? В данном случае наш ответ — нет. Эта условность была хорошо знакома тысячам пользователей всех возрастов. Если вы измените что-либо из этого, вы определенно испортите привычки людей, и это не будет хорошо. Так что в этом случае условность — ваш ключ к уму пользователей. Оправдайте их надежды на такой здравый смысл, и они перестанут задаваться вопросом, прокручивая ваш сайт.

8. Доверие

Прежде чем перейти к тому, как вы можете и должны завоевать доверие на веб-сайте, мы должны потратить минуту, чтобы быть благодарными за условность. Это руководство окажет нам немного доверия со стороны пользователей. Другими словами, люди доверяют тому, что им знакомо, поэтому условность веб-сайта на самом деле очень поможет.

Далее, просто четко и громко расскажите о том, что вы делаете, какой продукт или услуги вы пытаетесь им показать. Ни в коем случае не заставляйте своих посетителей интересоваться вами и не заставляйте их углубляться от страницы к странице, чтобы что-то понять. Поместите то, что вы продаете, на первую страницу, чтобы люди узнали об этом с первого взгляда.

Отзывы или отзывы пользователей также являются полезным способом повысить доверие к вам. И последнее, но не менее важное: не забудьте указать свои контактные данные. Позвольте посетителям свободно обращаться к вам, и вы получите от них больше доверия.

9. Ориентированность на пользователя

Что бы вы ни делали, все должно служить вашим пользователям. Каждое путешествие, через которое вы их ведете, должно заставлять их чувствовать себя естественно и радостно. Каждая деталь вашего дизайна сделана так, чтобы удовлетворить их потребности. Если вы не ориентируетесь на пользователя, вы делаете это совершенно неправильно.

Помимо сосредоточения внимания на всех принципах, правилах и целях бренда, вам также придется разрабатывать дизайн для своих пользователей. Не стесняйтесь продолжать тестирование, собирая идеи и отзывы от вашей аудитории и внося соответствующие коррективы.

Мы надеемся, что это руководство по компоновке веб-дизайна будет полезно для всех начинающих дизайнеров, а также для тех, кто интересуется дизайном веб-сайтов. Эти принципы должны поддерживать нас в отрасли в течение многих лет, и всегда приятно иметь возможность поделиться ими с вами. Теперь пришло время применить все эти знания на практике.

5 основных правил макета и дизайна веб-страниц

В древней истории веб-дизайна было время (около пяти лет назад), когда лишь немногие избранные — называемые веб-мастерами — могли создавать веб-сайты.

Это уже не так. Теперь нетехническим людям, таким как вы и я, легко создавать веб-сайты, которые являются гораздо лучшими маркетинговыми инструментами, чем самые технически подкованные веб-мастера. Как это возможно?

Десять с лишним лет интернет-маркетинга доказали, что успешные маркетинговые веб-сайты не переполнены Flash-анимацией, RSS-потоками или другими причудливыми дополнениями.

Самые успешные маркетинговые веб-сайты, в том числе те, которые вы можете спроектировать и создать для себя и для клиентов, очень просты. Эти веб-сайты следуют тем же принципам дизайна, которые вы изучаете в Программе успеха графического дизайна. И в качестве дополнительного бонуса их легко и недорого создавать.

(Мы обсудим лучшие инструменты для создания веб-сайтов в будущем выпуске

Inside Freelance Design .)

Хотя разработка эффективного маркетингового веб-сайта не требует большого количества специальных знаний, существуют основные принципы, которые увеличивают эффективность и доходность сайта.

Вот пять основных правил эффективного веб-дизайна, применимых к любому веб-сайту.

1. Сайт должен легко читаться.

   Это самое важное правило веб-дизайна. Тщательно выбирайте цвет текста и фона.

   Вы не хотите использовать фон, который скрывает текст или цвета, которые трудно прочитать. Темный текст на светлом фоне — лучший выбор для удобства чтения.

   Не устанавливайте размер текста слишком маленьким (его трудно читать) или слишком большим (будет кричать на посетителей вашего сайта). ВСЕ НАПИСАННЫЕ ЗАГЛАВНЫМИ БУКВАМИ тексты также создают впечатление крика.

   Сохраняйте выравнивание основного текста по левому краю, а не по центру. Выровненный по центру текст лучше всего использовать в заголовках.

2. Управляйте своими шрифтами.

   Применение различных шрифтов и гарнитур в дизайне веб-сайта не так просто, как в полиграфическом дизайне. Допустим, вы используете шрифт Myriad. Чтобы ваши веб-страницы отображались в Myriad для посетителей сайта, они должны установить его на своих компьютерах. Если они этого не сделают, сайт будет выглядеть совершенно иначе, чем задумано.

   Используйте наиболее распространенные шрифты, уже установленные на компьютерах: шрифты с засечками Times и Times New Roman и шрифты без засечек Arial, Helvetica и Verdana.

   Одно важное отличие шрифтов, используемых в Интернете: шрифты без засечек часто используются для основного текста, поскольку их легче читать на экране компьютера.

3. Сайт должен быть удобным для навигации.

   Все гиперссылки должны быть четкими и легко узнаваемыми. Графические изображения, используемые в качестве гиперссылок, такие как кнопки или вкладки, должны быть четко обозначены и легко читаемы.

   Тщательно выбирайте цвета, фон и специальные эффекты. Гораздо важнее, чтобы навигационные кнопки и вкладки были легко читаемыми и понятными, чем «яркие» эффекты.

   Цвета ссылок в тексте должны быть знакомы. (Синий текст обычно указывает на непосещенную ссылку, а фиолетовый или темно-бордовый текст обычно указывает на посещенную ссылку.) Текстовые ссылки не должны выглядеть так же, как другой текст. Вы не хотите, чтобы люди нажимали на заголовки, потому что они думали, что заголовки являются ссылками.

   Эмпирическое правило: Посетители сайта должны иметь возможность найти то, что они ищут, за три клика.

4. Дизайн веб-страницы должен быть единым на всем сайте.

   Как и при оформлении печатной продукции, все графические элементы, шрифты, заголовки и нижние колонтитулы должны оставаться одинаковыми на всем сайте.

   Например, если вы используете определенный синий цвет для подзаголовков, вы должны последовательно использовать этот же синий цвет на всем сайте. Гарнитуры, выравнивание основного текста и заголовков, фоновые эффекты и спецэффекты на графике должны остаться прежними.

5. Сайт должен загружаться быстро.

   Ваши посетители быстро потеряют интерес к вашему веб-сайту, если большая часть страницы не загрузится в течение 10 секунд, и большинство из них, вероятно, потеряют интерес гораздо раньше.

   Легко предположить, что у ваших посетителей есть высокоскоростной Интернет. Но в США все еще есть много мест, где высокоскоростная связь еще не предлагается. Таким образом, любая крутая штуковина, такая как Flash-анимация, значительно замедлит загрузку страницы.

   Убедитесь, что ваши изображения оптимизированы для использования в Интернете. Существует лишь ограниченный диапазон безопасных для Интернета цветов. Изображения должны быть в формате GIF или JPG.