Encarga o trabaja en proyectos de WordPress a diario

Pide gratis presupuestos a profesionales WordPress y contrata sólo si quieres. Sin compromiso ni intermediarios.

¿Experto WordPress? Gana dinero todos los días creando desde pequeños encargos a grandes proyectos.

Déjanos tu email y te avisaremos en cuanto la plataforma esté disponible.

Responsable del fichero » Daniel Perales Rodríguez. Finalidad » Envío de contenido gratuito y prospección comercial. Legitimación » Es gracias a tu consentimiento. Destinatarios » Tus datos se encuentran alojados de forma segura en mi plataforma de email marketing Mailchimp. Ejerce tus derechos de acceso, rectificación, limitación o suprimir tus datos enviando un email a presupuestowp.com@gmail.com o ante la Autoridad de Control Encontrarás más información en https://presupuestowp.com/legal/

Sistemas de diseño web: 10 mejores ejemplos de design systems en 2019 (UX / UI)

Cuéntame tu proyecto y recibe
presupuestos personalizados GRATIS







He leído y acepto la política de privacidad.



Responsable: PresupuestoWP.com| Finalidad: Responder tus consultas.| Legitimación: Tu consentimiento.| Destinatario y Almacenamiento: Gmail, empresa de Google LLC. acogida a Privacy Shield.| Derechos: Acceder, rectificar, limitar y suprimir tus datos.| Si lo deseas, tienes más información en la política de privacidad.


2KbrhOc

Si está empezando a crear su propio sistema de diseño, un poco de inspiración visual puede ser de gran ayuda.

Es por eso que en este post, hemos reunido los 10 mejores sistemas de diseño de marcas de fama mundial.

Definición ¿Qué es un sistema de diseño?

Un sistema de diseño ayuda a todos en su negocio a mantener la consistencia de la marca.

Es una colección de pautas que explican cómo deben utilizarse los activos de su marca en la comunicación diaria y en los esfuerzos de marketing.

Cómo crear un sistema de diseño web

Un sistema de diseño generalmente consiste en directrices generales de marca, uso de color, tono de marca y voz, tipografía, patrones y cualquier otro elemento visual que ayude a transmitir los principios de su marca.

Ejemplos de sistemas de diseño web

Utilícelos como inspiración y como material de aprendizaje para ayudarle a crear un sistema de diseño cohesivo para su propio negocio y marca.

01. Material Design system

Material

Material es un moderno sistema de diseño desarrollado por Google.

El sistema de diseño en sí mismo es un tesoro de guías útiles y herramientas útiles que pueden ser utilizadas por los desarrolladores de aplicaciones para diseñar una aplicación que se adhiera al estilo Material, así como cualquier otra persona que quiera crear un diseño moderno y de moda.

Encontrará un selector de paleta de colores, pautas de tipografía, mejores prácticas de diseño de iconos, la capacidad de crear un tema de material oscuro y mucho más.

https://material.io/

02. Fluent design system

Fluent

El sistema de diseño Fluent fue desarrollado por Microsoft y su objetivo es crear simplicidad y coherencia a través de sistemas de
diseño abierto desarrollados para todas las plataformas.

Se centra en unir los fundamentos del diseño basado en principios, la innovación tecnológica y las necesidades de los clientes.

El sistema se basa en cinco componentes clave: luz, profundidad, movimiento, material y escala.

También presenta directrices para el desarrollo de aplicaciones para dispositivos Windows, Android e iOS.

https://www.microsoft.com/design/fluent/#/

03. Shopify Polaris design system

Polaris

Shopify Polaris fue desarrollado para que todos los comerciantes de Shopify pudieran disfrutar de una gran experiencia y beneficiarse de un hermoso diseño de tienda.

Este sistema de diseño tiene directrices para crear cada parte de la experiencia Shopify; desde las pantallas de administración hasta la experiencia del producto y varias aplicaciones para Shopify.

Cubre el contenido, los componentes, el diseño y las pautas de los patrones.

También encontrará enlaces útiles a herramientas de terceros que pueden servirle de inspiración o ayudarle a aprender a diseñar eficazmente para Shopify.

https://polaris.shopify.com/

04. Mailchimp design system

Mailchimp

Mailchimp siempre es citado como uno de los mejores ejemplos para una detallada guía de voz y tono de marca de la compañía, pero también tienen un sistema de diseño bastante completo que se centra en una biblioteca de patrones.

Usted puede encontrar pautas detalladas para los colores, botones, mensajes de alerta, y todos los demás aspectos de su plataforma de marketing.

Además, las directrices tienen muchos ejemplos y explicaciones que desglosan los conceptos más importantes.

https://ux.mailchimp.com/patterns/color

05. Atlassian design system

Atlassian

Atlassian es una compañía de software australiana mejor conocida por su aplicación de seguimiento de problemas, Jira.

Su sistema de diseño no sólo describe cómo utilizar su logotipo, los colores de su marca, las fuentes y otros elementos de diseño, sino que también deja que su personalidad de marca brille a través de ellos.

Con nombres de colores como Dragon’s Blood y Herky Jerky, es fácil ver por qué describen su estilo como audaz, optimista y práctico con un guiño.

https://www.atlassian.design/

06. Apple design system

Apple

El sistema de diseño de Apple está pensado para facilitar el diseño de aplicaciones y el conjunto de productos de Apple, pero hay mucho que aprender y admirar en su guía de estilo.

Para empezar, puedes descargar los iconos SF que complementan la fuente del sistema para los dispositivos de Apple.

También encontrará directrices e instrucciones para el diseño de UX, para hacer más accesibles las aplicaciones y los accesorios.

https://developer.apple.com/design/

07. IBM Design Language

IBM Design language

El principio rector del sistema de diseño de IBM es la creación de bonos.

Su sistema de diseño va más allá de documentar sus directrices de estilo y el uso de los activos de la marca; también comparten su filosofía, así como una galería llena de ejemplos de su sistema de diseño en acción.

El sistema de diseño en sí mismo cubre colores, tipografía, logotipos, iconos, pictogramas, fotografía y movimiento.

https://www.ibm.com/design/language/

08. AirBnB design system

AirBnB

AirBnB comparte una visión global de su sistema de diseño a través de una serie de artículos que profundizan en las decisiones que hay detrás de cada elección de diseño, así como ejemplos prácticos de aplicación y lecciones aprendidas de ello.

La característica principal de su lenguaje de diseño es que cada componente puede vivir por sí solo como una entidad separada e incluso evolucionar más, a la vez que forma parte de una unidad cohesiva más grande, comparando su sistema de diseño con un organismo vivo y respiratorio.

https://airbnb.design/building-a-visual-language/

09. Uber design system

Uber

Uber describe su marca como una marca nueva y audaz, y su sistema de diseño hace un excelente trabajo al retratar esos principios.

El sistema de diseño cubre la totalidad de los visuales de su marca, desde el uso del logotipo hasta el color, la composición e incluso la fotografía y el movimiento.

El sistema de diseño de Uber gira en torno a la elegante simplicidad y la sutil recreación de la famosa U siempre que sea posible.

https://brand.uber.com/

10. Lightning Design System

Lightning Design System

Por último, Salesforce desarrolló el Lightning Design System como una forma de mantener todo unificado y de fácil acceso para cualquiera que diseñe para la plataforma.

En lugar de centrarse en los píxeles, el sistema de diseño se centra en la lógica de la aplicación, la experiencia del usuario, las interacciones y los flujos.

Encontrará directrices y ejemplos detallados que cubren no sólo las directrices de diseño, sino también los problemas de accesibilidad y los planos de los componentes.

https://www.lightningdesignsystem.com/