Веб-дизайн сделан хорошо: отличная редакция

Многие разговоры о веб-дизайне касаются того, что происходит вокруг контента. Скорость страницы, дизайн-системы, поисковая оптимизация, фреймворки, доступность — список можно продолжать и продолжать. Это дает нам в Smashing Magazine много о чем написать, и это здорово, хотя стоит напомнить себе, для чего все это служит.

В этом третьем выпуске нашей серии « Веб-дизайн сделано хорошо » мы оттачиваем бьющееся сердце многих веб-сайтов: контент. Точнее, редакционный контент. Сеть предоставила рассказчикам невероятный набор инструментов для работы, и, будучи иногда полукомпетентным журналистом, я люблю хорошую сенсацию.

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

Reuters склоняется к свайпу

В этом материале о системном расизме в США Reuters формирует контент вокруг свайпов, разбивая историю на небольшие кусочки. Чтение кажется гораздо более целенаправленным, чем при традиционном подходе к прокрутке. Это как переворачивать страницы книги. На мобильном устройстве вы буквально переходите к следующему разделу. Это обеспечивает быструю и немедленную отчетность, не говоря уже о превосходной визуализации данных на дисплее.

Мы живем в мире мобильных устройств. Нет смысла дорожить этим. Да, журнальные развороты имеют определенный класс. Да, представление рабочего стола дает вам больший холст для работы. Реальность такова, что большинство людей будут просматривать то, что вы публикуете, на мобильном телефоне, так что полагайтесь на это. Для аналогичного подхода отлично подходят и эти «кран-стори» из The New York Times и Input . Тем, кто заинтересован в дальнейшем чтении статей о мобильных устройствах, настоятельно рекомендуется «История » легендарного газетного дизайнера Марио Гарсии.

The New York Times скорее показывает, чем рассказывает

Несмотря на все ужасные вещи, вызванные пандемией COVID-19, она, по крайней мере, привела к некоторым потрясающе хорошим репортажам. Эта интерактивная статья New York Times объясняет, как работают маски для лица, переводя читателей на уровень частиц. Вы можете увидеть, как волокна улавливают частицы и почему разные маски имеют разный уровень эффективности. Любой дурак может сделать сложные темы трудными для понимания, но сделать их легкими для понимания? Это отдельная форма искусства.

Здесь задействовано множество элементов. Графика, цвет, анимация — есть даже дополненная реальность, если вам это нравится. То, что так легко могло бы быть сухим, душным сюжетом, воплощено в жизнь. И самое главное, это важная информация. Вот почему Габриэль Джанордоли был признан лучшим дизайнером мира на церемонии вручения наград Общества новостного дизайна 2020 года. Сокрушительный.

The Washington Post визуализирует экспоненциальный спред

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

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

The Marshall Project смешивает медиа

Здесь The Marshall Project представляет нелицеприятную журналистику о системе уголовного правосудия США с элегантностью и сладостно-горькой красотой детского сборника рассказов. В «Зо» сочетаются творческое письмо, яркая иллюстрация, завораживающее повествование и важная история. Это мультимедийная редакция в полном потоке.

Говорят, что песни могут принимать разные формы. То же самое относится и к редакционному контенту в Интернете. То, что вы видите выше, было вдохновлено 96-страничной научной статьей. То, что он смог найти новую аудиторию в качестве онлайн-мультсериала, а затем быть номинирован не на одну, а на две премии «Эмми», является свидетельством преобразующей силы Интернета.

Интерактивный графический роман SBS — не новинка

Говоря о преобразующей силе Интернета, как насчет интерактивной истории. Мы все знакомы с экранизациями фильмов, адаптациями радиоспектаклей, адаптациями мини-сериалов и так далее. Почему бы не адаптировать веб-страницы? Это именно то, что австралийская телекомпания SBS намеревалась сделать с «Лодкой» , интерактивным пересказом рассказа из одноименной книги Нам Ле.

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

Обезьяны-пудинги вокруг

Жаль, что я не наткнулся на это как раз к звуковому изданию этой вдохновляющей серии сайтов. Неважно, теперь оно здесь. Поистине превосходная демонстрация цифровой редакционной статьи The Pudding не столько объясняет Теорему Бесконечной Обезьяны, сколько проживает ее через музыку. Не знаете, что такое теорема об обезьянах? Что ж, чего же вы ждете, страница объяснит бесконечно лучше, чем я. Я буду ждать.

Используя интерактивные примеры из четырех нот, статья вовлекает читателя, а также делает концепцию простой для понимания. В качестве последнего восхитительного штриха, страница сама по себе является живым, продолжающимся экспериментом, случайным образом прокладывая себе путь через все более сложные мелодии. Вы можете ожидать, что примерно через 19 лет он получит «Семь национальных армий». Можно задаться вопросом, сможет ли обезьяна, достаточно долго печатающая на клавиатуре, создать идеальную среду JavaScript. Надежда умирает.

Список обособленно: класс обособленно

Несмотря на все разговоры о визуализации данных, музыке, дополненной реальности и других эффектных инструментах, многое можно сказать о том, как правильно понять основные принципы. Страницы не должны быть веб-эквивалентом Vegas Strip, чтобы привлекать внимание. Список Апарт показывает, что лучше, чем большинство. Его подход к содержанию навсегда останется в моем сердце. Название, иллюстрация, копия, синие гиперссылки. Красивый.

То, что я сейчас понимаю, было тревожно давно, когда я писал о двух ответвлениях «бруталистского» веб-дизайна. Суть того, что я сказал, заключалась в том, что один подход громкий и дерзкий, а другой решительно функциональный. A List Apart показывает красоту последнего, сделанного правильно. Мультимедийный инструментарий — прекрасный актив, но даже сейчас бывают случаи, когда достаточно слов.

Креативное мышление о содержании

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

Однако есть способы творчески подходить к контенту на всех уровнях, от личных блогов до глобальных публикаций. Вот несколько из них:

• Сомневайтесь в своем подходе по умолчанию.
  Мы — существа привычки, в том числе в том, как мы рассказываем свои истории. Потратьте время на то, чтобы сделать шаг назад и спросить: «Как я мог бы сделать это по-другому?» Возможно, фоторепортаж был бы более предусмотрительным, чем статья. Возможно, тепловая карта лучше, чем таблица. Специализация, конечно, важна, но не позволяйте ей скрывать от вас другие, часто дополняющие друг друга способы ведения дел.
• Используйте бесплатные ресурсы.
  Один из величайших даров Интернета — это то, как много в нем потрясающих бесплатных материалов. Типа, на самом деле бесплатно, специально. От фотографии и графического дизайна до инструментов визуализации данных и программного обеспечения для редактирования аудио — ресурсы, необходимые для преобразования вашего контента, находятся всего в одном клике. Наш тег халявы — хорошее место для начала.
• Дайте контенту несколько форм.
  Как особенно хорошо показал The Marshall Project с «The Zo», истории могут найти новую аудиторию, когда они принимают разные формы. Написал статью? Отлично, почему бы не записать аудиоверсию? Подготовили отчет на основе данных? Довольно круто, но так ли круто, как могло бы быть, если бы вы начали вставлять эти числа в D3? Есть только один способ узнать.
• Эксперимент.
  Примеры здесь — лучшие из лучших, но стоит упомянуть, что можно получить огромную пользу, пробуя новые идеи и принимая случайные неудачи, которые это приносит. Итерация является ключом к творческому процессу. Если вы попробуете что-то, и это не сработает, хорошо, неважно. Это единственный способ добраться до того, что работает .

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