La guía definitiva para la inclusión de la galería CSS

Design Shack comenzó como una simple galería de CSS, con sitios web bien diseñados que llamaron mi atención. Se han enviado decenas de miles de diseños en los últimos años, y cada uno se ha considerado cuidadosamente para su inclusión. El hecho triste es que solo alrededor del 5% de las presentaciones se destacan entre la multitud.

Esto podría ser debido a cualquier número de factores; el sitio no entendió bien lo básico, no tenía nada extraordinario que mostrar o, en ocasiones, el contenido lo decepcionó. Esta guía lo guiará a través de cómo asegurarse de tener una gran oportunidad de inclusión, evitando todos los escollos en los que los diseñadores se topan con tanta frecuencia. En cada etapa, veremos un gran ejemplo, y uno que no es tan bueno.

Clave lo básico

Es común ver que un sitio se caiga en el primer obstáculo, sin tener en cuenta lo básico de un buen diseño. Las áreas en las que vale la pena tomarse el tiempo para hacerlo bien incluyen tipografía, espaciado y colores (¡o generalmente una combinación de los tres!).

Si está buscando una descripción general completa de los componentes básicos del diseño, consulte Cinco pasos simples. Vale la pena cada centavo, y me ha enseñado mucho sobre los principios de diseño que descuidé anteriormente.

Tipografía

La tipografía es probablemente el elemento más comúnmente pasado por alto en un diseño. Tiene una gran importancia y puede hacer o deshacer un sitio web.

Piense detenidamente sobre el tipo que le gustaría usar en los encabezados y el cuerpo de su sitio. Aunque hace unos años estaba muy limitado a un puñado de? ¿Seguro para la Web? fuentes, utilizando un sistema como Cufon o sIFR significa que las posibilidades de fuente son infinitas.

Lo importante es seleccionar dos o tres fuentes y mantenerlas en una jerarquía sensata en todo el sitio. Cree una publicación de muestra que muestre cómo se ven las diferentes etiquetas para asegurarse de que haya estilizado todo correctamente. Esto podría incluir:

  • Encabezados (h1 y en adelante)
  • Liza
  • Citas
  • Enlaces (y enlaces de encabezado / imagen)
  • Acrónimos
  • Énfasis / Cursiva / Negrita / Fuerte
  • Formato de código

Espaciado

Es vital colocar los elementos correctamente en la página con espacio suficiente para garantizar que todo sea legible. La conformidad con algún tipo de estructura de cuadrícula es importante, con el Sistema de cuadrícula 960 una opción popular.

Asegúrese de que el espacio en blanco se usa extensivamente y que atraiga la atención del lector a los elementos importantes de la página.

Colores

Elegir una combinación de colores para un sitio no es nada simple (y cubriremos algunas herramientas para ayudarlo en un próximo artículo). Es difícil encontrar un esquema de color único, que no reste valor a la legibilidad de la página.

Si te quedas sin inspiración, Color Lovers es un gran sitio para hojear rápidamente varias combinaciones y diferentes muestras.

Añadir algo creativo

Aunque alcanzar todos los aspectos básicos puede ser suficiente para que un sitio sea destacado, hacer un esfuerzo adicional con un diseño nuevo e innovador puede ayudar realmente a captar la atención. Esto podría ser un diseño interesante, un fondo o una posible atención increíble a los detalles en cada elemento de la página.

El diseño web a menudo se ve increíblemente "atascado en la rutina", con un cierto estilo generalizado durante algunos meses antes de que algo nuevo se convierta en popularidad. ¿Sitios que se liberan de esta tendencia? ¿Seguir la tendencia? es mucho más probable que aparezcan, ya que tienen mucho más potencial para inspirar.

Elementos graficos

El lugar más obvio para la innovación es los elementos gráficos en una página. Dicho esto, los gráficos deben mejorar de forma coherente el aspecto de una página, en lugar de sentirse inconexos y abarrotados. Estos dos ejemplos son excelentes ilustraciones de imágenes e ilustraciones utilizadas con efectos buenos y malos:

Agregar un gráfico único e interesante es una excelente manera de inyectar personalidad en su sitio y hacer que los lectores se sientan como en casa.

Animación

Con las posibilidades de animación que ofrecen los sistemas como jQuery, no hay razón para mantener un sitio estático. Ahora también es posible hacer esto de forma semántica y utilizable sin tener que recurrir a Flash.

No estoy hablando de animaciones pegajosas, sino de efectos que hacen que una página se sienta más elegante. Y más fluido. Un gran ejemplo de esto es el sitio personal de Tim Van Damme, que es un verdadero placer utilizar:

