Наиболее полный курс веб-дизайна

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

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

Курс в большей части рассчитан на самостоятельное изучение. Я дам лишь пути, по которым можно двигаться, а то куда вы придете — целиком зависит от вас.

Раздел 1. Теория.

То, что следует знать дизайнеру, я разбил на уровни. «Прокачав» первый уровень, можно переходить ко второму и так далее.

Левел 0. «Вы все гавно!» ©

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

Ни о каком изучении фотошопа я бы думать пока не советовал.

Примерный список технологий:

• Кодировки. В чем разница между ASCII и UTF-8?
• HTML. Основной язык разметки интернета. Много чего можно подчерпнуть на htmlbook.ru.
• CSS. Каскадные таблицы стилей. Вся инфа так же есть на htmlbook.ru.
• Растровая графика. Принцип работы и отличия от векторной.
• Векторная графика. Преимущества и недостатки по сравнению с растровой.
• PHP и динамические страницы. Знание возможностей.
• JavaScript. Применение и основные возможности.

Левел 1. На пути к просветлению.

Теперь вы знаете, из чего состоит сайт. Это позволит создавать реалистичные макеты, которые верстальщики и программисты смогут воплотить в жизнь. Скажу даже больше, верстальщики будут готовы вас расцеловать за правильный макет.

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

Инструментарий:

• Мозг. Это инструмент №1. Овладение им в совершенстве — 80% успеха.
• Бумага и карандаш. Помогает фиксировать дикие идеи выдаваемые мозгом. А также вспоминать о них с утра после усиленного поиска вдохновения =)
• Инструменты прототипирования (о прототипировании позже). Можете сами сделать выбор.

              · Axure;

              · Balsamiq;

              · Adobe InDesign;

              · Adobe Fireworks;

              · Бумага;

• Основной программный инструментарий. То, где собственно создается макет. Здесь тоже каждый определяется со своими предпочтениями.

              · Adobe Photoshop;

              · Adobe InDesign;

              · Adobe Fireworks;

              · Adobe Illustrator. Если собираетесь заняться также векторной графикой.

То, что выделено полужирным начертанием, является обязательным минимумом для получения левела. Уроками по программным продуктам Adobe завален весь интернет. Они помогут в изучении инструментария.

Очень хороши уроки по продуктам Adobe от сайта Lynda.com. Найти их можно на том же рутрекере. Будьте готовы, они на английском.

Теория дизайна:

• Теория цвета и цветовой круг.
• Пространственные отношения. Размер, пропорции.
• Форма. Прямые, прямоугольники, круги, кривые Безье.

Здесь будут полезны поверхностные основные принципы дизайна.

Левел 2. Посвященный.

Чувствуете, как наливаются свинцом ваши яйца? Если нет, то марш к началу. Изученную теорию запомнить, работу с усвоенным инструментарием продолжать. Не забывать практиковаться.

Инструментарий:

• Adobe kuler (подбор цвета);
• Типографская раскладка Ильи Бирмана;
• Подбор палитры;

Теория:

• Правила хорошего тона в фотошопе;
• Типографика (используйте, мать его, сглаживание шрифтов в макетах). Взаимодействие шрифтов;
• Композиция;
• Текстурирование;
• Единство;
• Баланс;
• Контраст;
• Динамика;

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

Смотрите на работы признанных мастеров и пытайтесь понять, почему же они такие крутые.

Левел 3. Чак Норисс веб-дизайна.

Вы умеете делать красиво. Теперь осталось научиться делать удобно.

Теория:

• Экстремальная типографика. Роберт Брингхест и Ян Чихольд обязательны к прочтению
• Юзабилити
• Информационный дизайн и представление информации
• Психология пользователя
• User experience
• Математические обоснования удобства интерфейсов
• Концепция UCD
• Книги из «Библиотеки»

Инструментарий:

• Мастерское и интуитивное владение всеми описанными инструментами

На этом же этапе можно начать расширять количество скилов в смежных областях. Например, глубоко изучить техдизайн, ретушь или 3ds max.

Материалы по юзабилити и интерфейсам можно опять же найти в моем блоге.

Библиотека

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

