1. Работаем
над
созданием
сайта

2. Планирование web-сайта
 Перед принятием решения о создании
Web-сайта, необходимо иметь план
того, что должен реализовать Web-сайт.
 В план должны входить:
– план бюджета,
– описание предполагаемой аудитории,
– поставленные цели и задачи,
– ресурсы для выполнения поставленных задач.

3. Первые шаги
Для реализации плана необходимо сделать
следующие шаги:
 Шаг 1: Продумать имя web-сайта
(возможно именем web-сайта будет девиз)

4. Первые шаги
 Шаг 2: Разработать логотип и брендинг -
стиль web-сайта (бизнеса) при первом
знакомстве лучшим способом отражается
именно в графике.

5. Первые шаги
 Шаг 3: Имя домена Web-сайта (символьное
имя, служащее для идентификации страницы)
– Необходимо заранее узнать свободно ли то имя
которое вы собираетесь дать Вашему web-сайту.
– На сколько хорошо оно будет согласовываться с
именем представляемой компании или контента
сайта
– На сколько просто оно будет в написании и
запоминании для пользователя

6. Первые шаги
 Шаг 4: Исследование конкурентов
– Это помогает узнать, что содержат Web-сайты
конкурентов в терминах графики и контента, чтобы
создаваемый сайт вышел на рынок на равных или
лучших условиях при сравнении с основными
конкурентами компании.

7. Первые шаги
 Шаг 5: Информационная архитектура
– Требуется ли на сайте корзина для покупок или
блог?
– Какие планы расширения предполагает владелец
сайта?
– Какова структура взаимных связей страниц?
– Эти вопросы имеют важное значение, так как
необходимо будет встроить их в дизайн сайта и его
средства навигации. Нужно знать, как сайт будет
расширяться в будущем - это также будет
определять, как создается сайт.

8. Первые шаги
 Шаг 6: Контент сайта
– Контент может помочь определить внешний вид и
функции сайта; поэтому, если контент не был
разработан, то может иметь смысл отложить
разработку дизайна.
– Проверьте, что контент соответствует поставленной
задаче, и планируется обновлять его на
постоянной основе, так как именно контент сайта
заставляет посетителей возвращаться на сайт.

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

10. Компоновка страниц
Для компоновки страницы выберем например
компоновку блога, которая предполагает наиболее частые
изменения в информативной части страницы, легкий
доступ к средствам навигации между верхним
колонтитулом и этой последней информацией, и доступ к
предыдущей информации "ниже сгиба" на домашней
странице.
Термин "ниже сгиба" происходит из газетного
производства. Когда газета находится на прилавке, то
читатель может видеть только ту часть, которая находится
"над сгибом" газеты (т.е. физического сгиба газеты). Эта
часть — включая изображения — является очень
важной, так как нужно соблазнить читателя купить газету.

11. Компоновка страниц
Такая же теория "над сгибом" применима
к дизайну Web-страницы. Все, что выводится на
мониторе, когда посетитель заходит на страницу
сайта находится "над сгибом".
Любой материал, который зритель должен
прокрутить вниз, чтобы увидеть, находится
"ниже сгиба". Поэтому задача состоит в
том, чтобы сохранить внимание посетителя Web-
сайта с первых изображений и
материала, который они видят на
мониторе, независимо от разрешения.

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

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

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

15. Последняя информация
 Самая последняя запись блога заслуживает
выделения, а возможность сделать эту запись
главным центром страницы "над сгибом"
будет выгодна клиенту и его читателям.
 Как только зритель перемещается на сайт, он
видит последний материал.
 Однако такое размещение означает, что
клиенту нужно будет постоянно обновлять
сайт — маловероятно, что люди будут
возвращаться в блог, если в нем не будут
публиковаться новые материалы.

16. Реклама
 В этой компоновке реклама размещается вслед за
последней записью блога и перед предыдущими
записями блога в горизонтальном баннере. Это
предоставляет клиенту гибкость выбора
текстовой рекламы или живописного баннера для
своих рекламных потребностей.
 Такой тип компоновки для рекламы помещает только
одно рекламное объявление "над сгибом" и другое
"под сгибом".
 Такого количества рекламы вполне достаточно для
большинства сайтов. Кроме того, это
переводит рекламу на вторичную позицию, ниже
материала тела контента сайта.

17. Предыдущие записи блога
• Здесь будут располагаться предыдущие записи блога -
от трех до пяти записей должно быть достаточно, чтобы
зрители могли сразу точно понять, что можно ожидать
от этого сайта при постоянном посещении.
• Изображения должны быть хорошо сделаны, но не
являются обязательными, так как в этой области обычно
располагаются статьи, которые помещают на страницах
после сгиба, а не вывешиваются на стойках (записи
блога).
• Решение об использовании изображений может
основываться на том, является ли время загрузки
проблемой, или если предыдущая статья действительно
нуждается в изображении, чтоб заставить зрителя
щелкнуть на нем для перехода к полной статье/записи
блога.

18. Нижний колонтитула
 Информация предоставляет зрителям
основную информацию о компании и ее
Web-сайте, исключая необходимость
рыться в ее поисках.
 Название компании, возможно повторение
логотипа, адрес, электронный адрес e-
mail, ссылки
 Можно также повторить средства
навигации в виде только текстовой версии

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

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

21. Шрифтовое оформление
 Шрифты используют для вывода
текста, чисел, букв, и других символов.
 Шрифты разбиваются по семействам
– стилю (курсив, нормальный, наклонный, и т.д.),
– варианту (нормальный или малый прописной),
– толщине (жирность),
– растяжению (уменьшенный или увеличенный тип
по высоте или ширине)
– размеру (по высоте или ширине в пунктах или
пикселях).

