{"id":14293,"url":"\/distributions\/14293\/click?bit=1&hash=05c87a3ce0b7c4063dd46190317b7d4a16bc23b8ced3bfac605d44f253650a0f","title":"\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0435 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u043d\u0438 \u043a\u043e\u043f\u0435\u0439\u043a\u0438","buttonText":"","imageUuid":""}

Редизайн редизайна Википедии

Всем привет, меня зовут Женя. Сегодня вам расскажу, как я осмыслил и переосмыслил «новый» дизайн сайта Википедии.

Если лень читать, можно просто глянуть результат: Ссылка на фигму

Немного контекста

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

Так выглядит страница статьи после обновления

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

Понять специфику

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

Беря по умолчанию то, что сценарий страницы сделан верно, давайте разберемся, что не так именно с дизайн-системой исходя из специфики продукта.

Итак, Википедия — это общедоступная многоязычная универсальная интернет-энциклопедия со свободным контентом (Взято из Википедии). Очевидно, что главный контент сайта — текстовая информация.

Общедоступность, универсальность, а также популярность Википедии наталкивает на важный вывод — аудитория продукта максимально широка.

Зачем люди заходят на Википедию? Не останавливаясь на локальных целях (получить новое знание, повторить материал и т. д.), перейдём к главному — люди заходят на Википедию, чтобы прочитать текст. Это банально, но очень важно. И задача дизайнера в данном случае — помочь пользователю сделать это максимально быстро и просто.

Принципы дизайн-системы

Специфика помогает выделить основные принципы, на которых должна базироваться дизайн-система:

  • Строгая, универсальная сетка и композиционная структура элементов
  • Достаточный размер шрифта для комфортного чтения
  • Последовательная система акцентов по градации от более важного к менее важному

Сетка и композиция

Здесь я не стал выдумывать велосипед и взял за основу базис нового дизайна Википедии.

Строгое зонирование. Шапка, Панель с заголовком и доп. функционалом. Левая колонка - оглавление, Две центральных - содержание статьи (картинки+текст), Правая - таблица с доп. информацией.

Таким образом, ни одна логическая структура не накладывается на другую, все имеет свое законное место.

Шрифт и цвет

Выбор шрифта тут не так важен — подойдёт любой качественный гротеск с хорошими качествами для чтения больших массивов текста — Roboto, Inter, SF Pro и т. п. Я выбрал Inter, потому что первый попался под руку.

Куда важнее размер шрифта для комфортного восприятия широкими слоями населения. Для побочных текстовых блоков я взял базовый размер 16pt и меньше, для текста статьи 19pt.

С цветом интереснее. Понятно, что проектирование строится на белом фоне. Понятно, что буквы должны быть чёрного цвета. А вот как быть с вездесущим синим цветом? На нынешнем сайте синим выделены вообще все элементы взаимодействия. Но это противоречит принципу «Последовательная система акцентов». Поэтому я оставил синее выделение только у тех ссылок, которые ведут на другие статьи Википедии (и немного приглушил этот цвет, чтобы не отвлекал слишком сильно внимание на себя), а другие элементы взаимодействия оставил черными или серыми, основываясь на принципе контекста.

Результат

Дублирую ссылку на Фигму здесь

В шапке я немного изменил композицию. Решение, где было три точки, а за ними при КЛИКЕ показывалось всего три дополнительных перехода — не обосновано с точки зрения usability.
Теперь иллюстративный материал располагается строго по контейнеру между абзацами. Так статья выглядит аккуратнее и понятнее.
Разделение контейнера статьи на две колонки позволяет совмещать текст и иллюстрацию, но по универсальному шаблону. Да, могут быть подобные разрывы между абзацами, как на скрине, но по крайней мере здесь видна система и такие условности не будут критичны.

Какие еще моменты я переосмыслил?

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

Таким образом, я получил целостную систему, которую проще поддерживать, использовать и воспринимать.

Спасибо за то, что прочитали данный материал!

Мои соцсети: Behance, Dribble, Dprofile, Telegram @esn_9231

0
6 комментариев
Написать комментарий...
Igor Tarasov

а будет редизайн редизайна редизайна Википедии?

Ответить
Развернуть ветку
Владис Сергеев

Привет Женя, отличная работа

Ответить
Развернуть ветку
Влад Волков

Такой формат ну оочень понравился))

Ответить
Развернуть ветку
Жан Жак

тоже считаю что изменения к лучшему

Ответить
Развернуть ветку
Евгений Медведев

В старой версии у всех текстовых ссылок единый стиль — в новой надо догадываться, что меню слева кликабельно.

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

Поэтому твой вариант хуже — выглядит так же, но -1 функция (а должно было быть +++).

Ответить
Развернуть ветку
Евгений
Автор

Спасибо за комментарий, Евгений🤗. Любой элемент взаимодействия можно обозначить в трёх системах - через цвет, через дополнительный элемент (например, подчеркивание) и через контекст. Задача была снизить когнитивную нагрузку на пользователя, чтобы меньше цветовых пятен давило на зрительные центры и отвлекали от содержания статьи. И поэтому те элементы, которые усредненному пользователю несложно интерпретировать в контексте или по смыслу (в шапке и оглавлении) лишились цвета. Также возникает проблема конфликта - если одним цветом выделять и те ссылки, которые ведут на другие статьи, и те, которые ведут на другой блок в той же странице, и те, которые ведут вообще в другие логические сценарии, то это куда больше может запутать пользователя)

Ответить
Развернуть ветку
3 комментария
Раскрывать всегда