Дизайн веб-страницы с использованием атомарного дизайна

Мне нужно создать веб-страницу с использованием атомарного дизайна. Я не получаю надлежащие учебники в Интернете, чтобы начать.

Пожалуйста, поделитесь демонстрационным проектом, чтобы я мог понять, как реализовать атомарный дизайн.

Источник

3 ответа

вступление

По сравнению с традиционной веб-разработкой, вместо того, чтобы разрабатывать свой веб-сайт постранично, вы разбиваете свою веб-страницу / макет на различные компоненты.

разбить на маленький модуль

Когда они вам нужны для разных страниц, вы можете добавлять эти модули по частям, чтобы структурировать полезные компоненты.

назад на страницу

Быстрый старт

  • Определите свой цвет и шрифты в папке Atom
  • Определите вашу коллекцию ссылок в папке молекул
  • Определите свой верхний / нижний колонтитул в папке Organism
  • Импортируйте свой CSS по атомам -> молекулы -> порядок организма 

/* Atom / links */
a {  
  color: #1EAEDB;
  text-decoration: none; 
}
a:hover { 
  color: #0FA0CE; 
  text-decoration: underline;
}

/* Molecules / header-links */
.header-links { 
  list-style-type: none; 
  padding: 0;
  margin: 0;
}
.header-link { display: inline-block; }

/* Organism / header */
header {
   width: 100%;
   background-color: #222;
   padding: 12px 20px;
}
<header class="header">
   <ul class="header-links">
    <li class="header-link">
      <a href="#">Home</a>
    </li>
    <li class="header-link">
      <a href="#">About</a>
    </li>
   </ul>
</header>

Теперь у вас есть header на вашем сайте, который использует atomic design шаблон! Вы можете попытаться сломать и другие компоненты, используя этот метод.

Источник:

  1. http://bradfrost.com/blog/post/atomic-web-design/
  2. https://uxdesign.cc/atomic-design-how-to-design-systems-of-components-ab41f24f260e
Источник

Прежде всего, я рекомендую книгу "Атомный дизайн" Брэда Фроста, вы можете прочитать ее здесь: http://atomicdesign.bradfrost.com/table-of-contents/

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

Пожалуйста, прочитайте приведенную выше книгу. Это должно ответить на большинство ваших вопросов. Если нет, пожалуйста, задайте более конкретный вопрос.

Источник

Отличный ответ от КТУ, вот и все!

О том, как это реализовать..

Просто хочу добавить свою субъективную точку зрения, поскольку я не нашел точной системы, которая подскажет вам, как действовать, когда вы начнете реализовывать все в коде. Концепция столь же конкретна, как и то, как вы поддерживаете баланс между принципами СУХОГО/ВЛАЖНОГО.

Главное, что можно сказать наверняка, это то, что у вас должна быть папка атомы/молекула/организм.

Например, я все еще спорю о том, следует ли применять строгую политику импорта, при которой компоненты могут импортироваться только с одного уровня ниже в иерархии.

  • Должны ли организмы иметь возможность импортировать атомы? Я не могу вспомнить ни одного примера в природе. Но что еще более важно, это практично! Я говорю да, но некоторые сотрудники думают иначе!

  • Должны ли атомы иметь возможность импортировать атомы? Нет, это кажется неправильным, по крайней мере мне.

  • Следует ли считать значки шрифтами или атомами? Если это субатомные компоненты (шрифты, цвета, интервалы и т. д.), то я могу использовать значки в атоме. Если это атомы, то все, что использует значок и текст, возможно, должно быть молекулой. Так что нет, это непрактично, концептуально значки — это шрифты.

Вот как я сейчас поддерживаю свой атомный дизайн:

Расставьте приоритеты в реализации атомарного дизайна вместе с UX-дизайнером в выбранном им инструменте дизайна, а затем объявите файл дизайна единственным внутренним источником истины.

Даже лучше,

  • экспортируйте атомы непосредственно из онлайн-инструмента дизайна, забудьте о файле theme.js и составляйте оттуда свои молекулы и организмы.
  • Избегайте использования пользовательского кода в папке атомов (если только они не должны быть интерактивными), это позволит вам легко продолжать экспортировать обновленные проекты. (*)
  • не поощряйте использование CSS в любой другой папке, кроме папки атомов (контейнеры с пользовательскими интервалами могут легко появляться время от времени, чтобы соответствовать окончательному дизайну, и вы также можете справиться с ними, если хотите)

Это хорошо работает с использованием Figma -> AnimaApp -> Ваш проект на основе React -> Storybook Connect для Figma.

(*) Я храню «динамические атомы» в отдельной папке, использующей jsx.

  • кнопки,
  • контейнеры, которые отображают детей
  • модальные окна
Источник
Другие вопросы по тегам