{"id":2661,"date":"2023-04-17T18:56:00","date_gmt":"2023-04-17T18:56:00","guid":{"rendered":"https:\/\/keruanima.com\/?p=2661"},"modified":"2023-05-15T12:54:32","modified_gmt":"2023-05-15T12:54:32","slug":"7-impresionantes-estilos-de-diseno-de-interfaz-de-usuario-que-debes-conocer-en-el-2023","status":"publish","type":"post","link":"https:\/\/keruanima.com\/en\/diseno\/diseno-web\/7-impresionantes-estilos-de-diseno-de-interfaz-de-usuario-que-debes-conocer-en-el-2023\/","title":{"rendered":"7 impresionantes estilos de dise\u00f1o de interfaz de usuario que debes conocer en el 2023"},"content":{"rendered":"

Hace poco en un proyecto un compa\u00f1ero me comento que para su proyecto hab\u00edan estado usando el glasmorfismo como base para el dise\u00f1o de una aplicaci\u00f3n web, el caso es que estoy acostumbrado a dejarme llevar a la hora de hacer dise\u00f1os y no encerrarme en estilos definidos si no m\u00e1s bien en referencias que cojo como inspiraci\u00f3n. Pero es innegable que estos estilos facilitan y agilizan mucho el dise\u00f1o de cualquier interfaz por contar ya con sus estandares y buenas pr\u00e1cticas que nos sirven de gu\u00eda para dar respuesta a preguntas de estilo.<\/p>\n\n\n\n

En este post quiero hacer una recopilaci\u00f3n de los m\u00e1s importantes, 12 estilos que deber\u00edas conocer si eres dise\u00f1ador porque te pueden salvar cuando te encuentres perdido buscando las bases para el dise\u00f1o UI de tu proyecto.<\/p>\n\n\n\n

\n\n\n\n

Flat design<\/h2>\n\n\n\n
\n
\n
\"\"
fuente de la imagen: wikipedia<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n

El dise\u00f1o plano utiliza elementos planos y de colores s\u00f3lidos para crear una interfaz simple y elegante. Se evitan las sombras y los gradientes, y se utiliza una paleta de colores reducida para lograr un aspecto limpio y minimalista. No confundir con minimal design dado que aunque este relacionado, el minimal design esta m\u00e1s relacionado con el concepto de que menos es m\u00e1s y est\u00e1 m\u00e1s vinculado a la UX.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Material design<\/h2>\n\n\n\n
\n
\n
\"\"
fuente de la imagen: wikipedia<\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n
\n

El dise\u00f1o Material fue creado por Google y se centra en el uso de sombras, capas y efectos de profundidad para crear una apariencia tridimensional en la interfaz de usuario. Utiliza una paleta de colores brillantes y saturados, as\u00ed como iconos y elementos gr\u00e1ficos espec\u00edficos para crear una experiencia de usuario coherente en todas las aplicaciones de Google.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Skeuomorphism<\/h2>\n\n\n\n
\n
\n
\"\"
fuente de la imagen: wikipedia<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n

El esqueumorfismo es una tendencia de dise\u00f1o que utiliza texturas, sombras y luces realistas para imitar objetos del mundo real. Su objetivo es hacer que las interfaces digitales se sientan m\u00e1s tangibles y familiares para los usuarios.<\/p>\n<\/div>\n<\/div>\n\n\n\n

neumorphism<\/h2>\n\n\n\n
\n
\n
\"\"
fuente de la imagen: Dribbble<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n

El dise\u00f1o neum\u00f3rfico es un estilo de dise\u00f1o de interfaz de usuario que se basa en la creaci\u00f3n de elementos que parecen estar en relieve o flotando sobre la superficie, creando una apariencia suave y esponjosa.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Glassmorphism<\/h2>\n\n\n\n
\n
\n
\"\"
fuente de la im\u00e1gen: aesthetics.fandom.com<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n

el glassmorfismo se centra en la creaci\u00f3n de elementos de interfaz que parecen ser transl\u00facidos, como si estuvieran hechos de vidrio o acr\u00edlico. Este estilo utiliza sombras y efectos de iluminaci\u00f3n para crear una apariencia tridimensional y brillante. El objetivo es crear una experiencia de usuario m\u00e1s realista y sofisticada, lo que puede ser especialmente efectivo en aplicaciones de dise\u00f1o o en interfaces de usuario que requieren una alta calidad est\u00e9tica.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n\n\n\n

Aqu\u00ed un bonus con 2 categor\u00edas que no son necesariamente estilos propiamente dicho si no familia que engloba a toda interfaz adaptado a estos sistemas de interfaces muy particulares por su naturaleza.<\/p>\n\n\n\n

Augmented Reality design<\/h2>\n\n\n\n

El dise\u00f1o de realidad aumentada utiliza tecnolog\u00eda de realidad aumentada para crear una experiencia de usuario inmersiva e interactiva. Se enfoca en la creaci\u00f3n de elementos de interfaz de usuario que se integran en el mundo real a trav\u00e9s de la c\u00e1mara de un dispositivo.<\/p>\n\n\n\n

Virtual Reality design<\/h2>\n\n\n\n

El dise\u00f1o de realidad virtual (VR, por sus siglas en ingl\u00e9s) se centra en crear interfaces de usuario para entornos de realidad virtual, donde los usuarios pueden interactuar con objetos y entornos virtuales utilizando dispositivos de entrada, como controles de movimiento o guantes h\u00e1pticos.<\/p>\n\n\n\n

\n\n\n\n

Conclusi\u00f3n<\/h2>\n\n\n\n

Todos los estilos de dise\u00f1o son herramientas que se adaptan mejor a proyectos concretos con caracter\u00edsticas que son afines a las soluciones que proporcionan estos estilos. Es muy buena idea tomarlos como base pero opino que siempre es posible tomarse licencias para dotar de originalidad a nuestros dise\u00f1os e incluso proponer ideas innovadoras o soluciones m\u00e1s adecuadas a problemas que puede que estos estilos por si solos no lleguen a solucionar. Usalos, combinalos con moderaci\u00f3n y crea con un criterio objetivo.<\/p>","protected":false},"excerpt":{"rendered":"

Hace poco en un proyecto un compa\u00f1ero me comento que para su proyecto hab\u00edan estado usando el glasmorfismo como base para el dise\u00f1o de una aplicaci\u00f3n web, el caso es que estoy acostumbrado a dejarme llevar a la hora de hacer dise\u00f1os y no encerrarme en estilos definidos si no m\u00e1s bien en referencias que […]<\/p>\n","protected":false},"author":1,"featured_media":2680,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[43,13,68],"tags":[],"class_list":["post-2661","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-diseno-web","category-ui-y-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts\/2661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/comments?post=2661"}],"version-history":[{"count":7,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts\/2661\/revisions"}],"predecessor-version":[{"id":2679,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts\/2661\/revisions\/2679"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/media\/2680"}],"wp:attachment":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/media?parent=2661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/categories?post=2661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/tags?post=2661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}