Заур Магомедов
Основные правила веб-дизайна

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

20 131 в Веб-дизайн 21

С чего начинается разработка сайта? Правильно, с внешнего оформления или дизайна. Дизайн – это то, что в первую очередь видит посетитель, когда заходит на сайт. Поэтому дизайну при его разработке следует уделить особое внимание.

Вот основные правила, которыми должен руководствоваться дизайнер при разработке макета сайта. Пишу это от себя, как верстальщик. Уж кто, кто, а верстальщик эти правила точно знает.

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

Правила дизайна сайта

Техническое задание (ТЗ)

Прежде, чем приступить к работе обязательно внимательно ознакомьтесь с техническим заданием (ТЗ). Вы должны детально его изучить, вникнуть в каждый элемент, понять в чем суть его интерактивности. Если вы в чем то сомневаетесь, то обязательно проконсультируетесь с руководителем проекта или с самим клиентом. Поверьте, впустую потраченное время, на не правильную прорисовку логотипа или какого либо центрального элемента сайта вам никто не возместит. Вы всегда должны знать возможности вашего верстальщика. Часто случались такие ситуации, когда дизайнер нарисовал, к примеру, видеоплеер с возможностью переключения качества видеопотока, да еще и с превью видеороликов, выстроенных строго под блоком самого плеера. Нет, реализовать конечно можно, но не в той пропорции бюджета и времени, что были озвучены изначально.

Помните всегда о том, что веб-дизайнер должен тесно сотрудничать с верстальщиком, чтобы не случилось различных казусов.

Макет

Уважаемый дизайнер! Если у вас стоит тридцатидюймовый дорогущий монитор, то это вовсе не означает, что вы должны рисовать макет в 3000 px по ширине. Вы должны понимать – вы пока в меньшинстве. У львиной доли посетителей, пришедших на сайт, разрешение экрана будет 1024 – 1920px. Правда сегодня рынок девайсов пользователей интернета завоевывают мобильные устройства, их уже перевалило за 50%. Здесь существуют некоторые правила и стандарты.

Ширина макета указывается в пикселях и должна быть с точностью до одного пикселя, т.е. круглые цифры и никаких там 899 px или 955 px, к примеру. Также это касается всех блоков, которые у нас будут присутствовать в макете: левая, правая колонки, форма авторизации, различные модуля и т.д.

Определяемся  с шириной макета основного блока (контейнера) сайта. Обычно ширину макета подстраивают под самое распространенное разрешение экрана. В последнее время я прошу дизайнера, чтобы он рисовал дизайн по модульной сетке фреймворка twitter bootstrap, шириной 1170px. Когда дизайн нарисован строго по сетке это значительно упрощает верстку.

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

Если сайт будет фиксированным, то обязательно указываем ширину холста чуть шире ширины основного блока (контейнера) сайта и задаем фон – в качестве фона может быть изображение, или просто градиент, или однотонная заливка. Впрочем, о фоне мы еще поговорим.

Читайте также:  Методология БЭМ в примерах

Слои

Все слои в макете должны быть тщательно сгруппированы и подписаны адекватными именами. Помните такое правило: «Если один элемент в макете имеет более двух слоев, то его обязательно следует заключить в общую группу». Вот, к примеру, на сайте есть различные модуля. У каждого модуля присутствует заголовок. Так вот, заголовок в макете имеет два слоя: сам текст названия и задний фон. Таким образом, мы эти два слоя объединяем в общую группу и называем, например, «Заголовок» или «Title». Данная группа также может лежать в родительской группе с названием модуля, т.е. в группе модуля «Новости» лежит подгруппа «Заголовок новости». Исходя из выше сказанного, должна быть некая иерархия групп слоев. Такая группировка очень упрощает жизнь верстальщику. Также не забываем подписывать сами слои, чтобы не было там никаких «Layer1» или «Layer2″…

Слои никогда не должны быть склеены, лучше объединить их в группу, а там уже верстальщик сам разберется, склеивать их или нет.

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

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

Задний фон сайта

Задний фон – основная проблема начинающих дизайнеров, вернее это проблема встает перед верстальщиком. Дизайнер должен понимать, что макет сайта это не просто красивая картинка, это сложный и динамичный сайт, который может растягиваться и сжиматься как по вертикали, так и по горизонтали.

