< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Веб-дизайн » Основные правила веб-дизайна. Готовим дизайн для верстальщика.

Основные правила веб-дизайна. Готовим дизайн для верстальщика.

Основные правила web-дизайна. Готовим дизайн для верстальщика.

Пост был обновлен: Авг 21, 2016

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

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

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

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

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

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

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

Макет

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

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

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

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

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

Слои

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

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

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

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

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

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

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

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

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

Текст

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

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

Нестандартные шрифты — это шрифты, которые не установлены в операционной системе. Обычно нестандартные шрифты подгружаются в шаблоне сайте посредством правила font-face. Следует иметь ввиду, что использование нескольких нестандартных шрифтов — нежелательно, т.к. нестандартные шрифты увеличивают время загрузки веб-страницы (документа). Если раньше дизайнеры ограничивались стандартными шрифтами, то сегодня, когда прошли времена браузеров ИЕ6 — ИЕ8, дизайнерам дается полная свобода в полете фантазии подбора шрифтов. Если в макете используются нестандартные шрифты, то обязательно приложите их отдельно к макету сайта.

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

Читайте также:  Адаптивный дизайн сайта - так важно ли сегодня? Встречайте адаптивный дизайн блога Zaurmag.Ru

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

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

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

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

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

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

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

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

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

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

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

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

Пост был обновлен: Авг 21, 2016

Заур Магомедов
Заур Магомедов

Верстальщик с огромным опытом работы. Занимаюсь созданием сайтов с 2009 года. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов
голосов: 12, средний бал: 2,17 / 5
Загрузка...

Проверка орфографии

Система Orphus

18 комментариев к статье "Основные правила веб-дизайна. Готовим дизайн для верстальщика."

  • Антон Сен 29, 2015 в 18:09

    Отлично написано. Из своего опыта добавлю, что нужно бить по рукам за заливку букв (не фона, именно букв, с фоном я обычно срез градиента вставляю с помощью background-image, т.к. linear-gradient не везде нормально работает) градиентом где-то, кроме логотипов. Я однажды такое попробовал реализовать — обматерил всё на свете, нормально работает только в Мозилле.

    • Заур Магомедов
      Заур Магомедов Сен 29, 2015 в 19:10

      Почему нет правила заливки текста градиентом? Здорово бы упростило жизнь верстальщикам и дизайнеров бы меньше материли 🙂

      • Антон Сен 29, 2015 в 23:13

        Заур, надеюсь, когда появится CSS4, это добавят)

        • Заур Магомедов
          Заур Магомедов Сен 29, 2015 в 23:25

          Я тоже надеюсь 🙂

  • Лена Дек 12, 2013 в 18:52

    Сегодня мой первый проект отдали в руки программиста. Страшно представить, каково будет его первое впечатление))

    • Заур Магомедов
      Заур Магомедов Дек 12, 2013 в 19:12

      Все в жизни происходит когда то в первый раз :). Все через это прошли…

  • shalachina Сен 09, 2013 в 22:17

    очень неплохо. спасибо)

  • Zloi Июл 01, 2013 в 22:46

    Что за развод с курсом «верстка шаблона» безплатным !! подписываешься а ссылка не работает!!!

    • Заур Магомедов
      Заур Магомедов Июл 01, 2013 в 22:57

      Причем тут статья про веб дизайн? Что конкретно не работает? жалоб до сих пор не поступало.

  • Виктор Мар 14, 2013 в 3:09

    Да, статья что надо. 💡 Если дизайнеры бы выполняли все описанные требования то уверен в вёрстке проблем сократится до минимума. И последующие ошибки и задержки в работе уже будут точно не по вине дизайнера. Буду направлять дизайнеров на вашу статью что бы проверяли свои макеты и если надо могли исправиться и сделать как надо!!!
    Спасибо за статью 😐 , будем ждать новых полезных статей!!!

    • Заур Магомедов
      Заур Магомедов Мар 14, 2013 в 10:10

      Спасибо Виктор! Я данную статью скорее для своих дизайнеров написал, но как ни стараешься им объяснить, тыкая в данную статью — толка нет. Может плохо объясняю, а может они вовсе работать не хотят. В общем очень сложно начинающим дизайнерам довести какой должен быть дизайн для верстальщика. Надеюсь у Вас Виктор это лучше получится.

  • Игорь Фев 16, 2013 в 15:40

    Спасибо, Заур, за очередной полезный пост. Планируете ли Вы делать уроки по созданию шаблона на Joomla.

    • Заур Магомедов
      Заур Магомедов Фев 17, 2013 в 17:50

      Спасибо за отзыв! Конечно планирую. Вот сейчас готовится к выходу бесплатный миникурс по верстке шаблона для Джумла 2.5.

  • Сайидахмед Сайидахмедов Фев 03, 2013 в 12:15

    Салам Заур!
    Даже мне, дилетанту все тут ясно как дважды-два, особенно развеселил юмор про «укушенного верстальщиком дизайнера» 😉 Я думаю, что тоже помещу информацию для изучения нашими начинающими дизайнерами на других ресурсах, естественно с живой ссылкой.
    Да, у меня вопрос-предложение. А нельзя давать дизайнерам какой-либо шаблон psd-макет с правильной разметкой? Ссылку на него указать со статьи или в самой статье поместить. По опыту знаю — людям нравится визуальные подтверждения.

    • Заур Магомедов
      Заур Магомедов Фев 03, 2013 в 23:29

      Рад, что статейка понравилась. На счет, примерного PSD это хорошая идея. Обязательно выложу ссылку на скачивание примера к которому стоит стремиться. А за ссылку активную спасибо!!!

  • Владимир Янв 24, 2013 в 13:50

    Это само собой, конечно)

  • Владимир Янв 24, 2013 в 13:03

    Спасибо за полезную информацию, не первый раз убеждаюсь в том, что делаю всё правильно. Но для тех кто начинает — эта статья принесёт большую пользу. Возможно в ближайшее время выложу у себя на сайте Вашу статью.
    Спасибо ещё раз!

    • Заур Магомедов
      Заур Магомедов Янв 24, 2013 в 13:49

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

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]