Guía de traspasos para Pixel Perfect Design. Parte III

Kits de interfaz de usuario

Un kit de interfaz de usuario es una lista de todos los elementos que está utilizando en un proyecto. Este kit lo ayuda a mantener todo en su estado real y facilita el proceso de mantenimiento cuando trabaja con un equipo en grandes proyectos.

En un kit de interfaz de usuario, debe ilustrar los colores de su proyecto; tipografía; componentes como botones, entradas y controles deslizantes; y diferentes estados como hover, active y default. Usa el D.R.Y. Principio ("No te repitas") cuando consideres si colocar o no un elemento dado en el kit de interfaz de usuario. Si tiene dos elementos similares en las mesas de trabajo, mueva uno a un kit de interfaz de usuario. En las mesas de trabajo de los diseñadores que no usan kits de interfaz de usuario, generalmente encontrará dos, tres o cuatro botones diferentes con diferencias muy pequeñas e irrelevantes. En estos casos, el desarrollador probablemente los implementará en lugar de crear una versión unificada.

Recomendamos Craft para crear la biblioteca de interfaz de usuario de su proyecto. Para proyectos más grandes, es una buena idea tener una versión HTML y CSS de un kit de interfaz de usuario, y usarlos como referencia para otros elementos.

Complemento CRAFT (recopilar elementos reutilizables en el proyecto)

Exportar

Facilite la vida del desarrollador y aumente sus posibilidades de construir un diseño perfecto de píxeles utilizando una de estas herramientas:

  • Invision Inspeccionar
  • Zeplin
  • Sympli
  • Sketch Measure
Zeplin: instrumento moderno para la inspección del diseño.

Pueden ayudarlo a recuperar colores, fuentes, tamaños, activos, distancia entre elementos, propiedades CSS y otras cosas desde su Sketch o PSD. Invision y Zeplin también le permiten escribir notas en lugar de obligarlo a crear capas adicionales, como Photoshop.

Vieja forma. Crear comentarios en capas de Photoshop

Estados del elemento

Para evitar malentendidos, le recomendamos que utilice terminología específica para los diferentes estados de sus elementos, tal como lo hacemos en CSS. Los desarrolladores sabrán de qué estás hablando sin explicaciones excesivas.

  • Defecto
  • Desplazamiento: el estado del elemento con un mouseover
  • Activo: el estado del elemento al presionar
  • Enfoque: el estado del elemento al que apunta el teclado actualmente o que se activa con el mouse (es decir, entradas, áreas de texto)
  • Visitado: el estado de los enlaces que ya se han visitado.
Ejemplos de estados de elementos

Altura de la línea

La altura de línea es una parte muy importante de su proceso de diseño y transferencia. Lo más importante aquí es comprender cómo un navegador representará cada elemento y cómo la altura de la línea lo afectará. Echa un vistazo a la imagen de abajo. Este es un ejemplo típico de un bloque de texto representado por un navegador. La altura de ese elemento es la misma que la altura de línea y la altura de diferentes caracteres que no están en línea con el elemento en su conjunto.

Una ventaja de usar Sketch es que renderiza objetos de texto con la misma lógica. Los tamaños de los elementos de Photoshop no dependen de la altura de la línea.

La mejor práctica dicta el uso de altura de línea similar a las fuentes. No utilice muchas alturas de línea personalizadas diferentes en todo el sitio. Cada fuente tiene un valor predeterminado de altura de línea. Por ejemplo, Roboto tiene una altura de línea de 1,4x del tamaño de fuente; Si tiene un tamaño de fuente de 16px, el alto de línea será de 22px. Incluso si decide no usar el valor predeterminado, intente usar la misma proporción en todo el sitio. Los valores típicos son 1.3–1.6 de tamaños de fuente. A los desarrolladores les gustará esto, porque prefieren definir el valor de altura de línea global y olvidarse de él, y continúan trabajando solo con tamaños de fuente.

Ahora, un poco sobre el comportamiento con números flotantes en diferentes navegadores. Por ejemplo valores iniciales:

  • Tamaño de fuente: 36px
  • Altura de línea: 1.4

Chrome, Safari, Opera: Calcular solo valores enteros y truncar flotante. 36px * 1.4 = 50.4, y se truncará a 50px.

Firefox: Calcular con flotante. 36px * 1.4 = 50.4, y seguirá siendo 50.4px. Si tiene dos líneas de texto como en el ejemplo a continuación, será de 100.8px. La principal diferencia con Safari y Chrome es que si elige una altura de línea como 1.41, obtendrá 100 px; en Firefox, tendrá un tamaño de contenedor de 101.533 px.

La conclusión aquí es que Firefox usa valores de altura de línea más precisos, como 1.33333. Si eso no le concierne, quédese con números bonitos y limpios, como 1.3.

Fuentes

Primero, intente encontrar fuentes aceptables en Google Fonts. Los navegadores admiten diferentes formatos de fuentes. Esto significa que para usar ciertas fuentes personalizadas, el desarrollador deberá prepararlas con servicios especiales para convertir ttf / otf a woff, woff2 o eot. Durante ese proceso, las fuentes pueden perder calidad. Por lo tanto, mi recomendación es usar fuentes personalizadas solo si sabe que sus desarrolladores no fallarán en el proceso. Deben saber cómo trabajar con fuentes.

Aquí hay un par de cosas para recordar sobre el uso de fuentes:

  • No utilices más de dos fuentes. Esto afectará los tiempos de carga de la página, especialmente si las fuentes son personalizadas.
  • No utilice demasiados tamaños o estilos diferentes (cursiva / negrita / clara / delgada / regular).
Biblioteca de fuentes de Google de fuentes gratuitas

Desarrolladores y diseñadores

Los diseñadores a veces odian a los desarrolladores porque no pueden realizar sus ideas; los desarrolladores a veces odian a los diseñadores porque exigen características que son técnicamente difíciles de implementar. Estos problemas se pueden resolver con una cosa simple: conversación. Hable con sus desarrolladores, y no solo en la etapa final. Discuta sus ideas antes de comenzar a dibujar, porque no será demasiado desastroso rechazar una idea en una etapa temprana. Es menos probable que se sienta decepcionado con el resultado si lo hace.

Creemos que siempre es posible para los desarrolladores y diseñadores encontrar un compromiso razonable y trabajar juntos de manera efectiva para reducir el costo / tiempo de sus proyectos.

¡Toque el botón ❤ si este artículo le parece útil!

Parte 1: software, nombres, optimización de imágenes, Sprites, SVG, Favicon

Parte 2 - Cuadrícula, diseño receptivo, animaciones, prototipos

¿Alguna pregunta o comentario? Conectarse a través de Pixel Point