• «Веб-дизайн» Дмитрий Кирсанов
• «Не заставляйте меня думать» Стив Круг
• «Психбольница в руках пациентов» Алан Купер
• «Об интерфейсе» Алан Купер
• «Веб-дизайн» Якоб Нильсен
• «Дизайн привычных вещей», Дональд Норман
• «Web-дизайн: удобство использования web-сайтов» Якоб Нильсен, Хоа Лоранджер
• «Дизайн пользовательского интерфейса. Искусство мыть слона» Влад Головач http://uibook2.usethics.ru/
• «Информационная архитектура в интернете» Л. Розенфельд, П. Морвиль
• «Ководство», Артемий Лебедев
• «Облик книги», Ян Чихольд
• «Введение в ТРИЗ (теорию решения изобретательских задач)» Генрих Альтшуллер
• Apple OS X HIG
• Apple Mobile HIG
• Microsoft UX Guide
• «Envisioning Information» Edward Tufte
• «Visual Explanations» Edward Tufte
• Н. А. Атабеков. Словарь-справочник иллюстратора научно-технической книги.
• Н. С. Валгина. Синтаксис современного русского языка.
• А. Э. Мильчин, Л. К. Чельцова. Справочник издателя и автора. Редакционно-издательскоеоформление издания.
• О. Ю. Соколова. Секреты композиции. Для начинающих художников
• Г. М. Логвиненко. Декоративная композиция
• О. Л. Голубева. Основы композиции
• Р. В. Паранюшкин. Композиция
• Н. М. Сокольникова. Изобразительное искусство: Основы композиции. 5 — 8 классы. Часть 3
• И. Б. Ветрова. Неформальная композиция: от образа к творчеству
• Л. П. Дыко. Основы композиции в фотографии
• Дэн Маргулис. Photoshop для профессионалов. Цветокоррекция, ретушь, работа с изображениями в Adobe Photoshop
• О. Буковецкая. Дизайн текста: шрифт, эффекты, цвет
• Я. Чернихов, Н. Соболев. Построение шрифтов
• Альберт Капр. Эстетика искусства шрифта
• Роберт Брингхерст. Основы стиля в типографике
• Иоханнес Иттен. Искусство цвета
• М. Н. Макарова. Перспектива

Раздел 2. Практика

Второй раздел рассказывает на примере как делается дизайн сайта, останавливаясь на конкретных практических нюансах.

Концепция и прототип

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

В любом случае начинать стоит с прототипа. Чаще всего я делаю прототипы на бумаге. На бумаге легко накидать расположение блоков и каркас будущего макета.

Нарисовав прототип, начните его прорабатывать. Двигайтесь от общего к частному и добивайтесь нужного уровня детализации. Используйте метод прогрессивного жпега.

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

Не стоит забывать про модульную сетку. Она помогает сделать красивый ровный макет. Да и верстальщикам потом будет проще.

Какую сетку выбрать? Я советую рисовать сетку в зависимости от нужд. Смысловая объединенность лучше, чем тупое разбиение на колонки. В общих случаях можно использовать сетки blueprint или 960.gs.

Пропорции и экран

Хороший сайт должен одинаково хорошо выглядеть на всех разрешениях монитора. Поэтому я ставлю ширину макета равную 1000px (для разрешения 1024*768, меньше — нет смысла) и стараюсь не выходить за нее. Элементы должны масштабироваться тоже, размеры шрифтов указываются в em, блоки и горизонтали — в процентах.

Масштабируемость

Правильный сайт должен предусматривать возможности роста. Поэтому проектируя меню и блоки контента закладывайте возможности для роста.

Цвет и шрифт

Определившись с концепцией, расположением блоков и меню можно приступать к подбору цвета и шрифтов. В подборе цвета поможет Adobe Kuler (cм. теорию) и сайт http://www.colourlovers.com/.

Хороший дизайн, как правило, базируется на одном-трех шрифтах.

• Основной шрифт
• Шрифт заголовков
• Дополнительный шрифт для меню, слайдеров и других специальных элементов.

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

Взаимодействие

Сайт — это живая и интерактивная система, которая взаимодействует с пользователем. Поэтому сайт должен предусматривать реакцию на действия пользователя. Дизайнер должен ответить на ряд вопросов:

• как будет выглядеть выпадающее меню?
• как элементы будут реагировать на нажатие и наведение?
• каков вид активного элемента (например, выделение раздела, в котором мы находимся) ?

Всеми этими вопросами занимается раздел под названием User Experience.

Ссылки и псеводоссылки

Также не стоит забывать про ссылки. Ссылки всегда подчеркнуты, имеют несколько состояний: нормальный вид, наведение, посещенная ссылка.

К ссылкам необходимо добавлять специальные иконки, если они:

• открывают новое окно
• ведут к скачиванию файла
• ведут на RSS канал

Псведоссылки — это отдельный класс ссылок. Всю информацию по псевдоссылкам можно найти в моем блоге.

Содержание

Кто бы что не говорил, но в сайте главное — это контент и информация. Информация правит интернетом. Задача дизайнера состоит в том, чтобы максимально доступно и удобно донести информацию для посетителя. Другой вопрос о том, какую и как информацию надо донести (прайс-лист или визуальный настрой — это тоже информация).

Поэтому показываем то, как оформляется:

• основной контент;
• H1, H2, H3 заголовки;
• ссылки, псевдо-ссылки;
• списки;
• картинка в тексте;
• таблицы;
• формы.

По поводу рыбы. Не используйте для рыбы различный бред (типа Яндекс Рефератов). Я никогда не ленюсь написать какую-нибудь прикольную рыбу.

Если следовать всем этим пунктам по порядку, то в итоге у нас получится правильный сайт.

Поле для изучения задано. Дерзайте!