Desarrollo Web y Branding Digital

Casos

Diseño y desarrollo de sitio web corporativo

Austral S.A.A. es una de las empresas pesqueras más importantes en el país y la región. Forma parte de Austevoll Seafood Company de Noruega, con operación en Reino Unido, Perú y Chile.

Se nos encargó el rediseño y desarrollo del sitio web corporativo en la búsqueda de ampliar el alcance con sus stakeholders locales e internacionales. Para este proyecto se desarrolló un proceso de diseño UX/UI que incorporó los principales elementos de identidad, en una página responsiva y fácil de usar. Este sitio web tiene conexiones a diferentes herramientas externas que mejoran la gestión de la experiencia del usuario.

Austral Group ha lanzado su renovado sitio web, diseñado con una estética moderna y funcional que mejora la experiencia del usuario. Este nuevo diseño facilita la navegación con una interfaz intuitiva y optimizada para cualquier dispositivo, garantizando una experiencia visual atractiva y fluida.

Un punto clave de esta actualización es la creación de un blog dinámico, donde Austral Group publicará sus boletines, artículos y novedades del sector. Esta sección busca ser una fuente constante de información actualizada para todos los interesados en el sector pesquero.

Con este rediseño, Austral Group también ha mejorado su posicionamiento SEO, asegurando que sus contenidos sean fácilmente encontrados por los usuarios en motores de búsqueda.

Site map:

Se define la arquitectura de la información para el proyecto.

Sketches:

Propuesta conceptual y visual primaria del proyecto. Se define la estructura de los contenidos del landing page.

Prototipo:

Propuesta visual de baja fidelidad que permite plantear la funcionalidad del sitio.

Estilo visual:

Guía de estilo visual para iniciar la definición del aspecto visual.

Prototipo:

Propuesta visual de alta fidelidad que aproxima el proyecto a su apariencia final.

www.austral.com.pe

Casos

Diseño y desarrollo de sitio web corporativo

Limagro es una empresa agro importadora peruana especializada en la producción y comercialización de frutas fresca, principalmente el limón y el mango, en la región de Sullana Piura..

El cliente necesitaba actualizar la interfaz gráfica de su sitio web, con el primordial interés de ampliar su comunicación a sus diferentes audiencias locales e internacionales. Se desarrolló una propuesta de UI, la cual terminó siendo implementada en CMS, considerando buenas prácticas de maquetación, desarrollo, SEO y seguridad.

Antiguo sitio web

Arquitectura de la información

Sketches

Propuesta conceptual y visual primaria del proyecto. Definición de la estructura de los contenidos del landing page.

Prototipo desktop:

Propuesta visual de baja fidelidad que permite plantear la funcionalidad del sitio.

Prototipo móvil:

Propuesta visual de alta fidelidad para dispositivos móviles.

limagro.com

Casos

Maquetación y adaptación de sitio web informativo

La Organización Internacional del Trabajo (OIT) nos encargó la maquetación web HTML5 de su sitio informativo «Cuida a quien te cuida», orientado a información fundamental sobre el derecho de las trabajadoras del hogar.

Se implementó el sitio web basado en una propuesta de diseño ya desarrollada, enfocándonos en la usabilidad en diferentes dispositivos. Se implementaron además políticas de ciberseguridad.

cuidaaquientecuida.pe

Casos

Diseño y desarrollo de sitio web y comercio electrónico

Web USA Drone Tampa es una tienda especializada en la venta de drones para todo tipo de uso, desde el personal hasta el industrial. Su sede está ubicada en la ciudad de Tampa, Florida, EEUU.

Se nos encargó el diseño y desarrollo del sitio web y tienda en línea para clientes locales. Para este proyecto se hizo un proceso de diseño UI que incorpore los principales elementos de identidad, en una página responsiva y fácil de usar. Este sitio web tiene diferentes conexiones con herramientas externas que mejoran la experiencia de usuario.

Site map:

Se define la arquitectura de la información para el proyecto.

Sketches:

Propuesta conceptual y visual primaria del proyecto. Se define la estructura de los contenidos del landing page.

Prototipo:

Propuesta visual de alta fidelidad que aproxima el proyecto a su apariencia final.

usadronetampa.com

Casos

Actualización de identidad visual, diseño y desarrollo de sitio web corporativo

Vimax es una empresa dedicada a la creación y mantenimiento de áreas verdes, tanto para hogares como para empresas.

Se nos encargó el rediseño del sistema de identidad de marca y el diseño, desarrollo y maquetación web para su sitio corporativo. Este proyecto incluyó el desarrollo de materiales de comunicación impreso. Para el desarrollo web se propuso un desarrollo de diseño UI que incorpore los principales elementos de identidad, en una página responsiva y fácil de usar. Este sitio web tiene conexiones a diferentes herramientas externas que mejoran la gestión de la experiencia del usuario.

