макет

Как сделать макет сайта в Photoshop (общие советы)

Nikel, 25.09.2013

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

Постараюсь в меру своих сил изложить ряд таких требований, относящихся как непосредственно к верстке, так и к типографике, цветовой гамме, графике, а также к оформлению в Фотошопе.

Внимание! Практический пример создания макета вы можете посмотреть здесь.

Общие требования к оформлению макета

  • Макет как правило представляется  в  формате Фотошопа— PSD (Photoshop Document), так как этот графический редактор чаще всего используется для его отрисовки.
  • Применяется цветовая палитра RGB и разрешение  72dpi (экранное разрешение,  с которым изображения выводятся на монитор) нет необходимости использовать большее разрешение, как при печати, иначе увеличивается размер  загружаемых элементов.
  • Помимо разработки макета главной страницы не стоит забывать и о дизайне других  страниц сайта
  • Указывайте как будут выглядеть формы на сайте, в том числе при заполнении.
  • Указывайте возможные изменения элементов меню при наведении курсора, при клике на пункт меню.
  • Не забывайте отобразить изменения внешнего вида ссылки при наведении, нажатии и активном положении ссылки.
  • Каждый элемент макета должен быть расположен на отдельном слое и иметь по возможности осмысленное название.
  • Все элементы, относящиеся к отдельному блоку сайта (например шапке или сайдбару) должны находиться  в одной папке.
  • Предварительно выберите базовые размеры отступов, кнопок, радиусов закруглений.  Используйте специальные инструменты Photosop, позволяющие создавать аккуратные макеты с одинаковыми или кратными расстояниями между блоками. Для данной цели подойдёт сетка и направляющие.
  • Варианты того, каким может быть фон сайта: однотонный цвет; вертикальный или горизонтальный  линейный градиент ; фоновое повторяющееся изображение; фоновое неповторяющееся изображение, которое плавно переходит в однородный цвет. По возможности старайтесь не использовать в качестве фона полноразмерных фотографий , поскольку они  ухудшат скорость загрузки сайта.
  • Если в дизайне сайта необходимо предусмотреть наличие баннеров, то старайтесь по возможности использовать  стандартные размеры(перечислю их ниже)

Screenshot_41

Типографика и шрифты

  • Не нужно делать слишком маленький или слишком большой размер основного текста, оптимальные значения – 12-14px
  • Желательно использовать не более 2-3 шрифтов в дизайне. Чем меньше ваша работа содержит разнородных шрифтов, тем более целостно и гармонично она смотрится. Часто бывает достаточно использовать одну гарнитуру шрифта, используя разные ее начертания.
  • Если вы хотите использовать, допустим, два шрифта, для их гармоничного сочетания  у дизайнеров припасено свое проверенное средство: они пользуются принципом соответствия и контраста. Рассмотрим как это работает. Добавляя второй шрифт нужно следить за тем, чтобы он сильно отличался и избегать похожих шрифтов, чтобы результат не получился слабым и невыразительным.  Но это недостаточный критерий выбора из великого множества существующих шрифтов. Зачастую хорошо работает еще один принцип: два шрифта хорошо выглядят вместе, если они различаясь имеют какой-то похожий элемент, будь то одинаковая высота символа или форма буквы, толщина каких-то элементов. Хорошо сочетаются некоторые шрифты с засечками и без засечек.
  • Не следует основной текст набирать каким-либо экзотическим, трудночитаемым шрифтом. Оставьте его для заголовков. Лучше использовать стандартные(безопасные ) шрифты. К ним относятся:  Arial , Verdana , Courier , Times, Georgia, Tahoma, Arail Black, Trebuchet, Impact, Lucida, Palatino, Arial Narrow, Century Gothic.
  • Текст должен быть хорошо виден:  всегда проверяйте, чтобы он в достаточной степени контрастировал с фоном.
  • Заголовки вы можете делать нестандартными шрифтами, сейчас существуют методы внедрения таких шрифтов. Также убедитесь, что данный шрифт поддерживает русский язык.
  • Чтобы текст хорошо читался делайте междустрочный интервал не менее 150% от размера шрифта(полуторный интервал). Пустые места помогут сконцентрировать внимание читателя на тексте.
  • Никогда не делайте выравнивание по ширине для абзацев текста. На вашем psd-прототипе все может выглядеть отлично, но в реальности при малом количестве текста браузер будет просто растягивать строчку, увеличивая промежутки между словами. Смотрится это так.
    Screenshot_42
  • Разрешается применять всего 2 типа жирности шрифта: нормальный — Regular и полужирный – Bold.
  • Исключена любая деформация используемого шрифта, изменение расстояния между отдельными символами, масштаба по по ширине или высоте , исключен автоматический перенос слов по слогам. Текст должен быть 100% непрозрачный, без использования эффектов наложения (тень, рельеф, свечение, контур и так далее).

