Сделали страницу для обучающего сервиса по безопасности. Как навести порядок? Вторая часть

x

Сергей Волдохин
9 ноября 2016

Советы почтой каждую неделю

Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:

Вы подписаны на «Советы за неделю»:

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

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

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

Михаил Нозик

	В прошлом совете я описал недостатки вёрстки. В этом — нарисую новую страницу. Для простоты начну с чистого листа. Я не до конца понимаю смысл страницы, поэтому позволю себе некоторые вольности в обращении с текстом, заголовками и иллюстрациями. Сначала размещу ключевые элементы — заголовок, текст, форму запроса:						Антифишинг Первая часть Вторая часть
							Антифишинг Первая часть Вторая часть
	Получилась довольно простая линейная текстовая страница. Добавлю иллюстрацию — пример мошеннического письма:

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

	Конструкция получилась ничего, но сама страница неубедительная. Не хватает подробностей об обучении. Я их не знаю, поэтому добавлю отсебятину.						Как делать эскизы вёрстки
	Кстати, сделать сначала просто красиво — полезный приём, если макет не двигается из-за того, что не получается устаканить между собой вид и содержание. Например, не получается сформулировать текст или подобрать идеальную иллюстрацию. В таких случаях я сначала собираю красивую вёрстку с условно настоящим содержанием, а уже потом дорабатываю текст и полирую иллюстрации. И вот:						Обратный приём: сначала сделать текстовый прототип, а потом заняться вёрсткой. Так шла работа над промостраницей «Оксфорд-теста»
							Форма запроса залипает при прокрутке у верхнего края А к низу пусть страница зеленеет, чтобы показать, что после обучения наступает безопасность
	Остановлюсь на этом. Следующий шаг: наполнить макет настоящим текстом и добавить мелочи вроде контактных данных и необходимых ссылок. Предлагаю перехватить эстафету.

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

Твитнуть

Поделиться

Поделиться

Отправить

	Ваш комментарий			Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа. Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным. Вот такой веб 2.0.

	Имя и фамилия	обязательны полностью для публикации комментария
	Электронная почта	адрес не будет опубликован
	Ваши соображения
	Иллюстрация	гиф или джипег шириной не более 700 пикселей

Похожие советы Типографика в вебе₃₄₈ Модульная вёрстка₉₅ Чередование ритма₆₁ Якорные объекты₄₈

2 •

