El comienzo de un App-Diseñodebe ser siempre bien pensado y atractivo. En este tutorial aprenderás cómo puedes revisar el HomeController de tu app para añadir más interactividad y atractivo visual. ¡Comencemos de inmediato!
Principales conclusiones
- El Home Controller se puede diseñar de manera más atractiva mediante el uso creativo de colores y diseños.
- Los archivos SVG ofrecen ventajas en cuanto a editabilidad y nitidez.
- El uso de gradientes y diferentes secciones puede mejorar significativamente la experiencia del usuario.
Guía paso a paso
Primero echaremos un vistazo al Home Controller existente. Aquí notarás que tenemos varias secciones: un resumen de cursos, un chat interactivo y el perfil. El enfoque está en el Feed de inicio. En este tutorial ajustaremos la navegación y optimizaremos el diseño.
Paso 1: Revisar la navegación
Para mejorar el diseño de tu Home Controller, comenzaremos revisando la barra de navegación. Primero eliminaremos los elementos existentes como la navegación.
Ahora añadimos un rectángulo como nuevo encabezado, que debe tener una altura de 250 píxeles. El rectángulo no debe tener borde para garantizar una apariencia limpia.
Paso 2: Añadir encabezado y texto
En el siguiente paso, seleccionarás el Color del documento y añadirás un nuevo texto. Establece el texto como “Todos los cursos” y experimenta con los estilos de texto. Un tamaño recomendable para el encabezado sería de 110 píxeles. Es importante que el encabezado se ajuste a la barra de estado.
Paso 3: Ajustar fondos y colores
Un diseño atractivo también incluye el uso de gradientes. Regresa a tu rectángulo y elige un gradiente que sea tanto dinámico como armónico en el diseño general. Un gradiente diagonal proporciona más profundidad.
Paso 4: Añadir nueva sección
Ahora diseñaremos una nueva sección debajo del encabezado. Añade otro rectángulo con una altura de 350 píxeles y elimina el borde. Aquí puedes elegir un color de contraste para darle más vida a la app.
Paso 5: Contenido e iconos
En esta sección podríamos añadir un botón para ofrecer al usuario más contenido, por ejemplo, un video. Añade el texto “Power of Mobility” en formato H3 y colócalo a 16 píxeles desde arriba.
Ahora añadimos un icono, que puede ser creado por ti mismo o importado de recursos. Aquí es recomendable usar archivos SVG, ya que son fácilmente editables.
Paso 6: Crear sección de Pro Version
Crea otra sección que le dé a los usuarios la oportunidad de adquirir la versión Pro de la app. Añade un nuevo rectángulo con una altura de 250 píxeles y coloca tu llamada a la acción “Obtener versión Pro” allí.
Aquí es importante que el texto se diseñe de manera llamativa. Puedes usar una variante de color más oscura para asegurarte de que el texto sea fácilmente legible.
Paso 7: Claridad mediante grupos
Crea grupos a partir de las diferentes secciones para aumentar la claridad. Esto te ayudará a organizar mejor las distintas áreas.
Paso 8: Últimos ajustes y revisión
Por último, puedes revisar todos los elementos en las secciones y ajustar los espacios y posiciones si es necesario, para garantizar un diseño limpio.
Resumen – Rediseño de Home: Tu camino efectivo hacia una interfaz de usuario atractiva
Ahora has aprendido cómo puedes rediseñar tu Home Controller para que sea más interactivo y al mismo tiempo visualmente atractivo. A través del uso creativo de gradientes de color, la implementación de iconos SVG y la estructuración en secciones, has mejorado significativamente el diseño de tu app.
FAQ
¿Cómo puedo asegurarme de que mi encabezado se vea bien?Asegúrate de usar tamaños de texto y combinaciones de colores adecuadas que sean coherentes en todo el diseño.
¿Qué ventajas tengo al usar archivos SVG?Los archivos SVG son escalables y mantienen su nitidez, independientemente del nivel de zoom.
¿Cómo puedo agregar gradientes en Sketch?Selecciona el elemento deseado, ve a las opciones de relleno y selecciona “Gradient” para crear gradientes atractivos.
