GUÍAS DE ESTILO Y ELEMENTOS by Daniel Domínguez https://padlet.com/itssdadm/35oyolpkbwc9 en-us 2018-09-12 13:31:47 UTC 2018-09-19 12:56:31 UTC hello@padlet.com https://padlet-uploads.storage.googleapis.com/309434188/3bcca369ae4b6a128898c94b68418e98/adidas_champions_league_ball_2017_2018_a.jpg ¿Cómo crear una guía de estilo de diseño de páginas web? jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280888330 Una de las formas para asegurarse que el equipo esté es sintonía al momento de diseñar distintas partes del sitio web o guardar diseños de los desarrolladores, es crear una documentación de diseño o una guía de estilo del diseño de pagina web.

Es de mucha ayuda tener una guía de estilo para crear una experiencia consistente entre las diferentes páginas. Además, ayuda a garantizar el futuro desarrollo o que la producción de terceros siga los mismos lineamientos de la marca y que se perciba como parte de esta.

El año pasado, Luke Clum llegó a la cima del uso de guía de estilo como primer paso para el diseño web y, por lo tanto,  me gustaría profundizar en cómo crear una guía de estilo de diseño web utilizable para tus proyectos. 

]]> 2018-09-13 15:18:21 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280888330 Desarrollo de una guía de estilos: nicoledegracia1 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280889134 La guía de estilo es la que indica las fuentes, los tamaños de texto (para párrafos, títulos de varios niveles)  y, sobre todo, los colores principales y secundarios que aplicaremos a lo largo del sitio o la aplicación.

]]> 2018-09-13 15:19:48 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280889134 Pasos para crear una guía de estilo de diseño web: nicoledegracia1 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280894189  
Estudia la marca: 
Primero, necesitas estudiar la marca para que así entiendas que es lo que representa. Conoce la historia detrás de la marca, observa al equipo y descifra su visión, misión y valores de la empresa. Es importante profundizar en la marca para que de ese modo la guía de estilo que estás trabajando represente visual y emocionalmente a la organización.

Si eres un diseñador que no sabe codificar, simplemente abre Photoshop y dale un título a tu documento y una breve descripción de lo que el documento es o para qué será utilizado.

Si puedes codificar, es mejor crear un documento html con herramientas precodificadas para que sea fácil de reutilizar. 



]]> 2018-09-13 15:27:43 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280894189 ¿Qué es una guía de estilo? jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280895183 Una guía de estilo es una colección de elemento prediseñados gráficos y reglas que diseñadores o desarrolladores web deben seguir para asegurarse que partes separadas del sitio web sean consistentes y creen una experiencia cohesiva al final.

¿Por qué es importante?

Es extremadamente importante cuando varios diseñadores están trabajando juntos en un sitio web grande o aplicaciones web para asegurarse que no interpreten mucho y que no cambien o ajusten los estilos basados en gustos personales. En el desarrollo, tener los elementos del sitio web definidos hace más fácil la labor de los desarrolladores web al momento de utilizar estos elementos. Además, es más fácil porque ellos sabrán qué elementos tienen que codificar y podrán ver exactamente lo que necesitan desde el comienzo.

Para hacer el trabajo de los desarrolladores más fácil, es deber del diseñador incluir todas las posibles interacciones tales como desplazar, cliquear, visitar y otros estados para botones, títulos, link, etc. 

]]> 2018-09-13 15:29:16 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280895183 La paleta de colores nicoledegracia1 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280897288  
Es increíble cómo los seres humanos perciben los colores y los asocian tonalidades con marcas conocidas. Piensa en Coca-Cola, apuesto a que ves el color rojo en tu mente.

Empieza estableciendo en tu guía de estilo los colores primarios que predominaran en tu sitio web, los colores dominantes solamente deben incluir tres tonos. Sin embargo, en algunos casos necesitarás colores secundarios e incluso terciarios para ilustrar tu interfaz de usuario, asegúrate de también definirlos. Además, incluye colores neutrales como el blanco, gris y negro para que los colores primarios resalten. 

]]> 2018-09-13 15:32:19 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280897288 Define la tipografía jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280898686 De acuerdo a Oliver Reichenstein, la tipografía es el 95 por ciento del diseño web.

