Всем привет, меня зовут Женя. Сегодня вам расскажу, как я осмыслил и переосмыслил «новый» дизайн сайта Википедии.
Если лень читать, можно просто глянуть результат: Ссылка на фигму
Немного контекста
Многие уже знают, что недавно на самом любимом ресурсе всех школьников и студентов произошли некоторые изменения впервые за 10 лет. Статья о полном списке изменений уже есть на vc.ru, поэтому не буду подробно об этом писать. Проблема заключается в том, что изменения касаются в основном функционала сайта и мало затрагивают визуал и принципы дизайн-системы.
Действительно, стало немного аккуратнее, свободнее. Панель навигации убрали в бургер, оглавление вынесли в отдельную колонку. Но понимание специфики своего продукта (и её отражение в итоговой дизайн-системе) разработчики не переосмыслили. Поэтому я захотел показать, как должен был выглядеть новый дизайн ключевой страницы Википедии — страницы статьи — в реалиях 2023 года.
Понять специфику
Так как у меня нет ресурсов и времени проверять, на каком основании разработчики поменяли сценарий страницы статьи, то моя работа будет исходить из логики, эмпатии, теории дизайна и сравнительного анализа. И акцентирую внимание я именно на принципах дизайн-системы.
Беря по умолчанию то, что сценарий страницы сделан верно, давайте разберемся, что не так именно с дизайн-системой исходя из специфики продукта.
Итак, Википедия — это общедоступная многоязычная универсальная интернет-энциклопедия со свободным контентом (Взято из Википедии). Очевидно, что главный контент сайта — текстовая информация.
Общедоступность, универсальность, а также популярность Википедии наталкивает на важный вывод — аудитория продукта максимально широка.
Зачем люди заходят на Википедию? Не останавливаясь на локальных целях (получить новое знание, повторить материал и т. д.), перейдём к главному — люди заходят на Википедию, чтобы прочитать текст. Это банально, но очень важно. И задача дизайнера в данном случае — помочь пользователю сделать это максимально быстро и просто.
Принципы дизайн-системы
Специфика помогает выделить основные принципы, на которых должна базироваться дизайн-система:
- Строгая, универсальная сетка и композиционная структура элементов
- Достаточный размер шрифта для комфортного чтения
- Последовательная система акцентов по градации от более важного к менее важному
Сетка и композиция
Здесь я не стал выдумывать велосипед и взял за основу базис нового дизайна Википедии.
Таким образом, ни одна логическая структура не накладывается на другую, все имеет свое законное место.
Шрифт и цвет
Выбор шрифта тут не так важен — подойдёт любой качественный гротеск с хорошими качествами для чтения больших массивов текста — Roboto, Inter, SF Pro и т. п. Я выбрал Inter, потому что первый попался под руку.
Куда важнее размер шрифта для комфортного восприятия широкими слоями населения. Для побочных текстовых блоков я взял базовый размер 16pt и меньше, для текста статьи 19pt.
С цветом интереснее. Понятно, что проектирование строится на белом фоне. Понятно, что буквы должны быть чёрного цвета. А вот как быть с вездесущим синим цветом? На нынешнем сайте синим выделены вообще все элементы взаимодействия. Но это противоречит принципу «Последовательная система акцентов». Поэтому я оставил синее выделение только у тех ссылок, которые ведут на другие статьи Википедии (и немного приглушил этот цвет, чтобы не отвлекал слишком сильно внимание на себя), а другие элементы взаимодействия оставил черными или серыми, основываясь на принципе контекста.
Результат
Дублирую ссылку на Фигму здесь
Какие еще моменты я переосмыслил?
- Облегчил общий стиль. Минимизировал количество разных плашек, линий, цветовых выделений. Основное внимание должно удерживаться на тексте статьи.
- Сделал композицию информационной таблицы более универсальной. Появилось два уровня заголовков, текст идет под заголовком — это позволяет немного увеличить шрифт и длину строки.
- Поменял взаимодействие иллюстраций и текста. Теперь они не расположены, где попало, а находятся между текстовыми блоками, не конфликтуя друг с другом.
Таким образом, я получил целостную систему, которую проще поддерживать, использовать и воспринимать.
а будет редизайн редизайна редизайна Википедии?
Привет Женя, отличная работа
Такой формат ну оочень понравился))
тоже считаю что изменения к лучшему
В старой версии у всех текстовых ссылок единый стиль — в новой надо догадываться, что меню слева кликабельно.
Дизайн этого сайта — чистая функция. И в таких проектах задача дизайнера это улучшить функцию, в данном случае — работу с информацией. Например, сделать картинки в поиске. Это и есть дизайн здесь.
Поэтому твой вариант хуже — выглядит так же, но -1 функция (а должно было быть +++).
Спасибо за комментарий, Евгений🤗. Любой элемент взаимодействия можно обозначить в трёх системах - через цвет, через дополнительный элемент (например, подчеркивание) и через контекст. Задача была снизить когнитивную нагрузку на пользователя, чтобы меньше цветовых пятен давило на зрительные центры и отвлекали от содержания статьи. И поэтому те элементы, которые усредненному пользователю несложно интерпретировать в контексте или по смыслу (в шапке и оглавлении) лишились цвета. Также возникает проблема конфликта - если одним цветом выделять и те ссылки, которые ведут на другие статьи, и те, которые ведут на другой блок в той же странице, и те, которые ведут вообще в другие логические сценарии, то это куда больше может запутать пользователя)