Атомарный дизайн
Дизайн
система
для дистанционных курсов
ДИЗАЙН
СИСТЕМА
для дистанционных курсов
Атомарный дизайн — это методология, состоящая из пяти независимых этапов, которые направлены на создание более продуманных и последовательных систем проектирования интерфейсов
Атомарный дизайн — это методология, состоящая из пяти независимых этапов, которые направлены на создание более продуманных и последовательных систем проектирования интерфейсов
Атомарный дизайн состоит из атомов, молекул, организмов, шаблонов и страниц, которые вместе создают эффективные системы проектирования интерфейсов
Атомарный дизайн состоит из атомов, молекул, организмов, шаблонов и страниц, которые вместе создают эффективные системы проектирования интерфейсов
КАК ЭТО РАБОТАЕТ
Атомы
Атомы в химии — это базовые строительные частицы материи.
Атомы интерфейсов служат фундаментом, на котором держатся все пользовательские интерфейсы.
Молекулы
Молекулами называют группы атомов, связанных друг с другом и таким образом приобретающими определенные свойства. В области интерфейсов молекулами являются относительно простые группы элементов, функционирующие вместе, как единое целое.
Организмы
Организмы — это относительно сложные компоненты UI, которые состоят из групп молекул и/или атомов и/или других организмов. Организмы образуют отдельные участки интерфейса.
Шаблоны
Шаблоны — это объекты уровня страницы, которые объединяют компоненты в макет и формируют базовую структуру оформления содержимого.
Страницы
Страницы — это конкретные примеры применения шаблонов. Они показывают, как выглядит UI в сочетании с реальным контентом.
КАК ЭТО РАБОТАЕТ
Атомы
Атомы в химии — это базовые строительные частицы материи.
Атомы интерфейсов служат фундаментом, на котором держатся все пользовательские интерфейсы.
Молекулы
Молекулами называют группы атомов, связанных друг с другом и таким образом приобретающими определенные свойства. В области интерфейсов молекулами являются относительно простые группы элементов, функционирующие вместе, как единое целое.
Организмы
Организмы — это относительно сложные компоненты UI, которые состоят из групп молекул и/или атомов и/или других организмов. Организмы образуют отдельные участки интерфейса.
Шаблоны
Шаблоны — это объекты уровня страницы, которые объединяют компоненты в макет и формируют базовую структуру оформления содержимого.
Страницы
Страницы — это конкретные примеры применения шаблонов. Они показывают, как выглядит UI в сочетании с реальным контентом.
атомы
АТОМЫ
Сетка
Для всех курсов сетка одинаковая
Frame → 1000px x 700px
Grid size → 10px
Columns → 23
Сетка
Для всех курсов сетка одинаковая
Frame → 1000px x 700px
Grid size → 10px
Columns → 23
ЭЛЕМЕНТЫ / Эффекты
Используются для составления и оформления более сложных элементов
ЭЛЕМЕНТЫ / Эффекты
Используются для составления и оформления более сложных элементов
Типографика
Title / Header / Capital / Body / Caption / Comments / Buttons
• Title предназначен для названия курса.
• Header — для заголовков / подзаголовков.
• Numbers — оформление цифр внутри курса.
• Capital выделяет все буквы заглавными.
• Body используется для набора основного контента.
• Caption предназначен для подписей.
• Comments — для комментариев.
• Buttons — для кнопок.

Типографика
Title / Header / Capital / Body / Caption / Comments / Buttons
• Title предназначен для названия курса.
• Header — для заголовков / подзаголовков.
• Numbers — оформление цифр внутри курса.
• Capital выделяет все буквы заглавными.
• Body используется для набора основного контента.
• Caption предназначен для подписей.
• Comments — для комментариев.
• Buttons — для кнопок.
цвета
Primary colors / Rule colors / Accent colors
• Primary colors остаются неизменными во всех курсах — это цвета, которые предназначены для текста, кнопок, навигации.

• Rule colors также присутствуют в курсах всегда и показывают пользователю правильность его действий.
• Color_wrong — ошибка.
• Color_not exactly — ответил не точно.
• Color_truth — все правильно.

