x
 
Иван Кострюков
19 августа 2015
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Михаил!

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

Вторая часть.


В прошлый раз мы разобрали ошибки подхода и вёрстки страницы. Теперь попробуем нарисовать хорошую.

Для начала решим для себя, какая информация полезнее для посетителя, и в каком порядке он будет её читать. Например:

  • Заголовок страницы. В нём нужно упомянуть ремонт машин, чтобы я понял, где оказался.
  • Адрес, телефон, время работы. Понадобятся, если возникнут вопросы или решусь поехать.
  • Производители, с которыми работаем. Даёт понять, подходит ли вообще сервис.
  • Услуги, цены, гарантии. Помогают принять решение обратиться.

Я не знаю подробностей работы и цен мастерской и поэтому возьму их из головы.

Разместим на странице крупные элементы, следуя правилу якорных объектов. Важное сделаем побольше и поставим в углы или по краям страницы:

О якорных объектах

Информации уже достаточно, чтобы понять, что если тебе надо поменять свечи в Цивике, то мы поможем. Кстати, красные ссылки заменяют пункты «Услуги» и «Магазин» из верхнего меню в оригинальном макете.

Чтобы помочь посетителю решиться на поездку к нам, распишем некоторые цены:

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

Фотография — якорный объект и поэтому должна располагаться в углу или у края страницы:

О доверии

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

О модульной вёрстке

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

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

За бортом остались фотографии мастерской, новости и соцсети. О них — в следующем совете.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Дима Кудинов
19 августа 2015

Фотографии мастерской, подробный рассказ «о себе», соцсети и прочее такое подобное можно упаковать в отдельную страницу (возможно открывающуюся здесь же, поверх главной), а ссылку на неё приделать к логотипу в левом верхнем углу.

Миша Нозик
19 августа 2015

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

Лена Глубко
20 августа 2015

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

Миша Нозик
26 августа 2015

Лена, не вижу причин не попробовать.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

3 3 1 2




Недавно всплыло

Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 2 Визуализация проявляет 4 Это какие‑то другие пиксели? Как они соотносятся? 2