Шаблоны для новичков. Урок 18. Анатомия вебдизайна

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

К счастью, в последние годы произошло разделение вебстроителей на несколько категорий. Если раньше все были под одну гребёнку, то теперь у нас есть программист, верстальщик и иллюстратор/дизайнер. По большому счёту мы можем разделить работу над сайтом для вебмастеров (программисты, верстальщики - те кто работает с кодом) и иллюстраторов тех, кто придумывает и рисует графику.

Если вы кодер и есть возможность поработать с дизайнером, то лучше так и сделать. Мне приходилось работать с некоторыми хорошими дизайнерами, и даже целыми студиями, и по опыту скажу, что такие сайты получались действительно грамотными и интересными. Даже при том, что у дизайнеров своё «кино» в голове, работать с готовым дизайном на порядок проще и удобней.

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

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

Галерей шаблонов в Инете великое множество (гугл в помощь). Я рекомендую обратить внимание на многочисленные premium-шаблоны например WOO Themes.

Хотелось отдельно отметить рунетовские «сборники шаблонов» или «примеры сайтов». В большинстве своём это всё равно переделанные зарубежные. Кроме того, современный качественный дизайн вы найдёте только «за бугром».

Теперь задача вебмастера состоит в том, чтобы понять как собран этот дизайн. Мы, кодеры, прекрасно понимаем, что за любыми «красотами» стоит какой-то html/css-код или фоновая картинка. Наша задача научиться «копаться» во всех этих внутренностях.

Для примера я возьму шаблон Empire.

Для работы нам понадобится только FireFox - стандартных средств будет более чем достаточно.

Адаптивный дизайн

Сейчас адаптивный дизайн становится популярным, поэтому шаблон нужно сразу проверить поддерживает ли он «адаптивность». Сделать это очень просто - меняем размеры браузера и если в шаблоне перестраиваются блоки, значит он адаптивный. Здесь нужно будет сразу определиться с базовым разрешением, а адаптивность добавлять уже позже. В нашем случае этого нет.

Разные макеты для разных страниц

Часто шаблон имет два макета: главная страница и всё остальное. Иногда, как в нашем варианте, делаются еще и другие макеты. Отличия обычно минимальные, вроде отсутствующего сайдбара. Для главной страницы часто используется нетиповой вывод: колонки, слайдер, блоки и прочие финтифлюшки.

Также обратите внимание на подвал. Он тоже может меняться на разных страницах.

Модульная сетка

Мысленно разобъём шаблон на три части:

• шапка
• контент
• подвал

Из них меняется только контент - в терминах MaxSite CMS - это div.main. Здесь будет выводиться текст и сайдбар.

В шапке и подвале будут располагаться компоненты. В шапке: «логотип + текст + кнопка» и «меню + поиск». В подвале «три сайдбара» и «копирайты».

Исследуем размеры

Для получения размеров есть два варианта. Они используются паралельно. Первый с помощью экранной линейки, например в PicPick.

Второй вариант - узнать размеры через css-стили. Для этого в FireFox есть инструмент «Исследовать элемент».

Дальше нужно «потыкаться» по элементам сайта, а справа будут выведены css-правила.

В нашем случае видно, что ширина 960px, а сам блок отцентрирован по браузеру.

Иногда может пригодится вкладка «Вычислено» - она показывает все правила элемента в алфавитном порядке. При этом, если убрать отметку «Только стили пользователя», то получим список даже расчётных правил элемента (в css шаблона их может и не быть).

Отдельные элементы дизайна

С помощью «Исследовать» можно посмотреть как устроены различные блоки и элементы. Для примера кнопка в шапке.

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

Варианты оформления

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

• сплошной фон (background-color)
• фон-текстура на основе изображения (background: url)
• множественный фон
• граница (border)
• скругление (border-radius)
• градации горизонтальные, радиальные
• тени блока внешние и внутренние (inset) (box-shadow)
• тени текста (text-shadow)
• прозрачность (opacity)

Плюс к этому у нас появилась возможность css-трансформации (transition), что позволяет отказаться от множества сторонних js-скриптов.

То есть в целом ситуация такая, что вебмастер может создать дизайн элемента несколькими способами. Иногда это бывает не совсем очевидным. Как пример приведу возможность задавать цвет через rgba() (с прозрачностью) или когда для блока указывается opacity. В css-коде будет указан один цвет, но вследствии его трансформации, визуально - будет другой. Сколько бы мы не пытались «пипеткой» снятый цвет найти в css-файле ничего не получится.

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

HTML-код элементов

Вёрстка должна сводиться к работе с CSS/LESS-кодом. HTML-кода, по возможности, должно быть как можно меньше. Сейчас становятся популярными методики вёрстки с помощью псевдоэлементов :after и :before, что позволяет не создавать дополнительный html-элемент родительскому блоку. Вместе с тем, не всегда удаётся применить такие хитрости, и вебмастер вынужден создавать более сложный html-код элементов. Скажем часто требуется указать wrap-блок, общий контейнер для float-блоков или пустой div.clearfix. Наверное можно придумать как решить задачу на «чистом» CSS, но вариант с HTML немного проще и быстрей.

Коллекции элементов

Кодеры, как правило, невнимательны к визуальным мелким деталям. Например дизайнер может полдня потратить на какой-нибудь мелкий элемент, очень важный с его точки зрения, а верстальщик заменит его на какой-нибудь «примитив», вроде HR. В качестве примера посмотрим на блок «Get in touch»:

Многие ли из вас сразу заметили, что горизонтальная линия вовсе не линия, а довольно сложное фоновое изображение?

Еще очень часто встречаются элементы, которые состоят практически из неразличимых глазом эффектов. Заметили ли вы, что заголовок блока имеет темную тень?

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

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

«Солянка» из дизайнерских элементов

Почти все современные шаблоны представляют собой «солянку», где присутствуют одни и те же «типовые» дизайнерские элементы. Поизучайте другие шаблоны и вы увидите, что везде всё одно и тоже. Разница только в цветах, расположении и размерах. При создании своего шаблона скорее всего придется придерживаться аналогичного подхода.

Другой цвет/изображения = другой дизайн

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

В нашем примере используется тяжелый серо-темно-синий цвет, усиленный несложной текстурой. В «исследователе» можно произвольно менять css-стили, и для примера я в течение буквально пяти минут переделал некоторые цвета (детали не редактировал, сейчас это не важно):

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

В качестве эксперимента, попробуйте отключить фон браузера в шаблонах: автоматом получается минимализм в «чистом» виде. :-)

По изображениям отдельный разговор. Если убрать слайдер, то шаблон сразу станет блеклым и «нетематичным». В своём примере я заменил фото на авто, как шаблон сразу стал «автомобильным». Данный подход характерен практически для всех шаблонов. Точно также эту хитрость применяют в миниатюрах записей, особенно на главной.

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

Шрифты

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

««« Урок 19 | Урок 17 »»»