Debes hacer bien la tipografía ya que es una de las herramientas más importantes entre los visitantes y tu sitio web.

Establece una jerarquía e identifícala. Existen tipos de titulares: h1, h2, h3, h4, h5 y h6. Luego el cuerpo, negrita y variaciones de cursiva. Piensa fuentes que sean usadas para links cortos, texto de introducción, etc. Ofrece fuentes, colores y tamaño familiar. 

]]> 2018-09-13 15:34:15 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280898686 Voz jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280901918 La voz que me refiero es la copia real. Anteriormente ya has estudiado a la marca, antes de empezar la guía de estilo y te diste cuenta que la marca es juvenil y moderna. Si no hay instrucciones para la voz, tendrás que definirla. Puede ser un sencillo ejemplo que muestre que la voz tenga que ser profesional pero también divertida y acogedora. En lugar de afirmar “Error 404” puedes decir “Hola, se han roto los parámetros interwebs, error 404”. Si la voz fuera algo más  empresarial, no se recomienda hacerlo. Lo más importante se esconde en las pequeñas cosas.]]> 2018-09-13 15:39:04 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280901918 Iconografía jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280907521  Los íconos han existido por miles de años y son más antiguos incluso que los libros y las palabras. Aprovecha usar iconos en tus proyectos ya que brindarán una idea rápida a los visitantes sobre de qué trata y que pasará a continuación. Escoger los íconos correctos proporcionará más contexto al contenido que las paletas de colores, las copias o los gráficos. Cuando uses íconos, asegúrate de tomar en cuenta la religión e historia del público objetivo para que así evites conceptos erróneos y malos entendidos. Algo más para mencionar: toma en cuenta la marca y sus valores, no uses íconos hechos a manos en el sitio web de un gran banco, por ejemplo. ]]> 2018-09-13 15:47:26 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280907521 itssdadm https://padlet.com/itssdadm/35oyolpkbwc9/wish/280910863 2018-09-13 15:52:32 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280910863 Las imágenes jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280917221 Las imágenes hablan más que mil palabras. Asegúrate de incluir imágenes que definan el estilo y las direcciones de imágenes que el sitio web debe usar. Una vez más, toma en cuenta los valores de la marca y su misión. Por ejemplo, las organizaciones benéficas de agua usan imágenes impactantes que expresen fuertes emociones, una buena causa y llamar a las emociones humanas en aquellos que son afortunados en tener comodidades esenciales para vivir como agua, comida, electricidad y educación.]]> 2018-09-13 16:01:46 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280917221 Formas jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280917813 Las formas son las que hacen que tu sitio web o aplicaciones web sean interactivas y dinámicas para que el usuario pueda buscar información y manipularla y hacer el trabajo.

Asegúrate de establecer una jerarquía e incluir todos los posibles feedback, Mensajes de aviso como activar, desplazar o añadir error incluyendo otros como contraseña muy débil, email inválido o simplemente mensajes de aviso como “el correo ha sido enviado”.

]]> 2018-09-13 16:02:48 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280917813 Botones jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280918649 Los botones son una mezcla de paletas de colores, formas y voces. Contar con estas herramientas previamente creadas para crear botones con apariencia consistente y funcional con diferentes diseños establecidos.

  El espaciado.
