Diseño web: cómo establecer un estilo de diseño

Después de que el diseño de un sitio web es aprobada, es una buena idea establecer una guía de estilo visual que gobierna la paleta de colores, el uso de la fuente, y los tratamientos gráficos. El desarrollo de una guía de estilo de primera - o iniciar uno y refinando a medida que avanza - le ayudará a mantenerse constante durante todo el desarrollo de sus composiciones. Además, los estilos gráficos y de texto se definen ahora en última instancia, serán traducidos al CSS (doascading STyle Sheets) estilos por los desarrolladores durante la fase de despliegue.

Las guías de estilo gráfico para los sitios web

Hay tantos elementos que se pueden definir visualmente acaba con una simple código CSS solo. Los elementos visuales tales como bordes, relleno colores, colores, colores de los enlaces de vuelco, colores de fondo, y líneas de regla todos deben ser definidos por el diseñador. Preguntas como éstas deben documentarse: ¿Qué espesor son líneas de regla? Cuando pase el cursor sobre un área de contenido, hace su cambio de color de fondo, y en caso afirmativo, de qué color?

Para otros elementos comunes en la página - como personalizados con textura fondos, botones de fantasía, y tratamientos de frontera que necesitan soporte gráfico - puede crear una biblioteca de tales artículos. Esta biblioteca, creada en un programa como Adobe Fireworks o Adobe Photoshop, se sumaría a la página Comps ya ha creado. Todos los archivos de producción y composiciones deben ser guardados como archivos con capas en formato nativo del software (PNG y PSD, respectivamente). Las capas y conjuntos de capas deben estar claramente organizado y con nombre por lo que cualquier diseñador puede continuar donde lo dejó.

estilos de botón en el diseño web

Una cosa que a menudo se pasa por alto en la planificación de diseño web es una jerarquía de estilos para los botones y enlaces. Usted debe tener un plan para los diferentes grados de botones y enlaces: un botón de importante, una menos importante botón- un importante enlace de texto y un enlace de texto menos importante (o un enlace que se encuentra en línea con otra copia de cuerpo). A menudo enlaces y botones de una página se colocan sobre fondos de diferentes colores. Si el mismo estilo no funciona en ambos fondos, tener un estilo diferente para cada fondo.

Video: Videotutorial Maquetación y Diseño Web en ASP.NET (Usando MasterPages Anidadas y Temas)

En el ejemplo, los dos botones de primer nivel funcionan bien tanto en una luz y un fondo de color oscuro. Los colores verde y el naranja de acento para los de Nivel 3 y Nivel 4 enlaces, sin embargo, no funcionan bien en ambos fondos. En este caso, tanto el verde y el naranja fueron “engañados” a ser más ligero y más brillante para su uso en el fondo oscuro y más oscuro para trabajar sobre fondos claros.

estilos de letra en el diseño web

Hoy en día es raro utilizar gráfico texto - texto que no es más que una imagen gráfica - en sitios web y móviles. Hay varias razones para evitar el uso de texto gráfico. En primer lugar, texto gráfico es difícil de mantener: Es mucho más fácil volver a escribir o traducir las palabras en HTML o en una base de datos y tiene CSS aplica el estilo apropiado que volver a hacer una imagen. En segundo lugar, el texto gráfico no se puede buscar a menos que aplique etiquetas alt con palabras clave.

Video: Curso Como Crear Mi Agencia de Diseño Web

En el pasado, los diseñadores utilizan texto gráfico porque las fuentes eran un problema en la red: Sólo un número limitado de fuentes (bastante aburrido) estaban disponibles en el sistema de cada usuario. Ahora es posible empotrar fuentes - tienen su enlace web a archivos de fuentes - a través de diversos servicios y tecnologías.

Al igual que con los botones, usted tiene que definir los estilos de diseño para todo tipo de fuentes y las situaciones en las que los utiliza - desde el cuerpo del texto a los titulares, subtítulos y subtítulos. Estos estilos de fuente se convierte en definitiva en una serie de estilos CSS aplicados al texto dinámico. Como diseñador, que no es necesario escribir el CSS classes- puede simplemente crear una hoja de estilo que muestra todos sus estilos de fuente en Photoshop. Los desarrolladores pueden recoger lo que necesitan desde el archivo de Photoshop con capas. CSS es sorprendentemente complaciente - se puede obtener una gran cantidad de efectos frescos.