Советы начинающему веб-дизайнеру. Тенденции современного веб-дизайна.
На сегодняшний день тема веб-дизайна набирает популярность. Всё чаще мы видим предложения о том, чтобы обучится веб-дизайну, нам предлагают различные курсы по веб-дизайну, уроки и статьи и много другое. Если вы начинающий веб-дизайнер, то это статья для вас, так как в ней будет рассказываться о тенденциях современного веб-дизайна, а также вы найдёте здесь несколько советов.
Содержание
- Что нужно начинающему веб-дизайнеру?
- Как веб-дизайнер должен работать с клиентом?
- С чего начать создание макета? Как работать с графическим редактором?
- Проблемы начинающих веб-дизайнеров
- Обзор программ для создания веб-дизайна
- Шрифты и картинки для веб-дизайна
- Современный веб-дизайн
Что нужно начинающему веб-дизайнеру?
В первую очередь веб-дизайнер должен обладать хорошим вкусом и развитой фантазией, для того, чтобы работы, которые он будет создавать, были оригинальными и отличались друг от друга. Часто бывает, что работы веб-дизайнера похожи друг на друга. Это не всегда правильно, но при наличии такого явления, можно выделить особый стиль веб-дизайнера. Итак, первый совет, конечно, стоит работать над своим особым стилем, но при этом создавать оригинальные макеты сайтов.
Хороший веб-дизайнер это человек, который хорошо знаком с редакторами векторной и растровой графики. Обзаведитесь графическим планшетом. Если вы хорошо рисуете на бумаге, то вы с лёгкостью сможете пользоваться графическим планшетом при создании дизайна сайта. Хотя многие профи не используют в своей работе графических планшетов, так как современный веб-дизайн имеет определённые требования, о которых вы прочитаете далее. Но всё же если вы будете пользоваться графическим планшетом, то вам будет намного проще работать с программой, при создании, например, логотипов.
Как веб-дизайнер должен работать с клиентом?
Итак, представим себе, что у вас появился заказ на разработку макета сайта. В данном случае мы не будем уточнять тематику сайта, так как следующие советы могут подходить для любого вида или типа сайта.
Первое, о чем вы должны подумать – это ТЗ (техническое задание). ТЗ – это такого рода список того, что нужно сделать в макете сайта. Это некий защитный документ, который спасёт вас от неадекватного клиента. Его необходимо составлять. Тут есть несколько вариантов. ТЗ предоставляет сам заказчик. Когда у вас есть техническое задание от самого заказчика, в принципе вам нужно только ознакомиться с ним и уточнить детали, если это потребуется.
Если заказчик не предоставляет ТЗ, то вам необходимо составить некую анкету, в которой были бы сформированы вопросы. Отвечая на эти вопросы, клиент сам составит для вас ТЗ, которые вы сможете после обработки корректно составить, дабы получилось полноценное техническое задание. Пример такой анкеты вы можете найти тут.
Кстати, по поводу адекватности клиента, сегодня найти клиента понимающего смысл работы веб-дизайнера не так уж просто. В основном все хотят качество и скорость за небольшую сумму, но иногда всё же удаётся найти человека, который понимает ваш труд и оценивает по достоинству. Поэтому обращайте внимание на адекватность клиента и на то, есть ли у него «синдром Наполеона», если чувствуете неладное, лучше не соглашайтесь работать с ним.
С чего начать создание макета? Как работать с графическим редактором?
Прежде чем начать работать с графическим редактором, нарисуйте набросок на бумаге. Для чего это делать? В первую очередь набросок должен увидеть сам заказчик. Было бы здорово научиться, общаясь с клиентом о техническом задании, в этот же момент делать зарисовку макета. Как, например, когда пострадавший или свидетель описывает преступника, а в этот момент составляется его портрет. Тоже самое и с макетом сайта, сделать так, чтобы заказчик сразу увидел примерную картину того, что может получиться. Или после составления технического задания, вы спокойно добираетесь до своего рабочего места, создаете скетч и отправляете его заказчику на одобрение.
Многие профессиональные веб-дизайнеры после создания скетча, создают прототип сайта. Это своего рода набросок тоже, но уже в графическом редакторе. Здесь веб-дизайнер работает не с цветовой гаммой сайта, а в основном разрабатывается разметка сайта и расположение блоков на сайте. Всё это выглядит в черно-белом цвете.
Работая с графическим редактором, не забывайте оставлять комментарии, которые так необходимы верстальщику. Отмечайте все отступы, все размеры и всё то, что может облегчить верстальщику его работу. Также отмечайте изменение цветов при наведении на пункты меню или кнопки. Это можно сделать, если, например, в макете есть две одинаковые кнопки, т.е. показать изменение цветом, или же просто написать комментарий и указать цвет.
Проблемы начинающих веб-дизайнеров
Для того, чтобы создать макет сайта вы можете использовать любой графический редактор, на котором вам удобнее всего работать, но это касается только разработки макета, что же касается верстки нарисованного макета, то тут нужно учитывать один момент. Случай из жизни: как-то, раз мне скинули макет, созданный в программе Corel Draw. Всё выглядело понятно и довольно таки неплохо, но при верстке этого макета возникли следующие проблемы: я не смог открыть файл, так как у меня не был установлен Corel Draw. Затем веб-дизайнер каким-то не понятным для меня образом сделал так, чтобы я смог открыть этот файл в Photoshop, но тут же появилась еще одна проблема – не было слоев, т.е. я получил только картинку. И сколько не пытался объяснить проблему, так, видимо меня и не поняли. Поэтому я рекомендую, всё же использовать программы, где есть возможность разложения всего макета на отдельные слои, хотя я думаю, что и в Corel Draw тоже есть такая возможность.
Для чего нужно разложение на слои? Для того, чтобы верстальщик смог правильно сверстать ваш макет, ему необходимо знать все параметры, которые применялись при создании макета. Это такие параметры, как цвет блока, цвет шрифта, размер блока, размер шрифта, название шрифта. Также разложение на слои может помочь при работе с картинками. Например, для формы поиска на сайте часто необходимо сделать кнопку в виде лупы, для этого нужно скопировать это изображение и вставить в код. Для того, чтобы сделать это корректно, необходимо отключить все слои, в особенности фоновые, выделить картинку и сохранить ее в формате PNG без фона. Вот для чего нужно разделение на слои.
Обзор программ для создания веб-дизайна
ADOBE PHOTOSHOP. Для начинающих веб-дизайнеров я бы посоветовал начать работу с Photoshop. Отличная программа имеет весь функционал для создания полноценного макета сайта. Версия этой программы не играет большой разницы, но советую, использовать версию не ниже 2015 года. Если у вас есть возможность купить лицензионной продукт, то это будет замечательно, если нет, то скачайте программу бесплатно.
ADOBE MUSE CC. Еще один продукт от Adobe. Предназначен только для создания веб-дизайна. Разработчики убрали всё лишнее из Photoshop и получился продукт под названием MUSE. Из плюсов этой программы можно отметить следующее: создавая макет, можно просматривать сразу изменение размеров объектов при изменении размера окна, т.е. программа создает адаптированные макеты и это можно просматривать в режиме реального времени. Еще одним ярким плюсом является то, что макет можно конвертировать в полноценный HTML код с поддержкой JavaScript и CSS.
Adobe Experience Design. Вышел совсем недавно. Поначалу не было версии для Windows, но на данный момент уже существует. По отзывам некоторых веб-дизайнеров программа не доделана до совершенства, но уже сейчас разработчики работают над исправлением ошибок. Более подробную информацию вы можете найти тут.
Шрифты и картинки для веб-дизайна.
Для того, чтобы ваши работы получались яркими и оригинальными, вам необходимо использовать современные шрифты их можно покупать или скачивать бесплатно. Я перечислю некоторые сервисы:
- ФОТОШОПМАСТЕР – тут можно скачать русские шрифты. Библиотека постоянно обновляется, классный сайт, всем рекомендую.
- PH4 – здесь также можно скачать русские True Type шрифты.
- FONTS-ONLINE – здесь тоже можно скачать русские шрифты.
Также веб-дизайнеру необходимы картинки. Отличный сервис UNSPLASH здесь можно скачать фотографии абсолютно бесплатно и без регистрации. Огромный выбор картинок и удобный поиск по сайту. Правда, сайт не русский, но понятный. Также можно зарегистрироваться и выкладывать свои фотографии.
Современный веб-дизайн
Анализируя современные сайты необходимо выделить некоторые современные явления, которые встречаются на сайтах.
Большие и крупные изображения. Современные сайты наполнены крупными изображениями. Это делается для того, что бы привлекать внимание посетителей сайта и заострять их внимание на определенных вещах.
Минимум текста. На этих больших картинках, как правило, есть текст, расположенный посередине и кнопка, призывающая к действию. Современный пользователь не любит много читать, поэтому создатели сайтов делают так, чтобы была большая картинка, небольшой, но информативный заголовок с комментариями.
Цветовая гамма. Сегодня стало модным использовать яркие цвета, причем сочетания этих цветов могут быть неординарными. Насыщенные цветом картинки, тексты и заголовки – всё это современный веб-дизайн. В своих работах вы можете пользоваться цветовым кругом. Очень удобный инструмент для подбора цветов. Имеет гибкую настройку.
Прозрачность и округлённость. Сегодня на современных сайтах часто используется полупрозрачность объектов, например, при наведении, или же, наоборот, до наведения. Плавное появление и затемнение это тоже современные тенденции, часто видно использование скругления объектов. Хотя, также существует сайты, где все объекты имеют острые углы в сочетании с плавным появлением или исчезновением. В общем, тут уже речь идет о вкусе.
Заключение
Итак, на этом, пожалуй, закончим. В этой статье мы попытались рассмотреть современный веб-дизайн, современные тенденции, рассмотрели графические редакторы, на которых работают веб-дизайнеры. Также рассмотрели вопрос, касающийся шрифтов и изображений для сайта. Осветили некоторые проблемы, с которыми могут сталкиваться веб-дизайнеры и поговорили о том, как нужно работать с клиентом и что нужно для того, чтобы стать полноценным веб-дизайнером.