Многие начинающие дизайнеры часами ломают голову на предмет того. как нарисовать дизайн, который понравится заказчику. Как правильно рисовать дизайн. Они порой часами сидят в Photoshop, завороженно смотря на белый лист... Все валится из рук и ничего не получается. Но на самом деле все не так страшно.
Итак. Для начала нужно определиться од какое разрешение экрана пользователя мы делаем наш дизайн. Будет он статичный или резиновый. А может респонсивный?
Статичный дизайн обычно располагается по центру монитора и имеет строго фиксированную ширину с учетом прокрутки. Ниже приведены размеры дизайна в пикселях для различных мониторов:
экран 640 Х 480 - рисуем на 616px.
экран 800 Х 600 - рисуем на 776px.
экран 1024 Х 768 - рисуем на 1000px.
экран 1152 Х 864 - рисуем на 1128px.
экран 1280 Х 1024 - рисуем на 1256px.
экран 1400 Х 1050 - рисуем на 1376px.
экран 1440 Х 900 - рисуем на 1416px.
экран 1600 Х 1200 - рисуем на 1576px.
экран 1680 Х 1050 - рисуем на 1656px.
экран 1920 Х 1200 - рисуем на 1576px.
экран 2048 Х 1536 - рисуем на 2024px.
Самые распространенные размеры 1024, 1280px.
Иными словами, чтобы нарисовать дизайн на экран 1024 - мы должны выбрать размер 1000px, отбросив прокрутку.
Желательно учитывать 2 цифру в размере монитора для 1024 - это 768 - это высота, ширина экрана, главная страница сайта желательно должна отображаться без прокрутки вниз. Угадать это сложнее, так как пользователи имеют разные браузеры, с различными наборами панелей сверху и снизу.
Резиновый дизайн занимает всю ширину любого экрана, подстраивается под него. Обычно резиновые дизайны более простые. Резина достигается путем повторения фона шапки и бекраунда. Самое главное достичь незаметного повтора элементов в шапке, так как порой смешно видеть картины с клонированными пейзажами:) Все приходит с опытом. Рисуя резиновый дизайн - начинайте с самого малого экрана и потом растяните все скажем до 1920px. Посмотрите как все будет смотреться.
Респонсивный, адаптивный дизайн - умеет подстраиваться под любой монитор, мобильное устройство. Он - живой. Он подходит для любого устройства. Т.е раньше делали дизайн под браузер, теперь под устройство.В респонсивном дизайне изменяется размер картинок, текста, различных элементов... Такой дизайн выглядит прекрасно везде и за ним будущее, так как все большее количество людей пользуется смартфонами, мобильными телефонами различных моделей и даже телевизорами для просмотра сайтов:) Если в статичном дизайне все размеры в основном задаются в px. - пикселях, в респонсивном дизайне - строго в %, причем часто это соотношение в % одного элемента, относительно другого.
Все изображения, объекты, видео имеют ширину - { max-width: 100% }. Сайт верстается на самое маленькое устройство, а потом добавляются разные возможности. Достигается все стилями CSS. Начало адаптивным макетам положил Ethan Marcotte в книге - «Responsive Web Design»(http://www.abookapart.com/products/responsive-web-design).
После того как мы определились с размерами, надо подумать о структуре нашего дизайна, используя модульную сетку. Все сайты как правило имеют определенную базовую структуру. Они бывают как правило 1-2-3 колончатыми, т.е левая и правая колонки, средняя колонка-контент. Слева обычно размещают меню, справа рекламу, новости и кому, что в голову взбредет. Сверху обычно расположена "шапка" - верхняя горизонтальная часть сайта, слева в шапке - логотип, справа обычно телефоны и другая контактная информация. Над или под шапкой, а то и в 2 позициях сразу - располагается горизонтальное меню. В самом низу, ниже всех блоков по горизонтали - "подвал" сайта, обычно в нем повторяют верхнее меню, или создают многоколончатое меню с самыми важными разделами сайта, там же копирайт компании, создателей сайта, и информация об использовании материалов сайта, счетчики и прочее... Это условная схема стандартного сайта.
Бывают нестандартные сайты - обычно промо, флеш, где нет колонок, нет жестких привязок к сетке...Мы поговорим о том, что встречается чаще всего.
Определившись со структурой, приступаем к работе. У нас уже выбран новый документ с указанной шириной. В программе Photoshop есть так называемые "направляющие" - обычно это тонкие линии бирюзового цвета по умолчанию. Которые тянуться слева и сверху из-под линеек:) Шкалу линеек для удобства выставим в px. Сначала разметим наш лист по вертикали. Берем направляющую слева и отмеряем первую левую колонку - например 200 px. - вторую выставляем на 200px. справа, по середине остается область для контента. Выставляем теперь по горизонтали. Берем сверху и тянем направляющую на высоту нашей шапки. Это может быть 100, 200 и сколько нужно нам пикселей. Потом, учитывая размер экрана - вторую направляющую до линии подвала. Потом решаем с горизонтальным меню - под - над или оно в шапке-скажем справа. Аналогично разбиваем все остальные элементы внутри. Например отделяем контент и левое и правое меню отступами. Делим шапку на область для логотипа слева, контактов справа и т.д. Делим контентную часть на статьи, определяемся с размерами для картинок. Если вам сложно смотреть на линейку с пикселями - мой совет. На втором слое сделайте заливку из фона-клеточек-как в школьной тетрадке. Поставьте этому слою прозрачность 50-60% и выстраивайте направляющие по этой сетке-шпаргалке:) Потом не забудьте ее отключить, если не отключите не страшно- она будет как водяной знак, если вы ее поставите верхним слоем. Очень удобно.
Когда вы определитесь с модульной сеткой - приступайте к самому дизайну, руководствуясь правилом - от целого к частному, от общего к деталям. Было бы неправильно увлечься рисованием телефона для контактов на белом листе:)
Надо начинать с заливок фоном, цветом больших фрагментов дизайна - шапки, подвала, колонок и переходить к мелочам.
Лучше иметь под рукой логотип, чем оставлять под него пустое место, логотип потом может казаться инородным и его будет сложно подогнать под общий стиль. Поэтому всегда спрашивайте заказчика на предмет предоставления исходника логотипа, хотя бы в .png без фона. Как правило вам надо иметь под рукой программы Corel Draw и Adobe Illustrator, чтобы иметь возможность открыть логотипы векторного формата и вставить их в свой дизайн.
По цветовым схемам можете воспрользоваться сервисом - http://colorschemedesigner.com и подобрать нужные вам сочетания цветов.
Самое главное ничего не бойтесь и успех придет...
Автор AlexsimA
