Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe Photoshop
Webdesign

Diseñando la Interfaz de Usuario de una Aplicación Web en Adobe Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Final product image
What You'll Be Creating

El desarrollo orientado por una guía de estilo ofrece un enfoque muy flexible para el diseño web moderno. En este tutorial te guiaré a través del diseño de un kit de UI (interfaz usuario), mientras que también explico la toma de decisiones que mantendrá nuestro kit de interfaz de usuario consistente y reutilizable.

Recursos del Tutorial

Con el fin de seguir adelante necesitarás los siguientes recursos (disponibles gratuitamente):

Preparar el Documento de Photoshop

Paso 1

Abrie Photoshop y crea un nuevo documento (Archivo > Nuevo...) con la configuración que se muestra a continuación. Eres libre de utilizar un lienzo o cualesquiera que sean las dimensiones que prefieras - la web no está fija a lo ancho, después de todo.

Paso 2

Vamos a establecer algunas guías para que nuestro kit de interfaz de usuario esté organizado y alineado. No siempre uso una rejilla, pero configurar algunas asegurarán algunas restricciones de pulcritud y coherencia. Ir a Ver > Guía nueva... y establece algunas pautas. Generalmente elijo 1000px como ancho inicial de un sitio web así que vamos a mantener nuestro kit de interfaz de usuario dentro de estas dimensiones.

Nota: Las directrices utilizadas para este tutorial son: vertical en 100px, 600px y 1100px.

Consejo: También puedes usar el plugin para Photoshop GuideGuide para hacer este proceso aun más rápido.

Paso 3

Apegándonos a la etiqueta con Photoshop mantendremos las cosas organizadas y fáciles de navegar y editar. En un ambiente de trabajo necesitaremos este kit de interfaz de usuario para utilizarlo muchas veces como un recurso de desarrollo y un punto de referencia, por lo que necesitas mantenerla organizada (los desarrolladores te lo agradecerán). Vamos a crear seis grupos de capas denominadas tipografía, botones, formas, avatares, imágenes y colores.

Para crear grupos ve a Capa > Nueva > Grupo... y dale a cada uno un título como se ha mencionado. Para la rápida creación de un grupo sólo haz clic en el icono.

Definiendo la Tipografía

Como Oliver Reichenstein famosamente indicó "El diseño web es 95% tipografía", así que hay que hacer las cosas bien. En primer lugar tenemos que crear el ambiente perfecto para nuestro tipo; un fondo que sea neutral y fácil a la vista. El fondo y la tipografía necesitan mantener los niveles de contraste razonable para ser legibles. Para este tutorial vamos a usar un sutil gris claro - un color neutro pero lo suficientemente fuerte para darle a tu aplicación personalidad. He establecido el color de primer plano en #e9eeef y pulsado Alt + Backspace para el fondo.

Paso 1

Abre el grupo de tipografía, escoge la Herramienta Texto Horizontal (T) y selecciona la fuente Open Sans. Open Sans es una tipografía moderna que viene con muchos pesos diferentes y cuenta con un profesional, sin embargo acogedor, aspecto. Es lo suficientemente elegante para los encabezados, pero también lo suficientemente práctico para el texto del cuerpo en la web.

Open Sans tiene un montón de variantes, por lo que para este kit de interfaz de usuario se va a utilizar sólo como única fuente. Ten en cuenta que debes tener cuidado si utilizas más de dos fuentes diferentes para tus proyectos ya que las cosas se pueden volver desordenadas rápidamente.

Yo he marcado el color frontal a negro #000000 y luego he usado la Herramienta Texto Horizontal (T) y la fuente anteriormente mencionada, Open Sans con la opción Light a un tamaño de 55px ingresada como el título de la sección. Vamos a usar el mismo tamaño y estilo de título para los futuros títulos y así mantener la coherencia.

Paso 2

Ahora tenemos que establecer una jerarquía para nuestra tipografía. Consulta este artículo sobre cómo establecer una escala tipográfica Modular por Ian Yates para entender mejor la ciencia y la importancia de la tipografía web.

