9 Consejos Pro para Diseño Web Todo el mundo debe leer

1. Precedencia (el arte de controlar el Ojo)
buen diseño web, tal vez incluso más que otro tipo de diseño, tiene que ver con la información. Una de las principales herramientas en su arsenal para hacer esto es prioridad. Al navegar un buen diseño, el usuario debe ser liderada por la pantalla por el diseñador. Yo llamo a esta prioridad, y se y'. S sobre cómo peso visual diferentes partes tanto de su diseño tienen
Un sencillo ejemplo de precedencia es que en la mayoría de los sitios, lo primero que se ve es el logotipo. Esto es a menudo debido a que y' s grande y ajustado a lo que se ha demostrado en estudios para ser el primer lugar la gente mira (arriba a la izquierda). Esta es una buena cosa ya que es probable que desee que el usuario sabe inmediatamente lo que el sitio es lo que están viendo.
Pero prioridad debe ir mucho más allá. Usted debe dirigir a los usuarios y' s los ojos a través de una secuencia de pasos. Por ejemplo, es posible que desee a su usuario para pasar de logotipo /marca a una declaración de posicionamiento primario, al lado de una imagen impactante (para dar la personalidad sitio), luego al texto del cuerpo principal, con una navegación y una barra lateral de tomar una posición secundaria en .. la secuencia
Lo que su usuario debe estar mirando depende de usted, el diseñador web, para averiguar
Para lograr lo que yo llame a la precedencia que tiene muchas herramientas a su disposición:
1. Posición — donde algo está en una página influye claramente en qué orden que el usuario ve él.
2. Colores — utilizando colores fuertes y sutiles es una forma sencilla de decirle a su usuario dónde buscar.
3. Contraste — ser diferente hace que las cosas se destacan, sin dejar de ser el mismo que los hace secundaria.
4. Tamaño — grande tiene prioridad sobre poco (menos que todo es grande, en cuyo caso poco podría sobresalir gracias al contraste) página 5. Elementos de diseño — si hay una gigantesca flecha que apunta a algo, supongo que donde el usuario se verá?
2. Espacio entre
Cuando empecé a diseñar, quería llenar cada espacio disponible con cosas. Pensé espacio vacío parecía un desperdicio. Sin embargo, he encontrado lo contrario es cierto.
Espaciado hace las cosas más claras. En el diseño web, hay tres aspectos de espacio que usted debe considerar:
Interlineado: Cuando usted pone texto a cabo, el espacio entre las líneas afecta directamente a la forma legible por lo que parece. Demasiado poco espacio hace que sea fácil para el ojo a extenderse de una línea a la siguiente; demasiado espacio significa que cuando termine una línea de texto e ir a la siguiente el ojo puede perderse. Así que hay que encontrar un término medio entre los dos. Usted puede controlar el interlineado en CSS con el &'; line-height y' selector. En general creo que el valor por defecto suele ser muy poco espaciamiento para mi gusto. Interlineado se llama técnicamente líder, que se deriva del proceso que las impresoras solía utilizar para separar las líneas de texto en los viejos tiempos y mdash; mediante la colocación de barras de plomo entre las líneas
Relleno:. Texto En general nunca debe tocar otros elementos. Imágenes de, por ejemplo, no deben ser un texto conmovedor, tampoco debería fronteras o tablas.
Relleno es el espacio entre los elementos y el texto. La simple regla aquí es que siempre se debe tener espacio allí. Hay excepciones, por supuesto, en particular si el texto es una especie de título /grapic. Pero como regla general, poner espacio entre el texto y el resto del mundo hace que sea infinitamente más legible y agradable
espacio blanco:. En primer lugar, el espacio en blanco doesn y' t necesidad de ser de color blanco. El término se refiere simplemente a un espacio vacío en una página (o espacio negativo, ya que y' s veces se llama). El espacio en blanco se utiliza para dar equilibrio, proporción y diferencia de una página. Una gran cantidad de espacio en blanco tiende a hacer que las cosas parecen más elegante y de lujo, así que por ejemplo si vas a un sitio arquitecto caro, y' casi siempre verá un montón de espacio. Si quieres aprender a usar los espacios en blanco de manera efectiva, ir a través de una revista y ver cómo se colocan anuncios. Anuncios de grandes marcas de relojes y coches, que tienden a tener una gran cantidad de espacio vacío utilizado como un elemento de diseño.
3. Navegación
Una de las experiencias más frustrantes que puede tener en cualquier sitio web está siendo incapaz de averiguar dónde ir o dónde se encuentre. I &'; d gusta pensar que para la mayoría de los diseñadores web, la navegación es un concepto que y' he logrado dominar, sin embargo, siempre hay uno que demuestra que estoy equivocado. Hay dos aspectos de la navegación a tener en cuenta:
Navegación:? ¿Dónde puede ir
Hay algunas reglas de sentido común que debe recordar aquí. Botones para viajar alrededor de un sitio debe ser fácil de encontrar y- hacia la parte superior de la página y fáciles de identificar. Deben verse como botones de navegación y estar bien descrito. El texto de un botón debe ser muy clara en cuanto a dónde y' s que le llevará. Aparte del sentido común, y' s también importante para hacer la navegación utilizable. Por ejemplo, si usted tiene un submenú de vuelco, lo que garantiza que una persona puede llegar a los elementos del submenú sin perder el vuelco es importante. Del mismo modo el cambio del color o la imagen de rollover es una excelente respuesta para un usuario
Orientación:. ¿Dónde estás ahora
Hay un montón de maneras en que puede orientar a un usuario para que no haya excusa para no?. En sitios pequeños, podría ser sólo una cuestión de una gran partida o a &'; abajo y' versión del botón correspondiente en el menú. En un sitio más grande, es posible hacer uso de rutas de miga de pan, subtítulos y un mapa del sitio para los verdaderamente perdida.
4. Diseño construir
La vida se ha vuelto mucho más fácil ya que los diseñadores Web transición a diseños CSS, pero incluso ahora y' s todavía importante pensar en cómo se va a construir un sitio cuando usted y' re todavía en Photoshop. Tenga en cuenta cosas como: Cómo puede realmente hacerse
Es posible que haya elegido una fuente increíble para su copia de cuerpo, pero es en realidad un tipo de letra estándar HTML? Es posible que tenga un diseño que se ve hermosa, pero es 1100px de ancho y se traducirá en una scrollng horizontal para la mayoría de los usuarios de Internet. It &'; s importante saber lo que puede y can &'; t hacer, y por eso creo que todos los diseñadores web también deben construir sitios, al menos a veces
¿Qué sucede cuando una pantalla se cambia el tamaño ¿Por qué necesita repetir.? ¿antecedentes? ¿Cómo van a trabajar? ¿El diseño centrado o alineado a la izquierda? ¿Cuáles son usted haciendo todo lo que es técnicamente difícil?
Incluso con posicionamiento CSS, algunas cosas como la alineación vertical todavía están un poco doloroso ya veces es mejor evitar por completo.
Podrían pequeña cambios en su diseño simplifican en gran medida de cómo lo construyes?
Algunas veces, mover un objeto alrededor de un diseño puede hacer una gran diferencia en cómo se tiene que codificar tu CSS después. En particular, cuando los elementos de un centro de diseño sobre la otra, se añade un poco de complejidad a la construcción. Así que si su diseño tiene, digamos cuatro elementos y cada elemento es completamente separados unos de otros, que sería muy fácil de construir. Por otro lado, si los cuatro se superponen entre sí, todavía puede ser fácil, pero probablemente será un poco más complicado. Usted debe encontrar un equilibrio entre lo que se ve los cambios buenos y pequeñas que pueden simplificar su construcción.
Para grandes sitios, sobre todo, se puede simplificar las cosas?
Hubo un tiempo en que yo solía hacer botones de imagen para mis sitios. Así que si había un botón de descarga, por ejemplo, me gustaría hacer una imagen pequeña descarga. En el último año más o menos, I &'; he cambiado a usar CSS para hacer mis botones y nunca he mirado atrás. Claro, que significa mi botones don &'; t siempre tienen la flexibilidad que podría desear, pero el ahorro en tiempo de construcción de no tener que hacer decenas de pequeñas imágenes de los botones son enormes página 5.. Tipografía
texto es el elemento más común de diseño, por lo que y' s no es de extrañar que una gran cantidad de pensamiento ha ido en ella. It &'; s importante tener en cuenta cosas como:
opciones de la fuente: Los diferentes tipos de fuentes dicen cosas diferentes sobre un diseño. Algunos miran moderna, algunos aspecto retro. Asegúrese de que está utilizando la herramienta correcta para el trabajo
tamaños de fuente:. Hace años era de moda para tener texto muy pequeño. Afortunadamente, en estos días la gente ha comenzado a darse cuenta de que el texto está destinado a ser leído, no sólo mirado. Asegúrese de que sus tamaños de texto son consistentes, lo suficientemente grande como para ser leído, y proporcionado a fin de que los títulos y subtítulos se destacan debidamente
Espaciado:. Como se mencionó anteriormente, el espaciado entre líneas y lejos de otros objetos es importante tener en cuenta. También debe estar pensando en el espaciado entre letras, aunque en la web esto es de menor importancia, como usted don &'; t tiene tanto control
Line Longitud: No hay regla dura y rápida, pero por lo general sus líneas de texto. shouldn los &'; t ser demasiado largo. Cuanto más tiempo estén, más difícil se van a leer. Pequeñas columnas de texto trabajo mucho mejor (pensar en cómo un periódico expone texto)
Color:. Uno de mis peores hábitos está haciendo de texto de bajo contraste. Se ve bien, pero doesn y' t leer tan bien, por desgracia
de párrafos: Antes de empezar a diseñar, me encantó para justificar el texto en todo.. Se hizo para bordes agradables a cada lado de mis párrafos. Por desgracia, el texto justificado tiende a crear brechas extraños entre las palabras donde han sido auto-espaciadas. Esto no es y' t agradable para el ojo al leer, por lo que se adhieren a alineados de izquierda a menos que le sucede que tiene un cuerpo magia de texto que pasa al espacio perfectamente página 6.. Usabilidad
Diseño web isn y' t sólo de cuadros bonitos. Con tanta información y la interacción de efectuarse en un sitio web, y' s importante que usted, el diseñador, proporcione para todo. Eso significa hacer el diseño de su sitio web usable
We &';. Ya hemos discutido algunos aspectos de usabilidad y- navegación, precedencia y texto. Aquí hay tres más importantes:
La adhesión a normas: Hay ciertas cosas que la gente espera, y no dar les causa confusión. Por ejemplo, si el texto tiene un subrayado, que esperamos que sea un enlace. Hacerlo de otra manera no es una buena práctica usabilidad. Claro, usted puede romper algunas convenciones, pero la mayor parte de su sitio Web debe hacer exactamente lo que la gente espera que haga
Piense en lo que los usuarios realmente van a hacer: prototipos es una herramienta común utilizada en el diseño de realidad y '; try &';! un diseño. Esto se hace porque a menudo cuando en realidad se utiliza un diseño, observe pequeñas cosas que hacen una gran diferencia. ALA tenía un artículo hace un tiempo llamado Nunca use una advertencia cuando usted significa deshacer, que es un excelente ejemplo de una decisión de diseño pequeña interfaz que puede hacer la vida chupa para un usuario
Piense en las tareas del usuario:. Cuando un usuario trata de su sitio lo están realmente tratando de hacer? Enumerar los diferentes tipos de tareas de la gente podría hacer en un sitio, cómo van a lograrlos, y lo fácil que quiere hacer por ellos. Esto podría significar tener tareas muy comunes en su página de inicio (por ejemplo, y '; iniciar y compras ' ;, &'; aprender sobre lo que hacemos, y' etc.) o que podría significar asegurar algo como tener una caja de búsqueda siempre de fácil acceso. Al final del día, el diseño Web es una herramienta para las personas a utilizar, y la gente don &';! T como el uso de herramientas molestos
7. Alineación
Mantener las cosas en fila es tan importante en el diseño Web como en el diseño de impresión. Ese y' s no quiere decir que todo debe estar en una línea recta, sino que usted debe ir a través y trata de mantener las cosas puestas constantemente en una página. Alinear hace que su diseño más ordenado y de fácil digestión, así como hacer que parece más pulido. Página 8. Claridad (Nitidez)
Mantener su diseño nítido y fuerte es super importante en el diseño Web. Y cuando se trata de la claridad, y'. Todo se trata de los píxeles
En tu CSS, todo será píxel perfecta por lo que y' s nada de qué preocuparse, sin embargo en Photoshop que no es así. Para lograr un diseño de vanguardia que tiene que:
Mantenga bordes forma cuadraron píxeles. Esto podría implicar manualmente la limpieza de formas, líneas y cajas si usted y'. Re crearlas en Photoshop Usa seguro de que cualquier texto se crea utilizando la configuración anti-aliasing apropiado. Yo uso y '; Sharp &'; mucho.
 Asegurar que el contraste es alto por lo que las fronteras están claramente definidos.
 El exceso de énfasis en las fronteras sólo un poco a exagerar el contraste.
9. Significa consistencia
consistencia haciendo que todo partido. Rúbrica tamaños, opciones de fuente, colorear, estilos de botón, espaciado, elementos de diseño, ilustración estilos, opciones de fotos, etc. Todo debe ser temática para hacer su diseño coherente entre páginas y en la misma página.
Mantener su diseño coherente se trata ser profesional. Inconsistencias en un diseño son como los errores de ortografía en un ensayo. Ellos simplemente bajan la percepción de la calidad. Sea cual sea su diseño parece, manteniéndola constante siempre llevarlo a un nivel superior. Incluso si y'. Sa mal diseño, al menos que sea un mal diseño consistente, Francia El modo más sencillo de mantener la coherencia es para tomar decisiones tempranas y se adhieren a ellos. Con un sitio muy grande, sin embargo, las cosas pueden cambiar en el proceso de diseño.
Tener un buen conjunto de hojas de estilo CSS también se puede recorrer un largo camino para hacer un diseño coherente. Intenta definir etiquetas básicas como y

de tal manera que para hacer sus valores predeterminados coinciden correctamente y evitar tener que recordar los nombres de clase específicos en todo momento Restaurant  .;