Intente agregar un efecto simple a la propiedad de reinversión de sus enlaces, para ofrecer una transición sin problemas de un estado a otro.

Navegación

El objetivo principal de la navegación del sitio web siempre debe ser proporcionar una forma clara para que el lector acceda al contenido. Sin embargo, eso no significa que deba atenerse a una lista estándar de enlaces. Ya sea que se dirija a la navegación vertical u horizontal, es fácil agregar interés con algunos gráficos:

Me doy cuenta de que estoy siendo muy hipócrita aquí (¡mira nuestra aburrida lista de enlaces!), Pero creo que Design Shack encaja mejor con un estilo de navegación simple. Diferentes sitios tienen diferentes requisitos!

Es posible que desee echar un vistazo a uno de nuestros sitios asociados, 13 estilos para algunos menús interesantes para descargar de forma gratuita.

Piense dos veces sobre el contenido

Muchas personas piensan que debería ser posible mantener el diseño y el contenido de su sitio relativamente separados. Esto rara vez es el caso, y el contenido de una página puede tener un gran impacto sobre si es adecuado para la inclusión.

Las copias mal escritas, los errores de ortografía y las inexactitudes gramaticales son bastante inexcusables. Si espera presentar una imagen profesional con su sitio web, tomarse el tiempo para perfeccionar la copia es muy importante. Dice mucho sobre su atención a los detalles, y es poco probable que la mayoría de las galerías lo presenten si una página está llena de errores ortográficos.

Anuncios

Muchos sitios confían en la publicidad para generar ingresos y mantener un proyecto en marcha (¡nosotros incluidos!).Esto no significa que los anuncios deban realizarse a expensas de un buen diseño, y que deban usarse con moderación. Si tiene suficiente demanda para llenar cada centímetro de espacio libre en su sitio con publicidad, ¡simplemente no está cargando lo suficiente!

En términos generales, es mejor (aunque no necesariamente rentable) evitar confundir a los lectores. No venda enlaces publicitarios dentro del texto de su página, y no intente disfrazar anuncios. Asóciese con compañías con las que con gusto se trataría y exhiba su producto con orgullo. También ayuda si puede asegurarse de que los anuncios estén bien diseñados (¡aunque esto rara vez es posible!)

Un ejemplo de una red de sitios que hacen esto bien es Tuts +. Tienen una clara distinción entre contenido y anuncios, aunque todavía ofrecen una posición destacada para sus patrocinadores:

Cantidad

Una regla general solía ser que el contenido no debería ir "más allá del pliegue". En realidad, esto? Pliegue? no es tan importante como la gente alguna vez pensó. Los usuarios ahora están completamente acostumbrados a desplazarse, y esperan hacerlo cuando visitan su sitio.

Lo importante a lograr es transmitir el mensaje principal de una página tan pronto como sea posible. Sea sensato con la cantidad de publicaciones o la cantidad de contenido que se muestra en cada página por dos razones: (1) mostrar las 30 publicaciones más recientes significará que su página toma una largo tiempo para cargar, y (2) es poco probable que una columna de contenido muy larga se equilibre? con la longitud de otras columnas en tu página.

¿Vale la pena el esfuerzo?

Una pregunta, sin duda, que pasa por su mente en esta etapa es si todo este trabajo vale la pena. ¿Por qué querrías ser incluido en una galería de CSS? Buena pregunta.

  • Promoción y sensibilización: Todo el mundo ama un poco de tráfico a un nuevo diseño, y ser presentado es una forma segura de que un grupo de personas visite su sitio. Es su trabajo convertirlos en suscriptores, seguidores leales o clientes que pagan.
  • Prestigio: Ser presentado en una variedad de galerías diferentes es un gran refuerzo de confianza. Dicho esto, no lo conviertas en tu único objetivo (y por favor, Por favor, no los enumere todos en su pie de página)
  • Trabajo futuro: Descubrí que los clientes potenciales a menudo usan galerías de diseño como una forma de encontrar un diseñador que tiene un estilo particular que están buscando. Ser destacado puede ser una buena manera de atraer nuevos negocios.

¡Buena suerte!

Como bono por llegar al final de este artículo, me gustaría ofrecerle la oportunidad de enviar un sitio a Design Shack de forma gratuita (por lo general, cuesta $ 3.50). Una vez que haya considerado los puntos anteriores, envíeme un correo electrónico a [correo electrónico protegido]. Revisaré su presentación y, con suerte, ¡pronto veremos su sitio en Design Shack!

Esta dirección de correo electrónico es válida por una semana, ¡después de eso, la cerraremos!