Etiqueta: libreria

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).

Foto de Startup Stock Photos en Pexels

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

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