() translation by (you can also view the original English article)
En este tutorial vamos a crear un diseño para una tienda de productos artesanales. No hablaré demasiado de tamaños de letra o códigos de color específicos, sino que me centraré en explicar las opciones de letra, los colores, las proporciones, etc.
Recursos del tutorial
Para seguirlo necesitarás algunos recursos (de libre acceso):
- Fotos de Unsplash
- Fotos de StockSnap.io
- Fuente Sans Pro de Font Squirrel
- Fuente Serif Pro de Font Squirrel
Definir los objetivos empresariales
Antes de empezar a diseñar el esquema, hay que definir cuáles son los objetivos empresariales de este ejercicio. ¿Es la máxima prioridad dar a conocer la marca? ¿Se trata de vender productos a nuevos clientes, o de proporcionarles valor primero, obtener sus datos y vender después? Hay que pensar en el marketing, en los objetivos de la empresa y en las necesidades de los usuarios para diseñar un diseño que persuada a tu público objetivo a realizar las acciones que deseas.
Empieza por hacerte estas preguntas:
- ¿Qué vendemos?
- ¿Quién estaría interesado en comprar nuestros productos?
- ¿Por qué deberían comprarnos?
- ¿Cómo vamos a aportar valor?
Para este tutorial he decidido centrarme en imágenes fuertes y en el uso generoso del espacio negativo para crear una sensación de libertad y claridad. Quiero que el diseño tenga clase y atraiga a las personas que se preocupan por su imagen.
Preparación
Antes de saltar a Adobe Photoshop y poner a punto los elementos visuales, vamos a definir algunas variables como los colores, el estilo y la dirección general.
Paso 1
Empieza a recopilar imágenes que te gusten para tu tablero de ideas y tu paleta de colores. Suelo usar Pinterest, pero gomoodboard.com es muy útil y fue diseñado exclusivamente para crear moodboards.
Paso 2
A continuación, vamos a crear una combinación de colores para tu diseño; una que sea relevante para tu marca y que atraiga a tu público objetivo. Suele ser una buena práctica utilizar un generador de paletas de colores como Adobe Color CC (antes Kuler) que puede ahorrarte tiempo en la elección de colores.
Sube una imagen de tu moodboard y mira qué colores se generan. Ajusta la paleta para que se adapte a tus necesidades y guarda los colores para futuras referencias.
Elección de los tipos de letra
Inspirándonos en algunos de los elementos de nuestro moodboard, nos decantaremos por la familia tipográfica Source Pro, incluyendo las versiones sans y serif de la fuente. Una mezcla de ambos añadirá una sensación de equilibrio y titulares fuertes.
Prepara el documento
Antes de que nos pongamos creativos en Adobe Photoshop, vamos a realizar algunas tareas domésticas, como crear un nuevo documento y establecer algunas directrices.
Paso 1
Abre Adobe Photoshop y crea un nuevo documento CMD+N. Define sus dimensiones a lo que crees que se ajustará a tus necesidades de diseño, en mi caso es 1400x3564px.
Paso 2
Después de eso, establece algunas guías para que nuestro diseño tenga suficiente espacio y se vea equilibrado. Establecer algunas pautas garantizará la pulcritud y ayudará a definir la anchura de nuestro sitio web a efectos de este diseño. Ve a Ver > Nueva Guía... y establece algunas pautas. Suelo elegir 1000px como punto de partida y añado algunas directrices de las esquinas para que tenga espacio para respirar.
Nota: Directrices utilizadas para este tutorial: vertical a 200px, 500px, 550px, 700px, 850px, 900px y 1200px.
Consejo: También puedes utilizar el plugin GuideGuide de Photoshop para hacer este proceso aún más rápido.
Acogida de nuevos clientes
Comenzaremos el diseño de nuestra tienda creando una zona superior visualmente atractiva para captar la atención del visitante y enviar un mensaje instantáneo de lo que es el sitio.
Paso 1
Crea un nuevo grupo llamado "Navegación" y establece una nueva directriz horizontal de 130px. Aquí es donde residirá nuestro logotipo, los enlaces de navegación y la búsqueda. Coloca tu logotipo a la izquierda. Si no tienes una, crea una forma de rectángulo y coloca el texto en ella.
Paso 2
Ahora coloca tus elementos de navegación como un texto puro. Desde la fase de planificación ya deberías saber qué necesitas incluir en tu navegación para que tu cliente potencial la encuentre útil. Utiliza la Herramienta Tipográfica Horizontal (T) para escribir los títulos de tus enlaces y colócalos al lado de tu logotipo dejando un buen espacio.
Paso 3
La búsqueda es una función increíblemente importante en lo que respecta al comercio electrónico. Haz que tu campo de búsqueda sea prominente y accesible colocándolo a la derecha en la navegación superior principal. Para crearla utiliza la Herramienta Rectángulo (U) y la Herramienta Tipo Horizontal (T). Observa cómo los colores se inspiran en la imagen que hemos utilizado con Adobe Color CC.
Paso 4
Ahora es el momento de colocar una imagen llamativa que será el punto central de todo el sitio web una vez que el visitante la vea por primera vez. Como es habitual en la web hoy en día, elegiremos una imagen de alta calidad con un enfoque fuerte y claro, que permita superponer el texto y los elementos de la interfaz de usuario.
Usando la Herramienta Rectángulo (T) dibuja un rectángulo de 1400x700px (cualquier color) y colócalo justo debajo de la navegación superior (¿recuerdas la pauta horizontal de 130px? Es para esta forma). A continuación, arrastra una imagen de tu elección y coloca su capa sobre la capa de la forma del rectángulo.
A continuación, mantén pulsada la tecla Alt y pasa el ratón por encima de la capa de la imagen hasta que veas una pequeña flecha apuntando hacia abajo, entonces suelta el ratón para crear una máscara de recorte para que la imagen solo sea visible dentro del área del rectángulo.
Pulsa CMD+T para cambiar el tamaño de la foto, asegurándote de que mantienes pulsada la tecla Shift para que el tamaño sea proporcional.
Paso 5
Para ayudar a nuestra imagen a atraer la atención más hacia el centro horizontal, vamos a añadir un degradado que va de transparente a negro en la parte inferior. Coge la Herramienta de Degradado (G) y personalízala para que pase de negro #000000 a transparente. A continuación, mantén pulsada la tecla Shift y arrastra con el ratón desde la parte inferior de la imagen hasta el centro para crear un degradado. Luego conviértela en una máscara de recorte y reduce su opacidad al 50% para que no sea tan intensa. Cambia el nombre de la capa a "Sombra" para que sea fácil de identificar.
Paso 6
Ahora es el momento de utilizar un titular potente que atraiga la atención del visitante y le anime a saber más. Utiliza la Source Sans Pro en grande y en negrita y escribe un titular corto. He utilizado Source Sans Pro (Negro) 70px de tamaño y 160 para el seguimiento de las letras.
Paso 7
Has conseguido la atención del usuario, ahora proporciona un mensaje secundario y, lo más importante, una llamada a la acción (también conocida como CTA). He utilizado Source Serif Pro (Regular) de 28px para el subtítulo y he reutilizado el botón de búsqueda para mantener la coherencia de la UI.
Fíjate en el espaciado que estoy utilizando. Deja siempre suficiente espacio alrededor de los elementos para que se perciban más rápido y parezcan más organizados. Además, si te fijas bien, verás que las capas de texto están más cerca unas de otras. Esto se debe a la ley de proximidad de la Gestalt.
"Según la ley de la proximidad, las cosas que están cerca unas de otras parecen estar agrupadas".
Crear confianza
Y terminamos con la zona de "bienvenida a los nuevos clientes", o cabecera. Una vez que tenemos la atención y el interés del visitante, es el momento de mostrarle otras ventajas que ofrece nuestra tienda.
Paso 1
Como hemos mantenido la zona superior del sitio web bastante minimalista, seguiremos una estética limpia y sencilla para el resto del diseño.
Coloca un titular que pueda interesar a tus visitantes y una breve descripción que los anime aún más. He utilizado Source Sans Pro (Semibold) 24px y un gris oscuro #282723. Asegúrate de dejar mucho espacio por encima del titular para que sea coherente con la zona superior.
Para la descripción utiliza algo más brillante para que sea visualmente más débil y se perciba al instante como de importancia secundaria. He utilizado 16px Source Serif Pro (Regular) y el color es gris #adadad.
Paso 2
Una forma eficaz de generar confianza es utilizar imágenes atractivas de alta calidad que activen el cerebro, creando deseo. Asegúrate de invertir tiempo en hacer buenas fotos de tus productos o en contratar a un fotógrafo profesional para que haga el trabajo. Para este tutorial utilizaré productos ficticios para no tener que hacer yo misma las fotos, sino que utilizaré las de Unsplash y Stock Up.
Elige la Herramienta Rectángulo (U) y dibuja una forma de rectángulo. A continuación, arrastra la foto del producto a Photoshop, colócala sobre el rectángulo y crea una máscara de recorte. Cambia el tamaño de la imagen si es necesario pulsando CMD+T.
Paso 3
Para simplificar las cosas, solo proporcionaremos información básica sobre el producto, incluyendo el título y el precio (lo que puede provocar que los usuarios quieran saber más).
Elige el mismo tipo de letra Source Serif Pro e introduce el título utilizando un gris más oscuro que el utilizado para el titular de la sección. A continuación, utiliza un gris más claro para la etiqueta del precio, ya que es una información secundaria y no requiere demasiada fuerza visual. Otra cosa a tener en cuenta es que los elementos de nuestra tienda como los títulos, los botones de llamada a la acción y los bloques de descripción están centrados.
Paso 4
Ahora pon todas las capas de producto en un grupo y duplícalas pulsando CMD+J, colócalas entre las directrices verticales definidas anteriormente dejando espacios entre ellas.
Paso 5
Terminamos con una sección "Trending" con tres productos. Según Paul Seys, tres opciones es el número óptimo para que tu oferta sea más persuasiva.
"Una de estas técnicas se conoce como "Efecto Ricitos de Oro" (o "Precios Ricitos de Oro"). El término deriva del cuento de los hermanos Grimm en el que Ricitos de Oro come tres cuencos de gachas; el primero demasiado caliente, el siguiente demasiado frío, pero el último "en su punto"".
Ahora vamos a poner un pequeño divisor para que separe el diseño en secciones. He utilizado la Herramienta Línea (U) 1px gris claro #e6e6e6 para que sea visible, pero no demasiado fuerte.
Consejo: Mantén pulsada la tecla Shift para dibujar fácilmente una línea perfectamente horizontal.
Paso 6
Ahora vamos a crear otra sección que muestre más productos y la llamaremos "Popular". La gente siempre busca la validación y mostrar productos populares que otras personas disfrutaron les da la prueba social de que estos productos valen el dinero.
Duplica CMD+J y personaliza el titular, la descripción y los productos de la sección "Trending". Duplica más productos y haz una cuadrícula de 3x2 de tus mejores productos.
Captación de clientes potenciales
Después de exponer la mayor parte de los elementos visuales para evocar el interés y el deseo, es el momento de captar la información de los visitantes en caso de que no les apetezca comprar en ese momento, para poder contactar con ellos más adelante.
Paso 1
Incluiremos una sencilla sección de blog utilizando el mismo formato de titular y descripción y algunos extractos de las entradas del blog para redirigir a los usuarios a contenidos que puedan interesarles.
Escoge la Herramienta Rectángulo (U) y dibuja un enorme rectángulo que servirá como fondo de esta nueva sección. Utiliza un gris claro sutil para crear una ligera separación de los productos. He utilizado #fbfafa. Ahora duplica el título y la descripción de la sección anterior y colócalos sobre el nuevo fondo.
Paso 2
Ahora elige la Herramienta Tipo Horizontal (T) e introduce el título, la fecha y un breve extracto de tu entrada en el blog. He vuelto a utilizar Source Serif Pro para el título y la descripción y Source Sans Pro para la fecha.
Incluso en este bloque del blog se observa una clara jerarquía visual, siendo el título el más oscuro y grande y los demás elementos más pequeños y de color más claro. Emplea siempre la jerarquía visual para conseguir un flujo lógico. Para mantener la coherencia, las entradas del blog deben ser tan grandes como los bloques de productos.
Paso 3
Ahora pon todas las capas de la entrada del blog en un grupo y duplícalo dos veces pulsando CMD+J, colócalo entre las directrices verticales dejando los espacios intermedios como con los productos.
Después de mostrar algunos productos interesantes y publicaciones valiosas en el blog, es el momento de empujar un poco a tus visitantes y proporcionar un formulario con una clara llamada a la acción para suscribirse.
Una vez más, coge la Herramienta Rectángulo (U), elige un color más oscuro, como el #282723 y dibuja un fondo para nuestro formulario de suscripción. Si utilizas un fondo notablemente más oscuro, crearás un contraste que atraerá automáticamente la atención de los espectadores.
Paso 5
Ahora escribe una breve reseña explicando por qué la gente debería suscribirse; expresa los beneficios sobre las características. Después de eso navega a la navegación de nuestro diseño y duplica el campo de búsqueda incluyendo el botón, lo reutilizaremos para el formulario de suscripción.
Arrastra las capas duplicadas y colócalas encima de nuestro fondo recién creado y luego personaliza los campos de entrada y el botón de llamada a la acción.
Paso 6
Por último, todas las plantillas tienen que tener un pie de página con enlaces incluidos para que la gente pueda desplazarse hacia abajo y encontrar la navegación a las páginas clave, como el servicio de atención al cliente, la información de contacto, las redes sociales y más.
Una vez más, duplica las capas de texto de la entrada del blog y personalízalas para que muestren los enlaces de tu elección. Dividir los diferentes grupos de enlaces y formar columnas igualmente espaciadas en una fila.
Último toque: añadir una línea de copyright en la parte inferior del diseño.
¡Felicidades!
¡Eso es todo! Por fin hemos terminado con el diseño del tema para nuestra tienda potenciada por Shopify, ahora sigue adelante y revisa las capas de tu documento, elimina las innecesarias y entrégalo a tu desarrollador o, mejor aún, ¡codifícalo tú mismo!