Графика

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

Цветовая гамма

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

  • Красный цвет символизирует власть, энергию, страсть в то же время это предостережение о потенциальной опасности (вспомните светофор).На сайте недопустимо чрезмерное обилие красного или использование его в качества фона, так как в больших количествах  он действует раздражающе.
  • Синий цвет ассоциируется с такими категориями как  доверие, безопасность, знания, чистота, порядок. Не имеет негативных значений ни в одной культуре, напротив у многих народов считается священным. приятен для глаз. Хорошо воспринимается в качестве фона, чем объясняется значительное количество сайтов в синей цветовой гамме.
  • Зеленый цвет – символизирует природу, землю, здоровье, поэтому часто используется для создания сайтов доанных тематик. Ассоциируясь с зеленью листвы, считается успокаивающим и поднимающим настроение. В США его значение может также связываться с деньгами.
  • Фиолетовый цвет – возвышенность, тайна, величие. Хорошо подойдет для сайтов, связанных с мистицизмом, религиями, эзотерикой, чем-то загадочным.
  • Коричневый цвет связан с природой, надежностью, спокойствием. Нейтральный гармоничный цвет, который подойдет для сайта практически любой тематики.
  • Серый – символизирует изящество, разум, знания, также является нейтральным.
  • Оранжевый – это энергия, сбалансированность, тепло. Хорошо привлекает внимание. Чрезмерное обилие оранжевого действует угнетающе.
  • Желтый – цвет, который  обычно связывают со счастьем радостью, детьми. В Китае он считается императорским.  Также с детством ассоциируются сиреневый и розовый.
  • Розовый цвет подходит еще и для создания женских сайтов, ассоциируется с гламуром.
  • Черный цвет в ряде культур является цветом смерти и несчастья. Однако, помимо того это  элегантность и изящество. Сайты в темных тонах смотрятсяя очень стильно и хорошо подходят для портфолио, сайтов фотографов (фотографии выигрышно смотрятся на темном фоне),  каких-нибудь  промосайтов. Не стоит использовать темные тона для создания информационных сатов, поскольку темный/черный фон сильно утомляет зрение.

Фиксированный или резиновый макет сайта

Если у вас фиксированный макет, ширина выбирается в соответствии со стандартным разрешением экрана. Необходимо для начала определить, на какое минимальное разрешение  будет рассчитан макет . При этом надо учитывать, что ширина области просмотра браузера будет меньше на величину полосы прокрутки, равной примерно 20px.  Поэтому, например, для разрешения 1024 нужно рисовать макет шириной не более 1004 px, в противном случае мы получаем горизонтальную полосу прокрутки.

Если у вас резиновый макет, придется учесть ряд особенностей:

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

В следующих уроках мы рассмотрим практические примеры создания макетов сайтов в графическом редакторе в соответствии с этими правилами. А сейчас до новых встреч!

1 комментарий


    • Пирокар
      Cancel Replay
    • Сентябрь 6, 2015

    Спасибо, блин это уже конец, а где примеры?. Без примеров и остальных сопроводительных от авторов руководств после статьи мне не справиться!.