2 • Как вы используете матрицу эмоций? Как сверстать интерфейс электронного билета на самолёт: фрагмент курса «Типографика и вёрстка» Тексты на иврите и арабском нужно выравнивать по правому и верхнему краю? 2 • Как сверстать новостной этаж: фрагмент курса «Типографика и вёрстка» 1 • 2 • 3 • Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 • 1 • 6 • 4 • Как работать со шрифтами 3 • 4 • Нарушить дизайн-систему или пойти на компромисс с визуальной частью? 3 • Как описать путешествие в рекламной статье? Какие шрифты подходят для газетной вёрстки? 3 • 2 • Фиолетовый цвет в новом дизайне советов не уместен 1 • 2 • Экран ожидания в поликлинике 4 • Вёрстка списков, рост дизайнера под руководством маркетолога, ссылка на создателя и примитивное исполнение техзадания 1 • 1 • Как сделать крутой плакат, в котором сообщается о скидке на товар в новом дизайне? 4 • Куда поставить ссылку: на поля или в текст? 2 • 1 • 1 • 2 • 3 • Стоит ли использовать выворотку в вебе и полиграфии? 1 • 4 • Как сверстать хорошее резюме на русском? 2 • 1 • Как расположить 30 видеороликов? Что делать, если верстальщики отдают кривую вёрстку, как дизайнеру тренироваться в эстетике, в каком направлении дизайна развиваться в 16 лет 1 • 2 • 2 • 2 • 9 • 4 • 3 • 5 • 3 • 5 • 3 • 3 • 9 • 5 • 3 • В презентации много нарушений правил типографики и вёрстки, но при этом она нравится 1 • 1 • 1 • 1 • 1 • Что вы думаете про шрифты Ариал и Вердана для информационного сайта? Влезание в интерлиньяж 4 • 3 • 2 • 3 • 9 • 1 • 2 • 3 • Расскажите о хинтинге шрифтов 5 • Заказчик присылает правки по макету, а я считаю, что они всё испортят :-( 4 • Нельзя просто так взять и сделать модульную страницу из текстовой 1 • 2 • 4 • 2 • У меня афиша. Не знаю, как улучшить. Беспокоит пустое пространство слева 2 • 1 • Что думаете о переносах в вебе? 1 • 1 • 1 • 1 • 2 • Как избежать «эффекта Тильды»? 2 • 2 • Как оформлять инструкцию к продукту? 2 • 1 • 2 • На основе ролика о распознавании инсульта создан плакат. Вторая часть 1 • 4 • 3 • 2 • 5 • В какой программе вы делаете макеты? 7 • Как оформить портфолио маркетологу? 1 • У вас в учебнике по вёрстке написано, что нельзя разрывать текст статьи иллюстрацией 2 • 2 • 5 • Математика в типографике 4 • 5 • 2 • 1 • 3 • 2 • 2 • 2 • 2 • 5 • 2 • 1 • 4 • 1 • 3 • 3 • 5 • Пытаюсь сделать шаблон вёрстки текста для статей про балет 3 • 1 • 2 • 3 • 3 • 1 • 5 • 1 • 2 • 4 • 7 • Мильчин говорит, что разряды в числах нужно отделять пробелом. Как правильно? 1 • 2 • 4 • Как создавался новый сайт бюро. Часть четвёртая: сетка Как создавался новый сайт бюро. Часть третья 1 • Как создавался новый сайт бюро. Часть вторая: раскладка работ 2 • 2 • 1 • Cверстал одностраничный плеер. Вторая часть 3 • 1 • 2 • 3 • 2 • 3 • 3 • 2 • 3 • С подходами к адаптивной вёрстке вроде все уже разобрались, но вот с отображением табличных данных понятно не всё 8 • 3 • 1 • 2 • 4 • 5 • Делаю визитку для хозяина автомастерской. Вторая часть 6 • 4 • 1 • Как делать эскизы вёрстки? 3 • 3 • Что-то можно улучшить? Или всё хорошо? Вторая часть 4 • 3 • 2 • 1 • 7 • 1 • 1 • 5 • 2 • 2 • 6 • Сдала курсач в Школе редакторов 5 • 8 • 1 • Инфографика про губернаторов Иркутской области. Вторая часть 2 • Может быть такое выравнивание или это грубая ошибка? Третья часть 3 • Может быть такое выравнивание или это грубая ошибка? Вторая часть 3 • Почему же на сайтах «Системы Главбух», «Системы Юрист» и «Системы Кадры» именно левая «подмышка»? 3 • 7 • 4 • 3 • 5 • 2 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Четвёртая часть 3 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Третья часть 1 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Вторая часть 1 • 3 • 1 • При создании макета сайта зарылся в детали и упустил самое главное. Третья часть 5 • При создании макета сайта зарылся в детали и упустил самое главное. Вторая часть 4 • 3 • 1 • 4 • 4 • 4 • 2 • 2 • 2 • 8 • 3 • 9 • Расскажите, на что опереться русскому дизайнеру 2 • Что такое выход из прямоугольника? Расскажите об ушках, цитатах и фактоидах 1 • Расскажите о вёрстке главной страницы Как сверстать текстовую страницу? 3 • Как собрать страницу из модулей: с иллюстрациями 4 • Как собрать страницу из модулей: без иллюстраций 2 • Как собрать страницу из модулей: зачем нужна сетка? 1 • Расскажите о вёрстке доминирующих и вспомогательных иллюстраций 3 • Как форма текста влияет на порядок чтения? 2 • Как верстать текстовые блоки с иллюстрациями? 2 • Расскажите о формате и выборе полей 6 • Что такое модульная вёрстка? 8 • Что такое «правило внутреннего и внешнего»? 9 • Как верстать модули с лентами? 2 • Как верстать текстовые блоки? 2 • Что нужно знать о подписях в вёрстке? 2 • О ссылках в вёрстке 2 • Как работают элементы управления в вёрстке 3 • Расскажите об иллюстрациях как базовом элементе 1 • О тексте как базовом элементе 6 • Расскажите о вёрстке заголовков 2 • А каковы базовые элементы вёрстки? 11 • Точка, линия и прямоугольник 3 • 6 • Якорные объекты 6 • 4 • Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 9 • 8 • 4 • 5 • 2 • 4 • 3 • 4 • 1 • 3 • В прошлом совете вы не ответили на вопрос про модульные сетки, а рассказали совсем о другом 4 • 2 • Расскажите о том, как сделать хорошую модульную сетку 3 • Кто вы, Евгений Лучинин? 13 • 1 • Подскажите, пожалуйста, как правильно называть header и footer на сайтах по-русски? 1 • 5 • Артём, пытаюсь не допустить настойчивого предложения сделать выключку текста по ширине в вебе 10 • Заметил, что в Советах вы часто используете капитель 3 • 4 • 3 • Хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора» 3 • Для чего нужна висячая пунктуация в вебе? 6 • 7 • 12 • Сначала я думал, что 12 пунктов — это, может быть, 12 пикселей, но не так все просто 8 •

Как сверстать интерфейс электронного билета на самолёт: фрагмент курса «Типографика и вёрстка» Как сверстать новостной этаж: фрагмент курса «Типографика и вёрстка» Экран ожидания в поликлинике 4 • 1 • Как сделать крутой плакат, в котором сообщается о скидке на товар в новом дизайне? 1 • 4 • 2 • 4 • В презентации много нарушений правил типографики и вёрстки, но при этом она нравится 1 • 3 • 3 • У меня афиша. Не знаю, как улучшить. Беспокоит пустое пространство слева 2 • 2 • 1 • 2 • 2 • 3 • 3 • 2 • 3 • 3 • 1 • 6 • 2 • 4 • Делаю визитку для хозяина автомастерской. Вторая часть 6 • 4 • 1 • Что-то можно улучшить? Или всё хорошо? Вторая часть 4 • 3 • 2 • 1 • 1 • 5 • 2 • 6 • 8 • Инфографика про губернаторов Иркутской области. Вторая часть 2 • Может быть такое выравнивание или это грубая ошибка? Третья часть 3 • Может быть такое выравнивание или это грубая ошибка? Вторая часть 3 • 7 • 4 • 3 • 5 • 2 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Четвёртая часть 3 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Третья часть 1 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Вторая часть 1 • 1 • При создании макета сайта зарылся в детали и упустил самое главное. Третья часть 5 • При создании макета сайта зарылся в детали и упустил самое главное. Вторая часть 4 • 4 • 4 • 4 • 2 • 2 • 2 • 8 • Расскажите об ушках, цитатах и фактоидах 1 • Расскажите о вёрстке главной страницы Как собрать страницу из модулей: с иллюстрациями 4 • Как собрать страницу из модулей: без иллюстраций 2 • Как собрать страницу из модулей: зачем нужна сетка? 1 • Расскажите о вёрстке доминирующих и вспомогательных иллюстраций 3 • Как форма текста влияет на порядок чтения? 2 • Как верстать текстовые блоки? 2 • 8 • 3 •

Как сверстать новостной этаж: фрагмент курса «Типографика и вёрстка» 5 • Пытаюсь сделать шаблон вёрстки текста для статей про балет 3 • 1 • 2 • 3 • Cверстал одностраничный плеер. Вторая часть 3 • 3 • 3 • 1 • 2 • Делаю визитку для хозяина автомастерской. Вторая часть 6 • 4 • 1 • Что-то можно улучшить? Или всё хорошо? Вторая часть 4 • 3 • 2 • 1 • 1 • 5 • 2 • 4 • 5 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Четвёртая часть 3 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Третья часть 1 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Вторая часть 1 • 1 • При создании макета сайта зарылся в детали и упустил самое главное. Третья часть 5 • При создании макета сайта зарылся в детали и упустил самое главное. Вторая часть 4 • 4 • 2 • 2 • Как собрать страницу из модулей: с иллюстрациями 4 • Как собрать страницу из модулей: без иллюстраций 2 • Как собрать страницу из модулей: зачем нужна сетка? 1 • Что такое модульная вёрстка? 8 • 8 • 4 •

Как сделать крутой плакат, в котором сообщается о скидке на товар в новом дизайне? 4 • 5 • В презентации много нарушений правил типографики и вёрстки, но при этом она нравится 1 • Как оформлять инструкцию к продукту? 2 • 5 • 1 • 2 • 2 • 5 • Пытаюсь сделать шаблон вёрстки текста для статей про балет 3 • 1 • 2 • 4 • 7 • Cверстал одностраничный плеер. Вторая часть 3 • 2 • 2 • 2 • 6 • 2 • Что-то можно улучшить? Или всё хорошо? Вторая часть 4 • 7 • 1 • 8 • Как собрать страницу из модулей: с иллюстрациями 4 • Что такое модульная вёрстка? 8 • Как верстать модули с лентами? 2 • Точка, линия и прямоугольник 3 • Якорные объекты 6 • 8 •

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

Невозможно собрать портфолио 1 • 1 • 1 • Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 •