Создание сайта. Часть 2: работаем над дизайном

Это вторая статья серии, посвященной сайтострою. Полное содержание серии - в конце статьи.

Итак, допустим, вы знаете, о чем будет ваш сайт и как в общих чертах он будет выглядеть. Обычно на этом этапе идея звучит так: "хочу сделать сайт, вот как этот [вставить адрес сайта]". Это нормально, сделайте с него скриншот, пригодится ;) Вообще я рекомендую вам записывать все соображения, какие придут вам в голову в ходе разработки. Так же лучше сохранять полезные статьи, т.к. пока вы запомните все тонкости, еще не раз придется их искать и перечитывать.

Вот что значит «сохранять все полезное» =)

Найдите или купите электронную книгу Влада Мержевича "Вёрстка веб-страниц" (2010). К ней вы будете часто обращаться с вопросами дизайна и верстки. Частично материал этой книги есть в отдельных статьях на сайте автора, но с книгой удобнее.

Сейчас всю книгу читать не надо, посмотрите главу "Макеты, применяемые на сайтах", раздел "Макеты" (с.221).

Прочитали? Теперь вы имеете представление, что значит резиновый/фиксированный дизайн. Я делал оба варианта и решил, что для блога лучше фиксированный дизайн. Вообще с резиновым дизайном на мой взгляд проблем больше. С другой стороны, в резиновый дизайн лежит в основе адаптивного веб-дизайна под мобильные устройства, что делает его, казалось бы, более выгодным выбором. Однако не обольщайтесь, адаптивный дизайн - весьма сложная цель, и на данном этапе недостижимая.

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

На данном этапе разработки вам нужно научиться работать в Photoshop или его бесплатных аналогах типа Paint.NET. Насколько хорошо нужно в этом разбираться, зависит от вас. Чем больше будете знать, тем красивее дизайн сможете создать. К примеру, я более-менее шарю в Photoshop-е и мог бы заделать что-то получше, чем вы видите на этом сайте. Но у меня другая проблема - нет художественного вкуса. Я вижу красоту кода, но не линий.

Еще одним важным инструментом разработки дизайна является MS Paint. Ага, тот самый Paint, что почти не изменился со времен Windows95 :) В нем удобно работать над скриншотами, переносить из них цвета и создавать схематическую разбивку линиями (в Photoshop каждая линия – это слой, который потом еще нужно растрировать). Вообщем, не отказывайтесь от этого инструмента.

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

Смотрите пример ниже. Это палитра двух дизайнов на текущем сайте, темного и светлого. Группировка по оттенкам грубая, но смысл понятен.

Еще учтите, что яркость монитора конечного пользователя существенно сказывается на восприятии вашего сайта. Странно? У меня была как раз такая проблема: три недели делал темный дизайн на работе. Все вроде красиво, можно разбирать в код. Приношу домой показать подруге и понять не могу, что не так. Оказалось, что монитор ярче настроен, и светлый текст на черном фоне теперь режет глаз и тяжело воспринимается.

Если будете делать скриншот чужого сайта ради подбора цветов, то сохраняйте его в bmp или png-формате, другие форматы сжимают изображение и цвет может слегка измениться. Так же возьмите на вооружение программулину Color Detector

Подбор шрифтов. Для этих целей используйте MS Word. Здесь опять же насколько у вас опыта хватит. Можно при помощи надписей собрать схему дизайна, можно обычной текстовой версткой накидать приблизительно. Ситуация аналогичная с подбором цвета. Нужно подобрать шрифты (семейство, размер, оформление) так, чтобы тексты воспринимались легко. Можно пошариться в инете по сайтам схожей тематики и посмотреть, какими шрифтами у них все сделано. О подборе читабельных шрифтов так же много написано, но выбор в первую очередь зависит от привычки.

Вот вам пример: первая версия моего блога была представлена шрифтом Verdana, 8pt. Я настолько к нему привык, что не замечал, как тяжело он читается. Когда занялся слиянием, случайно раскопал статью на английском, где проводилось сравнение Verdana и Arial. Для эксперимента переключил шрифт.. как говорится "Почувствуй разницу" ;)

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

Браузеры

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

У вас есть два выхода: забить на это, написав предупреждение типа "для корректного просмотра сайта используйте такой-то браузер" и запилить дизайн под один браузер. Или же вы можете поставить несколько бродилок на свой комп и попытаться создать кроссбраузерный дизайн. Предлагаю поставить текущие версии Opera, Firefox и Chrome.

С Internet Explorer (aka IE, Ослик) будет больше всего проблем как в дизайне, так и в коде. Это самый деревянный из всех браузеров. Скачайте текущую версию IETester. Это бесплатная программа, объединившая в себе различные версии IE, от 5.5 до почти последней. Конечно, не нужно оптимизировать сайт под все версии Ослика, хотя бы потому, что его старые версии очень уж ограничены в возможностях. Однако, вы себе не представляете, сколько людей до сих пор ходит в инет через IE6! Определите для себя (и для будущих посетителей сайта), под какие версии/браузеры будет заточен сайт. На том и стойте.

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

Есть online-способ увидеть свое творение «глазами» разных браузеров - browsershots.org. На данном этапе вам еще рано сюда ходить, но ссылка в тему. Сайт на английском, там все предельно просто. Выбрали интересующие вас браузеры, указали URL вашего сайта, нажали "Submit". Не выбирайте много браузеров сразу, т.к. этот ресурс реально обращается на ваш сайт через указанные бродилки, делает скриншот и грузит картинку в ответной странице. Т.е. процесс занимает до черта времени :)

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