Diseño de un diario Web inspirado en VSCO en Sketch
En este
tutorial, te enseñaré cómo diseñar una aplicación de diario web sencilla
y sofisticada en Sketch, tanto para móviles como para escritorio. Utilizaremos
la estética de VSCO como inspiración y, al final de este tutorial,
habrá tomado conciencia de muchas de las características más importantes
de Sketch.
En este
tutorial, te enseñaré cómo diseñar una aplicación de diario web sencilla
y sofisticada en Sketch, tanto para móviles como para escritorio. Utilizaremos
la estética de VSCO como inspiración y, al final de este tutorial,
habrá tomado conciencia de muchas de las características más importantes
de Sketch.
Además
de estas habilidades específicas de la aplicación, también obtendrá una
comprensión más profunda sobre la configuración de tipos de letra y el
diseño con la ayuda de una escala modular. Vamos a utilizar algunas técnicas básicas e intermedias en Sketch. ¡Empecemos!
Activos del Tutorial
Usted necesitará los siguientes activos para seguir adelante:
Antes de abrir Sketch y crear un nuevo documento, debo señalar que este concepto es totalmente teórico. Exigiría un análisis de mercado mucho más profundo antes de que pudiéramos convertirlo en un producto real y utilizable. Siempre
he sido un apasionado de la narración en línea con hermosas fotos, así
que creé este concepto para enseñarle a seguir las tendencias web desde
la perspectiva de un diseñador.
Tipografía
Cuando
empiezo un proyecto, siempre empiezo con la tipografía porque creo
firmemente que la tipografía es la herramienta más importante que los
diseñadores de comunicación tienen a su disposición.
Para
el texto del cuerpo y los títulos más grandes, elegí Merriweather, una
fuente serif inspirada en las caras de libros de estilo antiguo, que
funciona bien para contar historias y viajes. En pantallas de alta resolución da la sensación de un diario real, impreso.
Por otro
lado, para los elementos comunes de la interfaz de usuario, como botones
y etiquetas, quería algo moderno, así que elegí Montserrat, que es una
fuente limpia y simple sans-serif.
Configuración de las mesas de trabajo
En primer lugar, me gustaría escribir un poco más acerca de cómo me acerco a mi configuración de diseño y tipografía. Tim Brown, administrador de tipos de Adobe Typekit, creó una fantástica herramienta llamada escala modular. Esta
herramienta es grande: después de definir nuestro tamaño de texto ideal y
sugerir un número importante, se dividirá y multiplicara estos números
por un valor matemáticamente familiar como la proporción de oro o quinto
perfecto. En un
momento, cuando establecemos nuestra jerarquía tipográfica y los
elementos básicos de nuestro diseño, siempre me referiré a estos
números.
Nota:
Obviamente, en algunos casos tenemos que romper esta regla, pero nos
proporcionará un equilibrio natural dentro de nuestro diseño y
tipografía, que es agradable a la vista.
Establecer
el tamaño de texto ideal a 18px y 670px definido como un número
importante, ya que este será el ancho real, utilizable de nuestra
disposición móvil.
Paso 1
Después de abrir Sketch, seleccionemos la opción Artboard (A) en el menú Insert .
Para
nuestra vista móvil, te recomiendo que elijas las dimensiones del
iPhone 6, pero si tienes un modelo de iPhone diferente, es mejor elegir
uno. El uso de Sketch tiene una gran ventaja ya
que le permite reflejar su trabajo a su dispositivo iOS en tiempo real
con Sketch Mirror, sin exportar ni transferir imágenes. Mirror es una parte esencial de mi flujo de trabajo de diseño, porque
con él, puedo ver inmediatamente el resultado final de mi trabajo en mi
mano.
Para activar esta función, necesitará la aplicación Sketch Mirror desde la App Store. A
continuación, haga clic en el icono Mirror en Sketch (asegúrese de que
sus dispositivos están en la misma red o conectados a través de un cable
USB).
Para la vista de escritorio, elegí el canvas Desktop HD, que es 1440px de ancho.
Sugerencia: después podemos modificar la altura de nuestra mesa de trabajo cambiando los números en el panel del inspector.
Paso 2
Después
de que tengamos las mesas de trabajo apropiadas, es hora de fijar
algunas guías así que nuestra disposición tiene bastante espacio y
parece equilibrada. Para activar las reglas y las guías básicas, vaya a View > Show Rulers (⌃R). A
continuación, seleccione el centro de nuestro lienzo móvil, que estará
en 375px y también poner una marca en el primero y el último 40px, para
que funcione con un relleno horizontal 40px.
Para crear una guía, haga clic en la regla en 40px, en 375px y en 710px puntos.
En el caso de la vista de escritorio, también establecemos una guía central (720px) y 100px relleno.
Creación del área de navegación superior
Nota:
Si desea crear una maqueta realista con una barra de menús original de
Safari, puede crear una captura de pantalla y pegarla en la imagen
recortada, o puede descargar la plantilla GUI del iPhone 6 (iOS 8)
creada por el (antiguo) Teehan+Lax equipo.
Sugerencia:
Es bueno saber que Sketch también tiene una plantilla de iOS
incorporada, que puede encontrar en File > New From Template > iOS UI Design.
Paso 1
Para crear nuestra barra de navegación superior, seleccionemos la herramienta Rectangle (R).
Sugerencia: Realmente te recomiendo que aprendas los atajos más importantes, porque son fáciles de usar. En
la mayoría de los casos la tecla de acceso directo es la primera letra
de nuestra herramienta, por lo que en el caso de Rectángulo es R, en el
caso de Oval es O, en el caso de la Línea es L.
Con la herramienta Rectángulo crear un 750px de ancho, 120px rectángulo alto, que tiene un #F9F9F9 color de fondo.
Sugerencia:
En cuanto a los colores, siempre utilizo los números HSBA (Tono,
Saturación, Brillo, Alfa), porque es fácil modificarlos e imaginar el
resultado por adelantado.
Paso 2
Seleccione la herramienta Oval (O) y, mientras presiona las teclas Mayús + Alt, dibuje un círculo perfecto de 80 píxeles. En
el lado derecho, en el panel Inspector, haga clic en el botón Fills y, bajo la cuarta pestaña, cargue una imagen de perfil.
Sugerencia: Si pulsa la tecla Alt y mueve el cursor, podrá ver las distancias en píxeles entre los elementos seleccionados.
Paso 3
Seleccione la herramienta Text (T) y coloque un nombre junto a la imagen de perfil con 20px acolchado a la izquierda. Establezca el tamaño de la fuente a 22px y el color de la fuente a #9E846E. Puede establecer letras mayúsculas en el menú Type > Uppercase.
Coloque
el texto "New story" con la misma configuración en el lado derecho
de nuestra mesa de trabajo con 20px de relleno derecho.
Paso 4
Ahora, crearemos nuestro primer icono, que será un icono '+'.
Vamos a crear un rectángulo de 36x6px con nuestra herramienta Rectangle (R), que tiene el mismo color que nuestro texto. Una vez hecho esto, duplique la forma resultante.
Seleccione la segunda y en el panel del inspector (en el lado derecho) gírela en 90 grados.
Después
de colocar los rectángulos uno sobre el otro perfectamente, arrastre el
primero y soltarlo en el segundo en el panel de capa. Al hacer esto, combinamos las dos capas separadas en un icono de 36x36px.
Paso 5
En
el caso de nuestra vista de escritorio, también tenemos el mismo
rectángulo de navegación de ancho completo con 70px de altura y 80% de
opacidad.
El tamaño del botón del menú es un poco más pequeño; 14px con un acolchado de 40px y una línea de separación #CCCCCC.
Diseño de la navegación de fondo fijo
En
el caso de la vista móvil, crearemos una barra de navegación inferior
fija, donde el usuario podrá elegir entre las páginas Grid, Favorite,
Search y Profile.
Paso 1
Al igual que con la navegación superior, comenzaremos con un ancho completo, 100px alto, #FFFFFF rectángulo con 90% de opacidad. Coloquemos una línea 1px #E6E6E6 en la parte superior de este rectángulo y la dividimos en cuatro columnas iguales.
Todos nuestros iconos son 50px alto y su color es #666666.
Consejo: puedes crear tu propio ícono 'Grid' organizando nueve rectángulos 14x14px con relleno 4px.
Creación del encabezado
Paso 1
Para
la imagen heroe, vamos a crear un rectángulo alto de 850px de ancho
completo y rellenarlo con una foto, como en el caso de la imagen del
perfil. Para asegurarse de que el texto en él será aún legible, puse una capa negra en la imagen con un 20% de opacidad.
En el caso de la imagen héroe de escritorio, recomiendo 1000px para la altura. Además, asegúrese de que la imagen esté debajo de la barra de navegación.
Paso 2
Para el título y el subtítulo, los tamaños de fuente son 60px y 24px, respectivamente. La fuente del título es Merriweather Bold y la fuente del subtítulo es Montserrat Regular.
Paso 3
El
último elemento de nuestra imagen héroe es el botón "Obtener
inspiración", donde el tamaño de la fuente es 24px con espaciado de
letras de 1,33px. El botón sí mismo es 338x89px con un borde blanco del ancho 3px. Coloquemos el botón 70px desde la parte inferior de la imagen.
Para la vista de escritorio, recomiendo un tamaño de fuente de 18px.
Creación de tarjetas de artículo
Paso 1
En este paso crearemos un lugar especial para la historia más popular. Para ello,
comience con un rectángulo relleno de imagen de 670x480 px, que tiene un
icono especial en la esquina superior derecha. Con este icono todos pueden marcar sus viajes favoritos en el sitio.
Este icono tiene un círculo blanco de 80x80px con 2px de espesor interior. El icono "pin" es 12px de ancho y usamos un número de 18px Montserrat Regular. Todo este icono tiene 70% de opacidad y 15px de relleno superior y derecho.
En el caso de la vista de escritorio, esta imagen es 1240x750px y el icono de "ubicación favorita" es 50x50px.
Paso 2
Ahora podemos crear nuestra primera tarjeta. Como primer paso, haga un rectángulo lleno de imagen 670x522px, luego otro rectángulo #FFFFFF de 670x435px. Coloque el segundo rectángulo en la parte superior de la primera.
Crear un tercer, 670x744px rectángulo y cubrir con los dos anteriores. Coloca esta capa debajo de las anteriores. Dar una pequeña sombra a esta capa, que hará que salga un poco.
El radio Borde es esencial en nuestro diseño de la tarjeta, así que fijó a 5px. Para ver este radio en cada capa, haga clic en esta capa de sombra y úsela como una máscara.
Debido
al hecho de que en el móvil no tenemos un estado hover, usaremos la
vista de vuelo como una vista estándar, por lo que toda la información
será visible de inmediato.
Después
de seleccionar cada capa conectada a este diseño de tarjeta, podemos
Group (⌘-G) juntos, entonces podemos duplicarlos fácilmente mientras
presionamos la tecla Alt y movemos el grupo original hacia abajo
(alternativamente podemos duplicar con ⌘-C y ⌘-V método, también.)
Consejo: Organizar nuestras capas en grupos es extremadamente útil en proyectos más grandes como éste.
En la vista de escritorio, podemos usar las mismas tarjetas. Para obtener resultados más sofisticados, sugiero modificar un poco las proporciones y tamaños de fuente.
No
hay que olvidar que tenemos una vista fija disponible en el escritorio,
por lo que podemos crear una versión más simple de la tarjeta como
predeterminada, revelando la más complicada cuando el usuario coloca el
cursor sobre la tarjeta.
Diseño de la sección de mapas con las colecciones de viaje
Con la ayuda de esta sección de mapa, es posible filtrar y buscar viajes por ubicación. Los resultados se mostrarán como colecciones escritas por múltiples autores.
Paso 1
Cree un rectángulo de 750x850px y rellénelo con una simple captura de pantalla de Google Maps. Para la barra de búsqueda, coloque otro rectángulo en la parte superior de este rectángulo con 80% de opacidad.
Sugerencia: Para facilitar la alineación, cree un cuadrado en el lado izquierdo de la barra de búsqueda. Después de esto podemos colocar nuestro ícono de búsqueda en el lugar correcto.
Elegí #B3483E como el color principal de mi interfaz de usuario de mapa. Este color fue inspirado por Pantone Marsala, el color de Pantone del año 2015.
Paso 2
Cuando alguien busca una ubicación específica, los resultados se mostrarán como pequeños cuadernos de diario. Cada libro de diario es un rectángulo lleno de imagen 320x414px, con un toque de sombra.
Podemos establecer el radio de borde selectivo seleccionando su forma y pulsando la tecla Intro. Si seleccionamos uno de los puntos del vector, podemos darles valores separados del radio de la frontera. Establezca el radio de borde superior e inferior derecho a 12px.
Paso 3
En la vista de escritorio, casi todo es idéntico, excepto que colocamos las colecciones al lado del mapa y no bajo el mapa.
Diseño de pequeñas tarjetas de artículos
Paso 1
El
diseño de tarjetas de pequeño artículo será similar a la creación de
las más grandes, excepto que eliminamos la descripción y la parte de
resumen de las historias. De esta manera podemos
mostrar más información en el mismo espacio, por lo que el usuario puede
ir aunque más contenido al mismo tiempo.
En
la vista de escritorio, además de disminuir el tamaño de las tarjetas,
también las clasificamos en una cuadrícula de tres columnas. Creo que esto nos dará una manera cómoda y rápida de descubrir y explorar nuevos contenidos.
Llamada a la acción
Antes de terminar nuestro proyecto con el pie de página, es inevitable que proporcionemos una sección de llamada a la acción.
Paso 1
Como siempre, necesitamos un rectángulo lleno de imágenes a 750x1000px. Con el fin de hacer el texto legible, agregamos una capa de degradado blanco a nuestra imagen. Nuestro
gradiente es de #FFFFFF opacidad 30%, a #FFFFFF opacidad 70%, por lo
que sólo es necesario modificar la cantidad de opacidad.
Sugerencia: un truco pequeño, pero a veces aún significativo para mejorar la legibilidad de nuestro texto es añadir sombra a él. En este caso, apliqué una sombra suave en mi texto del título y del párrafo.
Creación del área de pie de página
Para el área de pie de página utilizaremos una combinación de iconos de medios sociales y botones de texto.
Asegúrese de que nuestros iconos de medios sociales permanezcan aptos en pequeñas pantallas móviles. Hagámoslos por lo menos 44px de alto o ancho.
Una Idea Más
Para la
vista de escritorio podemos crear un estilo de navegación más, pero
tenemos que tener cuidado con esto y sólo usarlo por encima de 1440px de
ancho. Es equivalente a la navegación inferior fija en la vista móvil.
¡Felicitaciones!
Hemos completado nuestro hermoso diseño de aplicaciones web de diarios. Habiendo seguido este tutorial, espero que tenga más confianza en el uso de Sketch para grandes proyectos. Echemos un vistazo a un mashup de los productos finales:
Tengo curiosidad por saber cómo encontró el proceso, así que no dude en dejar comentarios y preguntas en los comentarios.
By