El HTML (HyperText Markup Language) tiene muchas etiquetas diferentes que ayudan a los navegadores a interpretar el contenido de una página. Muchas de estas etiquetas se utilizan específicamente para la tipografía web tales como <h1>, <h2>, <h3> y así sucesivamente. Estas describen los encabezados con <h1> siendo la más importante. Después hay una etiqueta <p> usada para los párrafos. Sin entrar en más detalles, cuando se trata de HTML definimos la apariencia de estos elementos.

Utilizando la Herramienta Texto Horizontal (T) introduce tres encabezados. He utilizado Open Sans (Light) a 55px para el h1, a 44px para el h2 y a 32px para el h3 dejando 30px de separación entre ellos. El espacio es otra cosa importante a tener en cuenta. Deja suficiente espacio para que así tu texto sea fácilmente legible y parezca equilibrado.

Nota: he utilizado un peso Regular para el h3. A medida que el texto disminuye la variante Light puede llegar a ser menos legible.

Paso 3

Como tenemos nuestros encabezados vamos a saltar al texto del contenido real. Consideraa todas las posibles variaciones del texto y muéstralo en tu kit de interfaz de usuario para que los programadores pueden implementar lo que tú has planeado. Piensa en un estilo de título dentro del párrafo, negrita, enlaces y también los estilos cursiva.

Para el color del texto principal escogí gris #838383, para el título negro #000000 y azul #006ee3 para el color de los enlaces.

El titular será notablemente más oscuro que el texto principal, dándole un mayor impacto. El color del contenido principal debe ser relajante y fácil de leer. Por último, asegúrate de elegir un color diferente para tus enlaces de manera que los usuarios entienden que son seleccionables.

Nota: Configura la fuente para el titular y el enlace en un peso Semibold para que parezcan más grandes y más importantes.

Creación de Botones

Los botones son muy importantes para los proyectos web. Son enlaces sencillos o envíos de formularios la mayor parte del tiempo, pero pueden servir también para una llamada a la acción (CTA) guiando la gente a través de la página, haciendo la toma de decisiones más rápida. Es vital definir una apariencia constante para los botones para de modo que el usuario esté familiarizado con ellos a través de la aplicación.

Paso 1

Minimiza el grupo de la tipografía haciendo clic en la flecha pequeña situada junto al nombre del grupo y abre el grupo de botones. Después crea algunas nuevas directrices verticales para dividir nuestra área de contenido en tres áreas iguales con 35px entre sus brechas. Ingresa a Ver > Nueva Guía... y establece las siguientes directrices verticales: 410px, 445px, 755px y 790px. Aquí es donde pondremos nuestros botones para que todos sean iguales y constantes.

Paso 2

Navega hacia el grupo tipografía, y encuentra la capa de título y duplícala pulsando CMD + J, luego pasa al grupo de botones y cambiálo a "Botones".

Después de esto, ingresa tres títulos para los estados de los botones: Normal, Hover y Activo. Ubícalos a la izquierda de nuestras tres secciones iguales, teniendo en cuenta la brecha de 35px entre la primera, segunda y tercera zona.

Paso 3

Ahora establece el color de primer plano en el azul previamente usado #006ee3 y crea un nuevo grupo llamado Primary Normal. Luego escoge la Herramienta Rectángulo (U), establece un Radio de 3px y dibuja un rectángulo redondeado de tamaño 310x44px. Ubícalo entre las dos primeras directrices bajo el titular "Normal". Para finalizar el botón escribe algún texto sobre él usando el color blanco #ffffff de manera que sea claramente legible.

Paso 4

Ahora duplica el grupo Primary Button pulsando CMD + J en el grupo y cambia el nombre de estos grupos a Primary Hover y Primary Active. Después de esto, pon estos nuevos grupos bajo las dos secciones de encabezado que hemos antes.

¿Qué significan hover y active, podrías preguntarte? Hover describe el estado de un botón una vez que mueves el cursor del ratón sobre él, de manera que necesitamos ilustrar algunos comentarios desde el botón. Un enlace se convierte en activo al hacer clic en él.

