Share
Crear guías de estilo se está convirtiendo rápidamente en una práctica común para los diseñadores web, especialmente cuando se trata de sitios con contenido pesado. Con una guía de estilo de sitio web, los diseñadores pueden establecer y mantener una apariencia mediante la creación de un conjunto de reglas que sigue el diseño. El proceso se vuelve flexible, fácilmente actualizable y consistente..
Durante este tutorial, demostraré cómo puede implementar una guía de estilo en su propio sitio o proyecto..
Las guías de estilo han existido desde hace bastante tiempo. Incluso antes de los días de la web, las empresas a menudo necesitaban crear visuales coherentes y unificados para su marca. Esto fue y aún se logra mediante el uso de pautas de marca o identidad. Dichas pautas generalmente se establecen en un documento y pueden contener información como:
Exactamente lo que está contenido en una guía de marca / identidad depende de la compañía. Puede ser cualquier cosa, desde un documento de una sola página, hasta un documento masivo como el canal de televisión en inglés, la guía de estilo de Channel 4..
Las guías de estilo web funcionan de manera similar a las pautas de marca / identidad, la única diferencia es que no está creando una identidad para una marca, sino una identidad para un sitio web. Esta vez, la marca es el sitio web y, como tal, se propone una guía de estilo para crear coherencia y unidad dentro del diseño de un sitio web..
No estoy diciendo que una guía de estilo debe ser escrita para cada sitio web en el que estás involucrado, pero a veces tiene mucho sentido crear uno.
Por ejemplo, podría ser una buena idea ...
La forma en que diseñamos los sitios web actualmente está pasando por un cambio. Estamos empezando a darnos cuenta que el diseño de sitios web página por página puede no ser la solución adecuada en algunas circunstancias. Al crear un sistema y una estructura, como una guía de estilo, nos permite ver una imagen más amplia de cómo un sitio web puede encajar, lo que hace que todo el proceso de actualización del sitio sea mucho más manejable..
Ahora que entiendes un poco más sobre la guía de estilo de un sitio web, veamos algunos ejemplos..
Probablemente las reglas de estilo más conocidas para un sitio web se pueden encontrar en Twitters 'Bootstrap. Aunque no es específicamente una guía de estilo para twitter.com, algunos de sus componentes se pueden encontrar en twitter.com y se usan mucho para las aplicaciones internas de Twitter..
Github es un buen ejemplo de un sitio web que necesita utilizar una guía de estilo. Github tiene un equipo de diseñadores y desarrolladores que trabajan en su producto y, por lo tanto, es esencial mantener la coherencia, sin importar quién esté trabajando en las nuevas funciones y secciones del sitio..
Si observa esta imagen de la guía de estilo de MailChimp, verá varios componentes de todo el sitio web de MailChimp. Una cosa que puede haber notado es el enfoque humano fácil de usar de MailChimp para el diálogo que utiliza en todo su sitio. Esto es coherente porque Mailchimp ha creado un conjunto de reglas que este tono de voz debe cumplir..
Lo que decida incluir en su guía de estilo variará dependiendo del sitio para el que esté diseñando. Por ejemplo, un sitio de redes sociales tendrá componentes diferentes a los de un sitio de revisión de películas.
Puede ser tan detallado o breve como desee, pero cuanto más detallado sea, más unificado será su diseño..
Al crear una guía de estilo, es importante incluir todas las situaciones en las que se pueda encontrar un elemento o componente. Por ejemplo, debe considerar diferentes estados para los botones y entradas, así como los elementos del menú actual, etc. Esto debe demostrarse dentro de su. Archivo PSD.
Propina: Puede alternar varios estados visuales dentro de Photoshop mediante el uso de Compuestos de capa. Echa un vistazo a nuestro reciente tutorial sobre el tema..En este ejemplo voy a crear una guía de estilo para un blog. La guía de estilo del blog constará de componentes, estos son:
También voy a usar los siguientes seis colores:
Todas las entradas y botones utilizarán un radio de borde de 5px, mientras que todos los widgets de componente tendrán un radio de borde de 0px, lo que les dará una forma rectangular..
En primer lugar, configurar un nuevo espacio de trabajo de documentos. He decidido configurar el mío en 580px de ancho. Este es un tamaño cómodo para trabajar y representa un espacio de buen tamaño para un diseño basado en módulos.
Estoy usando una cuadrícula (Ver> Mostrar> Cuadrícula) para ayudarme en mi diseño y mantener todo bien alineado. He elegido usar una cuadrícula de 20px x 20px con una subdivisión cada 10px. Esto puede modificarse yendo a Preferencias> Guías, Cuadrícula y Rebanadas.
A continuación, verá la pantalla de abajo. Aquí puede cambiar el espaciado de la cuadrícula a lo que elija, pero creo que una cuadrícula de 20px con subdivisiones configuradas en 2 funciona bien. También he preparado algunas guías de 460px de ancho a cada lado de mi documento para ayudarme. Además de esto, puede ser bueno activar 'snap' yendo a Ver> Snap. Esto asegurará que sus elementos terminen en las medidas exactas de píxeles y no se pierdan con las mediciones de subpíxeles parásitas.
Lo primero que vamos a crear es el módulo de componente de autor. Las redes sociales como Twitter han hecho que estas tarjetas de autor sean muy populares recientemente y pensé que sería bueno usarlas como parte de nuestra guía de estilo de sitio web. De esta manera cada autor de nuestro blog puede tener su propia tarjeta de autor..
Comience seleccionando la herramienta de forma y seleccione un color de primer plano de blanco. Con esto seleccionado, crea un rectángulo de 380x250px. Una vez que se haya creado, haga clic derecho en la capa para esa forma y seleccione 'opciones de fusión'. Ahora debería aparecer el panel de opciones de fusión. En la barra lateral izquierda de la ventana emergente, selecciona "Trazo" y dale un tamaño de trazo de 1px. El color que vamos a usar es el # e7e2de gris claro tomado de nuestro conjunto de colores.
Ahora seleccione 'Resplandor exterior' y establezca el color del resplandor exterior al mismo color, pero reduzca la opacidad del mismo a 80. Ajuste la extensión del resplandor al 100% y el tamaño del mismo a 4. Esto le dará a nuestro componente una Borde con un brillo espeso que se disfraza como un borde.
Los estilos de capa que acabamos de crear se usarán mucho en otros elementos que crearemos más adelante, pero aquí hay un consejo rápido sobre cómo usar los mismos estilos de capa en cualquier otro elemento. Si hace clic con el botón derecho en la capa del elemento que acabamos de crear y haga clic en 'Copiar estilos de capa'. Esto hará exactamente lo que dice y le permitirá pegarlo en cualquier otra capa que tenga. Para hacer esto, simplemente haga clic derecho en la capa a la que desea agregar el estilo y seleccione 'pegar estilo de capa'. Tome nota de esto ya que lo usaremos bastante a lo largo de este tut. Nos referiremos a este estilo de capa particular para este elemento como el 'estilo de capa principal'.
Para el avatar del autor, tome un ejemplo de una foto y cambie su tamaño a 75px x 75px. Luego, seleccione la herramienta 'Marco elíptico' y arrastre el cursor sobre la imagen, comenzando desde la esquina superior izquierda hasta la parte inferior derecha. Mantenga presionada la tecla shift mientras hace esto para restringir las proporciones y crear un círculo perfecto. Luego, una vez que haya creado una selección sobre la imagen, cópiela y péguela en su documento de guía de estilo. Copie y pegue nuestro elemento 'estilo de capa principal' y luego edite los estilos de capa y elimine el trazo.
Para crear los tres cuadros de estadísticas, primero cree tres formas de rectángulo blanco que se puedan dividir en partes iguales entre los 380px. Una vez que hayas hecho esto, toma uno de ellos y abre el panel de estilos de capa haciendo clic derecho en la capa. Luego seleccione 'Sombra interior'. Asegúrese de que el 'modo de fusión' esté configurado en normal y la opacidad en 100%. Establezca el ángulo en '-90' y cambie la distancia a 5px. Para el color, use nuestro color azul primario # a4d4e8. Luego repita este proceso en los otros 2 cuadros de estadísticas, pero esta vez cambie sus colores de sombra interna a cada uno de nuestros colores secundarios; verde # aee1a3 y rojo # f67f77. Luego agrega el texto para cada estadística. En la mía he elegido mostrar el número de seguidores, los siguientes y los mensajes..
Para agregar el texto y la biografía del autor, he elegido usar 'Droid Sans', disponible como fuente web de Google.
Para el triángulo pequeño en la esquina superior derecha de la tarjeta de autor, cree un cuadrado de 50px x 50px con nuestro color primario azul y luego seleccione la 'herramienta de lazo poligonal'. Dibuja una línea recta desde la parte superior izquierda de la plaza hasta la parte inferior derecha y luego dibuja alrededor de la parte izquierda de la plaza. Una vez hecho esto, seleccione Capa> Máscara de capa> Ocultar selección y esto creará el triángulo.
Para la estrella seleccione la herramienta de forma 'Polígono'. Asegúrese de que los lados estén configurados en '5' en el menú superior. Luego seleccione la pequeña flecha que está situada junto a la palabra 'Lados'. Seleccione la estrella y 'Dividir lados por' al 50%. Luego dibuja una estrella blanca en la parte superior del triángulo y colócala en la esquina superior derecha de la tarjeta de autor.
El componente de la publicación del blog se crea de la misma forma en que creamos el elemento principal de la tarjeta de autor anterior..
Entonces he añadido el 'estilo de capa principal' a esto. La miniatura de la imagen de 70px x 70px se coloca en la parte interior izquierda de este. He creado tres estilos de texto diferentes; El titular principal, la fecha y el texto del párrafo. En la parte inferior derecha, he añadido un botón 'leer más'. Vea el paso 6 para crear los botones..
Para crear la burbuja de comentarios real, cree un rectángulo redondeado de 316 x 90 px y agregue el 'estilo de capa principal' a este.
Cree una forma cuadrada de 15px x 15px y gire esta Edición> Transformar Trayectoria> Girar, luego, desde el menú de opciones, gírela 45 grados. Seleccione la capa de forma real y vaya a Editar> Copiar, luego vaya al rectángulo redondeado grande que acabamos de crear. Asegúrese de que la plaza esté alineada con el lugar donde desea que vaya la punta. Luego vaya a Editar> Pegar y esto fusionará las dos formas. Agrega el estilo de capa principal a esto y ahí está el bocadillo!
He decidido agregar dos componentes de comentario de la publicación; Uno es un componente de comentario estándar y el otro es un comentario de autor. Para el ejemplo del autor, he cambiado el trazo para que sea el color azul primario.
Los botones son relativamente fáciles de crear porque establecimos algunas pautas antes de comenzar a utilizar nuestra guía de estilo.
Para crear un botón grande, seleccione la herramienta 'rectángulo redondeado'. Desde la barra de 'opciones' asegúrese de que el radio esté establecido en '5px' y dibuje un rectángulo azul primario de 125px x 40px. A continuación, agregue el texto de su elección. Duplique la capa haciendo clic derecho en la capa y seleccionando "Duplicar capa". Una vez que hayas hecho esto, cambia su color a uno de nuestros colores secundarios. Repita este proceso para el botón con el otro color secundario. Además, repita este proceso para los botones pequeños, pero esta vez haga que los rectángulos sean de 30px x 105px y para el botón 'llamar a la acción' que sea de 374px x 40px.
Para los estados de desplazamiento, he agregado un degradado sutil agregando un estilo de capa 'superposición de degradado'. Establezca el modo de color en 'Normal' y la opacidad en 10% con el degradado que va del negro al blanco. Esto solo será suficiente como un indicio de que un usuario ha girado el botón.
Para el conjunto de botones agrupados, cree un rectángulo redondeado de 380px x 30px de ancho y luego divídalo en cuatro botones de igual tamaño. Puede hacerlo dibujando una línea de lápiz de 1px o recortando secciones con una herramienta de 'marquesina rectangular' de 1px.
La paginación se crea de manera similar al conjunto de botones agrupados que acabamos de crear arriba. Pero esta vez, en lugar de crearlo en cuatro botones del mismo tamaño, cree diez botones cuadrados del mismo tamaño con los botones de flecha en cada extremo un poco más grande. La imagen de abajo demuestra esto. Para las flechas he usado algunas formas prefabricadas que son específicamente para las flechas de diseño web.
A estas alturas, ya debería haberse dado cuenta de lo fácil que nos estamos haciendo la vida repitiendo muchos elementos y estilos. Lo bueno de esto es que crea consistencia dentro de nuestro diseño..
Las entradas y las áreas de texto para este conjunto se crean utilizando los métodos que usamos anteriormente. Para las entradas, dibuje un rectángulo redondeado de 380px x 40px y aplique el color del trazo. Extienda un poco la altura del área de texto a alrededor de 90px. Para el enfoque en los elementos, he usado nuestro 'estilo de capa principal' y he agregado un elemento adicional para los mensajes de error y éxito..
Depende de usted cuántos elementos desea crear para su guía de estilo. Conocerá los requisitos del sitio en el que está trabajando y sabrá lo que necesitará y no necesitará. Lo mejor de la creación de una guía de estilo es que cualquier elemento que introduzca en el futuro tendrá reglas y prácticas a las que deberá adherirse y permitirá la coherencia dentro de este..
Creará familiaridad con los usuarios y permitirá una mejor experiencia general tanto estética como funcionalmente..
Accentsconagua