От автора: приветствую Вас, дорогой читатель. Начиная свой путь веб-дизайнера, Вы наверняка в огромном количестве встречаете различные семинары, курсы, справочники, книги и уроки веб-дизайна. Однако не каждый может позволить себе обучение стоимостью несколько тысяч рублей. Тем более, что действительно полезные и качественные уроки web-дизайна проводятся только в крупных городах. Какой выход?
Чтобы овладеть профессией веб-дизайнера, успешно применять свои знания на практике и создавать качественный и полезный продукт, зачастую достаточно «проштудировать» различные веб-ресурсы или пройти специализированные видеокурсы, предназначенные для новичков.
Я не то чтобы против очной системы обучения веб-дизайну. Просто считаю, что большинство подобных курсов — просто «размазывание» полезного времени на изучение ненужной для начинающего веб-дизайнера информации, вроде «что такое Интернет» или «как установить Photoshop» (этому уж точно можно научиться самостоятельно).
К тому же, в нашей стране фактически не учат на веб-дизайнеров. То есть, специальность «графический дизайн» есть во многих вузах, однако, из нее выходят полиграфисты, иллюстраторы, декораторы, художники-оформители — кто угодно, только не специалисты по веб-дизайну.
Сегодня мы поговорим с Вами о том, без чего не обходится ни один вводный урок по веб-дизайну с нуля — основных критериях хорошего дизайна: цвете, форме и типографике. Ну и, конечно же, о понятии веб-дизайна.
Что такое веб-дизайн?
Создание любого веб-ресурса начинается с проектирования его интерфейса, который должен быть не только удобным и понятным для пользователя, но и отвечать целям и задачам, что стоят перед сайтом. Несмотря на то, что художественное оформление интерфейса отступает на второй план, его грамотное использование позволит усилить удобство сайта, сделать его запоминаемым и оригинальным.
Если Вы от рождения не обладаете художественным вкусом, не стоит переживать. Главное — знать основы веб-дизайна, а вкус появится с опытом.
Цвет
По умолчанию цвет монитора черный. Основные цвета — красный, синий и зеленый — добавляются к черному и образуют все остальные цвета. Если сложить три основных цвета, получится белый. Такая цветовая модель называется RGB.
Некоторые уроки веб-дизайна с нуля начинаются с описания цветового круга, который является главным помощником любого веб-дизайнера.
Принципы цветового круга
Пары цветов, расположенных друг напротив друга, являются контрастными. Например, фиолетовый с желтым, пурпурный с зеленым, голубой с красным;
контрастные цвета являются взаимно исключающими. То есть, если вы увеличите уровень голубого цвета, это автоматически уменьшит уровень красного. И наоборот;
определенный цвет получается путем смешивания соседних цветов. Например, чтобы получить желтый, нужно смешать зеленый и красный;
любому цвету можно противопоставить не один цвет, а контрастную пару. Так, чтобы повысить значение красного цвета, можно понизить уровень голубого или одновременно понизить значения синего и зеленого.
Небольшой лайфхак: чтобы быстро подобрать контрастный цвет, можно инвертировать цвет любого растрового элемента с помощью команды Ctrl+I.
При выборе цветовой палитры для сайта не забывайте использовать таблицу безопасных цветов, чтобы быть уверенными, что браузер передаст тот или иной цвет правильным образом. Если браузер не может распознать какой-либо цвет, он может смешать несколько близлежащих, что приведет к искажению цветовой гаммы сайта.
Форма.
Все без исключения объекты обладают формой. Мы можем создать объект без цвета или текстуры, но информацию о форме опустить невозможно. Наиболее часто используемыми простыми формами в веб-дизайне являются: линия, прямоугольник, треугольник и круг.
Линия может выполнять две функции: соединение и разделение других объектов. Пример соединения:
Пример разделения:
Прямоугольник. В нем важно подобрать пропорции. Наверняка вы слышали про «золотое сечение» — деление отрезка на части таким образом, чтобы отношение меньшей части к большей было таким же, как отношение большей ко всей длине отрезка. Ниже представлен пример, в котором точка C делит отрезок AB так, что AC:AB= CB:AC.
Так вот, принцип «золотого сечения» соблюдается не только на картинах Леонардо да Винчи, но и во всех областях науки и искусства, в том числе, и веб-дизайне. Считается, что «золотое сечение» порождает гармонию. Например, на фотографии важные объекты должны располагаться на расстоянии 3/8 и 5/8 от края, то есть, в важных зрительных центрах.
Треугольник. Это сложная для веб-дизайна фигура, позволяющая достичь разных эффектов. Зачастую она плохо вписывается в общую картину, однако, при правильном использовании, например, в логотипах, может подчеркнуть надежность и устойчивость компании.
Круг. Как и треугольник, эта фигура хороша в логотипах, иконках и других небольших объектах. В крупных объектах и экранном дизайне круг применяется редко.
Типографика.
Работа веб-дизайнера заключается не только в отрисовке объектов и правильном расположении их в пространстве. Одна из важнейших задач — сделать красивым и удобочитаемым текст, который мы видим на экране монитора.
Различные платформы и браузеры предпочитают показывать шрифты по-своему (что ужасно раздражает как юзеров, так и веб-дизайнеров), поэтому старайтесь использовать безопасные шрифты, которые гарантированно отражаются во всех браузерах.
Кроме этого, в оформлении сайта не рекомендуется использовать более трех шрифтов:
базовый — для основных материалов сайта. Используйте читабельные, простые шрифты с удобным межстрочным интервалом (примерно в 1,5 раза больше высоты символов);
акцидентный — для заголовков. Этот шрифт можно выделить не только размером, но и цветом;
дополнительный — для навигации, важной информации, логотипа меню, цитат и т. д.
На этом пока все. Следующий урок по веб-дизайну будет касаться основ работы с Photoshop.
В заключение хочу сказать, что основы дизайнерского мастерства может освоить каждый. Достаточно лишь обладать желанием, приложить некоторые усилия и выделить время на обучение. Основы веб-дизайна (цвет, формы объектов и шрифты) — это фундамент, на котором должно строиться обучение.
Не поленитесь просмотреть портфолио различных талантливых дизайнеров или сайты известных компаний и обратить особое внимание на вышеперечисленные элементы. Это поможет Вам развить хороший вкус и, возможно, выработать свой собственный стиль.
Подписывайтесь на наши обновления и получайте уроки веб-дизайна первыми. До новых встреч!