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

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

Подскажите, как навести порядок в дизайне? Адрес страницы — antiphish.ru

(Вторая часть. Наводим порядок)


В прошлом совете я описал недостатки вёрстки. В этом — нарисую новую страницу.

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

Сначала размещу ключевые элементы — заголовок, текст, форму запроса:

Получилась довольно простая линейная текстовая страница.

Добавлю иллюстрацию — пример мошеннического письма:

Белое письмо на белом фоне почти не видно. Кажется, что в правом верхнем углу дыра.

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

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

Как делать эскизы вёрстки

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

И вот:

Обратный приём: сначала сделать текстовый прототип, а потом заняться вёрсткой. Так шла работа над промостраницей «Оксфорд-теста»

Форма запроса залипает при прокрутке у верхнего края

А к низу пусть страница зеленеет, чтобы показать, что после обучения наступает безопасность

Остановлюсь на этом. Следующий шаг: наполнить макет настоящим текстом и добавить мелочи вроде контактных данных и необходимых ссылок. Предлагаю перехватить эстафету.

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

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

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

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

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

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

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

2




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

1 Защититься от случайного нажатия «Сдаться» 1 Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 Расскажите о клише и устойчивых выражениях 13