vimax.com.pe

El diseño UX (Experiencia de Usuario) y UI (Interfaz de Usuario) son elementos clave para crear un sitio web efectivo y atractivo. Sin embargo, es común cometer errores en diseño UX que pueden afectar negativamente la experiencia del usuario. En este artículo, exploraremos los errores más comunes y cómo corregirlos.

1. Navegación Confusa

Error: La estructura del menú es desorganizada, lo que dificulta al usuario encontrar lo que necesita.

Corrección: Diseña una navegación simple y clara. Utiliza etiquetas intuitivas y agrupa las opciones por categorías lógicas. Realiza pruebas de usuario para verificar la facilidad de uso.

2. Falta de Jerarquía Visual

Error: No hay una clara diferenciación entre los elementos importantes y secundarios.

Corrección: Utiliza tamaños de fuente, colores y espaciado adecuados para destacar los elementos importantes. Crea un flujo visual que guíe al usuario a través del contenido.

3. Tipografía Inadecuada

Error: Fuentes pequeñas o poco legibles dificultan la lectura.

Corrección: Utiliza fuentes legibles y con suficiente contraste respecto al fondo. Asegúrate de que el tamaño de la fuente sea adecuado para distintos dispositivos.

4. Formularios Complicados

Error: Formularios demasiado extensos o con campos innecesarios.

Corrección: Simplifica los formularios solicitando solo la información esencial. Ofrece validación en tiempo real para evitar errores y mejorar la experiencia.

5. Carga Lenta del Sitio

Error: Un tiempo de carga superior a 3 segundos puede provocar un alto índice de abandono.

Corrección: Optimiza las imágenes, utiliza almacenamiento en caché y reduce el código innecesario. Considera el uso de un CDN (Red de Distribución de Contenidos).

6. No Adaptarse a Móviles

Error: El diseño no es responsive, lo que dificulta la navegación en dispositivos móviles.

Corrección: Implementa un diseño responsive para asegurar una experiencia consistente en todos los dispositivos.

7. Falta de Retroalimentación

Error: Los usuarios no reciben confirmación al completar acciones (como enviar un formulario).

Corrección: Proporciona retroalimentación inmediata mediante mensajes de confirmación, animaciones o notificaciones.

8. Uso Excesivo de Pop-ups

Error: Pop-ups frecuentes e intrusivos que interrumpen la experiencia de navegación.

Corrección: Limita el uso de pop-ups y asegúrate de que sean fáciles de cerrar. Utiliza pop-ups solo para información relevante.

9. Colores Mal Utilizados

Error: Colores que no contrastan bien o que dificultan la lectura.

Corrección: Utiliza paletas de colores accesibles con suficiente contraste. Prueba diferentes combinaciones para mejorar la legibilidad.

10. Ignorar las Pruebas de Usuario

Error: Lanzar el sitio sin realizar pruebas de usuario puede conducir a problemas inesperados.

Corrección: Realiza pruebas de usabilidad para identificar puntos de fricción y realiza ajustes en base al feedback obtenido.

Conclusión

Evitar estos errores en el diseño UX/UI puede mejorar significativamente la experiencia del usuario y aumentar la retención en tu sitio web. Implementa buenas prácticas y asegúrate de realizar pruebas continuas para mantener un diseño funcional y atractivo.

Esta útil guía publicada por el usuario @punitchawlaofficial en Instagram nos muestra algunos de los errores más comunes en el diseño UX/UI. Cómo indica en su perfil, «los diseñadores UX/UI cometen terribles errores que posiblemente podrían destruir un producto. Hay cientos de errores que puedo señalar, pero estos son aquellos que necesitamos cambiar tan pronto sea posible».

Trabajar menos con datos ficticios: El uso de datos ficticios a menudo puede romper un diseño al escalar y usar más información.

Puedes solucionar esto sabiendo qué tipo de contenido se utilizará y tratando de insertar grandes cantidades de datos.

Convenciones de nomenclatura deficientes y archivos sucios: Los diseñadores a menudo no organizan sus archivos y proyectos, y rara vez nombran bien las capas.

Para mejorar esto, elige un nombre base como «Botón» y añadir/eliminar como «Botón desactivado».

Siguiendo el mismo proceso de diseño para cada proyecto: No conocer los diferentes pasos y lo que se puede o no se puede ajustar, puede ser un problema.

Estudia diferentes procesos de diseño, incluyendo sprints, pensamiento de diseño, centrado en el ser humano.

