Если вы вдруг решили заняться веб-дизайном, то первый вопрос, который встает перед вами: «С чего начать?». За ответом вы, скорее всего, полезете на форумы, где уже давно заготовлен ответ для новичков: «Как это вы не знаете с чего начать? Вот вам тысяча ссылок!» Вы смотрите на объем информации, который вам предлагают изучить и понимаете, что вопрос остается открытым: «Так, собственно, с чего начать?» Дабы не выглядеть дураком или невежей, задавать вопрос повторно вы уже не станете и начинаете штудировать залежи информации, которые вам посоветовали бывалые дизайнеры.
Минус в том, что среди этих уроков и рекомендаций очень много второстепенной информации. Такие моменты как, форма кавычек – это второстепенно. Знать HTML и CSS полезно, но не обязательно: веб-дизайнер не обязан уметь верстать сайты.
Новичок хочет прямо сейчас опробовать себя в действии, а 90% той информации, которую советуют на форумах, носит философский характер. Эта информация полезна, но ее можно почитать во время отдыха от практической деятельности.
Я занимаюсь созданием сайтов с 2008 года. Когда дело коснулось продвижения сайтов, нашел довольно много информации. В частности, очень помог блог Михаила Шакина и цикл его статей: Как раскрутить сайт с нуля. Всего 3 статьи о том с как раскрутить сайт, но это было именно то что нужно.
Что-то подобное касательно дизайна в рунете вы вряд ли найдете.У нас много уроков по фотошопу и много галерей готовых дизайн-макетов, но вот с теорией веб-дизайна – беда.
Первоначально я не хотел затрагивать техническую сторону дела, но потом решил написать курс уроков для начинающего веб-мастера, от проекта до действующего сайта, чтобы человек, решивший создать сайт смог как можно быстрее начать действовать. И пусть это будет слишком поверхностная информация, главное, чтобы начинающему было от чего оттолкнуться.
Всего будет 7 уроков, рассчитанных на новичков:
- Основы веб-дизайна.
- Основы веб-дизайна: текстовые блоки, ссылки, изображения.
- Частые ошибки в дизайне сайтов.
- Создание макета в фотошопе
- Верстка
- Привязка к движку
- Размещение сайта в интернете.
Посты еще будут дорабатываться и улучшаться.
Основы веб-дизайна.
Мой друг сказал, что выбор в пользу профессии веб-дизайнера он мог бы сделать, если бы увидел сайт, который можно назвать произведением искусства.
Действительно, дизайнер должен уметь впечатлять, но в подавляющем большинстве случаев это не нужно, а иногда даже противопоказано. Пестрое оформление – это не то зачем приходят посетители. Они приходят на сайт ради его содержимого – контента и различных сервисов, которые предлагают сайты.
В целом, суть веб-дизайна сводится к двум требованиям – это удобство и эстетика. Удобство (юзабилити) – на первом месте. Исходя из этого можно сказать, что сайт должен быть произведением искусства в той же степени, в какой произведением искусства должна быть мебель или бытовая техника, то есть в дизайне красота не может быть самоцелью.
Кажется, здесь я сам уже ударился в философию и пора бы уже переходить ближе к теме.
Если мы говорим о сайтах, то не можем не упомянуть о блоках. Само слово «блок» имеет множество значений. В среде веб-разработок блоки,в разном понимании этого слова, встречаются и в программировании, и в верстке, и в дизайне.
В общих чертах блок – это элемент структуры, как правило, состоящий из других элементов. Сочетание блоков на странице образует сетку, о которой часто можно услышать на форумах вебмастеров.
Стандартная страница в интернете состоит из нескольких блоков: это шапка сайта (header), содержимое(content), подвал (footer), а также меню навигации.
Шапка – считается визитной карточкой сайта в связи с чем, многие веб-мастера стараются сделать ее как можно более выразительной. Нередко при этом шапка вырастает в высь, а изображения притянуты за уши, то есть не соответствуют тематике сайта и вставляются исключительно для красоты.
На многих сайтах можно встретить в шапке изображения галактик, планет, орбит, неба с облаками, зеленой травы, росы на листьях. Все это уже стало штампом, а штамп – это отсутствие вкуса.
Рассмотрим процесс проектирования макета сайта на примере нехитрого шаблона.
Для начала уберем бэкграунд (фон) с травой.
Теперь хорошо видно, как много места совершенно бесцельно занимает шапка. Шапка не должна быть слишком громоздкой/высокой, иначе посетителю при переходе со страницы на страницу каждый раз придется ее прокручивать, пока он не доберется до контента. Уже и производители веб-браузеров убрали лишние нагромождения в верхней части экрана, ведь чем больше информации вмещается без прокрутки, тем лучше.
Насколько высокой должна быть шапка? Настолько, чтобы расположенному в ней логотипу не было тесно и при этом все элементы логотипа можно было рассмотреть. Обычно 120 пикселей в высоту достаточно.
То место, что заполняла трава, сейчас пустует. Можно обрезать шапку как минимум вдвое. При этом логотип смещаем вниз и вписываем его в прямоугольник, а не в круг. Вообще все округлые кривые линии, сами по себе, не очень гармонично вписываются в прямоугольные окна наших прямоугольных мониторов.
Стоит, правда, отметить, что, зачастую, жесткие прямые углы смотрятся не очень привлекательно, и напоминают о веб-дизайне, который был распространен в интернете около десяти лет назад.
После того, как мы удалили бэкграунд, шаблон стал темным. Чтобы атмосфера сайта не давила на психику, добавим в шаблон немного светлого.
Правая часть шапки у нас по-прежнему пустует. Можно вставить сюда слоган компании, номер телефона, панель входа на сайт и т. д.
У правого края я расположил телефон, а рядом с логотипом – слоган (просто набор символов для наглядности)
Логотип и номера телефонов выставлены в один уровень по вертикали. Чем больше элементов выровнено подобным образом, тем более упорядоченной будет структура сайта.
Контент
В интернете можно встретить много сайтов, разработанных дизайнером, но ведущихся людьми далекими от веб-разработок. Такие сайты сразу видны по неверно оформленному контенту: страницы представляют собой тонны нечитабельного текста и вставленные невпопад картинки.
Главное, что нужно знать про контент – к нему применимы все те же принципы, что и к веб дизайну в целом: контент тоже должен верстаться, выравниваться, структурироваться. По-хорошему, спроектирована должна быть каждая страница сайта.
Строки не должны быть слишком длинными. Что мне не нравится в форумах и сайтах вроде Википедии, так это то что строчки растягиваются практически на весь экран. У меня монитор шириной 1366 пикселей, средняя длина строки на форуме при такой ширине составляет 150 символов.
Думаю, что это одна из причин по которой блоги приобретают все большую и большую популярность: текст в блогах читается гораздо легче. Длина строки зависит от размера шрифта, но оптимально, составляет 60-80 символов.
Также, для улучшения читабельности, нужно разбивать большие абзацы на более мелкие. Однажды на один из сайтов мне нужно было выставить для скачивания один из российских законов. Текст я предварительно отформатировал, а в голове возник вопрос: «Почему у нас народ в стране юридически неграмотный? Уж не потому ли, что законы написаны нечитабельным текстом с абзацами в 10 страниц?»
Когда я пишу статью или просто письмо, старюсь разбивать текст таким образом, чтобы абзац не превышал 6 строчек.
Вообще оформление текста и графики – отдельная тема, которая требует отдельной статьи и будет глубже раскрыта в следующем посте по дизайну.
Подвал – очень часто этому элементу не уделяют должного внимания, однако шапка сайта и подвал – это как обложка книги: читать книгу без обложки можно, но отношение уже не то.
В дизайне есть два важных момента: логическая составляющая и визуальная составляющая. Мы и без футера поймем, что страница закончилась, но здесь все же нужно сделать визуальный акцент: «Все страница кончилась, дальше колесико мыши крутить не нужно!»
Кроме копирайта и контактной информации, хорошо, если в футере размещается какая-либо информация для удержания внимания пользователя. Обычно в качестве такой информации выступает продублированное навигационное меню, чтобы посетитель мог перейти в другой раздел сайта, не прокручивая страницу вверх.
На этом пока все. Следующий пост по теме будет касаться текстовых блоков, изображений, навигации и модульной сетки.