Если вы рисуете картинку на заднем фоне и располагаете ее по центру, то она ни в коем случае не должна иметь обрезанные края. И еще, на заднем фоне всегда должен быть какой то фрагмент однородного фона, который верстальщик может пустить на повторение. Данный фрагмент может быть как однородной заливкой, так и градиентом. Края картинки должны плавно переходить на «нет». Здесь имеется ввиду переход на какой-то однородный фон.

Если в качестве заднего фона используется текстура, то обязательно сохраните один повторяющийся фрагмент для верстальщика отдельным файлом в формате jpg, png или gif.

Текст

Веб-дизайнер при подборе шрифтов для сайта должен учитывать следующее: существуют стандартные шрифты и нестандартные шрифты. Что значит стандартные и нестандартные?

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

Нестандартные шрифты — это шрифты, которые не установлены в операционной системе. Обычно нестандартные шрифты подгружаются в шаблоне сайте посредством правила font-face. Следует иметь ввиду, что использование нескольких нестандартных шрифтов — нежелательно, т.к. нестандартные шрифты увеличивают время загрузки веб-страницы (документа). Весить они могут намного тяжелее стандартных шрифтов. Здесь еще зависит от того, какие начертания шрифтов использует дизайнер — чем больше начертаний, тем тяжелее шрифт. Желательно не использовать платные шрифты, т.к. потом возникают проблемы с их преобразованием для WEB. Для поиска шрифта вполне можно обойтись бесплатными Гугл шрифтами.

Читайте также:  Что делать если фотошоп не видит шрифты?

Если раньше дизайнеры ограничивались стандартными шрифтами, то сегодня, когда прошли времена браузеров ИЕ6 — ИЕ8, дизайнерам дается полная свобода в полете фантазии подбора шрифтов. Если в макете используются нестандартные шрифты, то обязательно приложите их отдельно к макету сайта, или дайте ссылку на гугл шрифты.

Размеры шрифта (кегль) обязательно указываем целыми числами, размеры типа 19,82 px и тому подобное не допустимы. Без необходимости не используйте всякие трансформации и издевательства над шрифтами. Добавите немного головной боли верстальщику.

Желательно не заливать цвет шрифта градиентом. Можно, но только без фанатизма. Лучше все же указать однотонным цветом.

И последнее, что касается шрифтов – никогда не РАСТРИРУЙТЕ текстовые блоки. За данное деяние вам точно оторвут голову, не в буквальном смысле конечно.

О цветовой гамме

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

Активные элементы

Сайт это в первую очередь динамичный ресурс, на котором может быть анимация и будут выполняться различные действия. Например, обязательно следует указывать цвета ссылкам, как активных, так и при наведении (даже желательно нарисовать руку). То же касается любых других активных элементов (кнопки, поля форм, модальные окна и др.). Это все предусматривает дизайнер в своем макете. Поймите, верстальщик не должен об этом думать.

Резюмируем все выше сказанное

  • Тщательно изучите тех. задание;
  • Ширина основного контейнера сайта минимум 1000 px. Не важно сайт резиновый или фиксированный. Сегодня большую популярность получила модульная сетка Twitter Bootstrap — 1170px, используйте ее в своем дизайне;
  • Фиксированному сайту не забываем указать задний фон;
  • Все слои в макете должны быть сгруппированы;
  • Не ленитесь отрисовывать каждый элемент, будь то форма авторизации или форма поиска;
  • Желательно использовать только стандартные шрифты. Нестандартные в умеренных масштабах;
  • Качественно пройдитесь по макету и доработайте все недостающие элементы. Если это сделает верстальщик, то скорее всего сломает весь макет;
  • Дизайнер должен тщательно организовать свою работу, не забывая о том, что после него будут работать другие люди;
  • Подготовить макет для сдачи верстальщику – сохранить макет в формате PSD и скриншот в формате JPEG. Также, следует нарисовать иконку сайта favicon и watermark для фото;
  • Не отключать и не удалять направляющие, т.к. с ними будет работать еще верстальщик;
  • Все блоки на сайте должны быть выравнены строго по пикселям, т.е. полпикселя недопустимо;
  • Чем качественнее нарисован макет, тем качественнее он будет сверстан верстальщиком;
  • Помните, что на ряду с красотой макет должен быть легким, т.е. сверстанный сайт должен быстро загружаться

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

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

До встречи в следующих постах. Удачи!!!

Оцените пост
19 оценок, среднее: 3,16 из 5
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, jQuery, JavaScript, БЭМ, Gulp.
Другие материалы той же категории
Цветовой профиль в фотошопе и его настройка