Para darle estilo a los estados hover y active de los botones simplemente los oscurecemos. Crea una nueva capa por encima de la forma del botón y rellénalo con negro #000000. Después de esto mantén presionada la tecla Alt y pasa el ratón sobre la capa hasta que aparezca un pequeño icono de flecha hacia abajo - suéltala para crear una Máscara de Recorte. Finalmente reduce la Opacidad de la capa al 10%.

Nota: para el estado activo del botón aumenta la Opacidad de la capa negra al 20%.

Paso 5

Ahora duplica todos los anteriores grupos de botones y cambia sus títulos y color a secundario. Iremos definiendo los colores de kit de UI más adelante en este tutorial, por ahora simplemente elige un color y cambia el azul anterior. He utilizado verde #36c265.

Diseño de Formaularios

Los formularios son un elemento muy importante de las aplicaciones web, que le permiten a los usuarios ingresar información e interactuar con la aplicación. Diseñaremos algunos formularios básicos para que los desarrolladores puedan ponerle el mismo estilo y mantener la coherencia del diseño.

Paso 1

Minimiza el grupo de Botones y abre el grupo de Formularios. Una vez más duplica el título de la sección del grupo anterior y cámbiale el nombre a «Formularios». Crearemos algunos tipos de entradas de formularios básicas como de texto, campo de contraseña, menú desplegable o seleccione el campo y enviar campo (un botón simple).

Cuando diseñamos formularios, la claridad y la familiaridad son las claves principales. No trates de reinventar la rueda. Crea un nuevo grupo y llámalo Nombre. Luego escoger la Herramienta Texto Horizontal (T) y escribe una etiqueta de campo de entrada, en mi caso es "Nombre" con los mismos 18px de tamaño y fuente Open Sans (Regular) negra #000000.

Ahora duplica una de las capas en forma de botón y muévela en el grupo Nombre. Después de eso, cambia su color de fondo a blanco #ffffff y añade una línea de 1px gris #d5d5d5 adentro. Por último, pon un ejemplo de la entrada de texto dentro del rectángulo redondeado blanco. Para mi ejemplo he utilizado Open Sans (Regular) a 16px y el color gris #838383 utilizados anteriormente para el cuerpo del texto.

Paso 2

Crea algunos campos de entrada más con títulos, simplemente duplicando el primer campo de entrada. Tradicionalmente, para el campo de contraseña utiliza puntos • o asteriscos *. A continuación se muestra un ejemplo de más campos.

Duplica CMD + J uno de los grupos de botones, muévelo dentro del grupo de Formularios y colócalo por debajo de los campos de entrada creados recientemente. Una vez más es importante ser consistente y reutilizar los elementos que has creado anteriormente.

Paso 3

En este tutorial nos estamos pegando a una interfaz de usuario muy básica que podría servir para una aplicación web muy sencilla. Vamos a crear ahora otro tipo de campo de entrada; el <select>.

Duplica uno de los grupos de campos de entrada y colócalo entre las guías de la tercera y cuarta verticales, asegúrate de alinear todo. Cambia el valor a lo quieras y agrega un icono de flecha sencilla para indicar que es un campo desplegable. Puedes encontrar los iconos de flechas en Iconfinder.

Paso 4

Para facilitar el trabajo del desarrollador, otra vez asegúrate de incluir un estado activo. Piensa en ¿cómo se verá el menú desplegable cuando el usuario hace clic en él? Es trabajo de un diseñador guiar al desarrollador para crear una experiencia consistente y unificada.

Duplica el grupo desplegable recientemente creado. Utilizando la Herramienta de Selección Directa (A) en una esquina de la forma para ver los puntos del borde y luego, manteniendo pulsada la tecla Shift, selecciona los cuatro puntos del fondo y bájalos un par de veces para extender la forma. Esta técnica mantiene el vector de tu forma y mantiene las esquinas intactas.

Después de eso simplemente duplica las posibles selecciones y ubica algunas por debajo del primer lugar. Utiliza la Herramienta Línea (U) con 1px de peso para hacer separadores simples y finalmente cambia el color de la flecha al que utilizaste para los botones. Esto ayudará a indicar que el campo está activo.

