Diapositivas web atractivas y útiles: ¿qué se debe y qué no se debe hacer?

¡Espero que no le importe que un programador irrumpa en el sitio de diseño gráfico...! Normalmente trabajo con agencias de diseño para convertir sus ideas creativas en una realidad de sitio web. Así que puedo apreciar un buen sitio web. Sin embargo, cuando se trata de reconstruir mi propio sitio, no tengo el lujo de poder contratar a un diseñador, por lo que necesito hacerlo yo mismo.

Tengo el diseño básico y estoy bastante satisfecho con él: lo principal de la página de inicio es que tiene una navegación grande y agradable con una lista de servicios de programación, vinculados a un bastante grande (en este momento 650 x 495) ' diapositivas'. La idea es que la presentación de diapositivas le brinde suficiente información adicional de un vistazo sobre el elemento seleccionado para que haga clic en esa sección para leer más.

Entonces, la pregunta: ¿qué hace una buena diapositiva? Veo muchos ejemplos excelentes en la web y puedo decir 'sí, ¡eso se ve bien!' pero me resulta difícil replicar algo con lo que estoy satisfecho.

¿Debería tener un fondo de gran contraste o debería conectarse perfectamente con su entorno (que en este caso es solo un área blanca)?

¿Debería tener solo un mensaje extra grande y simple? ¿O incluir más texto?

¿Debería tener una imagen de fondo completa, o simplemente incorporar una imagen en alguna parte y dejar el resto sin formato?

¿Cuáles son algunos buenos consejos para asegurarme de no dar un paso en falso relacionado con la diapositiva? (¡dado que el mercado objetivo del sitio es la industria del diseño!).

Gracias :)

Respuestas (1)

El mejor consejo que puedo darte: mantenlo simple. Si su mercado objetivo son los diseñadores, absolutamente no querrá darles la idea de que a) está tratando de competir con ellos, o b) tiene delirios de grandeza acerca de sus habilidades de diseño. Esto funciona a tu favor, en realidad, ya que significa que no tienes que saltar más del mínimo requerido de aros. :-)

Entonces, en este contexto, una buena diapositiva es simple, transmite un solo mensaje (un título y uno o dos párrafos cortos en letra grande) y parece que pertenece al sitio y pertenece a un conjunto .

Esos dos últimos puntos necesitan un poco de expansión. Estas diapositivas son parte de la información de su sitio, pero en realidad son avances para llevar al visitante a la página donde obtienen la verdadera información. El texto en las diapositivas debe tener el mismo tipo de letra que los títulos de su sitio; las variaciones de tamaño y estilo están bien, pero no use una fuente diferente.

Para hacer que las diapositivas se unan visualmente, existen algunas técnicas básicas:

  1. Cree una imagen de fondo fantasma (una página de código probablemente funcione bien aquí) que no cambie, deslice a diapositiva. Cuanto más ocupada esté la imagen, más transparente deberías hacerla, pero intenta algo simple. Complételo con una máscara de degradado donde irá su "propaganda" si está ocupado.

  2. Puede cambiar los colores de fondo de cada diapositiva para indicar que se trata de un tema diferente. Esto podría ser tan simple como tener una capa de Tono/Saturación establecida en el modo de fusión "Color" o "Tono" en su original de Photoshop y cambiar el valor de Tono. Si su sitio tiene colores brillantes, asegúrese de que algún elemento en cada diapositiva coincida exactamente con uno de los colores de su sitio. [Si es apropiado, puede usar una fotografía que muestre la idea que está tratando de transmitir. Eso es un poco más arriesgado, pero puedes intentarlo.]

  3. Su título en cada diapositiva debe estar exactamente en el mismo lugar, mismo tamaño, misma fuente.

  4. El párrafo corto debe estar debajo y posiblemente a la derecha del título, y nuevamente debe estar exactamente en el mismo lugar.

He usado "lo mismo" mucho. Esa es una regla de diseño simple que puede evitarle muchos problemas. Use pocos colores pero hágalos iguales en todas partes donde aparezcan. Utilice el mismo tipo de letra en todas partes. Si un título aparece en un lugar en particular, debe estar en el mismo lugar en todas las diapositivas. Si usa fotografías de archivo, obtenga tomas del mismo fotógrafo, o al menos en estilos muy parecidos, para que parezca que se tomaron como un conjunto. Se sorprenderá de cómo puede elevar el impacto de cualquier pieza de diseño simplemente prestando atención a este punto, y cualquiera puede hacerlo. No tienes que ser un diseñador.

Espero que esto te haya dado algunas ideas útiles. Deliberadamente no fui demasiado explícito con las imágenes, porque es su sitio y usted conoce su mercado mejor que yo. ¡Toda la suerte!

Excelente consejo, pasé la tarde ajustando mi sitio. Tuve un gran problema con los fondos, todos los tienen. Se ven geniales, pero en mi diseño, se perdieron y no estaban conectados a nada. Ahora que he ajustado todo para que encaje perfectamente, las diapositivas comienzan a verse mucho mejor... ahora también tendré que hacer algo con el fondo blanco del sitio, ja :)
Y en cuanto a no competir con los diseñadores, algo realmente complicado, aunque ese es el caso, ¿quiere un diseñador ver un sitio atractivo para demostrar que realmente podemos armar un sitio atractivo? (¡Estamos tratando de diferenciarnos al incluir algo de interactividad en la página de inicio para mostrar nuestras habilidades!)
Puede mostrar ejemplos de cartera de sitios que ha habilitado y testimonios de directores de arte extasiados cuyo tocino ha salvado. Lo que estaría buscando en un proyecto como este es una apariencia limpia y profesional en general, especialmente en la página de inicio. Tendría páginas con algunos "¡guau!" demostraciones de tecnología en acción en algunas situaciones realistas, y me gustaría mostrar algunos sitios de clientes que muestran un trabajo exitoso.
Sí, lo llamamos "estudios de casos" en lugar de cartera, ya que no hacemos los diseños. Si bien definitivamente podemos señalar algunos de los que estamos orgullosos, a menudo no hay presupuesto para agregar alguna funcionalidad realmente genial, o los diseñadores no son conscientes del tipo de funcionalidad realmente genial que podemos agregar.
Tiene sentido. No estaría de más incluir algunos ejemplos de Really Cool Stuff, basados ​​en algunas de las cosas que desearía haber hecho si el cliente hubiera tenido el presupuesto. :)