Share
Anteriormente en la Semana del Diseño Web, vimos cómo un diseño simple se puede mezclar y combinar con diferentes fondos, patrones y fotos, hoy vamos a dar un paso más allá. Vamos a cambiar completamente el aspecto de un sitio web cambiando no solo el fondo, sino el estilo general del diseño..
Comenzaremos con el sitio de textura de papel de Grungy que creamos en un tutorial anterior, luego cambiaremos el diseño para que se vea minimalista, metálico, abstracto y web2. Y luego hablaremos sobre el proceso de aprendizaje de una biblioteca de estilos de diseño web. Entonces empecemos…
Esta publicación es el día 8 de nuestra sesión de diseño web. Sesiones creativas "Session Day 7Session Day 9"Entonces, como recuerda de nuestro tutorial original, el diseño del sitio se ve así:
Es un diseño de aspecto sucio y texturado basado en un diseño simple, sólido y subyacente. Lo que vamos a hacer es tomar ese diseño subyacente y tratarlo como un coathanger, intercambiar diferentes estilos y ver por qué cada aspecto funciona..
En cada estilo hay muchas variaciones, pero aquí hay algunas características distintivas de una especie de aspecto sucio:
Un diseño relativamente limpio, casado con algunos elementos sucios: papel, texturas..
Visitar sitio
Off texto de colocación, elementos collaged y texturas..
Visitar sitio
Un buen ejemplo de un aspecto sucio puesto a usar ordenado en una estructura de blog.
Visitar sitio
Muchos más ejemplos de todas las cosas sucias.!
Visitar sitio
Nuestro primer paso en el diseño es reducir completamente nuestro aspecto y deshacernos de todo lo que no sea esencial. Queremos hacer esto para que tengamos un punto de partida para los otros diseños, pero en el camino crearemos una especie de apariencia mínima..
Estos son los pasos a seguir:
Aquí está nuestra versión mínima:
De todos los aspectos que vamos a hacer hoy, este es el menos adecuado para este diseño, en particular para el área de pestañas. Todavía es una buena aproximación ...
En cada estilo hay muchas variaciones, pero aquí hay algunas características distintivas de una apariencia mínima:
Realmente mínimo con un esquema de color
Visitar sitio
Tipografía mínima y líneas limpias combinadas con un toque de elementos de diseño / fotografía en negrita
Visitar sitio
Mínimo se encuentra con Flash, y echa un vistazo a la cartera de trabajos que incluye muchos más ejemplos de diseños mínimos.
Visitar sitio
Mucho más diseño minimalista para revisar
Visitar sitio
Con la apariencia mínima que acabamos de crear, ahora podemos agregar un poco de estilo. Esta vez queremos hacer una apariencia metálica. Para eso necesitamos algunos grises claros, y estos se ven especialmente impresionantes en un fondo oscuro.
Estos son los pasos a seguir:
Aquí está nuestra versión metálica:
Y aquí hay algunas notas:
En cada estilo hay muchas variaciones, pero aquí hay algunas características distintivas de una especie de apariencia metálica:
Apple ha estado usando una barra de navegación superior metálica desde hace algún tiempo, con ligeros biselados en el texto, un ícono de Apple incrustado y algunos otros efectos metálicos..
Visitar sitio
Lance es un maestro en el diseño de interfaces de Photoshop, echa un vistazo a su cartera de interfaces metálicas
Visitar sitio
Un diseño metálico muy elegante..
Visitar sitio
Un aspecto que siempre es popular es utilizar un fondo abstracto, algo de transparencia y una tipografía super limpia. Así que eso es lo que vamos a hacer a continuación.!
Así que, comenzando de nuevo desde el diseño minimalista:
Aquí está nuestra versión abstracta:
Y aquí hay algunas notas sobre el diseño:
En cada estilo hay muchas variaciones, pero aquí hay algunas características distintivas de este aspecto:
Impresionante aspecto de fondo ahumado.
Visitar sitio
Combina un brillante fondo sucio con capas y secciones para un gran efecto
Visitar sitio
Nuestra última parada de estilo está en el terreno de diseño web 2.0. Debo admitir que ni siquiera estoy realmente seguro de qué es realmente el diseño web2, pero he intentado que esta versión sea amigable y accesible, lo que creo que es la principal característica del estilo..
Comenzando de nuevo con el diseño minimalista:
Aquí está nuestra versión web 2.0:
Y aquí hay algunas notas.!
En cada estilo hay muchas variaciones, pero aquí hay algunas características distintivas de una especie de web 2.0:
Para mí, estos chicos realmente empezaron mucho de lo que asocio con la Web 2.0.
Visitar sitio
¡Me encanta ese pequeñuelo! Un diseño de As por SimpleBits.
Visitar sitio
Un degradado súper brillante hace de esta web..
Visitar sitio
Así que aquí están todos, puede hacer clic en la imagen de abajo para verlos a tamaño completo. Además, si eres un Miembro Plus, puedes tomar los cinco archivos PSD del área Plus.
Seamos honestos, los cinco diseños no son necesariamente ejemplos particularmente buenos de sus respectivos estilos. Mi objetivo más bien en este tutorial es mostrarte cómo puedes darle a un diseño un aspecto o estilo determinado siguiendo ciertas indicaciones visuales. Debes poder ver que puedes vestir el mismo diseño de diferentes maneras..
Para producir realmente un gran ejemplo de cierto estilo de diseño, probablemente cambiaría su diseño más específicamente para adaptarse a ese estilo. Y, por supuesto, todos necesitarían mucho más tiempo del que yo tenía :-) Aun así, espero que este intercambio de estilos ilustre cómo puede comenzar a ver los diseños web para aprender diferentes estilos de diseño..
En nuestro artículo anterior: 8 ideas, técnicas y trucos para su kit de herramientas de diseño web, mencioné que es una buena idea tener una biblioteca de estilos para dibujar.
Cuando está dibujando un espacio en blanco al iniciar un nuevo proyecto, a veces puede ser bueno simplemente recurrir a una opción estilística predefinida y luego dejar que eso lo guíe. Inevitablemente, terminará con algo totalmente diferente a cualquier cosa que haya diseñado antes, y al menos le ayudará a comenzar. Pero tenga mucho cuidado con el uso del estilo incorrecto solo porque se ve bien, y no porque sea apropiado para el cliente / mensaje / contenido. El único antídoto para hacer esto es conocer y tener muchos estilos de diseño diferentes..
En este artículo hemos analizado brevemente cinco aspectos o estilos, y hay millones de estilos, subestilos, combinaciones, adaptaciones y diseños que desafían el estilo todos juntos..
La única forma real de aprender los estilos de diseño es observándolos. Ahora hay que mirar y luego hay mirando! Una persona normal usualmente ve un sitio web, un póster o algún otro diseño y solo ve el contenido, el mensaje y tal vez la sensación del diseño. Como diseñador, debe analizar todo de manera analítica, ver por qué un diseño tiene una cierta sensación, qué mensaje está dando el diseño, qué fuentes se han usado, qué elementos visuales y técnicas ha usado el diseñador, cómo Se ha combinado y cómo se ha arreglado..
Siempre debe mirar el diseño, no solo en línea, sino en todas partes, porque los estilos de diseño no se limitan a los sitios web. Carteles, anuncios, créditos de televisión, folletos y en cualquier lugar donde haya diseño, hay una oportunidad de aprender..
Cuanto más mire y aprenda, más tendrá a su disposición. Cuando te sientas a diseñar un nuevo proyecto, podrás extraer nuevas ideas visuales incluso cuando te encuentres con un lienzo en blanco. Cuando se te dan materiales de diseño o marcas, cosas como tipografías, logotipos y mensajes activarán elecciones estilísticas, como pistas para un misterio..
Cuando haga uso de los estilos que ha visto antes, siempre debe esforzarse para que su propia voz de diseño sea escuchada. Dale tu propio toque, eres una mezcla o apariencia particular, para que tu voz de diseño se escuche. Y siempre, siempre, asegúrese de que está aplicando un diseño que se adapte y mejore el mensaje, no caiga en la trampa de solo pensar en la estética.
Recuerde que la forma sigue a la función. Las elecciones de estilo y estética que realiza están para ayudar al sitio web a cumplir su función..
Esta publicación es el día 8 de nuestra sesión de diseño web. Sesiones creativas "Session Day 7Session Day 9"
Accentsconagua