• Accent colors можно менять в зависимости от предпочтений.

• Далее цветовые акценты могут расширятся от этих двух производных цветов.
цвета
Primary colors / Rule colors / Accent colors
• Primary colors остаются неизменными во всех курсах — это цвета, которые предназначены для текста, кнопок, навигации.

• Rule colors также присутствуют в курсах всегда и показывают пользователю правильность его действий.
• Color_wrong — ошибка.
• Color_not exactly — ответил не точно.
• Color_truth — все правильно.

• Accent colors можно менять в зависимости от предпочтений.

• Далее цветовые акценты могут расширятся от этих двух производных цветов.
молекулы
МОЛЕКУЛЫ
навигация
Элементы навигации
• Таймлайн показывает пользователь сколько осталось времени на прохождения курса / модуля и на каком этапе он находится сейчас.

• Sliders позволяют пролистывать контент внутри курса. Используются вместе с галереей — набором из нескольких изображений.

• Player предназначен для воспроизведения видео-контента.
навигация
Элементы навигации
• Таймлайн показывает пользователь сколько осталось времени на прохождения курса / модуля и на каком этапе он находится сейчас.

• Sliders позволяют пролистывать контент внутри курса. Используются вместе с галереей — набором из нескольких изображений.

• Player предназначен для воспроизведения видео-контента.
кнопки
CTA / 1_Button / 2_Button / 3_Button / Links
• CTA (Call to action) — кнопка призыва к действия. Самые важные по значению привлекают внимание, всегда выделены акцентным цветом.

• 1_Button — кнопки первичного действия используются в ситуациях, когда пользователь хочет совершить предложенное действие, за которым последует другое действие.

• 2_Button — вторичные кнопки, альтернатива первичного действия, которое предоставляется пользователям. Вторичные кнопки расположены возле первичных, например, «Назад» возле первичной кнопки «Далее», или кнопка «Отмена» возле кнопки «Подтвердить».

• Links — ссылка на источник дополнительной информации или страницу курса.
кнопки
CTA / 1_Button / 2_Button / 3_Button / Links
• CTA (Call to action) — кнопка призыва к действия. Самые важные по значению привлекают внимание, всегда выделены акцентным цветом.

• 1_Button — кнопки первичного действия используются в ситуациях, когда пользователь хочет совершить предложенное действие, за которым последует другое действие.

• 2_Button — вторичные кнопки, альтернатива первичного действия, которое предоставляется пользователям. Вторичные кнопки расположены возле первичных, например, «Назад» возле первичной кнопки «Далее», или кнопка «Отмена» возле кнопки «Подтвердить».

• Links — ссылка на источник дополнительной информации или страницу курса.
Кнопка в действии
Нажмите / наведите мышкой на кнопку
Кнопка в действии
Нажмите / наведите мышкой на кнопку
подсказки
Пояснения / инструкции
• Tips — пояснения к действиям, подсказки, инструкции
на слайдах.

• Reply — ответы на действия пользователя.
подсказки
Пояснения / инструкции
• Tips — пояснения к действиям, подсказки, инструкции
на слайдах.

• Reply — ответы на действия пользователя.
Буллиты
Элементы списка
Помогают выделить главные мысли, сокращают время чтения, делают текст привлекательным и более читабельным.
Буллиты
Элементы списка
Помогают выделить главные мысли, сокращают время чтения, делают текст привлекательным и более читабельным.
Организмы
ОРГАНИЗМЫ
врезки
Дополнительные блоки с информацией
Boxes — область на странице, в которой может находиться текст или другие данные.
врезки
Дополнительные блоки с информацией
Boxes — область на странице, в которой может находиться текст или другие данные.
Интерактивные элементы
Всплывающие элементы при наведении / нажатии
• Tooltips — подсказки, всплывающие при наведении / нажатии на элемент. Всегда сопровождаются пояснением Что нужно сделать пользователю?

• Схемы (scheme) — интерактивные элементы, при нажатии на части которых открывается popup окно с пояснением.
Интерактивные элементы
Всплывающие элементы при наведении / нажатии
• Tooltips — подсказки, всплывающие при наведении / нажатии на элемент. Всегда сопровождаются пояснением Что нужно сделать пользователю?

