Elementos de gran diseño web el polaco

Cuando armo diseños, normalmente lo hago en dos fases. - Diseño y polaco. Durante la fase de diseño, coloco los objetos principales en la página, generalmente terminando con algo que parece relativamente completo. En la segunda etapa, el polaco, repaso el diseño y ajuste los colores, tipeo los tratamientos, las sombras, las capas y, en general, lo limpio todo. En este primero de una serie de tutoriales sobre diseño web, veremos el polaco.

Un breve prefacio

A diferencia de los efectos de Photoshop, el diseño web no se puede enseñar realmente en un conjunto de pasos fácilmente repetibles. Si nos fijamos en la mayoría de los grandes diseños web, no son difíciles de reproducir técnicamente. Probablemente podrías capturar un diseño, colocarlo en Photoshop y luego replicar el mismo diseño capa por capa. El truco, sin embargo, es idear ese diseño en primer lugar..

Por este motivo, en estos tutoriales sobre diseño web, voy a probar algunas técnicas diferentes para transmitir diferentes aspectos del proceso que personalmente paso al diseñar un sitio web..

Hoy estamos viendo un sitio que armé a principios de este año llamado Not By The Hour, que es un subsitio de otro de nuestros blogs llamado FreelanceSwitch. Afortunadamente, cuando lo diseñé hace meses, mantuve una versión del archivo PSD antes y después de pulirlo, así que al igual que en un comercial de pérdida de peso, haremos un poco de "antes y después" ...

Antes de explicar algunas de las cosas que hice para pulir el sitio web, es importante mirar el antes y el después.

VER ANTES Y DESPUÉS

Paso 1 - Claridad:

Me escucharán decir esto una y otra vez, pero cuando diseñan para la Web, todo se trata de los píxeles. Uno de tus objetivos siempre debe ser mantener las cosas limpias y afiladas. Esto significa por ejemplo:

Claridad del texto
Cuando diseñe un texto, debe pensar en qué Anti-Aliasing utiliza. Para hacer esto, aparecerá el panel Carácter, que puede hacer yendo a Ventana> Carácter o cuando tenga seleccionada la Herramienta de tipo y algún texto resaltado, presione Ctrl-T (sí, es el mismo método abreviado para la transformación, por lo que debe asegúrese de que el texto está seleccionado). En el panel Carácter, en la parte inferior derecha, puede elegir entre Ninguno | Sharp | Crujiente | Fuerte. Para diferentes fuentes y diferentes tamaños debes experimentar. Principalmente utilizo el ajuste Sharp, que forzará la alineación de algunos píxeles y, a veces, distorsionará un poco la fuente con ajustes más pequeños. Pero por ejemplo en la imagen debajo del texto. Fabricación está definido como nítido, por lo que cuando aplico un esquema de 1px está muy claramente definido.
Revestimiento
Como se puede ver entre las barras de color gris claro y gris más oscuro, he agregado una línea de 1px débil. Este truco imita el efecto del filtro de afilado. Si alguna vez ha ejecutado uno de los filtros de nitidez con demasiada frecuencia en una foto, notará que comienzan a aparecer pequeños bordes. Esto se debe a que enfatizar el borde entre hace que las dos partes parezcan más separadas a su ojo y, por lo tanto, más nítidas. Muy a menudo usaré una línea débil para enfatizar el borde y hacer que las dos partes se vean más claras.
Colorante
El color también puede hacer una gran diferencia en el afilado de las cosas. En este caso, desaturé el fondo de una especie de gris claro / verde a gris puro. Esto significa que la caja fuerte, que tiene un tono verdoso, se destaca más del fondo y termina luciendo más nítida..
Limpiando objetos
Otra cosa que no hice en esta imagen, pero que puedes hacer para mejorar las cosas, es ir a través de objetos como el logotipo o la caja fuerte y asegurarte de que los bordes estén alineados con los píxeles. Entonces, por ejemplo, eche un vistazo al borde izquierdo de la caja fuerte en comparación con el borde derecho. Verás que el borde derecho se ve un poco borroso. Podríamos solucionar este problema utilizando la herramienta Lazo poligonal (L) y seleccionando un borde pequeño en el lado derecho y presionando Eliminar. Por supuesto, esto no es esencial y no quiero sonar molesto, pero es una buena idea pensar en estos detalles y asegurarse de que todo esté bien y fresco.!