22. Шрифтовое оформление
 Одним из первых шагов по окончательному
оформлению Web-дизайна является решение
о шрифтах, которые будут использоваться на
Web-сайте.
 Многие исследования показывают, что
множество шрифтов на Web-сайте может
путать читателя. С другой
стороны, сайт, который использует везде
только один шрифт, кажется безвкусным.
 Стоит использовать один шрифт для
заголовков и подзаголовков и другой для
основного текста.

23. Шрифтовое оформление
 Использование одного шрифта для
заголовков и другого для основного текста
на всем Web-сайте добавит сайту
целостность, и позволит также читателю
различать заголовки и основной текст при
просмотре Web-страницы.
 Многие web-сайты использую шрифт
Verdana для основного текста и Times
Roman или Georgia для заголовков

24. Шрифтовое оформление
Существует четыре основных типов шрифтов:
 Шрифт с засечками: Любой шрифт, который содержит
завершающие штрихи, расширяющиеся или сужающиеся
концы, или имеет реально отсеченные окончания
(включая прямоугольные засечки).
 В ходе истории шрифт с засечками был выбран для
печати основного текста, так как его легко читать на
печатной странице.
 Но Web отличается от печати, и на экране шрифты без
засечек читаются легче, чем шрифт с засечками.

25. Шрифтовое оформление
 Без засечек: Любой шрифт, конечные
штрихи которого не имеют никаких
расширений, пересекающих штрихов, или
других украшений.
 Такой шрифт стал традиционным для
основного текста для Web.

26. Шрифтовое оформление
 Рукописный или курсив: Эти шрифты обычно выглядят по
большей части как написанные пером или кистью, а не как
печатные буквы. Эти шрифты будут включать те, которые
кажутся рукописными, даже хотя и не являются курсивом.
 Одной из причин отказа от использования этого типа шрифта на
Web-странице, особенно в основном тексте, является трудность
чтения в больших отрывках.
 Кроме того, не все браузеры работают с рукописными
шрифтами и курсивом, поэтому если вы решите их
использовать, то он может быть выведен как шрифт с
засечками.

27. Шрифтовое оформление
 Специальные шрифты, включая моноширинный:
Единственным критерием моноширинного шрифта
является единая фиксированная ширина всех
символов, аналогично тому, как может выглядеть
машинописная страница.
Courier New, regular, 18 point
 Другие шрифты могут иметь фантастический внешний
вид, и эти шрифты используются единственно с
декоративной целью.
 Моноширинные шрифты нашли свое применение на
Web-сайте, особенно при выводе программного кода.

28. Шрифтовое оформление
 Взгляд на изображения выше показывает, что не все
типы шрифта создаются одинаковыми, даже если
создаются одного размера в пунктах.
 Размер в пунктах определяет высоту букв, и
некоторые шрифты будут больше при 18
пунктах, чем другие.
 Существуют также и другие различия, например
расстояние между буквами и словами, или такие
как Jokewood, не имеют букв нижнего регистра. Эти
шрифты могут найти применение в небольшой
области, такой как заголовки или в рекламных
объявлениях.

29. О разборчивости и удобочитаемости
• Когда вы смотрите на Web-страницу, вы
обычно не знаете разницы между
шрифтами с засечками и без засечек.
Все, что вы знаете, это сможете вы или нет
прочитать содержимое страницы.
• Поэтому, в конечном счете, значение имеет
разборчивость текста.

30. Для понимания что текст разборчив
необходимо убедиться, что:
1. Используемый шрифт достаточно большой, чтобы его
можно было читать с различным разрешением браузера.
2. Обеспечивается достаточный контраст между фоном и
основным текстом.
3. Заголовки на самом деле отличаются от основного текста.
4. Исключается растягивание основного текста на всю
ширину экрана с помощью текучей компоновки. (40-60
символов считается обычно хорошей длиной строки для
основного текста)
О разборчивости и удобочитаемости

31. Ограничения в выборе шрифтов
 Ограниченный выбор шрифтов часто является первым
вопросом, с которым сталкиваются при оформлении
текста.
 Хотя при построении web-сайта возможно применить
любой шрифт, посетители сайтов увидят текст в этом
виде, только если они имеют такой же
шрифт, установленным на своем компьютере — если это
не так, их браузер будет использовать либо
альтернативный шрифт, либо воспользуется значением по
умолчанию браузера (обычно Times New Roman).
 Поэтому возможно представить основной текст
специальным шрифтом, таким как Trump Medieval или
Avant Garde, но если основная аудитория не связана тесно
с дизайнерами, зрители вряд ли увидят текст в этом виде.

32. Ограничения в выборе шрифтов
В связи с этим большинство Web-
дизайнеров ограничивают себя
наиболее общедоступными на всех
системах шрифтами, список
которых обычно ограничен
следующим набором:
 Andale Mono
 Times New Roman
 Georgia
 Verdana
 Arial/Arial Black
 Courier/Courier New
 Trebuchet MS
 Comic Sans
 Impact

33. Переносы слов
 Когда речь идет о выравнивании текста в пределах
его контейнера, имеется четыре варианта:
– выравнивание слева,
– выравнивание справа,
– выравнивание по центру,
– Выравнивание по ширине.
 Может показаться, что текст выровненный по
ширине, может выглядеть более
привлекательно, чем текст с "неровными" краями.
Такое выравнивание часто можно видеть в
журналах и книгах.

34. Переносы слов
Однако в сети Web это
связано с некоторыми
трудностями. Текст
размещённый на странице не
имеет автоматического
переноса, поэтому
выравнивание происходит
посредством увеличения
(уменьшения) пробелов
между словами, что
приводить к "потокам
пробелов".
Чтобы избежать
этого необходимо
использовать
выравнивание
текста слева для
большей части
Web.