Accentsconagua
Share
Lo que vas a crearEn este tutorial, lo guiaré a través de mi proceso de diseño para crear un diseño responsivo en Sketch. Para mantener las cosas al tanto, hablaré sobre una página de inicio receptiva que diseñé para una aplicación de viaje hace un tiempo. Vamos a entrar en eso!
Cada proyecto de diseño tiene algún tipo de configuración. Para este específico, voy a hablar brevemente sobre el contenido y los wireframes antes de saltar al proceso de diseño responsivo en Sketch.
En general, es una buena práctica obtener el contenido antes de comenzar un proyecto de diseño. Así es como comienzo todos mis proyectos (para lo que vale, es parte de mi contrato, algo que también recomiendo que ponga en práctica). Este tutorial se enfoca en el lado de la UI de las cosas, omitiendo las preguntas importantes de UX, como por qué se eligió cierto contenido, objetivos de la página, etc..
Mientras discute el contenido con su cliente o su equipo, tendrá que pensar en el contenido tanto en pantallas grandes como pequeñas. Sugiero escribir el contenido para dispositivos móviles primero, escriba todo en un documento de Google Doc. A continuación, abra el documento en su teléfono para determinar si está bien o si hay demasiado. Si se desplaza por las páginas y las páginas de contenido escrito en su teléfono, sabe que debe solucionarlo de inmediato..
Siempre, sin importar qué, recorte su contenido significativamente.
"Deshazte de la mitad de las palabras en cada página, luego deshazte de la mitad de lo que queda". -Eve Krug, no me hagas pensar
Una vez que esté satisfecho con el contenido móvil, puede agregar más a la versión de tableta y de escritorio. Las pantallas más grandes tienen más espacio en pantalla para manejar información más detallada.
Pasarás por revisiones, por supuesto. No te pongas demasiado nervioso en esta etapa. El contenido debe estar cerca del final, pero no tiene que estar escrito en piedra..
Para obtener más información sobre un enfoque de contenido primero, lea el artículo de James Deer:
Aceptar el contenido para todas las versiones del sitio es el primer paso para configurar su diseño. Ahora sabes qué esperar. Es absolutamente correcto mantener el contenido igual durante todo el proceso, al igual que hacer que cierto contenido aparezca o desaparezca según el tamaño de la pantalla..
El tipo de contenido más común en la web es el texto escrito. Sin embargo, hay otras cosas que incluyen imágenes y gráficos (es decir, fotografías o ilustraciones), videos, citas, archivos de audio (es decir, podcasts), juegos o incluso contenido incrustado a través de iframes.
No tienes que tener todos los videos y episodios de podcast clavados. Por lo menos tener una descripción del contenido visual o auditivo. Eso es lo que hice para este cliente. Sabía aproximadamente qué tipo de gráficos quería para cada sección para explicar con más detalle la propuesta de valor de cada sección. Pero, no tenía los gráficos reales en el momento en que se discutió el contenido. Acabo de describirlo.
El siguiente paso es representar el contenido visualmente. Con este proyecto elegí hacer esquemas simples de baja fidelidad. Quería dibujar rápidamente y visualmente el contenido. Hice dos wireframes, uno móvil y un escritorio porque cada uno tenía diferentes requisitos de contenido. Ambos te dan una idea general de la estructura visual de la página de destino..
Puedes usar la herramienta con la que te sientas más cómodo para los wireframes, pero usé Sketch aquí. También puede crear alambres de lápiz y papel de baja fidelidad. No importa. Incluso podría utilizar las técnicas que se describen más adelante en este tutorial para crear sensible wireframes.
Saltemos al diseño de la interfaz de usuario con Sketch.
Nos facilitará la vida si primero identificamos el contenido que es el mismo en todas las variantes y el contenido que es único para pantallas específicas.
En este diseño, los siguientes elementos están presentes en todas las pantallas:
Elementos únicos para diferentes tamaños de pantalla:
Perfecto. Ahora podemos comenzar a crear estos elementos de manera apropiada..
Mi botón básico tanto para el escritorio como para la tableta es un rectángulo de 352 px por 40 px con un radio de borde de 5 px. El fondo es # 7455FF. Dentro de las propiedades de cambio de tamaño, seleccione fijar el objeto a sus bordes izquierdo y derecho y establecer una altura fija.
La siguiente es la capa de texto, la copia del botón, con una fuente UI de Note Sans, negrita y un tamaño de fuente de 16px. Es blanco o #ffffff. Su ancho de alineación se establece en auto y no hay otras configuraciones establecidas en la capa de texto. Si lo desea, puede convertir el botón en un símbolo, aunque no es necesario para este diseño específico porque el botón solo aparece una vez en toda la página..
Cuando combina los dos elementos en un grupo (o un símbolo), debería poder cambiar el tamaño del ancho del botón sin problemas, con el texto en el centro sin importar el ancho del botón.
Otra cosa que puedes hacer es usar el complemento Anima para Sketch. Le permite crear pantallas fluidas que cambian de tamaño al mismo tiempo que mantienen sus propiedades juntas, como el espacio, el relleno o la altura. Es genial para diseños con formas..
Podemos usar Anima para pegar diferentes elementos de encabezado mientras se redimensiona de móvil a escritorio. También nos dará una buena indicación de cómo estos elementos se comportarán entre sí en otros tamaños de pantalla distintos a los que estamos diseñando en tamaños intermedios, como un teléfono más grande o una tableta..
Sin embargo, por lo que estamos haciendo hoy, este complemento no agrega demasiado.
Este diseño de página de destino requiere algunos encabezados grandes y hermosos. En la versión de escritorio, el h1 es 72px mientras que h2 es 32px. 72px es demasiado para el móvil. Tendremos que hacer que el encabezado h1 sea sensible. No es tan simple como la tipografía fluida está en CSS pero es factible.
Necesitamos crear un estilo para cada encabezado h1 y luego guardarlo como un estilo de texto con la convención o sintaxis de nomenclatura correcta. Esto nos permitirá seleccionar más tarde el h1 necesario según se necesite al diseñar el resto de la página. No es perfecto y bonito manual, pero así va..
Para h1, estos son los siguientes estilos: Noto Sans UI, negrita, tamaño 72 (escritorio), tamaño 48 (tableta) y tamaño 32 (teléfono).
La misma sintaxis se puede aplicar para organizar símbolos también. Por ejemplo: Nombre de estilo / subnombre / estilo específico
Entonces, para organizar nuestra tipografía, podemos usar la siguiente sintaxis para h1 grande para computadoras de escritorio: Encabezamientos / H1 / Escritorio, para tableta: Encabezamientos / H1 / Tablet y para teléfonos: Encabezados / H1 / Teléfono.
La razón por la que dice Encabezados / h1 en el menú desplegable, por ahora, es porque no hemos agregado ningún otro estilo. Así que vamos a h2 y agregamos otra capa de jerarquía en los estilos de texto.
Para h2, estoy usando los siguientes estilos: Noto Sans UI, negrita, tamaño 73 (escritorio y tableta) y tamaño 18 (teléfono). Usemos la siguiente sintaxis para h2 en los teléfonos: Encabezados / H2 / Teléfono. Para la tableta podemos hacer dos cosas aquí, podemos combinarla con el escritorio y llamarla Encabezamientos / H1 / Escritorio + Tableta o podemos tener dos estilos separados que son simplemente iguales. Estoy escribiendo sobre este diseño después de que se haya terminado, por lo que es un poco parcial. Voy a decir que separemos la tableta del escritorio porque es una mejor práctica de diseño..
Con los estilos de tipografía en Sketch, realmente puede obtener detalles y organizarse con sus reglas de sintaxis. Sin embargo, a partir de este escrito, no hay ninguna característica en Sketch, ni ningún complemento, que cambie el tamaño de la tipografía para usted de la manera en que funciona la tipografía fluida a través de CSS. A partir de ahora, sigue siendo un proceso manual..
A continuación, vamos a crear símbolos para reutilizarlos y hacer nuestras vidas un poco más fáciles. En este diseño, tenemos muchos testimonios y citas de usuarios anteriores; necesitan ser receptivos.
Afortunadamente, el formato para los testimonios será el mismo en toda la página, así que solo tenemos que hacer esto una vez por ellos. Primero, tenemos el nombre de la persona y luego su cita. Los dos son estilos diferentes, sin embargo. Vamos a diseñar primero la fuente. Nombré el estilo de texto Testimonial / Fuente. El estilo real de este elemento es: Noto Sans UI, negrita, tamaño 14, altura de la línea 24. A continuación, tenemos el testimonio real. Nombré el estilo de texto Testimonial / Cita. Su estilo es: Noto Serif, regular, tamaño 14, altura de línea 24.
Para crear un símbolo, seleccione ambos elementos de texto y haga clic en Crear simbolo Icono en la parte superior izquierda de su barra de herramientas. Nombré mi símbolo Testimonial.
Ahora, necesitamos editar el símbolo para que se redimensione bien para diferentes tamaños de pantallas y diferentes tamaños de comillas. Haga doble clic en el símbolo recién creado para editarlo..
En primer lugar, necesitamos cambiar el nombre de los elementos dentro del símbolo. De forma predeterminada, el nombre de una capa de texto se crea a partir de su propio contenido textual. Renombré a ellos Nombre de la fuente y Citar, respectivamente.
A continuación, debemos ajustar la configuración de cambio de tamaño para ambos elementos de texto. Tendrán las mismas propiedades de cambio de tamaño. Tampoco tendrá una anchura o altura fija. Pero, ambos cambiarán de tamaño desde sus bordes izquierdo y superior. Esto asegurará que al cambiar el tamaño del símbolo, los elementos de texto permanecerán donde pertenecen..
Para reutilizar el símbolo, haga clic en el menú desplegable en la parte superior izquierda de la barra de herramientas que dice Insertar y navegar a la Testimonios símbolo. Luego haga clic en cualquier lugar de la mesa de trabajo para colocarlo. Para cambiar el texto, pegue el contenido en las entradas de reemplazo apropiadas a las que hemos cambiado el nombre antes. Cambiar el tamaño según sea necesario.
Estoy usando el término "gráficos de respuesta" un poco diferente aquí. La idea es que los gráficos cambien dependiendo del tamaño de la pantalla. Sin embargo, todavía tendría que hacer los gráficos manualmente para cada pantalla. A menos que sean fluidos, como un elemento de entrada o un botón, no pueden hacerse automáticamente.
Para comprender mejor qué son los gráficos de respuesta, aquí hay un enlace a un artículo que escribí sobre iconos de respuesta, pero la idea es exactamente la misma para todos los tipos de gráficos e imágenes..
Podemos convertir tanto las tarjetas de itinerario en símbolos como las de debajo de la sección social de la página de destino. Vamos con las tarjetas sociales alrededor del gráfico del Día 3 (es un poco más interesante).
Una vez más, seleccione la tarjeta y conviértala en un símbolo. Haga doble clic en él para editar el símbolo. Queremos asegurarnos de que se redimensione bien tanto vertical como horizontalmente.
Comenzando con el fondo, queremos darle propiedades de cambio de tamaño que hacen que el objeto se fije en la parte superior e izquierda. Lo mismo ocurre con las dos capas de texto. Sin embargo, queremos que la imagen, o el avatar, se coloque en la parte superior derecha. Por último, no olvide cambiar los títulos de estos elementos a algo más apropiado para cuando estamos anulando su contenido..
Y voilá!
Por último, también queremos tratar con los pequeños detalles de diseño. En este diseño específico, reutilizo la pequeña línea púrpura con un punto mucho. También estoy convirtiendo este indicador púrpura en un símbolo.
Este símbolo se compone de un círculo que es 8px por 8px con un fondo # 7455FF. El ancho de la línea no importa demasiado, pero el valor predeterminado es 122px. Su altura es de 2px. De nuevo, con el fondo # 7455FF.
Dentro del símbolo necesitamos volver a hacer algunos ajustes de tamaño. Para el círculo, lo necesitamos para mantener el mismo tamaño y en el mismo lugar. Le daremos un ancho y una altura fijos y lo fijaremos en el borde superior derecho. Para la línea, también le daremos una altura fija, pero no una anchura fija, ya que la necesitamos para ampliarla. También lo fijaremos en el borde derecho al redimensionar.
De esta manera, cuando redimensionemos este símbolo, solo cambiará el ancho de la línea.
Otra cosa que podemos hacer es configurar los fondos para que sean fluidos también. Las alturas de las secciones difieren entre los diseños móviles y de escritorio; esto significa que tendrá que mover los elementos de fondo hacia arriba y hacia abajo a su lugar correcto.
Aquí, la interfaz de usuario requiere un borde blanco de 16px. Eso significa que la capa de fondo debe estar a 16 px de los bordes de la mesa de trabajo. Todo lo que tiene que hacer es seleccionar la capa de fondo y, ya sea usando el complemento Anima o usando las propiedades de cambio de tamaño, fije todos los bordes de la capa de fondo. Por lo tanto, colócalo en la parte superior, inferior, izquierda y derecha. Ahora, cuando cambie el tamaño de la mesa de trabajo, el fondo seguirá su ejemplo.!
Ahora que nos hemos ocupado de la mayoría de los elementos de diseño que pueden hacerse sensibles o fluidos o en símbolos reutilizables, es hora de hablar sobre el resto de los elementos de diseño en esta página.
En pocas palabras, aquí es donde te arremangas y haces tus diseños manualmente, uno por uno. El diseño del gráfico del mapa tendrá que hacerse a mano porque es único. Lo mismo se aplica al diseño y selección de colores, y a la elección de la tipografía..
Lamentablemente, diseñar interfaces de respuesta en Sketch no es una tarea fácil todavía. Pero hay técnicas, incluso complementos, que harán su vida mucho más fácil como diseñador que trabaja en Sketch. Espero que este tutorial le haya dado un buen recorrido de mi propio proceso de diseño. El diseño de IU de respuesta no tiene por qué ser tedioso, mucho de eso puede automatizarse también.
¿Tiene algún consejo o truco para diseñar UI responsivo para compartir con nosotros? Colócalos en los comentarios a continuación.!