Paso 5

Ahora vamos a crear un escenario para un mensaje de error sencillo, así como si alguien hubiera introducido una contraseña que es demasiado débil.

Duplica CMD + J el campo de contraseña creado previamente y colócalo debajo de los campos de la lista desplegable. Después de eso, cambia el borde del campo a un sutil rojo (yo usé #eb8686) y el fondo a un rojo grisáceo #e9dde3. Finalmente, elige un rojo más fuerte #b63131 y escribe un mensaje de error sencillo.

¡Esto es todo con los formularios! He cubierto los conceptos básicos pero que son suficientes para empezar a diseñar formularios más complejos.

Avatares

Los avatares son casi estándares en cualquier aplicación web hoy en día, por lo que es útil tener algunas imágenes para una comunicación más fácil y para la identificación de los usuarios.

Paso 1

Minimiza los grupos innecesarios y abre el grupo de avatares. Selecciona la Herramienta Elipse (U) y, manteniendo pulsada la tecla Shift, dibuja un círculo de 80 x 80px. Dirígete a uifaces.com y elige una imagen. Cópiala y pégala por encima del círculo creado recientemente. Pulsa Alt y pasa el ratón sobre la miniatura de la imagen hasta que veas una flecha pequeña, a continuación, suelta el ratón para crear una Máscara de Recorte.

Paso 2

Es importante pensar en cómo los avatares se utilizarán e incluir algunos tamaños diferentes para que los desarrolladores los utilicen. Por ejemplo, las imágenes más grandes de avatares se podrían utilizar en la página de perfil y las más pequeños en la sección de comentarios.

Simplemente duplica el avatar y escálalo hacia abajo CMD + T, manteniendo presionada la tecla Shift con el fin de mantener las proporciones.

Imágenes

Realmente debemos incluir una muestra de cómo se mostrarán las imágenes dentro de nuestra aplicación. Voy a poner una imagen dentro del rectángulo redondeado para indicar que las imágenes deben tener esquinas redondeadas.

Paso 1

Elige la herramienta Rectángulo Redondeado (U) y dibuja una forma de rectángulo entre las guías verticales debajo del grupo de avatares. Después de esto escoge una imagen, yo usé una de unsplash.com, cambia el tamaño si es necesario con CMD + T y crea una Máscara de Recorte.

Definición de Colores

Finalmente cubriremos los colores. Una paleta de color sólida es crucial y debe tener en cuenta la teoría del color para entender mejor el significado y la importancia de los colores que se utilizan. Estamos optando por elegir los colores al final del proceso porque ahora tenemos una buena idea de los elementos que necesitamos estilizar.

Paso 1

Abre el grupo de Colores y elige uno de los colores que ha utilizado para los botones como un color de primer plano. Después de eso, usa la Herramienta Rectángulo(U) y dibuja un rectángulo. Luego elige la Herramienta Texto Horizontal (T) y escribe el título del color, o para lo que se utilizará, por ejemplo "Color primario" y proporciona los códigos de color en hexadecimal, RGB o cualquier otro formato que sea necesario. Crea un nuevo grupo, dale un nombre del color y pon todas las capas en él.

Paso 2

Ahora simplemente duplica CMD + J el grupo de colores y haz tantas muestras de color como necesites. Generalmente lo mejor es pegarse a cuatro o cinco colores ya que más colores pueden hacer que las cosas parezcan sucias. Dale un vistazo a Kuler y COLOURlovers para paletas de colores de increíble inspiración.

Para este tutorial como ves he utilizado los colores "Primarios" y "Secundarios", un color para el texto y para los títulos, también blancos para los fondos de las entradas del formulario. Estos se muestran a continuación.

Felicidades ¡Lo has logrado!

Así que ahí lo tienes. Una guía de estilo para la interfaz de usuario de una aplicación sencilla. Espero que hayas aprendido y comprendido los conceptos básicos de la creación de una guía de estilo, por qué se tomaron algunas decisiones y cómo benefician al proyecto.

Si tienes alguna pregunta, o tienes dificultades no dudes en hacerlo en la sección de comentarios.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.