Una de las partes más emocionantes de crear un nuevo sitio web es la fase de creación del diseño. En muchos casos, las personas simplemente activan WordPress y comienzan a probar diseños. Sin embargo, este enfoque no es el mejor si desea que su sitio web esté en funcionamiento lo antes posible.
Las maquetas de diseño web le permiten esbozar cómo se verá su sitio web. Una vez que tenga una maqueta en su lugar, todo lo que tiene que hacer es traducirla a la pantalla y listo. En este artículo, hablaremos sobre por qué tiene sentido usar maquetas para su próximo proyecto web. Luego, le presentaremos Adobe XD , una herramienta gratuita que puede usar para crear maquetas, y le enseñaremos cómo usarla.
¡Vamos a simularlo!
A muchos de nosotros nos gusta esbozar diseños preliminares para nuevos sitios web antes de comenzar a trabajar en ellos. No es necesario que sea algo elegante: imagine el tipo de boceto que haría en el reverso de una servilleta y obtendrá la idea.
Eso es lo que llamamos un diseño ‘wireframe’. Es una representación de baja fidelidad de cómo se vería el producto final. El punto es que puedas plasmar tus ideas en papel, ver si tienen sentido y compartirlas con otros.
Las maquetas, por otro lado, son mucho más de alta fidelidad. En lugar de una servilleta, probablemente desee utilizar una herramienta de diseño dedicada. El objetivo, en este caso, es diseñar algo que se parezca lo más posible al producto final.
Hay muchas ventajas en la creación de maquetas para sus proyectos web, como:
- Llegar a planificar todo el diseño de su sitio web sin tener que tocar una línea de código o un creador de páginas .
- Puede visualizar la ubicación de cada elemento, cómo deben verse y la forma en que encajan entre sí.
- Puede revisar las maquetas con otros miembros de su equipo para obtener más comentarios.
- Es mucho más fácil mostrarle a un cliente una maqueta que construir un sitio web completo y luego pedir su opinión.
Hay muchas ventajas en la creación de maquetas para las páginas de su sitio. Sin embargo, también implican mucho trabajo extra ya que no se armarán solos. Para crear una maqueta de alta fidelidad, necesitará experiencia con aplicaciones de diseño especializadas. Con esto en mente, pasemos a la siguiente sección.
Una introducción a Adobe XD
Adobe XD es una aplicación liviana creada para ayudar a los diseñadores de UX/UI a crear wireframes, mesas de trabajo, prototipos interactivos y maquetas de alta fidelidad. A diferencia de otras aplicaciones de Adobe , no necesita una suscripción para usar Adobe XD. Simplemente regístrese para obtener una cuenta gratuita de Adobe, descargue e instale la aplicación y estará listo para comenzar.
Si bien la aplicación incluye características similares a otros programas como Photoshop, Adobe XD está más orientado al diseño de UX/UI . Por ejemplo, le permite agregar fácilmente elementos como botones y formularios a sus diseños. Incluso puede actualizar elementos en varias mesas de trabajo, como logotipos, si todos forman parte del mismo sitio web. Combinadas, todas estas características hacen que la creación de maquetas sea pan comido.
Características clave:
- Crea mesas de trabajo para tus wireframes y maquetas.
- Diseño de diseños para la web y dispositivos móviles.
- Agregue fácilmente casi cualquier tipo de elemento que pueda imaginar a sus diseños.
- Actualice elementos vinculados (como logotipos) en varios diseños a la vez.
Precio: Gratis | Más información
Cómo crear maquetas web con Adobe XD
Para comenzar, vaya a la página de inicio de Adobe XD y haga clic en el botón Obtener XD gratis . Se abrirá una nueva página ahora y su descarga debería comenzar automáticamente. Cuando termine, inicie el archivo de instalación, que le pedirá las credenciales de su cuenta de Adobe antes de continuar:
Recuerde que no necesita una suscripción paga para completar este paso, así que simplemente regístrese para obtener una cuenta gratuita de Adobe si no tiene una. Una vez hecho esto, ingrese sus credenciales en el instalador y comenzará la descarga de la aplicación Adobe XD. El proceso solo debería tomar unos minutos, pero tenga en cuenta que Adobe también instalará su Creative Cloud al mismo tiempo.
Una vez que Adobe XD esté listo para funcionar, puede iniciar el programa y le preguntará qué tipo de proyecto desea abordar primero:
Para este tutorial, optamos por la opción Web 1920 que ves en la imagen de arriba. Una vez que ingrese a Adobe XD, verá un cuadrado en blanco en el medio de la pantalla, que representa su nueva mesa de trabajo:
Puede agregar varias mesas de trabajo, cada una de las cuales representa una página única, haciendo clic en el botón Capas en la parte inferior izquierda de la pantalla. Ahora seleccione su mesa de trabajo inicial, elija la opción Duplicar y aparecerá una nueva mesa de trabajo en su tablero:
Puede saltar entre mesas de trabajo a voluntad, pero por ahora, concentrémonos en cómo editar solo una, que será nuestra maqueta de la página de inicio. Avancemos y seleccionemos una de las mesas de trabajo y aumentemos un poco el zoom, usando el menú en el lado derecho de la pantalla:
El mismo menú incluye opciones para ajustar el tamaño de su mesa de trabajo, rellenarla con un color y mostrar una cuadrícula para que tenga un mejor control sobre los elementos que coloca dentro. Por ahora, solo establece un color para tu fondo:
Ahora, agreguemos el primer elemento de nuestra maqueta, una barra de navegación secundaria en la parte superior de la pantalla. Podemos hacer esto usando la herramienta de rectángulo en el menú del lado izquierdo:
Seguimos adelante y agregamos un poco de color de fondo a la barra de navegación, así como texto, usando la herramienta Texto del menú de Adobe XD:
Ahora, avancemos y veamos cómo Adobe XD maneja una llamada a la acción (CTA). Para agregar uno, usemos la herramienta Rectángulo nuevamente. También redondeamos las esquinas del botón usando el menú de la derecha, también establecimos un color de fondo y le agregamos texto:
En la captura de pantalla anterior, puede ver la opción de usar esquinas redondeadas en lugar de las regulares, y ya sabe cómo agregar texto y cambiar el color de fondo. A continuación, trabajemos en el menú normal usando las herramientas Texto y Rectángulo una vez más. Así es como se ve nuestra maqueta después de un par de pasadas:
En este punto, estamos listos para agregar el logotipo de Elegant Themes arrastrando el archivo de imagen desde nuestra computadora a nuestra mesa de trabajo:
En caso de que no lo hayas notado, estamos creando una maqueta del índice del blog de Elegant Themes. Las proporciones no son perfectas, por supuesto, y algunos detalles están fuera de lugar. Sin embargo, nuestro objetivo era mostrarle lo que puede hacer con Adobe XD incluso sin ninguna práctica.
A continuación, agreguemos el encabezado principal y una barra de búsqueda usando (lo adivinó), las herramientas Rectángulo y Texto :
Ahora, para el golpe de gracia , agreguemos algunos extractos de publicaciones de blog a nuestra maqueta. Para empezar, agreguemos dos rectángulos más a nuestra mesa de trabajo. Puede crear uno y duplicarlo para facilitarle las cosas. Cuando los arrastre, notará que Adobe XD le muestra las medidas para mantenerlos en línea:
Ahora tenemos nuestros dos rectángulos vacíos. Vamos a agregarles títulos usando la herramienta Texto :
Finalmente, sigamos adelante y agreguemos las imágenes destacadas de cada publicación. Al igual que antes, debe arrastrar los archivos de imagen a Adobe XD desde su computadora.
Ahora demos un paso atrás y veamos nuestra maqueta completa:
No es una recreación de píxeles perfectos, pero se ve lo suficientemente bien como para un intento incipiente. En otras palabras, usar Adobe XD debería ser un paseo por el parque, incluso si es nuevo en el uso de herramientas de diseño, y puede crear algunas maquetas realmente geniales con él.
En última instancia, cada maqueta que crea con Adobe XD implica agregar los elementos que desea, usar los colores correctos y colocar imágenes donde sea necesario. Cada una de estas acciones es bastante simple, por lo que no hay razón para tener miedo del proceso.
Conclusión
Las maquetas son una excelente manera de plasmar todas sus ideas en papel (o pantalla). Luego, puede refinarlos hasta que encuentre el diseño perfecto para su sitio web. Es mucho más fácil crear maquetas múltiples y luego intentar replicarlas en su sitio más tarde, por lo que es una técnica que debe adoptar.
Usando Adobe XD , crear maquetas de alta fidelidad se vuelve muy simple. No tiene tanto impacto como Photoshop, pero puede hacer un gran trabajo cuando se trata de estructuras alámbricas y maquetas (¡además, es gratis!).
¿Tiene alguna pregunta sobre cómo usar Adobe XD para crear maquetas para sus sitios web? ¡Hablemos de ellos en la sección de comentarios a continuación!
Imagen en miniatura del artículo por Darko 1981 / shutterstock.com