Док — это справочник, который помогает начинающим фронтенд-разработчикам понять нюансы работы в сети, а более опытным дает возможность делиться и обмениваться знаниями.
Работу редакции «Доки» поддерживает Яндекс.
Практикум, а о самом проекте мы писали в одной из предыдущих статей .
Сайт наполняется сообществом, и редакция Doki активно в этом помогает. Но в вебе важно не только грамотно рассказать о каком-то свойстве или параметре, но и показать, как они работают. Мы поговорили с Валей Броницкой, которая отвечает за визуальный контент в «Доке», а также дизайнером интерактивных примеров Светой Коробцевой и иллюстратором Кирой Кустовой.
Они рассказали, как рисуют обложки, иллюстрируют статьи с помощью демо, диаграмм и анимации и как работают над тем, чтобы каждый автор мог создать визуал для своей статьи и не беспокоиться о собственных дизайнерских навыках.
Каковы особенности графики контента для Doki?
Графика контента — это изображения или любые другие визуальные средства, с помощью которых мы можем донести до пользователей полезную информацию.Например, это могут быть фотографии товара в интернет-магазине или инфографика в статье о каком-то исследовании.
Изображение контента должно быть простым и понятным, чтобы его смысл или концепцию можно было передать парой слов.
Визуальным оформлением контента в «Доке» занимается команда из трех человек: Валя делает схемы и анимации, задает общее стилевое направление; Света Коробцева создает дизайн интерактивных примеров — демок, а Кира Кустова рисует иллюстрации для обложек статей.
Перед нашей командой стояла задача создать контентную графику, которая бы отвечала двум критериям: единый стиль и простая масштабируемость.
Условно, если бы вдруг в редакцию поступила сотня новых статей, нам не пришлось бы сходить с ума, пока мы их готовили.
Также было важно, чтобы графика не была скучной и не создавала ощущения, что программирование — это что-то сложное.
В основном мы были сосредоточены на том, чтобы диаграммы действительно помогали и упрощали понимание темы.
На данный момент у нас есть три типа визуальных материалов:
- инфографика: диаграммы процессов и анимация,
- интерактивные демонстрации с примерами кода,
- иллюстрации на обложках.
Диаграммы и инфографика
Диаграммы и инфографика — это не просто иллюстрации или украшения, а самодостаточный источник информации.Здесь важно сохранить ориентацию на логику и упрощение восприятия описываемых сущностей.
Схема в статье о структуре DOM — показать, как выглядит HTML-код Мы уже приступили к сборке схем для редакционных материалов.
У нас есть конструктор диаграмм в Figma, а также подробное описание каждого визуального элемента — какой блок что представляет. У нас есть 16 основных элементов с цветовыми вариациями, и мы объединяем их в узоры.
Вот так выглядит наш схемотехника Со схемами сейчас работают редакторы разделов Доки.
Мы собираем от них обратную связь и совершенствуем дизайнер, чтобы он был удобен для всех.
Мы добавили в конструктор новые элементы и вариативность, описали основные шаги.
Демо-система
Демо — это интерактивные иллюстрации в статьях.Они помогают нам визуализировать то, о чем мы пишем.
Их главное отличие от обычных иллюстраций в том, что их можно трогать.
Пример статьи с демо о координатах .
Если прокрутить страницу по вертикали или по горизонтали, то вы увидите, как оси относительно экрана остаются на месте, но оси относительно документа удаляются вместе с движением прокрутки.
И в этой статье демо иллюстрирует событие нажатия клавиши - вам просто нужно начать вводить любое слово Интерактивная демонстрация элементов кода была идеей, которая лежала на поверхности.
Если говорить что-то о кодировании, то логично показать это не на статической картинке, а на примере кода, встроенного в страницу.
Кроме того, мы сами занимаемся разработкой Doki, поэтому у нас нет ограничений в решениях.
Авторы статей сами собрали первые демки на CodePen .
На тот момент у Doki еще не было сайта, а статьи писались на Notion. Чтобы встроить интерактивный пример кода, его нужно было скомпилировать во внешней песочнице — на codepen.io , repl.it или аналогичные услуги.
Кроме того, для дизайнера, пишущего код, CodePen — очень удобный инструмент, поскольку позволяет сразу увидеть результат. Пока у вас нет системы, которой нужно следовать, и вы находитесь в свободном поиске, это именно то, что вам нужно.
Когда Doka стала веб-сайтом, было решено хранить демо-версии дома, чтобы не зависеть от того, работает или зависает CodePen. Анализировать существующие демо было невозможно, поскольку они были разбросаны по личным аккаунтам авторов статьи.
Когда Света переделала первую большую партию демок и собрала их в одном месте, мы увидели в них закономерности.
Для тех элементов, которые встречались постоянно, нужно было придумать стандартное визуальное решение, чтобы демки выглядели единообразно, а не в духе «кто в лес, кто дрова ищет».
Результатом структурирования демо стала дизайн-система.
Света предложила оформление демо-элементов в едином стиле, не противоречащем стилю Доки, а также описала способы их объединения.
Было важно совместить дизайн и функциональность, а главное — чистый и простой код, чтобы читатели его понимали.
Дизайн-система хранится в Figma. Пока он предназначен только для внутреннего использования, но со временем станет общедоступным.
Нам нужно написать руководство для участников, чтобы они могли сразу создавать демо с использованием нашего дизайна.
Сейчас процесс создания демки выглядит так: автор статьи сам собирает пример кода без дизайна — белый фон, чёрные контуры и всё.
Дальше Света заботится о красоте: добавляет стили, немного оптимизирует код и следит за тем, чтобы между статьями все было согласованно.
Пример демонстрации в CodePen , который я собрал Николай Лопин .
Изначально пример разрабатывался только для этой платформы: здесь нужно убрать код с вкладки CSS, а это возможно только в песочнице.
И вот как она выглядела в доке .
Чтобы встроить демо на сайт, нам пришлось не только перепроектировать его, но и изменить сам принцип его работы.
Что касается демо, то процессы тоже не стоят на месте: у нас есть амбициозный план по созданию библиотеки визуальных решений и написанию документации к ней.
Таким образом, авторы могли сразу же делать демо-версии нашего дизайна.
Дизайнер обложек статей
Изначально у Doki не было дизайна: это был просто справочник на белом фоне.
В результате мы поработали над сайтом с дизайн-студией» Материалист и пошел в сторону яркости, веселья и легкого неона.
Нам пришлось долго выбирать цвета: нам нужно было, чтобы они хорошо смотрелись и отвечали всем условиям доступности для пользователей.
Когда наша команда начала работать над общим стилем проекта, пришла идея использовать цветовое кодирование разделов, которое выполняло бы функцию навигации.
Затем мы перешли к разработке общего стиля иллюстраций.
Первоначально мы работали в достаточно мягких формах.
Мы нарисовали несколько десятков обложек, а потом в процессе работы над дизайном сайта стало понятно, что наш стиль меняется и уже сделанные иллюстрации не очень подходят. 
Наши первые иллюстрации Мы начали разработку нового стиля иллюстрации.
Мы решили, что хотим больше углубиться в «информатику» и загрузить SVG на сайт, чтобы можно было рассматривать картинки как код. Это полезно с точки зрения поддержки быстрых изменений.
Например, благодаря тому, что мы загружаем все иллюстрации в SVG, мы можем что-то перекрашивать пачками.
До — плавные линии и мягкие формы, а после — больше геометрии и узнаваемости.
Нам также нужно было убедиться, что иллюстрации одинаково хорошо смотрелись как в темной, так и в светлой теме.
Кроме того, для одной статьи необходимо было создать набор из четырех иллюстраций — для десктопной и мобильной версии.
Мы хотели остановиться на наборе из двух иллюстраций для одной статьи.
Везде хорошо - и в светлой теме, и в темной.
В результате мы с Кирой разработали оптимальное решение.
Вопрос с темной и светлой темами решился достаточно просто: одна и та же картинка просто накладывается на фоны разных цветов.
Это оказалось очень удачным решением с точки зрения стиля, энергопотребления и эффективности работы.
И нам удалось решить вопрос масштабируемости: мы сделали что-то вроде конструктора из стандартных элементов, которые можно комбинировать между собой.
Все элементы иллюстрации векторные, поэтому их можно легко изменить по форме, размеру и цвету.
Между иллюстрациями есть преемственность: например, мы проработали множество вариантов изображения разных эмоций и положений головы.
Кроме того, у нас есть линейка символов, разработаны основные приемы того, как мы изображаем ту или иную сущность, а также описаны технические аспекты, например, какой процент цветовой заливки использовать в том или ином элементе.
Вариативность элементов иллюстраций к статьям Таким образом мы значительно облегчили себе задачу создания иллюстраций.
Выбранный стиль легко может поддержать любой автор или иллюстратор.
С визуальной точки зрения это хорошо.
Можно сказать, что мы учли художественные, деловые и open source проблемы и нашли оптимальное решение.
В дальнейшем такой конструктор можно будет использовать для создания стикерпаков или даже мерча.
В дальнейшей работе упор делаем на демо: хотим чаще добавлять их в статьи Doki. Кроме того, мы хотим заменить некоторые диаграммы чем-то интерактивным или анимационным.
То есть показывать процесс не в виде пошаговых инструкций со стрелками и подсветкой, а зацикливать его на анимации, где все движется и можно легко понять, как все происходит. Но наша главная цель — повысить степень вовлеченности авторов не только в производство текста, но и графического контента.
Если вам есть что рассказать о веб-разработке, то Приходи к нам .
Теги: #Разработка сайтов #дизайн #Графический дизайн #веб #веб-дизайн #разработка сайтов #веб-разработка #яндекс.
мастерская #дизайн сайтов #doka #doka
-
Ноутбук Thinkpad Nud39Tx От Lenovo
19 Oct, 24 -
Создайте Свой Первый Адаптивный Список
19 Oct, 24 -
Интервью Здорового Человека
19 Oct, 24 -
Пульс Блогосферы Говорит О Блогах
19 Oct, 24