Solo pensar en el diseño como una tarea independiente: El solo hecho de centrarse en el diseño como una sola entidad puede llevar a un producto final deficiente y retrasos.

Mantente en contacto con los gerentes de productos, equipos de contenido, desarrolladores y diseñadores.

Probando diseños al final: Los diseñadores a menudo toman las pruebas como un paso final antes de llevar los diseños a la producción. Esto les permite hacer soluciones rápidas y encontrar alternativas.

Pruebe después de los wireframes, pruebe productos antiguos, pruebe después del diseño visual, pruebe los cambios. Incluso si estas pruebas son cortas o menos importantes, asegúrate de validarlas a través de las pruebas.

Decir que SÍ a los cambios requeridos por todos: A menudo tenemos gerentes de productos, desarrolladores y ejecutivos senior que solicitan cambios en los diseños y los diseñadores hacen estos cambios a ciegas.

A menos que el cambio sea una decisión comercial, dile a la gente por qué quieres usar tus diseños originales y cómo añadirá valor al producto.

UI Lab (@ui_lab) nos trae una excelente guía de términos utilizados en el diseño UX, los cuales para muchos son desconocidos. En esta guía comprenderemos un poco más acerca de estos términos.

Mapa de empatía: Los mapas de empatía permiten estrategias de productos más efectivas, planificación de productos y estrategia comercial general. El mapeo de empatía te ayuda a proporcionar una experiencia mucho mejor al cliente a lo largo del recorrido del usuario.

Mapa de viaje del usuario: Los mapas de viaje del usuario describen el camino que toman los usuarios para alcanzar su objetivo al usar una aplicación o sitio web en particular. Los viajes de los usuarios se utilizan en la investigación de experiencia de usuario para identificar cómo los usuarios pueden alcanzar sus objetivos de la manera más rápida y eficiente posible.

Arquitectura de la información: La arquitectura de la información se centra en organizar, estructurar y etiquetar el contenido de una manera efectiva y lógica. El objetivo de la arquitectura de la información es ayudar a los usuarios a encontrar información y completar las tareas lo más rápido posible.

Wireframe: Un wireframe (alambrado o cableado) sirve como base para la interfaz de usuario. Por lo general, es un boceto de baja fidelidad de la interfaz de usuario. Los wireframes transmiten las principales características, funciones y contenido de una interfaz de usuario, sin entrar en los detalles del diseño visual.

Prototipo: Un prototipo es una presentación simulada de una solución propuesta utilizada para probar o validar ideas y diseñar suposiciones rápidamente y con poco costo, sin entrar en un trabajo de desarrollo a gran escala.

Flujo de usuario: Un flujo de usuario es un diagrama que muestra la ruta que un usuario tomará en una aplicación para completar una determinada tarea. El propósito de los flujos de usuario es identificar los principales flujos de navegación a través de su aplicación o sitio web, e identificar áreas de mejora.

El perfil @daylywebdesign publicó una interesante guía de usuario @davetelas de Instagram, llamada «Nunca alinees un texto al centro» que recomienda diferentes acciones a la hora de usar el texto que facilitarán su legibilidad.

El alineamiento, como dice la guía, lo que genera es conexión con el usuario, estableciendo rutas de legibilidad que favorecen la experiencia de uso.

El perfil @daylywebdesign publicó una interesante guía de usuario @designill4u de Instagram, qué nos trae los 6 errores más típicos a la hora de construir un llamado a la acción o botón. Algunos de estos errores son:

Evitar los botones demasiado «llamativos». Siempre son preferibles los botones simples.
No tener 3 tipos de botón. Los proyectos usualmente usan botones primarios, secundarios y terciarios.
Evitar los botones demasiado altos o demasiado bajos. 18 píxeles de relleno vertical son suficientes.
Evitar los botones demasiado anchos o demasiado angostos. Para botones con texto de 16 píxeles, lo ideal son 32 píxeles de relleno horizontal y ancho total en móviles.
Inconsistencia visual en los botones del proyecto. Pueden confundir al usuario.
La jerarquía es necesaria y eso aplica también en los botones.

El usuario @designill4u de Instagram, nos trae esta interesante guía de los 7 errores más comunes a la hora de diseñar una interfaz de usuario (UI). Estos errores se centran típicamente en aspectos como:

La selección de colores
La resolución de imágenes
Jerarquía de textos
Uso incorrecto de sombras
Márgenes y espacios en la diagramación
La falta de contraste o
El uso incorrecto de la iconografía

Estos y otros aspectos hacen que nuestro diseño no resulte deficiente en los diversos tipos de pantallas. Seguir estas recomendaciones podría mejorar nuestra propuesta visual al desarrollar una web o una aplicación móvil.