Блог Игоря Штанга

Дизайнер Дженсон Камби рассказал о переделке сайта The New Yorker Festival и в частности о том, как поменялась страница FAQ. Было и стало:


festival.newyorker.com/faq/


Автор описывает изменения очень коротко. Я хочу рассказать подробнее, потому что это классный кейс. Итак, что он сделал и почему это хорошо:

1. В старой версии ответы были скрыты за аккордеоном, в новой они все на виду. Страница стала длиннее, но это неважно, потому что скроллить намного легче, чем кликать.


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


3. Основной текст переходит из одной колонки в другую, еще плюс один прием к динамике. Удачное решение для длинного материала.


4. У страницы появился заголовок. Он крупный, красный, набран другим шрифтом, поэтому хорошо контрастирует с основным текстом. В предыдущей версии текстовый контраст был слабым.


5. На контраст работают и картинки. Даже в небольшом размере они заметно отличаются от текста тоном и пластикой.


6. Вопросы набрали строчными буквами, чтобы их было легче прочесть.

Как результат, страница похожа не на панель управления, а на статью.

Делайте как Дженсон.

29 июня начнутся занятия на дистанционной «Большой переверстке», есть несколько свободных мест. Расскажу, что происходит на мастер-классе.

Как устроен процесс

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

На изучение теории и выполнение практики есть два с половиной дня. Это значительно больше, чем на очном мастер-классе, где на практику я даю от 30 до 60 минут. Обсудить задание с другими участниками и со мной можно в групповом чате в Телеграме.

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

Макет можно доделать и в течение мастер-класса показать мне еще раз.

Темы и задания

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

Примеры работ

Ниже несколько обложек, сделанных на прошлом мастер-классе. Это только первый заход, без моих правок:


Алексей Пашкевич


( Collapse )

Наглядность — это такое свойство верстки, которое помогает пользователю вникнуть в суть, не читая текст или читая по минимуму. Взглянул — и всё ясно: о чем идет речь, что самое важное, в каком порядке смотреть, какой из этого вывод.

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

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

Посмотрим, как это работает.

1. Иконки

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




( Collapse )

Беспредложные конструкции прекрасны. Сравните:

С предлогом	Без предлога
Графин из голубого стекла	Графин голубого стекла
Кровь пошла из носа	Кровь пошла носом
Руководство по верховой езде	Руководство верховой езды
Курс по типографике	Курс типографики
Идти по берегу	Идти берегом
Работать по вечерам	Работать вечерами
Лететь на самолете	Лететь самолетом

Алеш Бранднер. Десемантизация беспредложных падежей, их частичная замена падежами с предлогами

Свежая подборка красоты.


1. igorjosif — квартира Игоря Йосифа в Мюнхене. Игорь — основатель блога Urban Jungle и автор одноименной книги.




2. piga_haus — большая старая квартира в Познани, Польша:




3. bureau.slovo — русское интерьерное бюро:




4. alexanderwhitesthlm — агентство недвижимости в Стокгольме:




5. residencemag — шведский интерьерный журнал:




6. solebich — немецкий интерьерный журнал:




7. pro.kresla — московские ребята реставрируют старые кресла и стулья:




8. sklarna — другие московские ребята делают невероятную посуду из стекла:




9. objectpertinence — разные красивые картинки:




10. Магазины винтажной мебели, света и предметов интерьера:
na_4erdake
glav.vintage
tree_house_son
kamorka.workshop
otsek_vintage
ussr_interior_design

Сегодня видосы:

1. Максим Кац. История распада СССР и роль Михаила Горбачёва. Пытаюсь понять, в какой стране я родился.

2. Дмитрий Быков. Русская Одиссея. Что общего между «Одиссеей» Гомера, «Мертвыми душами» Гоголя и «Москвой — Петушками» Ерофеева. Будет интересно, если читали «Москву — Петушки».

3. Кинопоиск. Монтаж в кино за 22 минуты.

Бонус. Люда Сарычева разбирает песню Михаила Шуфутинского.

Задание

Участники переверстывали таблицу, в которой сравниваются симптомы коронавируса, гриппа и простуды ↓ Условия конкурса по ссылке.

Победитель

В конкурсе участвовало 59 человек. Дмитрий Селезнев справился лучше всех и получает билет на дистанционный мастер-класс «Большая переверстка». Вот его работа:




( Collapse )

Впервые в истории мастер-класс «Большая переверстка» пройдет в глобальной компьютерной сети Интернет.




Будет интересно:
— дизайнерам и верстальщикам, которые боятся текста
— редакторам, которые боятся дизайна
— студентам творческих специальностей
— читателям рубрики «Переверстка»

Стоимость:
18 000 ₽ — сотрудник компании, без скидок
15 000 ₽ — самостоятельный участник
12 000 ₽ — студент-очник или участник курса «Типографика и верстка»
Доступно 16 мест.

Еще есть возможность поучаствовать бесплатно. Для этого нужно выиграть конкурс коронавирусных таблиц.

Ответы на вопросы

1. На кого рассчитана «Большая переверстка»?
Мастер-класс будет интересен всем, кто имеет дело с текстом и хочет научиться макетировать и верстать. Прежде всего это графические и интерфейсные дизайнеры, верстальщики, редактора и студенты творческих специальностей. Уровень подготовки — начальный и средний.

2. Я новичок. Подойдет ли мне мастер-класс?
Да. Чтобы выполнять задания, достаточно владеть графическим редактором на базовом уровне.

3. Как проходит практика?
По понедельникам и четвергам студенты получают задание c подробной инструкцией и списком материалов для самостоятельного изучения. По средам и субботам мы обсуждаем результаты практики на вебинаре. В некоторых случаях предусмотрена работа над ошибками и повторный разбор исправленного варианта. Кроме этого, задать вопросы преподавателю и обсудить практику с другими участниками можно в групповом чате в Телеграме.

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

5. Чем дистанционный мастер-класс отличается от очного?
На дистанционном студенты изучают теорию самостоятельно: смотрят видеозаписи и читают статьи. Также на нем больше практических заданий и значительно больше времени на их выполнение.

6. Какие программы понадобятся для практики?
Практика не привязана к определенным программам, подойдет любой графический редактор. Например, Индизайн, Фотошоп, Иллюстратор, Скетч или Фигма.

Подробности и запись: vk.com/pereverstka_online

Знания бывают полезными и бесполезными. Разница в том, что полезные помогают научиться что-то делать, а бесполезные не помогают.

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

Возьмем, к примеру, цветовой круг — одну из самых изящных абстракций в дизайне. Каждая лекция о цвете начинается с рассказа о цветовом круге, всем это кажется правильным. Проблема в том, что цветовой круг сам по себе НИХРЕНА НЕ ПОМОГАЕТ делать хорошие цветовые сочетания. Кто-то должен был это сказать.

Чтобы научить делать цветовые сочетания, можно вообще ни о чем не рассказывать, а дать упражнение. Например, такое: 1) Найдите фотографию, которая вам нравится по цвету. 2) Проанализируйте, какие цвета и оттенки на ней есть, в какой пропорции они сочетаются. 3) Составьте цветовую схему. 4) Сделайте на ее основе плакат, интерьер или модный лук. 5) Повторите несколько сотен раз.

Абстракции очень притягательны, но это не лучший способ обучения.