🎨 Rediseñando el sitio web de Code Stacker: Una guía paso a paso
¿Estás buscando rediseñar tu sitio web pero no sabes por dónde empezar? En este artículo, te guiaremos a través del proceso de rediseño del sitio web oficial de Code Stacker para su nuevo curso. Desde esbozar los wireframes hasta crear una versión de alta fidelidad, cubriremos todo lo que necesitas saber para crear un sitio web impresionante que cautivará a tus visitantes.
📝 Esbozando la idea general
El primer paso para rediseñar un sitio web es esbozar una idea general de lo que deseas lograr. En este caso, comenzamos dibujando wireframes en un bloc de notas, incluyendo todas las secciones que Jesse quería en su sitio web. Quería una sola página por la que los usuarios pudieran desplazarse, así que lo dividimos en diferentes secciones.
🎨 Creando un mock-up de baja fidelidad
Una vez que tuvimos una idea general del diseño, creamos un mock-up de baja fidelidad utilizando iconos y líneas para representar el texto. Esto nos dio una mejor idea del diseño general y la estructura del sitio web.
📱 Mapeando el diseño en un iPad
Después de esbozar los wireframes y crear un mock-up de baja fidelidad, mapeamos el diseño una vez más en un iPad con una fidelidad ligeramente mayor. Esto nos ayudó a refinar el diseño y realizar los cambios necesarios antes de pasar a la versión de alta fidelidad.
🎨 Creando la versión de alta fidelidad
Con los wireframes y el mock-up de baja fidelidad completos, estábamos listos para crear la versión de alta fidelidad. Utilizamos Figma para iterar continuamente a través de diferentes elementos de diseño y obtener inspiración de diversas fuentes. También aprovechamos momentos de inspiración y los incorporamos al diseño siempre que fue posible.
📝 Refinando el texto
Al rediseñar un sitio web, es importante considerar el texto y cómo se integra en el diseño general. A menudo reformulamos el texto para que tenga más sentido con el diseño y asegurarnos de que fluya correctamente.
🎨 Diseñando los botones
El diseño de los botones es crucial para la experiencia del usuario en general. Creamos un diseño naranja con texto blanco y oscurecimos un poco los colores de fondo para que el texto blanco resalte más.
📱 Diseñando la sección de cabecera
La sección de cabecera es lo primero que los usuarios ven al visitar un sitio web, por lo que es importante que destaque. Optamos por un color azul intenso similar a VS Code, así como un color naranja similar al logotipo de Code Stacker. También hicimos que los elementos clave estuvieran en negrita y subrayados para que resalten más.
🎨 Diseñando las secciones de llamada a la acción
Las siguientes tres secciones son llamadas a la acción que explican por qué alguien querría comprar el curso. Las mantuvimos simples con algo de texto y color, así como un pequeño icono. También utilizamos elementos visuales como flechas y colores para llamar la atención y animar a las personas a hacer clic en el botón para obtener el curso.
📱 Mostrando las características
La siguiente sección muestra algunas de las características del curso. Incluimos una tabla de contenidos de las características, así como imágenes y descripciones atractivas para cada una.
🎨 Diseñando la tabla de precios
El diseño de la tabla de precios es crucial para la experiencia del usuario en general. La mejoramos un poco con más sangría, mejores colores y botones para que luzca limpia y destaque.
📱 Diseñando la sección de testimonios
La sección de testimonios es donde mostramos los comentarios de otras personas sobre el curso. Utilizamos mucho el efecto de vidrio en la interfaz de usuario y agregamos algunos degradados en el fondo para darle un brillo sutil. También incluimos una cita destacada de una sola frase que las personas pueden leer, así como el nombre de la persona que hizo ese testimonio, su avatar y el contexto completo del testimonio.
🎉 Lanzando el sitio web
Después de completar el rediseño, el sitio web estaba en vivo y listo para recibir visitantes. Code Stacker quedó encantado con el resultado y puedes echar un vistazo al enlace a continuación. Además, hemos creado un curso de diseño durante los últimos dos años que incluye todo lo que sabemos sobre teoría del color, tipografía, diseño de componentes y mucho más. Son cientos de páginas de material del curso, así como tutoriales en video sobre todo lo que hemos aprendido en la última década. Si deseas tener acceso a eso y obtener un descuento, lo lanzaremos muy pronto y puedes verlo en el enlace a continuación.
🌟 Aspectos destacados
- Esboza una idea general de lo que deseas lograr.
- Crea un mock-up de baja fidelidad utilizando iconos y líneas para representar el texto.
- Mapea el diseño una vez más en un iPad con una fidelidad ligeramente mayor.
- Utiliza Figma para iterar continuamente a través de diferentes elementos de diseño y obtener inspiración de diversas fuentes.
- Refina el texto para que tenga más sentido con el diseño y asegúrate de que fluya correctamente.
- Diseña botones que sean fáciles de usar y hagan que el texto resalte.
- Haz que la sección de cabecera destaque con un color intenso y elementos clave en negrita y subrayados.
- Utiliza elementos visuales como flechas y colores para llamar la atención y animar a las personas a hacer clic en el botón para obtener el curso.
- Muestra las características del curso con una tabla de contenidos, imágenes atractivas y descripciones para cada una.
- Diseña la tabla de precios para que luzca limpia y destaque.
- Utiliza el efecto de vidrio en la interfaz de usuario de la sección de testimonios e incluye una cita destacada, el nombre de la persona que hizo el testimonio, su avatar y el contexto completo del testimonio.
❓ Preguntas frecuentes
P: ¿Cuánto tiempo lleva rediseñar un sitio web?
R: El tiempo que lleva rediseñar un sitio web depende de la complejidad del diseño y el número de páginas. Sin embargo, generalmente lleva varias semanas o meses completar un rediseño.
P: ¿Qué herramientas utilizas para rediseñar un sitio web?
R: Utilizamos una variedad de herramientas, incluyendo Figma, Sketch y Adobe XD, para rediseñar sitios web.
P: ¿Cómo te aseguras de que el sitio web sea fácil de usar?
R: Nos aseguramos de que el sitio web sea fácil de usar diseñando botones que sean fáciles de usar, haciendo que el texto resalte y utilizando elementos visuales como flechas y co