¿Por qué el espaciado debe estar en la guía de estilo? Es muy importante mencionar al espaciado. Puede ser en forma de una rejilla usada para el diseño; puede ser el espaciado entre el encabezamiento, botones, imágenes, formas y otros elementos.

]]> 2018-09-13 16:04:16 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280918649 ¿Qué es lo que debes y no debes hacer? jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280920318 Último pero no menos importante: la sección de lo que debes y no debes hacer, similar a una sección de Preguntas y Respuestas que muestran los errores más frecuentes y da ejemplos de cómo las cosas deberían hacerse.]]> 2018-09-13 16:06:52 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280920318 Conclusión jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280921241 Debes estudiar la marca para la que estás creando la guía de estilo, asegúrate de tener todas las partes del diseño bien hechas y que la guía de estilo sea consistente e incluya todos las posibles situaciones al momento de convertir diseños en productos operativos.]]> 2018-09-13 16:08:00 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280921241 ¿Qué es una guía de estilos y por qué debes tener una? jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280922271  Cuando desarrollas una aplicación o un sitio web, ¿cuánta importancia le da tu equipo al diseño? El éxito de herramientas como Bootstrap (a pesar de sus problemas) es que traen los elementos de la interfaz resueltos: los títulos, párrafos, botones, navegación, listas, etc. Así el equipo de desarrollo puede olvidarse del diseño, personalizar un poco algunas cosas sobre Bootstrap y ya está. En ciertos proyectos esta es una solución elegante y funciona muy bien porque evitamos diseños inconsistentes con poco esfuerzo. Sin embargo, tener un diseño que se parezca a todos no es la estrategia de marca más eficiente (en realidad es la peor). Cada marca posee un logotipo, colores, tipografía y otros estilos que la identifican y todo proyecto que lleve su nombre debe respetarlos. Por ejemplo, el sitio web de una joyería para damas tendrá un estilo muy diferente al de un un restaurante de comida mexicana o a una tienda online de ropa deportiva. Es entonces cuando frameworks o templates preconstruidos dejan de ser útiles y se requiere una guía de estilos (aka sistema de diseño) que es un conjunto de lineamientos y patrones de diseño que deben respetarse en todos los productos. ]]> 2018-09-13 16:09:32 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280922271 nicoledegracia1 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280922333 2018-09-13 16:09:38 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280922333 Colores y tipografía jianiss27 https://padlet.com/itssdadm/35oyolpkbwc9/wish/280924385 Estos son los elementos básicos para construir una marca. Las técnicas para crear una paleta de color o escoger las tipografías adecuadas son muy amplias y escapan de este artículo. Pero ten presente que con los colores correctos y la tipografía adecuada ya tienes lo suficiente para que tu marca sea identificable.]]> 2018-09-13 16:12:42 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280924385 Controles y componentes itssdadm https://padlet.com/itssdadm/35oyolpkbwc9/wish/280927451 Como vamos a ver mas adelante a lo largo de los capítulos, una interfaz web esta compuesta de elementos de todo tipo. En sus inicios la web era un conjunto de documentos de hipertexto donde lo principal era tener texto con enlaces o links a otros documentos. El enlace es el componente clave en la web, ya que proporciona el nexo entre distintos documentos para conformar la World Wide Web  ]]> 2018-09-13 16:17:42 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/280927451 NORMAS GENERALES itssdadm https://padlet.com/itssdadm/35oyolpkbwc9/wish/283238523 Fuentes Tipográficas 
La fuente para texto en general debe ser Arial por ser una fuente que se encuentra almacenada por defecto en los computadores que al ser de la familia de fuentes de palo seco permite una mayor legibilidad en pantalla. 
En algunos casos se podrá acompañar con la tipografía institucional Times New Roman. 
 
 
Colores 
El uso cromático debe ser acorde al manual institucional, teniendo como criterio principal los tres colores institucionales: Azul (R:192, G:160, B:98), Dorado (R:1, G:71, B:108) y el color de acompañamiento para la web será Gris (Desde el 5% hasta el 20%, R:240, G:240, B:240). 
 
 
Imágenes 
Las imágenes deberán ser en formato jpg o png a una resolución de 72 dpi con un peso máximo de 200 Kb. Cuya visualización en pantalla sea comprensible para el usuario y que no estén pixeladas. 
 
Estructura 
La estructura general de la web ha sido resultado de un proceso evolutivo e investigativo desde lo técnico y funcional, por tanto deberá ser respetada y de ser necesaria la inclusión de nuevos sitios o enlaces, éstos se deberán adecuar a la estructura previamente designada o si se requiere su inclusión en la parte estructural dicho caso deberá ser estudiado y resuelto por el Web Master y el comité web.]]> 2018-09-19 03:25:46 UTC https://padlet.com/itssdadm/35oyolpkbwc9/wish/283238523