• Схемы (scheme) — интерактивные элементы, при нажатии на части которых открывается popup окно с пояснением.
Popup окна
Всплывающие окна
Popup окна на весь экран появляются через эффекты Overlay в 80% или 70% и Shading в 50%. Маленькие popup окна появляются в контексте отдельным блоком.
Popup окна
Всплывающие окна
Popup окна на весь экран появляются через эффекты Overlay в 80% или 70% и Shading в 50%. Маленькие popup окна появляются в контексте отдельным блоком.
Alert окна
Модальные окна, которые блокируют работу пользователя с родительским приложением до тех пор, пока это окно не закроют
Всегда появляются через popup окно на весь экран.
Alert окна
Модальные окна, которые блокируют работу пользователя с родительским приложением до тех пор, пока это окно не закроют
Всегда появляются через popup окно на весь экран.
шаблоны
ШАБЛОНЫ
Шаблоны страниц
Шаблоны основного и видео контента при боковом расположении меню
Шаблоны страниц
Шаблоны основного и видео контента при боковом расположении меню
Разделы
Варианты оформления разделов
Разделы
Варианты оформления разделов
Тестирование
Шаблоны проверочных заданий
Все курсы построены на основе геймификации. Сначала пользователь изучает теорию, в ходе работы ему предлагаются пройти задания, ответить на вопросы, угадать / выбрать / найти некоторые объекты, касающиеся данной темы с целью закрепления изученного материала. Каждому типу задания соответствует своя иконка.

• Шаблон Task — всегда информируют пользователя о задании / вопросе
• Задания подразделяются на несколько видов:
• Cards — карточки позволяют перетаскивать элементы в нужную ячейку.
• Choice — пользователь выбирает нужный пункт.
• Chat — диалоги, пользователь выбирает нужный вариант ответа.
Тестирование
Шаблоны проверочных заданий
Все курсы построены на основе геймификации. Сначала пользователь изучает теорию, в ходе работы ему предлагаются пройти задания, ответить на вопросы, угадать / выбрать / найти некоторые объекты, касающиеся данной темы с целью закрепления изученного материала. Каждому типу задания соответствует своя иконка.

• Шаблон Task — всегда информируют пользователя о задании / вопросе
• Задания подразделяются на несколько видов:
• Cards — карточки позволяют перетаскивать элементы в нужную ячейку.
• Choice — пользователь выбирает нужный пункт.
• Chat — диалоги, пользователь выбирает нужный вариант ответа.
Игровые элементы
Использование геймификации
Всплывающие окна всегда появляются через popup окно.

• Points — появляются, когда пользователь ответил на вопрос / выполнил задание.

• Level — уровни поощряют пользователя к прогрессу и открывают новые награды. Появляются по окончанию каждого модуля, далее пользователь переходит к следующему.

• Trophy — выдается в конце успешно пройденного итогового тестирования (в конце курса).

• Results — вариант оформления итогов определенной темы, появляется как следующая страница курса.

Игровые элементы
Использование геймификации
Всплывающие окна всегда появляются через popup окно.

• Points — появляются, когда пользователь ответил на вопрос / выполнил задание.

• Level — уровни поощряют пользователя к прогрессу и открывают новые награды. Появляются по окончанию каждого модуля, далее пользователь переходит к следующему.

• Trophy — выдается в конце успешно пройденного итогового тестирования (в конце курса).

• Results — вариант оформления итогов определенной темы, появляется как следующая страница курса.
Персонажи
Использование геймификации
Используются в диалогах, сопровождают обучающегося на протяжении курса. Варианты с разной мимикой, элементы накладываются сверху. Цвета меняются на встроенные.
Персонажи
Использование геймификации
Используются в диалогах, сопровождают обучающегося на протяжении курса. Варианты с разной мимикой, элементы накладываются сверху. Цвета меняются на встроенные.
страницы
СТРАНИЦЫ
Боковое меню
Пример страниц курса с боковым меню
Боковое меню
Пример страниц курса с боковым меню
Made on
Tilda