Atomic Design: Lay outs, y documentación de Componentes

Dentro de la Diseño centrado en el Usuario (C9/18/6/2021).

Foto de **Startup Stock Photos** en **Pexels**

Atomic Design

Ejemplo de Repositorio y Documentación de Flapjack: https://zeroheight.com/7c774a0f4/p/76dd0d-foundation

En conclusión…

Artículos de Referencia

Atomic Design y Documentación

Dentro de la Diseño centrado en el Usuario (C8/17/6/2021).

Atomic Design

https://zeroheight.com/7c774a0f4/p/98ee49-layout/b/193be2

Ejemplo de Material Design: https://setproduct.com/material

https://assets.uigarage.net/content/uploads/2020/10/unit-ui-kit-thumb.jpg

Librería de Componentes

Estados del Botón (Componentes)

Normal/ Default
Hover
Pressed
Focused (Accesibilidad)
Disabled

Componentes (Button, Input, Checkbox)—Carpetas son páginas. Solo aparece estilo y componentes.

Guías de Estilo

Community>Showcase.

Títulos y párrafos

Botones

Input+label

Grilla/Lay out

Elementos a elección.

En conclusión…

Artículos de Referencia

La metodología del Atomic Design

Resumen: Dentro de la Diseño centrado en el Usuario (C7/16/6/2021).

Attio Design Libraryby Niclas Ernst, https://dribbble.com/shots/11116948/attachments/2717765?mode=media

¿Qué es el Atomic Design?

TIpos de Elementos de Interfaz:

Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field
Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
Containers: accordion

https://zeroheight.com/7c774a0f4/p/98ee49-layout/b/193be2

Material Design: Sistema de diseño de google.

Ejemplo de Material Design: https://setproduct.com/material

https://assets.uigarage.net/content/uploads/2020/10/unit-ui-kit-thumb.jpg

Tipografía y legibilidad en aplicaciones digitales

Letter case and text legibility in normal and low vision https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2016788/

10 Principles Of Readability And Web Typography https://www.smashingmagazine.com/2009/03/10-principles-for-readable-web-typography/

Guide for designing better mobile apps typography https://uxdesign.cc/guide-for-designing-better-mobile-apps-typography-5796495ef86f

Understanding Recommended Font Sizes https://eldertech.org/font-size-apps-for-elderly-people/

A guide to interface design for older adults https://uxdesign.cc/a-guide-to-interface-design-for-older-adults-31109468d46d

Librería de Componentes

https://material.io/components

https://ionicframework.com/docs/components

https://dev.to/abiolaesther_/an-overview-of-the-top-10-vue-ui-component-libraries-in-2021-3dhm

En conclusión…

Artículos de Referencia

https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html
Libro UX – Book: Atomic Design – Brad Frost.pdf
How Atomic Design improves development structures / Artículo por Roberto Moreno Celta

Introducción a Design System: Atomic Design y Branding de Marca

Resumen: Dentro de la Diseño centrado en el Usuario (C6/15/6/2021).

Imagen de Jonathan Saring disponible en **How we Build a Design System**

¿Qué es un Sistemas de diseño?

Design systems were created to bring order into an inevitable entropy. The first design system was introduced by NASA in 1976, and today nearly all large organizations like Uber, Pinterest, Airbnb, or Shopify have such a system to bring consistency into the chaos of more products and teams.

In a nutshell, a design system is a collection of documents, articles, examples, code snippets, screenshots, design guidelines, components, philosophies and other digital assets for a product design company. It’s usually hosted online as a website (public or internal). Think of it as a big knowledge-base that is part UI kit, part documentation with instructions, language and coding guidelines all wrapped up together.

¿Qué elementos tiene un Sistema de Diseño?

Manual de marca y Branding: Branding y Guías de Contenido (Valor y tono).
Valor y Principios: Principios y valores/ Misión/ Objetivos
Componentes:
Código o Tokens:

Documentación
Liberia de Patrones/ UI KIT. De aplicaciones y de sitios web Se presenta y en qué contexto se utiliza. Patrón ha sido probado e retirado. Patrones ui más código. El código ha reivado y etemizado.

Plataformas de Documentación de Design System:

Confluence*
Frontify
Zeroheight
Zeplin

Sistemas de Diseño: Zeroheight

Zeroheight (Ver), es un repositorio para documentar Sistema de diseño. Es un manual de normas gráficas más digitales. Lo guardas ahí, en «foundation» es el manual de marca.

Kara Pernice, senior UX, explica que son los Sistemas de Diseño, y de qué se componen.

https://assets.uigarage.net/content/uploads/2020/10/unit-ui-kit-thumb.jpg

Un sistema de diseño es la única fuente de verdad que agrupa todos los elementos que permitirán a los equipos definir, prototipar y desarrollar un producto. Por lo tanto, un sistema de diseño no es una entrega, sino un conjunto de entregables. Evolucionará constantemente con el producto, con las herramientas y con las nuevas tecnologías.

Para crear un Design System nos basamos en el concepto Atomic Design. Este método, inspirado en los principios de la química, fue ideado por Brad Frost y nos permite construir productos complejos en base a:

Introducción al Atomic Design

Se parte diseñando los componentes, elementos que cumplen una función, por ese se le denominan átomos. Un organismo es una sección que se comportan e la misma forma y se vuelve un patrón. Después vienen las plantillas y se transforma en lay out.

Ejemplo de Átomo a Página.

Figma
Adobe XD
Sketch

Comienzo de Branding

El branding se compone de los elementos tradicionales de diseño, pero contemplando el ámbito digital y las buenas prácticas de este. Elementos a considerar:

Logotipo y sus aplicaciones
Arquetipo de marca
Paleta de colores
Tipografía
Texturas
Imagenes o ilustraciones
Iconografía
Voz y tono

Arquetipo de marca: Brand Archetype test. Ejemplo es Match y cómo construyó su marca. Y Material design. Personalidad de marca. «Voice and tone principles».

Test de Brand Archetype Quiz

Las 20 mejores tipografías de Google Fonts: https://www.awwwards.com/las-20-mejores-tipografias-de-google-fonts.html

Ejemplo de Branding: https://indd.adobe.com/view/c1bed700-690c-493c-b401-5d9e5cb6b6b1

Designing for Senior Citizens | Organizing Your Work Schedule

Vision Changes: Typography for Aging Audiences

Display Content Clearly on the Page

Ejemplo de Voz y tono, Retorno de la inversión http://gammaux.com/blog/2019/09/03/la-importancia-de-definir-la-voz-y-el-tono-de-una-marca/

Atlassian Design System. https://atlassian.design/content/voice-and-tone-principles
Match, Pautas de Contenido y Branding, https://somosmach.frontify.com/d/Q1FatjGuCh2O/branding-comunicacion
Think with Google: https://zeroheight.com/7c774a0f4/p/76dd0d-foundation

Video tutorial creado por Figma, que explica cómo crear Sistemas de DIseño.

En conclusión…

Aside from implementing design systems into your workflow, design systems are a tremendous untapped resource for learning how to create better user experiences and interfaces just by studying them! What better way to understand how to design an e-commerce user flow than from Shopify?!? These are what we call Design Patterns and smart designers know how use these to inform the decisions they make with their own designs. No need to reinvent the UX wheel when the best companies in the world have already paved the way, tested them with actual users and published their UI/UX and product design methodologies online!