5 советов как подготовить Веб дизайн для верстки

Мы не стоим на месте и продвигаемся дальше. Предлагаю вашему вниманию перевод, отличной статьи, подготовленной специально для Хронофаг.ру. Её автор Фило Херман — фрилансер и веб разработчик из Нидерландов. Он уже имеет 9-летний опыт и постоянно работает с дизайнерами, чтобы превратить их дизайны в полностью рабочие сайты или веб приложения. Фило так же успешно разрабатывает плагины на  CodeCanyon, так же он писал уроки для ресурса Nettuts+. Приступим к его советам!

Мои поздравления! Вы только что закончили дизайн сайта, и вам кажется что он уже готов к отправке на верстку. Возможно у вас даже есть знакомый верстальщик или вы хотели воспользоваться одним из этих сервисов по верстке из PSD > HTML… или даже сверстать сайт самостоятельно. Не зависимо от вашего решения, вам стоит помнить о некоторых приемах, которые следует знать даже дизайнеру, когда он подготавливает дизайн для верстки и кодинга.

Совет 01: Идеально выравниваем пиксели

Для нас, кодеров все обстоит примерно так: Как увидели, так и сделали. И большая часть кодеров не собирается интерпретировать для вас ваш дизайн. Если вы закончили рисовать дизайн сайта с не совпадающими отступами (margins, padding), размерами шрифтов или цветом, большая часть разработчиков и программистов сделает в точности то, что вы им переслали. Включая ваши дизайнерские ошибки.

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

[quote style=»1″]Перед отправкой дизайна разработчику, потратьте несколько часов и хорошенько пройдитесь по нему лупой.[/quote]

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

  • Margins —  все отступы элементов должны более менее совпадать с тем, что вы хотите получить по окончанию работы. Если вы хотите чтобы они были 25px у всех элементов, убедитесь, чтобы они были по 25px у всех элементов.
  • Padding  — правило то же что и с отступами. Убедитесь, что отступы внутри полей соответствуют вашим пожеланиям.
  • Шрифты — следите за тем, чтобы шрифт, который вы используете в дизайне соответствовал тому, что нужно сверстать. То же самое касается и размеров. Если текст внутри параграфов должен быть 10px Arial с 18pt line height интервалом между строками, то и сами сделайте так же в макете.
  • Цвета — если вы придерживаетесь точных цветов для шрифта, заднего фона или чего то ещё, убедитесь что вы и сами используете точное цветовое HEX значение.

Не мешает потратить время на настройку правильных направляющих. Направляющие и сетка помогут вам настроить размеры веб макета с точностью до пикселя. Убедитесь что все размеры точны. Вместо того, чтобы рисовать контейнер величиной в 957px, отмерьте точно 960px.

Совет 02: Оставляйте заметки

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


Вот несколько простых способов, как создать заметку (я видел все способы, от документов PowerPoint до ручного написания кистью, на чистом слое). Однако моим любимым способом является самый простой. Используйте инструмент Note Tool в Фотошопе. Ведь именно для этого его и создали. Инструмент Note Tool создает небольшие иконки блокнотов с вложенным текстом. Когда разработчик откроет фаил ему будет очень просто прочитать все заметки дизайнера.

Если вы не используете Фотошоп, чтож, ничего страшного. У большей части графических редакторов, которе я встречал (от Иллюстратора до Fireworks) похожие способы создания записок. Но если такой возможности в вашем редакторе нет, приложите к дизайну текстовой фаил.

Совет 03: Создайте дизайн для интерактива

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

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

  • Выпадающие меню
  • Ссылки/Кнопки При наведении мышкой
  • Картинки и слайдеры
  • Лайтбоксы (Lightboxes)
  • Всплывающие подсказки Tooltips
  • Элементы форм заполнения

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

Совет 04: Держи скрипт в голове

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


Использовать заготовленный скрипт вовсе не плохо! Кажется будто этот совет ограничит вас в креативности, но подумает о следующем: кодировать с заготовленными скриптами займет в 20 раз меньше времени чем все разрабатывать с нуля. Готовые скрипты можно легко адаптировать и редизайнить, а главное, их тысячи тысяч, доступных и бесплатных в гугле.

Совет 05: Изучи технологию для которой делаешь дизайн

Представим, что вы разрабатываете огромный проект. Вы потратили недели экспериментов и работы с этим дизайном и наконец получили от клиента окончательное подтверждение… и вдруг выяснилось, что такой дизайн почти нереально сверстать. А если и реально, это будет стоит в 10 раз больше для бюджета клиента. А все потому что вы делали дизайн сайта без понимания того что можно делать а что нельзя, в данной конкретной области (Flash, HTML, и тд.)


Это самый важный совет, из тех что я могу вам дать: Очень важно, чтобы каждый дизайнер имел хотя бы какое-то представление о платформе, для которой он разрабатывает дизайн. Это может быть как HTML, Flash, PHP или даже устройство вроде телефона или планшета. Как глубоко вы намерены вникать в область дело ваше. Но хотя бы базовое понимание спасет вам массу нервов. Слишком часто я получаю великолепный дизайн, который практически нереально сверстать, потому что он создан без учета законов практичности в конкретной технологии.

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

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

Для примера, если вы разрабатываете дизайн статического сайта, имеет смысл разобраться в основах HTML+CSS. Уже этого хватит для того чтобы принимать более практичные решения при создании дизайна. Чем дизайнер осведомленнее, тем дизайн лучше.

Бонусный совет : Общайтесь!

Вам не нужно предоставлять по 20 страниц руководства к дизайну, но элементарные принципы коммуникации могут оказаться очень важными для успеха в кодировании проекта. Если у вашего дизайна есть особые потребности (должен соответствовать определенным стандартам, или 100% совместимость с IE5,1 и тд) не забудьте сказать об этом разработчику. Выяснение принципиальных требований к проекту ПОСЛЕ верстки обернется дорогой переделкой. А переделывать код вовсе не весело, как вам может быть кажется. Большая часть кодеров с удовольствием переключится на другой проект, чем будет перекапывать готовый код.

Заключение

И последнее: Если вы последуете этим простым советам ваши дизайны не только станут проще для верстки, но и сам дизайн станет проще и лучше. Надеюсь вам понравилась эта статья.

Подключатесь к Хронофагу Вконтакте, Фэисбуке, Гугл+ и в Твиттере, чтобы не пропустить следующие статьи. А так же не забывайте что у нас есть RSS лента.

P.S. Как отыскать нужное вам имя, или подобрать имя для ребенка? На сайте persones.ru вы легко найдете любое женские имена на м, на н, на а другие буквы алфавита. А так же массу другой информации и полезных статей.