Рисунок 2.19. Сравнение шрифтов
Шрифт «eurofurence light» из семейства геометрических округлых шрифтов
без засечек, изначально созданных для EuroFurence, первого европейского пушного
конвента 1995 года.
Шрифты были выбраны при поиске удобночитаемых шрифтов, которые
интересно смотрелись бы и сочетались с дизайном (рис. 2.20).
Рисунок 2.20. Алфавит шрифтов
Кегль заголовков – 85 пунктов. Кегль основного текста – 28 пунктов. Такой
размер выбран для того, чтобы занять пространство. Кегль подзаголовков – 30
пунктов, выбран чтобы не выбивался из основного текста, но и не сливался с ним,
кегль основного шрифта должен быть не менее 12 пунктов (рис. 2.21).
Рисунок 2.21. Скриншот страницы
Кегль основного текста и подзаголовков у данной страницы отличается, т.к.,
здесь важно показать значимость концепции сайта. Кегль основного текста – 50
пунктов. Кегль подзаголовка – 40 пунктов (рис. 2.22).
Рисунок 2.22. Скриншот страницы
2.5. Разработка фирменного блока
При разработке фирменного блока рассматривались такие названия, как:
VECO» - в экологии, «ЭКОХАКЕР» - от движения «Биохакер», «экОк» - экология
— это хорошо. Был выбран первый вариант, но т.к. уже существует проект с
наименованием «Веко», то было решено добавить разделение между предлогом и
сокращением слова «экология», так же добавлен фирменный элемент, соединенный
формой листка и буквой «О», что в итоге выглядит, как глаз его веко, что полностью
соответствует концепции фирменного блока. Для фирменного блока был выбран
английский язык, т.к. первые три буквы слова «ЭКОлогия» можно перепутать с
другим термином. Для фирменного элемента выбран основной цвет концепции web
. Идеей для названия послужила изученная информация о человеческом веке. Оно
стареет с возрастом, могут появляться морщинки и многое другое, если за кожей не
ухаживать, ведь это самый тонкий и нежный участок кожи, также и с природой.
Если за ней не ухаживать, содержать в чистоте, отдавать ей её, чтобы удобрять, а не
напротив засорять, то она исчезнет. Для фирменного блока был выбран основной
шрифт «Century Gothic». Буква «О» находится на одной линии с другими буквами,
но в связи с тем, что это измененный элемент, то создается ощущение, что буквы
находятся не на одной линии (рис. 2.23).
Рисунок 2.23. Фирменный блок
Идеей для названия сайта послужила интерпретация значения слова «веко».
Такая информация располагается в пояснительном элементе на титульной
странице:
«Природа - это наше ВЕКО, его состояние зависит от нашего отношения к
нему. На зря наши глаза называют «зеркалом души» человека. Но кожа век самая
тонкая, с годами ее эластичность ухудшается, появляются морщинки. Поэтому
важно ухаживать за ней, следить за своим питанием, делать массаж лица, пить
витамины.
Также и с природой, важно восстанавливать разрушенные участки земли,
садить деревья, удобрять их, выбрасывать мусор в предназначенное ему место, не
загрязнять воду токсичными отходами.
С помощью информации на данном сайте Вы можете познакомиться с
экологическим стилем жизни eco-friendly и начать образ жизни приносящий пользу
вам, вашим близким и природе» (рис. 2.24).
Рисунок 2.24. Пояснительная страница с информацией о проекте
2.6. Стиль сайта
Основные используемые стили для веб-сайтов.
«Минимализм» - данным стилем пользуются в основном люди творческой
профессии и не только. Задача проекта в стиле «минимализм» создание имиджа и
узнаваемости проекта (рис. 2.25).
Рисунок 2.25. Сайт в стиле «минимализм»
«Полигональный стиль» - особенность данного стиля — это намеренная
простота, превращающаяся в сложный объемный имидж (рис. 2.26).
Рисунок 2.26. Сайт в стиле «полигональный»
«Красивая типографика» - стиль подразумевает использование
нестандартных шрифтов в заголовках. Основной упор стиля идет на текст, потому
обилие иллюстраций здесь не подходит (рис. 2.27).
Рисунок 2.27. Сайт в стиле «красивая типографика»
«Классика» - отличие стиля в том, что он придерживается строгих правил
оформления: четкая колончатая структура; меню только в верхней части справа или
слева; мягкие, сдержанные тона; шрифты классические, стандартные (рис. 2.28).
Рисунок 2.28. Сайт в стиле «классика»
«Корпоративный» - данный стиль должен полностью соответствовать духу
и идее компании (рис. 2.29).
Рисунок 2.29. Сайт в стиле «корпоративный»
«Информационный» - основой данного стиля является информация, главное
в стиле это удобный интерфейс. Стоит строго придерживаться наполнения данного
сайта: «если без картинки можно обойтись, то не стоит ее оставлять» (рис. 2.30).
Рисунок 2.30. Сайт в стиле «информационный»
«ORGANIC & NATURAL» - применение органического стиля разнообразно,
т.к., основной акцент приходится на визуализацию, а не особенности строения
страницы или ее информативность (рис. 2.31).
Рисунок 2.31. Сайт в стиле «органический»
Цветовая концепция и графическое наполнение в данном стиле необходимо
создавать в природных тонах, не применяя кислотных цветов. Хорошо смотрятся
оттенки зеленого и коричневого. Для фона можно использовать пейзажи, текстуры,
к примеру, ткани, воду, органическую бумагу. Показать органическую
направленность стиля можно, использовав рамки для в форме веток или цветов.
Выбор шрифтов также разнообразен. Уже разработаны «органические»
шрифты, у которых имеются различные завитки, округлые линии и различные
декоративные элементы. Но, подобные шрифты оставить для оформления
заголовков или меню, а для информационного блока выбрать более традиционные
варианты. Цветовая концепция должна соответствовать «природной» палитре, но
лучше отдавать предпочтение темному шрифту на светлом фоне, т.к., читать такой
текст значительно проще, ведь в данном случае используется контраст.
Для проекта был выбран «органический» стиль. Выбранный цвет для фона
соответствует цвету неба на титульной иллюстрации, отсутствуют текстуры, для
удобночитаемости, но присутствуют иллюстрации подразумевающие
органический стиль (рис. 2.32).
Рисунок 2.32. Скриншот страницы
2.7. Построение сайта
Чтобы создать успешный сайт стоит для начала ответить на некоторые
вопросы.
1. Какие задачи ложатся на сайт? - информирование пользователей о
экологическом стиле жизни.
2. На каких пользователей рассчитан проект? - заинтересованных в здоровом
существовании себя и окружающего мира.
3. Что нужно донести до пользователей? - как изменить свою жизнь в лучшую
сторону и как помочь измениться миру.
4. Какая функциональность будет заложена в веб-сайт? - удобное меню.
Процесс разработки веб-сайта состоит из следующих этапов:
1. Маркетинговое планирование. На этом этапе выясняются сами основы
создаваемого сайта.
2. Дизайн сайта. Показывает ли дизайн отличие от конкурентов? Не помешает
ли дизайн продвигать сайт?
3. Верстка – это перевод дизайна в HTML-код.
4. Система управления сайтом (CMS). Важной задачей является выбор
программного «движка», позволяющего обновлять информацию на сайте без
сложностей. Иногда нужно изменять структуру сайта, этот процесс не должен
вызывать трудностей.
6. Тестирование и выкладывание. Нужно проверить во всех ли сайтах
работает сайт, все ли необходимые материалы размещены, все ли компоненты
работают слажено и четко?
2.7.1 Сетки для веб-интерфейса
Сетка Bootstrap. В основном, 12 столбцов с отступами (рис. 2.33, 2.34).
Рисунок 2.33. Сетка Bootstrap