Otro elemento a discutir aquí es que en el texto verá un efecto de degradado / trazo débil. Esto se logra con dos estilos de capa, un trazo interno de 1px y un degradado sutil. He usado esto aquí porque es parte de la marca FreelanceSwitch, y también es una especie de efecto Web 2.0. Es mejor hacerlo con texto Sharp como se mencionó anteriormente. Puede ver los estilos de capa exactos en el PSD de muestra a continuación.

Paso 2 - Luz y Sombra:

Gradientes, Gradientes, Gradientes. Algunos dirían que son el sello distintivo del diseño Web 2.0, y debo admitir que los utilizo constantemente en mis diseños. En la imagen de abajo, verás que he agregado sombras y gradientes a algunos lugares diferentes para darle más profundidad al diseño..

Una de las principales diferencias entre la impresión y el diseño web en mi opinión es la cantidad de profundidad que necesita en su diseño. Lo que quiero decir con esto es que en el diseño de impresión, si tuviera una cubierta para folletos con un color liso y plano, muchas veces todavía se verá encantador debido al papel o al celulosa que podría aplicarse y la reacción de la luz. a ese papel / recubrimiento. Por lo tanto, en el "diseño" puede parecer un color plano simple, pero en la salida tendrá profundidad. En la pantalla no tienes este efecto..

Esto no quiere decir que no pueda tener fondos planos o paneles de color en el diseño web, sin embargo, todos los diseñadores de impresión que he creado para crear sitios web, las dos fallas más comunes que he notado son

No enfocarse en la nitidez y claridad del diseño.
En la impresión, rara vez se amplía para modificar píxeles individuales, ya que cuando se imprime algo, ese nivel de detalle a menudo se escapa del ojo. Piensas en milímetros no en píxeles..
No agregar claves de profundidad y suficiente interés visual
Los gradientes generalmente no funcionan tan bien en la impresión, pero en la pantalla funcionan bien. De manera similar, la adición de sombras tenues y luces resaltan bien en la pantalla. Juntos pueden hacer que un sitio sea mucho más atractivo visualmente a medida que los diferentes elementos de la pantalla se enfrentan entre sí. En la imagen de abajo, por ejemplo, las bolsas de dinero, que inicialmente eran imágenes vectoriales rectas con colores planos, recibieron graduaciones muy sutiles usando la herramienta de quemado (O) para que parecieran más suaves..

Paso 3 - Precedencia:

La precedencia es el aspecto visual más importante del diseño de información. Y dado que el diseño web se trata en gran medida de cómo presenta y presenta la información a su usuario, la prioridad es por lo tanto de la mayor importancia..

¿Qué quiero decir con precedencia? Bueno, cuando miras la página tienes que preguntarte qué miro primero, qué sigue, qué sigue después, y así sucesivamente. ¿Y por qué miras ciertas cosas en un cierto orden??

La precedencia visual es una mezcla de factores:

tamaño
Es bastante obvio que algo grande va a tener prioridad sobre algo pequeño. Así que en este diseño, la caja fuerte y el título principal tienen prioridad superior. Cuando miras la página, lo primero que notas son esos dos elementos..
Color
El color también crea precedencia. Por ejemplo, en la imagen anterior, verá que los subtítulos en el área marcada con 4 en esa imagen de abajo eran inicialmente el mismo azul oscuro que las palabras Hola! Esto significaba que había menos distinción entre los dos y no estaba tan claro lo que se debía leer primero. Al volverlos a un beige, se les da menos importancia y es más obvio que tienen menos importancia en la jerarquía de la información..
Color de fondo
Tanto con el color de fondo como con el color en general, lo importante no es tanto el color específico de algo como lo que colorea todo lo demás en relación. Entonces, por ejemplo, si todo es negro en una página y hay un objeto blanco, obviamente ese objeto blanco saltará hacia ti. En este caso, al contrastar el amarillo brillante con el gris oscuro, obtenemos énfasis. Entonces, aunque lo primero que vea en la página sea la caja fuerte y las palabras Hacer ingresos pasivos, probablemente te darás cuenta Una guía para siguiente, y el Parte 1 | Parte 2 |... la navegación en segundo lugar. Esto es a propósito ya que quiero que el usuario vea primero una imagen visual y un título para que sepa lo que está viendo, luego quiero que vea la navegación principal para que entiendan cómo moverse por el sitio..
Posición
Finalmente, la posición en el diseño también hace una diferencia en cómo se perciben los elementos. Como probablemente haya escuchado, los estudios muestran que el ojo del usuario va de arriba a abajo a la derecha en alguna variación (he visto ambos estudios que dicen que va de arriba a la izquierda a la parte superior derecha y luego a la izquierda a la parte inferior derecha, y alternativamente que va en una especie de arco de esquina a esquina.) Lo importante aquí es que tener algo más arriba por lo general da más prioridad, y tener algo más por lo general le da algo más de prioridad..

Etapa 4:

Lo he dicho antes, lo diré otra vez ... Se trata de los píxeles.!

En esta imagen, verás lo que parece ser un degradado bastante sencillo. De hecho, hay tres gradientes dibujados y tres líneas de 1 píxel utilizadas. Es bastante sutil, y podría decirse que no hace mucha diferencia, pero en mi opinión, cada detalle cuenta hacia el final.

Paso 5:

Alguien en los comentarios preguntó sobre los tipos de estilos de la Web 2.0. Aquí hay un efecto simple en el que le da un contorno de 1 o 2 píxeles y luego un tenue degradado para un fondo. Si no lo habías notado ya, comenzarás a darte cuenta de que está por todas partes, posiblemente un poco abusado, pero de alguna manera es agradable..

Paso 6:

En esta imagen, puede ver cómo a veces durante el pulido puede incluso cambiar la información real en la página. En este caso, decidí que, aunque era más rico desde el punto de vista infromacional, tenía todos los títulos de las diferentes partes debajo de las bolsas de dinero, se veía tan desordenado que no pensé que fuera particularmente informativo, aunque esto es algo discutible. Así que, en lugar de eso, eliminé el exceso de marrón sobre el texto marrón y lo reemplacé con negrita amarilla sobre gris oscuro, que por el contraste salta.

Y ahí lo tienes!

Así que ahí está mi primer tutorial de diseño web. Por favor, hágamelo saber en los comentarios si esto es informativo. ¡Es un reto explicar el diseño web! También tenga en cuenta que mi estilo de diseño web es, por supuesto, mi gusto, particularmente porque soy mi propio cliente en el 99% de los proyectos que hago en estos días :-)

La próxima vez que tenga un sitio web para diseñar, planeo grabar todo con un programa de captura de pantalla y luego acelerarlo en unos minutos. Así que puedes esperar eso! Creo que va a ser muy bueno, aunque estoy un poco nervioso porque como todos los diseñadores, algunos días es fácil, y otros días es una pizarra en blanco dentro.

De todos modos espero que hayan disfrutado el tutorial. Por favor dale un Digg si lo hiciste!

PSD de muestra

Una nota rápida sobre este PSD, no he etiquetado ninguna de las capas ni las he agrupado. Esto es, literalmente, el PSD con el que construí el sitio que he cerrado para que lo pueda ver. El diseño y los contenidos de la PSD son proporcionados. puramente para fines de instrucción. Los derechos de autor para el diseño y las ilustraciones son propiedad de sus respectivos dueños. Por favor, no utilice elementos del diseño en otros lugares..

Descarga el PSD para este tutorial.

Diseño e ilustración