Tendencias en diseño UX/UI en 2021
En el post de hoy queremos contar algunas de las tendencias en diseño UX/UI de 2021. Es interesante leerlo porque si las utilizáis aplicando también las mejores prácticas de UX, os ayudarán a convertiros en unos buenos diseñadores de experiencias.
Modo oscuro
Ya son muchas empresas que ofrecen al usuario la posibilidad de poner la aplicación en modo oscuro, Ahí juega un papel muy importante el UI, en la que ya hay una tendencia creciente de desarrollo UI para diseños mobile y desktop y que cada vez trabajan más con dar esta opción. Además deben trabajar para resaltar y hace destacar diferentes elementos de diseño con el modo oscuro.
Las ventajas para el usuario que ofrece este modo son:
- Ahorra energía de la batería del dispositivo.
- Reduce el cansancio visual en condiciones de poca luz.
Sombras suaves, capas y elementos flotantes
Esta es otra de las tendencias en diseño UI en la que juega mucho la intensidad en las formas y las capas del diseño web.
Las sombras suaves y los elementos flotantes hacen que el diseño muestre una profundidad en los elementos y que éstos parezcan que están en 3D pero con un efecto suavizado. Este tipo de efecto se suele aplicar en textos, imágenes y vídeos, y se ha demostrado que evocan emociones y sensaciones positivas en el diseño.
Por otro lado, en 2021 también está cogiendo mucha fuerza las capas que permite colocar elementos uno encima de otro y aplicar sombras suaves, para mostrar una profundidad mejorada en el diseño de interfaces. De ese modo, dará la posibilidad de crear un efecto de dibujo y dará una sensación de ligereza gráfica, que se aleja de los diseños clásicos y planos.
Chatbots y asistentes virtuales
Los chatbots y asistentes virtuales cada vez cobran más importancia y se están convirtiendo en una de las tendencias de este año. Es una nueva formar de tomar nota, buscar información y otras cosas. Empresas como Google, Apple y Android ya han implementado esta tendencia de la interfaz de usuario de voz en su proceso de diseño UX/UI.
Esta tendencia es una gran innovación en el diseño web que se centra totalmente en el ser humano. Así que ya podéis considerar implementar el interfaz de usuario voz para consideraros unos líderes en el mercado de diseño de experiencias.
Narración que convence
En 2020 UX se centró mucho en comprender el recorrido de un usuario en la web, pero este año va un paso más allá. Ahora, se trata de dar una narración convincente para vender uno o varios productos de la web.
Por este motivo, UX deberá tener los conocimientos de marketing y comerciales de sus productos.
Esta tendencia UX/UX será popular este año porque:
- Pueden crear conexiones y cercanía con los usuarios con la marca.
- Una buena narración de historias hará que los usuarios memoricen la marca.
- Centrarse en el valor que ofrece el producto te permite crear contenido atractivo.
- Permite traspasar emociones de la marca a través de un producto de la forma más creativa e informativa posible.
- Si conseguís crear experiencias personalizadas a través de la propuesta de contenido comercial conseguiréis que los usuarios se conviertan en clientes satisfechos.
Realidad Virtual
La realidad virtual también es una de las tecnologías que se está convirtiendo en una de las tendencias en diseño UX/UI. Ya hay marcas como Apple que están trabajando en prototipos en RV. Esto significa que se está abriendo un nuevo terreno de exploración muy interesante para los diseñadores.
Glassmorfismo
El glassmorfismo, cuyo nombre original es Glass Morphism, es un efecto de desenfoque de fondo que crea una sensación o apariencia como si viéramos a través de un cristal. Este efecto de “borrones” transparentes se está convirtiendo en una de las tendencias del 2021.
3D ha venido para quedarse
Las imágenes planas ya han cansado a los usuarios y ahora los diseñadores están transformando estas imágenes en efecto 3D. Como ya hemos comentado en uno de los puntos anteriores, esto también se consigue añadiendo profundidad. Sin embargo, queremos destacarlo porque este será un gran reto tanto para diseñadores como developers.
También tendrán que tener en cuenta que al transformar las imágenes, tendrán que seguir respetando el diseño responsive y tratar de optimizar los tiempos de carga.
Y éstas, son las tendencias en diseño UX/UI que hemos querido destacar de este año. Existen otras que aun siguen estando presentes como los degradados de color, las combinaciones de colores vivos, el uso de espacios vacíos si el usuario necesita comprender la información, las las elaboradas producciones fotográficas, textos en negrita y las tipografías gigantes.
¡Esperamos que os resulte útil y no dudéis en compartir vuestras opiniones! 🙂
Figma, herramienta de diseño colaborativa
En Napptilus tenemos una tribu de diseñadores UX/UI que diseñan sobre todo aplicaciones de móvil y web. Para poder realizar su trabajo diario utilizan algunas herramientas indispensables como Zeplin y Sketch. Pero en este último año, una nuestras diseñadoras que trabaja para un proyecto de una gran empresa internacional de retail, ha sustituido Sketch por Figma.
Cómo anteriormente no hemos hablado de Figma, os vamos a contar qué es y los motivos de este cambio.
Qué es Figma
Figma es un programa que ofrece todas las herramientas necesarias para diseñar un proyecto. Sobre todo es ideal para crear interfaces de usuario tanto para web como para móvil. También permite crear prototipos, generar código para el traspaso (hand-off) e ilustrar, aunque para esto último no es la mejor herramienta para ello.
Componentes
Cuando hay un elemento que se deben utilizar en varias pantallas, Figma da la oportunidad de convertirlo en un “componente” para que cualquier cambio que se aplique sobre éste, quede automáticamente actualizado en sus instancias en todas las pantallas.
Además, también permite modificar uno de los elementos específicos de una instancia, sin alterar ninguna más pero a la vez, sin romper la relación entre todas esas réplicas. Esto último, permite que siempre puedan volver a recuperar la copia original.
Aun así, esta funcionalidad también la ofrece Sketch.
Plugins
Si algo ganaba Sketch respecto a Figma, y con un gran argumento, era la posibilidad de instalar plugins en el programa. Pero Figma se ha puesto las pilas y desde este verano ha añadido su ecosistema de plugins.
Además, han dado las herramientas para que crear plugins sea sencillo. Según dicen ellos:
Si sabes crear una web, sabes crear un plugin en Figma.
Y a raíz de eso, la comunidad se ha comprometido y han empezado a desarrollar algunos plugins muy buenos como:
Herramienta colaborativa
Pero lo más potente que tiene Figma es que permite que varias personas puedan colaborar dentro del mismo proyecto simultáneamente y a tiempo real.
Además, siempre se van guardando los cambios en el archivo de forma que los usuarios siempre verán los últimos cambios sin la necesidad de estar siempre sincronizados o de enviarse documentos.
En definitiva, eso ayuda a que varios usuarios puedan trabajar, por ejemplo en el diseño de una app, de forma remota y simultánea, comunicándose entre ellos y avanzando en el resultado.
Últimas actualizaciones
Figma tiene pendiente nuevas actualizaciones que saldrán en breves, y algunas de ellas facilitarán aún más el trabajo de los diseñadores.
A continuación os mostramos un vídeo de una actualización que muchos diseñadores esperan:
Since many of you have asked, we thought we should let the cat out of the bag… pic.twitter.com/3rHtyvtNKy
— Figma (@figmadesign) 23 de setembro de 2019
Por qué el cambio de Sketch a Figma
Nuestra diseñadora Sílvia trabaja en un proyecto muy grande ya que se trata de una empresa internacional, y eso implica que hay muchos empleados implicados, tanto de un lugar como otro.
De ese modo, el equipo de diseño de este proyecto está constituido por Sílvia y varios diseñadores externos.
Esa casuística, hizo que el equipo se viera motivado a sustituir Sketch por Figma. Ambas herramientas son muy parecidas, pero Figma cuenta con el distintivo de que pueden colaborar varias personas en un mismo diseño, estén donde estén. Mientras uno cambia el diseño de una pantalla, otros pueden observar e ir aplicando otros cambios.
Esa colaboración a tiempo real facilita la comunicación y a la vez agiliza los procesos de aprobación y ejecución. Y para un proyecto tan grande y tan innovador que constantemente están cambiando las interfaces, esa herramienta es ideal para optimizar el tiempo.
Si queréis conocer más detalles de esta herramientas, podéis acceder a su web y ver cómo funciona.
Accesibilidad: Buenas prácticas en diseño
Según el Informe Mundial de la Discapacidad de la OMS, realizado en 2011, afirman que una de cada 7 personas aproximadamente tiene alguna discapacidad que le afecta a la hora de interactuar con los dispositivos. Esta discapacidad puede afectar a cualquier edad, puede tener distintas duraciones y tener distintos niveles o grados.
La accesibilidad permite facilitar a todos los usuarios el acceso a las plataformas digitales. Se incluye por usuarios a todos aquellos que también tienen baja visión, ceguera, deficiencias auditivas, cognitivas o motores, o con deterioros situacionales, como por ejemplo cuando tienes el sol de espaldas y no puedes ver correctamente la pantalla.
En Europa, un 13,6% tiene discapacidad visual, un 8,6% discapacidad auditiva, un 27,7% física y un 11,4% discapacidad cognitiva.
En España el 9% de la población tenía una discapacidad en 2008 y el 16,7% de personas con más de 15 años tenía una limitación en la participación social.
Además de estos datos, podemos extraer que todas esas personas son consumidoras potenciales de productos y servicios TIC (Tecnologías de la Información y Comunicación), es decir, tecnologías web, móvil o Smart Speakers, entre otros. Algunas de ellas necesitan tecnologías de apoyo específicas como softwares lectores de pantalla, reconocedores de voz, magnificadores, pulsadores, controles por botón… Y otras, les bastará con tener un contraste de color suficiente, un tamaño de fuente y de controles adecuados, o que se ajuste a sus preferencias del sistema. Todos estos puntos están cubiertos por las pautas WCAG 2.0 y 2.1, los criterios universales de accesibilidad.
En definitiva, la accesibilidad no será sólo útil para aquellos que tengan discapacidad, sino que también mejorará la experiencia de usuario a todas las personas.
Qué es la WCAG
La WCAG (Web Content Accessibility Guidelines) define unos criterios de accesibilidad a nivel universal, a través de los cuales se evalúa el nivel de accesibilidad de un sitio web o de una app. Estos criterios están agrupados en tres niveles de conformidad: A, AA, AAA; siendo A el nivel más básico de accesibilidad, y el AAA el nivel más óptimo.
Su primera publicación fue en 1999, en la que sólo contemplaba la web, y a raíz de allí ha ido evolucionando en función de la aparición y evolución de las nuevas tecnologías. La última actualización ha sido la WCAG 2.1, lanzada en junio 2018, que recoge algunas nuevos criterios respecto a la WCAG 2.0.
En algunos países obligan por ley a cumplir algunos de estos criterios. Por ejemplo, Israel obliga que las aplicaciones móviles cumplan el nivel AA de la WCAG 2.0. Y ahora también se suma Europa, que con la norma EN 301 549, la Directiva europea obliga que a partir del 23 de junio 2021, por lo menos las apps del sector público cumplan el nivel AA de la WCAG 2.1.
Para validar si tu web cumple los requisitos de Accesibilidad, existen diferentes documentos que facilitan la validación de los criterios a cumplir de la WCAG. Un ejemplo sería el presentado por WebAim.
En el caso de ser tu app, Apple y Android han definido sus propias buenas prácticas de acuerdo con las guías de accesibilidad, aunque muchas de ellas ya están incluidas en la WCAG 2.1. También cada uno ofrece sus herramientas de validación del nivel de accesibilidad, siendo Accessibility Inspector Tool para iOS y Test de Accesibilidad para Android.
Buenas prácticas de Accesibilidad
Para aplicar buenas prácticas de Accesibilidad es recomendable que estén sincronizados los equipos de desarrollo, diseño y marketing.
A continuación vamos a detallar algunas buenas prácticas:
Textos alternativos
Todos los elementos de la aplicación deben estar etiquetados a nivel de código para que cualquier lector de pantalla pueda saber sus significados.
Los atributos de un elemento:
- Label: Identifica el elemento sin mencionar el rol. Ej: guardar, añadir,…
- Trait: Define el rol del elemento, indica cómo el elemento se comporta o cómo debe ser tratado. Ej: botón, texto estático,…
- Hint: Añade una descripción de la acción si la funcionalidad no se explica por sí sola.
- Value: Define el estado o valor del elemento si es necesario.
Agrupación de contenido
Los elementos que pertenecen a un mismo grupo, como pueden ser las listas, deberían estar agrupadas para poder mejorar la contextualización.
De ese modo, el lector de pantalla leerá los elementos por grupos y el usuario no perderá el contexto.
Áreas clicables
Los elementos clicables deben tener una área lo suficientemente grande para poder interactuar con ellos.
Navegación lineal
Los usuarios que usan tecnologías de apoyo (como VoiceOver en iOS y Talkback en Android) recorren los elementos de la pantalla deslizando el dedo de izquierda a derecha, o en caso de leer la pantalla, el orden que seguirá para leerla.
Por ese motivo, se debe poder acceder a todos los elementos de forma lineal. El orden sugerido del foco de los elementos es de izquierda a derecha y de arriba a abajo.
Cambios en la fuente
- Usar fuentes dinámicas para que el usuario pueda modificar el tamaño desde sus preferencias del sistema. Asegurar que se puedan leer todos los textos igualmente, sin cortes ni superposiciones.
- Poner textos suficientemente grandes que puedan leerse, mínimo de 10pt. Evitar también estilos “light”.
- No truncar textos, sólo en caso que puedan leerse completamente en otra pantalla.
- Evitar mayúsculas, ya que el lector lo lee por letras, no por palabra.
- Evitar textos incrustados en imágenes, ya que el lector no lo puede leer.
- Alinear de izquierda a derecha (en países RTL, a la derecha). El texto centrado hace que varíe mucho el inicio de cada línea y que dificulte la comprensión cognitiva.
Contraste de color
Ajustar el contraste entre elementos para mejorar la legibilidad (4:5:1 para fuentes pequeñas o 3:0:1 para fuentes mayores de 18pt).
Usar descripciones en vez de color
Evitar que la única forma de diferenciar un elemento sea por color. Debería estar acompañado de una descripción textual o un icono distintivo.
Animaciones más lentas
Evitar que las animaciones aparezcan y desaparezcan muy rápido ni que contengan mucho rojo, ya que puede afectar a personas con fotosensibilidad.
Vídeo o audio con controles
Incluir controles para permitir a los usuarios para la reproducción, ajustar el volumen, pasar a pantalla completa o activar subtítulos. Incluso se pueden incluir vídeos con doblajes a lenguaje de signos.
Y éstos son algunas de las buenas prácticas para hacer que tu plataforma sea accesible para todos los usuarios. No queremos cerrar este post sin recalcar la importancia de hacer que todas las personas disfruten de una misma experiencia, sin distinguir a nadie por su condición.
No se trata de mejorar la experiencia para unos pocos sino que mejorar la accesibilidad significa mejorar la experiencia para todos los usuarios.
Fuente: Laura Martínez
Escritura Right to Left (RTL): cómo adaptar el diseño de la app
Existen algunos idiomas, como el árabe o el hebreo, que su escritura es Right to Left (RTL), es decir que para leer se debe empezar por la derecha y finaliza a la izquierda. Este tipo de escritura obliga a los diseñadores de apps adaptar el diseño para que estos usuarios también puedan disfrutar de la experiencia sin perder detalle. Y más, teniendo en cuenta que muchos de estos usuarios prefieren navegar en su idioma materno.
Hasta el 97% de los árabes prefieren navegar en árabe.
Teniendo esta situación, hoy vamos a explicar cómo los diseñadores deben adaptar las interfaces gráficas para este tipo de idiomas. Para empezar, los textos se deben leer de derecha a izquierda, por lo que hay que hacer “Mirroring” de cada pantalla, es decir, voltear el contenido como si fuera el reflejo de la app actual (LTR). Aun así, vamos a detallar casos muy concretos para cada tipo de adaptación.
Adaptar textos
Adaptar textos será el cambio más extenso que necesitará la app, ya que todos los textos se tienen que poder leer de derecha a izquierda. Para ello, se tiene que tener en cuenta que:
- Los textos traducidos en escrituras RTL, tienen que estar alineados de derecha a izquierda. Por ejemplo, si un texto en una app en inglés está alineado a la izquierda de la pantalla, en la misma app en árabe deberá estar alineado a la derecha.
- Si en alguna app RTL hay una palabra en medio de un texto que no sea traducible (por ejemplo nombres propios) o que quieras mantenerla en su idioma original, y que esté escrita en LTR (Left to Right), esta palabra deberá leerse de izquierda a derecha.
- A la hora de elegir la fuente de los textos, mejor utilizar una fuente que soporte muchos idiomas, como por ejemplo la fuente “Noto”. Además, mejor que el tamaño sea más grande ya que nos podemos encontrar con símbolos y vocales diacríticas que sean bastante pequeños.
- Los números no se hacen con mirroring, ya que cada idioma tiene su forma propia de escribirlos.
- En caso que la web tenga un menú y un logo a la izquierda, al adaptarlo deberá ir a la derecha.
- Si la web es un ecommerce y tiene plazos de entrega, tales fechas deben ordenarse inversamente: la más cercana a la derecha y la siguiente fecha a la izquierda (como si fuera mirroring). Lo mismo pasará, con otros intervalos de fechas o incluso con cualquier cifra que esté entre dos intervalos.
- En caso de que la web tenga un formulario y haya varios campos en una misma línea, se cambia el orden al hacer mirroring.
- Los botones de Aceptar, que suelen ir a la derecha, en RTL se colocan a la izquierda.
- Otros elementos, como los checkbox y radiobutton, se incluyen a la derecha del texto.
- La barra slash “/” no se voltea.
Adaptar iconos
A la hora de adaptar los iconos, hay que tener en cuenta qué funcionalidad ejercen:
- Los iconos que comunican una dirección deben voltearse. Por ejemplo, las flechas de avanzar, éstos sí deben aparecer al revés.
- Los iconos que indican que un input es un desplegable, tienen que colocarse al lado opuesto del texto.
- Los iconos que contengan la representación de texto deben voltearse. También tienen que ser traducidos aquellos iconos que contengan números.
- Los iconos que sean un reloj no se voltean, ni tampoco la representación circular del tiempo; como por ejemplo el icono “actualizar”.
- Tanto los controles de un reproductor de música o video, como la línea de progreso de la canción o del vídeo, tampoco se voltean.
Adaptar animaciones e interacciones
Las animaciones también quedarían afectadas con este tipo de escritura. Algunos de los elementos que deben adaptarse serían:
- Los sliders, u otros componentes parecidos, deben ir al revés.
- Las barras de progresión van en la dirección de la lectura, en ese caso RTL.
- La paginación debe ir al revés: 5,4,3,2,1.
- También, los segmented control y las pestañas tienen que ir en el orden inverso.
- Las transiciones que son para avanzar que normalmente vienen de derecha a izquierda, para RTL deberán entrar de izquierda a derecha.
- Los gestos de swipe típicos de las apps, deberán ser al revés.
- Las acciones de los pop-ups, por ejemplo “Cancelar” y “Aceptar”, deberán aparecer al revés.
A continuación mostramos algunos ejemplos de cómo sería una misma pantalla en RTL (izquierda) y LTR (derecha):
Y éstas son todas las adaptaciones que hay que tener en cuenta a la hora de hacer una app RTL. ¡Esperamos que os haya resultado útil!
Fuente: Laura Martínez, diseñadora de Visual Engineering
Tendencias en diseño web para este 2019
En este post contaremos aquellas tendencias en diseño web que están preparadas para instalarse este 2019. Algunas de ellas no serán nuevas pero seguirán teniendo su papel importante y otras serán nuevas y nos obligarán a adaptarnos si queremos seguirlas.
A continuación las vamos a listar y vamos a poner algunos ejemplos de nuestra empresa o de otras:
Gigantismo (títulos, elementos,…)
Ahora ya no se llevará lo de las letras a 12px que sean difíciles de leer. La nueva tendencia serán los títulos enormes e incluso encima de las fotos para que sean los protagonistas.
Ejemplo: La web Ubisoft Stories usa títulos grandes por encima de fotos ilustradas.
Personalidad propia
Hoy en día todo el mundo puede acceder a una imagen gratis gracias a las librerías de imágenes que hay en internet como unsplash. Ahora, eso va a cambiar y va a coger peso el hecho de tener una personalidad visual propia, ilustraciones que transmitan tu marca de forma única.
Ejemplo: Nuestra startup Dada tiene su propio representante de la marca.
Animaciones
Cada vez más necesitamos captar la atención de nuestra audiencia. Para lograr eso, será casi un must utilizar animaciones en los fondos (aunque también es válido que sean vídeos), formas, imágenes y en todo lo que se nos ocurra.
Ejemplo: La web de Anual Awwwards usa animaciones en toda su web.
Cinemagrafías
Las cinemagrafías será otra de las tendencias en diseño web. Éstos, son vídeos o archivos GIF de alta calidad que se reproducen de una manera continua y automática cada vez que el usuario visita una página web. Estos reemplazarán los GIFs animados.
Ejemplo: En la primera foto vemos una cinemagrafía de Johan Blomström y en el segundo lo que sería un gif animado.
En esta app podéis hacer cinemagrafías desde el móvil.
Fuera estándares
Hoy en día es fácil conseguir plantillas webs que tengan un diseño bonito. Además existen muchas plantillas con lo cual pueden parecer webs totalmente distintas.
Pero en este 2019 diferenciarse será vital. Habrán, por ejemplo, cambios en la forma de colocar la información tanto en el contenido de la web o el portfolio. Con lo que sí nos tenemos que quedar, es que deberemos evitar estándares y sorprender a nuestro público.
Ejemplo: Esta demo nos cuenta una historia de una forma muy visual y distinta a los estándares.
Colores llamativos
Esta tendencia no es nueva, de hecho ya se lleva desde el año 2013 y en este 2019, las paletas de colores con tonos intensos y brillantes también son tendencia en diseño web. Ahora ya no se llevarán los tonos apagados y también se usará degradados en el diseño de páginas web ya que dará exclusividad y frescura a nuestros trabajos.
Una buena combinación de colores es fundamental en una web para reforzar nuestro mensaje, valores y personalidad.
En resumen, se renovará la creatividad en cuanto a colores, formas y animaciones. Lo usual aburre, así que este año 2019 estará lleno de manipulaciones cromáticas.
Ejemplo: Veintidosgrados usa colores llamativos, animaciones,…
Tipografía únicas o hechas a mano
Hasta ahora la tipografía ha sido una de las tendencias en diseño web que ha ido teniendo buena repercusión. Desde marcas que usan sus propias tipografías, algunas de ellas incluso hechas a mano (tipografías handmade), a combinaciones de lo más extrañas. Y ahora en este 2019, se añadirán animaciones en las tipografías.
Aunque son tipografías que se vinculan a sectores muy concretos, otorgan una personalidad exclusiva, siendo muy positivo diferenciarse gracias a la utilización de las mismas.
Ejemplo: Esta web nos permite generar jerseys con una tipografía específica.
Chatbots
Los chatbots ya llegaron en el 2016 en muchos sitios webs y cada vez tendrán más importancia. Es más, cada vez está siendo más fácil integrar chatbots automáticos y creativos mediante API abiertas. Los chatbots no solo son divertidos e interactivos, sino que también se pueden programar para que se ajusten automáticamente y brinden una experiencia de usuario personalizada.
Los chatbots son rápidos, están siempre disponibles y se pueden utilizar de distintas maneras. Digamos que con un chatbot mejora el compromiso de nuestros clientes y la capacidad de atención. Donde son más populares es en los sectores como el marketing y la publicidad, integración de productos y atención al cliente.
Ejemplo: La web de Hugo Cotro cuenta con un chatbot incorporado en la web como la que veis en la foto de abajo.
Mobile First
No es una de las tendencias en diseño web nuevas pero hay que seguir remarcando que la gente cada vez más, usará más el móvil. De hecho, ya se ha superado el uso de dispositivos móvil frente a la navegación por web. Por eso, en este 2019, será obligatorio adaptar todo a estos dispositivos y tener webs responsive.
Usar HTTPS
Google Chrome quiere, cada vez más, que cada web tenga instalado el protocolo SSL. Además, poner vuestra página web con https no sólamente es más seguro, sino que también te ayuda con el SEO.
Otras razones para utilizar HTTPS son:
- Protege la privacidad de tus usuarios
- Te protege de los anuncios
- Protege tus contenidos y tu marca
- Mejora la analítica de tu sitio web
- Los navegadores marcan tu web con HTTP como NO segura
Velocidad de carga
Cada vez más Google le da más importancia al tiempo de carga de la página. Por eso será importante que tus contenidos se carguen lo más rápido posible.
One-page
También parece que tendrá más éxito las página one-page. Estos diseños no funcionan igual en determinados sitios web, pero si lo que queremos es mostrar la máxima información posible sin que el usuario se despiste, son la mejor opción. Además tienen mayor sentido, por ejemplo, en páginas de eventos, presentaciones o promociones específicas.
Parece que por ahora seguiremos viendo webs de una sola página, ya sea scroll vertical como horizontal.
Y hasta aquí las tendencias en diseño web que se verán este 2019. Nosotros como empresa innovadora las tendremos en cuenta para nuestros diseños.
¿Os gustan? ¡Esperamos vuestra respuesta!
Herramientas de MKT que usamos en Napptilus
Hoy os vamos a contar aquellas herramientas de MKT que hemos utilizado en algún momento para que las conozcáis y nos déis ideas sobre otras herramientas de MKT que no hemos mencionado y que creéis importantes.
En Napptilus Tech Labs, como compañía tecnológica, nuestro primer fin es branding y captar posibles clientes. También tenemos algunas startups en las que también trabajamos el marketing online.
Además de usar las RRSS, algunas de las herramientas que nos han sido útiles para trabajar son:
ASANA
Asana es una herramienta que nos permite gestionar el día a día programando las tareas que tocan hacer en sus días correspondientes. Tiene un calendario que nos permite asignar tareas futuras a una persona, así como llevar un control de lo que se ha hecho y de lo que todavía sigue pendiente.
TWEETDECK
Tweetdeck nos sirve para programar tweets y seguir algunos grandes eventos como el 4YFN en los que en una sóla pantalla podemos seguir distintos hashtags para poder hacer RT y no perdernos información.
HOOTSUITE
Hootsuite también es una de las herramientas de programación que más intentamos usar para Instagram pero nos daba ciertos fallos a la hora de publicar ya que nos pedía una confirmación o nos avisaba y no lo hacía automáticamente.
SOCIALGEST
Socialgest fue la alternativa de Hootsuite y la verdad que nos va muy bien. Permite programar posts hasta 4 redes sociales si quieres usar la versión gratuita y en el caso de Instagram, lo publica directamente.
CROWDFIRE
Crowdfire permite monitorizar los fans que nos siguen y nos dejan de seguir en las cuentas de Twitter. Antes también nos permitía hacerlo para Instagram pero ahora han quitado este servicio y si necesitáramos monitorizarlo, usaríamos la herramienta Followers-unfollowers.
ADWORDS
Como muchos ya conocemos, es la herramienta para hacer publicidad en los buscadores. Nosotras la usamos para hacer campañas de branding y de descarga de app para alguna startup.
DISPLAY PURPOSES
Esta herramienta permite saber los hashtags populares relacionados al hashtag que tu has indicado.
MAILCHIMP
Mailchimp es la herramienta que utilizamos para enviar emails colectivos y hacer newsletters. Suelen tener plantilla pero nosotros cogemos el diseño del diseñador y podemos codificarlo en HTML. Es muy efectiva y no hemos tenido ningún problema a la hora de programar el envío ni de que se efectúe.
ADDTHIS
Addthis es un plugin de wordpress que nos permite añadir botones de compartir de RRSS en los posts del blog. Tiene también otras opciones como añadir posts relacionados pero nosotras usamos las opciones que nos da Wordpress ya que nos permite tener un diseño más parecido al tema. Por otro lado, Addthis tiene su propia plataforma que permite ver las estadísticas.
SEO YOAST
El SEO Yoast es una herramienta que nos permite comprobar el estado del SEO de la propia entrada. Tenemos que conseguir que el SEO sea bueno para poder tener nuestra entrada en los primeros resultados del navegador y este plugin nos va indicando aquellos requisitos que vamos cumpliendo en función de cómo se va redactando el post. En este enlace te explicamos también la importancia de tener un buen SEO.
Y estas son algunas de las herramientas de MKT que usamos en nuestro departamento. Si no las conocéis todas, tenéis los enlaces en cada una de ellas para que podáis descubrir cómo funcionan y ver si pueden ser también útiles para vuestra empresa. Y vosotros, ¿nos recomendáis alguna que no hayamos mencionado?
¡Feliz día!
Fuente: Nuria Macías y Laura Ares
SEO y su importancia para las empresas
El SEO es una de las disciplinas de las que más trabajamos en nuestro departamento de MKT y hoy queremos contaros qué es exactamente y el por qué de su importancia.
SEO (Search Engine Optimization), también llamado posicionamiento en buscadores u optimización de motores, es el proceso de optimizar la visibilidad de un sitio web en los resultados orgánicos de los distintos buscadores.
Ésta es una de las disciplinas que más ha cambiado en los últimos años. Si nos fijamos, ha habido una gran cantidad de actualizaciones de los penalizadores Penguin y Panda. Incluso ahora, Matt Cutts califica el SEO como Search Experience Optimization, que significa “todo por el usuario”.
Aunque existen muchos factores para posicionarnos en web, hay dos que son fundamentales:
- Autoridad: La autoridad básicamente es la popularidad de una página. Cuanto más popular significa que comparte contenido de calidad. Google detecta en ese caso que los usuarios comparten su información porque les parece útil.
- Relevancia: La relevancia es la relación que hay entre nuestro contenido y lo que está buscando el usuario. Es decir lo que busca, lo encontrará en nuestra web. En este caso también entra en juego el SEO on-site que detallaremos a continuación.
SEO on-site y SEO off-site
El SEO se puede dividir en estos dos grandes grupos:
SEO on-site:
Se trata de que Google entienda el contenido que hay en nuestra web para que lo muestre cuando los usuarios lo están buscando. Es el que nos posiciona en la relevancia y para hacerlo hay que trabajar en la optimización de keywords, el tiempo de carga, la experiencia del usuario en la web, la optimización del código y el formato de las URLs.
SEO off-site:
Es la que se centra en factores externos a la web en la que trabajamos. Algunos ejemplos son el número y la calidad de los enlaces, nuestra presencia en las redes sociales y las menciones que tenemos, la autoridad de la marca o el CTR de los resultados en la búsqueda (por ejemplo que realicen compras en nuestra web).
Black Hat SEO y White Hat SEO
Así se le llama cuando hace referencia a si seguimos bien las “recomendaciones” de esta disciplina o no. Veremos a continuación qué pasa si se sigue una política u otra.
Black Hat SEO:
Cuando intentamos mejorar el posicionamiento a través de técnicas poco éticas que no cumplen del todo las directrices del motor de búsqueda. Algunos ejemplos son:
- Spam en foros: Hacer spam de tu web en foros para que accedan.
- Comentarios en blog: Hacer comentarios en los blogs masivamente para que accedan.
- Keyword stuffing: Uso excesivo de palabras clave dentro de un texto.
- Cloacking: Mostrar contenidos diferentes dependiendo de si es un usuario o un robot de buscadores el que lo lee.
- Spinning: Creación de un artículo reutilizando diferentes textos originales.
White Hat SEO:
En ese caso se realizan acciones éticas correctas y que cumplen las directrices de los motores de búsqueda para posicionar nuestra página en los buscadores. Dado que los buscadores dan mayor importancia a las páginas que mejor responden a la búsqueda del usuario, el White Hat comprende las técnicas que buscan hacer más relevante éstas a través de aportar más valor para los usuarios. Ésta es la técnica que recomendamos y que utilizamos nosotros para este blog basándonos en el plugin SEO Yoast.
A continuación explicaremos la importancia de hacer SEO en tu web y los beneficios que obtendremos si lo integramos en nuestra estrategia online.
Por qué es tan importante hacer SEO
Esta disciplina es la mejor manera de que tus usuarios nos encuentren a través de búsquedas en las que nuestras webs sean relevantes. Que los usuarios encuentros lo que tú les ofreces. La mejor manera de llegar a ellos es mediante un motor de búsqueda.
Además es importante ver dónde estás posicionado porque cuanto más arriba más posibilidad de que lleguen todos los usuarios y mejor CTR tenemos.
Actualmente lo estamos usando mucho para posicionar este y otros blogs que tenemos para que los usuarios nos conozcan.
TEAMLEARNING CINEMA – Design disruptors
En una de las formaciones que hicimos en nuestras sesiones de Teamlearning Cinema, cambiamos totalmente la temática y decidimos ver el documental “Design Disruptors” de InVision.
Este vídeo de “Design Disruptors” destaca la importancia del diseñador en el desarrollo del producto. El papel del diseñador es buscar soluciones frente problemas existentes para un grupo de personas y además conseguir que tenga una buena experiencia. Por ese motivo, tienen que estar constantemente pensando en la sociedad para detectar las necesidades reales y satisfacerlas.
No siempre los resultados serán buenos, pero para hacer grandes cosas primero tienen que haber malas ideas. Por ese mismo deben ser críticos con ellos mismos y adaptarse a los cambios de la sociedad, que están en constante transformación.
Además, para los diseñadores la simplicidad es una de las reglas fundamentales del buen diseño. Pero hacer algo simple realmente tiene su complicación. Tienen que ser capaces de representar en un sólo elemento el máximo de palabras.
Art is about making questions. Design is about making solutions.
El diseño no es un arte pero eso no implica que éste no pueda ser útil. Ante todo pero, primero tiene que resolver el problema y luego ya ver si se puede hacer bonito. Un buen diseño es el que primero resuelve el problema y un gran diseño es el que lo resuelve ante todo y además consigue que se visualice estéticamente bien.
Por último, como comentábamos al principio sobre la importancia del diseñador, tal es, que cada vez más tienen que ser partícipes en la toma de decisiones de estrategias que se desempeñen en la empresa. Al fin y al cabo, la mayoría de éstas acabarán pasando en sus manos para ejecutarlas.
A continuación os ponemos el tráiler para que os podáis hacer una idea del documental:
Si queréis ver el vídeo completo podéis acceder al siguiente link. Nuestro QA Engineer José Carlos Baños, nos recomendó verlo para tener esa visión que tienen las grandes empresas tecnológicas como Google, Facebook, Dropbox, y otras, sobre el diseño y de cara a intentar darle más valor al diseño en lo que hacemos cada día, porque detrás de ello va a haber una persona usándolo.
Y antes de iros, si os interesa conocer más temas de diseño, también podéis ver el siguiente vídeo sobre cómo mejorar la relación entre diseñadores y developers o acceder en la categoría “Diseño y MKT“.
Detrás del logo de StageInHome
StageInHome es una app propia de las diseñadoras de interiorismo Ruth Baygual y Beth Marquès. Esta app permite mediante el dispositivo capturar el espacio, amueblarlo y decorarlo con un gran rango de diferentes famílias de muebles, gracias a la realidad aumentada.
Ambas siempre han estado vinculadas con el mundo del interiorismo, Beth trabajando en varios estudios de decoración y Ruth realizando proyectos de paisajismo, su especialidad. Hace dos años, decidieron unir su know-how y experimentar con una nueva forma de visualizar los interiores de las viviendas: Home Staging (puesta en escena). En estos dos años, con su negocio inicial “HS interiores” sus clientes han obtenido resultados rápidos y exitosos. Asimismo, el Home Staging las ha llevado a dominar el mundo del Atrezzo de última tendencia lo cual les ha convertido en expertas Personal Shoppers para cualquier presupuesto y espacio. Y ahora, gracias a Napptilus, han podido acceder a nuevas formas de decoración más prácticas gracias a la nueva aplicación de realidad aumentada.
Nombre y elemento del logo de StageInHome
Para realizar la app, quisieron primeramente transformar su negocio “HSinteriores” para que se viera un proyecto innovador. Esa transformación del negocio requería hacer un rebranding: logo, colores, elementos, web,… Para ello, contactaron con nosotros para trabajar juntos en el diseño y desarrollo del nuevo negocio.
Se pidieron unas primeras propuestas de diseño:
Después de ver las primeras propuestas hubieron los primeros cambios. Creían que el nombre necesitaba un cambio y que el lema “Creative Digital Home” tenía que ser realmente el nombre del nuevo negocio. Y después, también vieron que tal y como indicaba su nombre “Home” lo más adecuado era que el elemento principal fuera una casa.
A raíz de allí, David volvió a hacer otras propuestas enfocadas al nuevo cambio:
En esta nueva propuesta, a Ruth y Beth les gustó más la última columna y propusieron que sólo se viera un sólo elemento, para ser algo más minimalista. Pero en ese caso, un logo con una sóla simple casa no permitía hacer ninguna combinación. De ese modo, se mantuvo las dos casas y jugando entre las distintas posiciones se eligió la de las dos casas superpuestas. Con esa propuesta final, se eligió el isotipo definitivo:
Una vez definido el isotipo, volvieron a centrarse en el nombre del logo. Esta nueva idea de “Creative Digital Home” no terminaba de convencer y después de hacer un nuevo brainstorming se eligió “StageInHome” por el siguiente motivo. StageInHome, viene de las palabras “stage in home” que la traducción literal significa “escena en casa” pero además se asimila a la palabra “staging” que es uno de los métodos que utilizan para decorar las estancias de forma rápida y con una mínima inversión, en la que consiguen que las casas de sus clientes se vean más atractivas y se vendan más rápido.
Ahora sí, con el nuevo nombre ya se podía crear de nuevo el logo. Durante la nueva creación, se vio que al ser un nombre largo, éste hacía que quedara un logo muy alargado, no apto ya para los iconos de las apps. Por ese motivo, se decidió dividir la palabra en dos filas: Stage (arriba) e InHome (abajo).
Una vez juntado el isotipo con el nombre, la estructura del logo no era correcta ya que tenía demasiada fuerza a la izquierda. De ese modo, se decidió poner una línea donde el espacio sobrante de “Stage” con el mismo color corporativo y además se decidió que fuera más alargada que las dos palabras de abajo para dar la sensación de que avanza, de que están a la última.
Definitivamente el logo de StageInHome queda de la siguiente forma:
Color del logo de StageInHome
Entre las distintas propuestas de colores que se crearon decidieron quedarse con el número 2 para la web ya que allí incluye los distintos tipos de negocios que hacían y era un color más elegante y la número 4 para referirse a la app en concreto ya que era un color más llamativo y rompedor.
Si os interesa ver otras historias de branding y de logo, también podéis leer cómo se creó el logo de Visual Engineering y el de Dada.
Resumen de las tendencias de UI del 2018. ¿Seguirán en 2019?
¿Cuáles han sido las tendencias de UI del 2018 que nos han marcado en Napptilus? Vamos a hacer un resumen de todas ellas y comprobaremos a principios 2019 si aún siguen en pie. ¿Vosotros que creéis?
Efectos overlapping
Este año 2018 ha venido cargado de interfaces con overlapping. Overlapping es la superposición de fuentes, gráficos y colores. Su finalidad es ayudar a que los diseños de la interfaz de usuarios sean más llamativos y disruptivos y a la vez a crear más sensación de espacio. Incluso también se pueden solapar mismos elementos combinados con sombras para que sean aún más llamativos.
Cada vez más, se está optando por un estilo de diseño más simple y natural en el diseño de la interfaz de usuario de la aplicación móvil. Una interfaz de teléfono con curvas, geometrías y botones simples podría ser más eficaz para que la gente se centre en las funciones y características principales de la aplicación.
Opacidades
Jugar con las opacidades nos permite hacer fondos más transparentes que permitan mostrar fondos con pinceladas de detalle y que no sean 100% planos. Se pueden aplicar tanto en el producto como en el logotipo y dotarlo de “textura”.
Gradientes
En estos últimos años el gradiente ha vuelto a tener protagonismo y a ser parte fundamental del diseño de un producto. Ahora se pueden ver en distintos elementos, ya sea botones, iconos, listas, fondos,… Aplicar ese color tiene la finalidad de dotarlo de personalidad y dar profundidad al producto. Hacer que algo no sea plano, tenga vida y además que sea llamativo.
Fueron populares en 2017 y ahora en 2018. ¿Seguirán también en 2019? Pronto lo sabremos.
Altos contrastes
Utilizar los contrastes pueden ayudar a diseñar una interfaz de usuario excelente para atraer la atención del usuario. Se pueden añadir fuentes en diferentes estilos, tipos, tamaños u órdenes que puedan proporcionar una sensación de jerarquía y espacio. Y además, si se añade color en diferentes tipos y estilos se crean contrastes nítidos que hacen que los diseños completos se vean más llamativos y llenos de color.
Animaciones e interacciones funcionales
Hoy en día se añaden animaciones o interacciones a iconos, fuentes y/o botones de una interfaz para conseguir un impacto positivo en los usuarios ofreciéndoles una experiencia agradable.
También tiene un papel las microinteracciones que significan añadir más diseños de interacción para algunos detalles de la interfaz que permiten a los usuarios comunicarse con las aplicaciones donde obtendrán un feedback muy rápido.
Fuente: DavidFelipeV
Ilustraciones customizadas
En este año también han jugado un papel importante las ilustraciones personalizadas sean dibujos a mano simples o ilustraciones de estilo pictórico. Éstas hacen que las aplicaciones sean más interesantes y distintivas.
Experiencia personalizada
Además de ofrecer una buena experiencia al usuario, ahora también se tiene en cuenta el tipo de usuario y se requiere que se haga una experiencia personalizada. No es lo mismo una app dedicada a “millennials” que una para gente más mayor.
Por ese mismo motivo, ahora las apps ofrecen un producto muy específico para un sector o hacen distintas versiones para cada target. No es necesario que la interfaz sea totalmente distinta pero se puede jugar con distintos accesos, fuentes, tamaños, etc.
Fuente: DavidFelipeV
Vídeo y vídeo
Año tras año los vídeos siguen teniendo protagonismo en el mundo del diseño. Es la mejor forma de describir un producto o llamar la atención sobre él. Por eso es importante que el vídeo sea bueno, atractivo y simple.
Y hasta aquí el resumen de las tendencias del 2018. Cuando empiece el 2019 veremos qué se nos presenta este año. ¿Tenéis ganas de saberlo?