6 maneras de mejorar el diseño de tu blog
Los blogs a menudo se pueden dejar de lado cuando se trata de diseño. Muchos de nosotros descontamos la necesidad de un diseño intensivo cuando se trata de nuestros blogs, ya sea para nuestras compañías o para nosotros mismos.
Pero es importante que comprendamos que cada aspecto de nuestra identidad en línea debe diseñarse de una manera limpia e intuitiva con el estilo que prefiera. Este aspecto elusivo del trabajo en la web es algo que debemos esforzarnos constantemente. Y sí, eso incluye el tiempo que pasamos trabajando con blogs.
Gran parte del tiempo los blogs se pierden en la confusión porque los consideramos como "volcados de texto" masivos en lo que respecta a la arquitectura de la información, y eso ciertamente es un aspecto de su identidad, pero tienen más potencial que eso.
Algunos blogs, cuando se diseñan correctamente, son excelentes para mostrar nuestra corriente de ideas, así como también cierta información de la cartera, mientras que otros son excelentes para mostrar noticias y fotografías.
El punto es que un blog puede ser un gran tanque de retención para una variedad de temas y la visualización se reduce a las elecciones de diseño específicas que realice en todo momento. En los últimos cinco años, han surgido muchas cosas para hacer que el mundo de los blogs sea mucho más fácil de lo que solía ser. Por ejemplo, WordPress es genial y los temas hacen mucho del trabajo de diseño para nosotros, pero si quieres darle más sabor, hay algunas cosas que debes tener en cuenta.
Del mismo modo, si desea editar la navegación o el diseño del tema, también hay algunas cosas que debe tener en cuenta. Eso se aplica a casi cualquier motor de blogs, o cuando trabajas por tu cuenta. Aquí hay varios de mis pensamientos sobre lo que creo que son esos bits importantes.
Trabajar con efectos de texto basados en sombras
Los efectos de texto son excelentes maneras de presentar títulos de encabezado, barras de navegación o presentaciones de contenido en su blog siempre que se utilicen con moderación. Repasemos algunos de los efectos más comunes que vemos sobreutilizados en la web y cómo usarlos correctamente.
Texto retro
A menudo es un dolor trabajar con él, pero parece que ha estado circulando durante el último año y medio a pesar de ese hecho. Y con la llegada de CSS3 es mucho más fácil manipular y encontrar ese sombreado perfecto. Aquí tengo un ejemplo para ayudarnos a entender cómo crear este efecto de manera apropiada, luego voy a repasar cuándo y cuándo no usarlo. El nombre del juego con efectos retro no es un radio de desenfoque y usa sombras dobles. Entonces, digamos que estamos trabajando con una fuente de color oscuro (# 707070I), queremos usar una doble sombra de texto para lograr esto. Se vería algo como esto:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
Eso debería darle un bonito efecto de doble borde, con un aspecto muy de los 70's. Por supuesto, para obtener el verdadero ambiente de los 70, es posible que tengas que agregar todo tipo de manipulación del color, pero al menos tenemos el efecto base inactivo. Sin embargo, recuerda, no te vuelvas loco con el color, y definitivamente no te vuelves loco con el desplazamiento x e y para las sombras de texto (ya que podría resultar ilegible muy rápido). Cuando se trata de usar un efecto retro, el mejor uso es en títulos de cabecera. Este no es un efecto que funcionaría bien con texto de tamaño pequeño o información descriptiva. Lo mejor es dejarlo en la parte superior de tu blog y dejarlo en paz.
Texto de tipografía y recuadro
Otra característica popular que ofrecen las sombras de CSS3 es un tipo de estilo de inserción, también conocido como 'tipografía'. Este es definitivamente un tema candente en el mundo de los efectos de texto de CSS3, así que veamos cómo hacerlos correctamente. Por lo general, se logra un estilo de inserción al compensar el eje Y una pequeña cantidad para dar la impresión de un sutil resaltado dentro del fondo inmediato del texto. Muchas veces verá que se usa como opuesto al contraste de fondo (claro vs. oscuro) para que el efecto tenga un mayor impacto en el lector. Veamos un ejemplo.
Fondo claro, texto oscuro:
body { background-color: #888; text-shadow: 0px 2px 3px #666;}
Fondo oscuro, texto claro
body {background-color: #666; text-shadow: 0px 2px 3px #888;}
Eso generará un efecto de capas / recuadro realmente agradable que se puede usar para encabezados o títulos de blog. Úselo con moderación en todo el sitio, porque nada es peor que alguien que usa demasiado los efectos de texto. En este caso, estaría bien usar en varios encabezados secundarios o con varias barras laterales o elementos de pie de página, pero solo asegúrese de no utilizar esto en una información descriptiva. De nuevo, cualquier efecto de texto basado en sombras no debería usarse para tal cosa.
Trabajando con imágenes en tu blog
Reconozcámoslo, como diseñadores web, nos encanta mostrar nuestro trabajo. Nos encanta tanto que incluso nuestros blogs personales pueden llenarse de imágenes de cartera y subtítulos esparcidos. Entonces, ¿por qué no consolidar esos dos? La mejor manera de trabajar con información de subtítulos es contener información relevante dentro de la imagen misma, y la mejor manera de hacerlo es implementar un efecto CSS3 directamente sobre la imagen.
Si tiene curiosidad sobre por qué creo que este es un aspecto tan importante del trabajo con imágenes, solo diríjase a la tienda web Google Chrome (complementos). Son capaces de mostrar miles de imágenes sin ningún texto a su alrededor, y aun así nos brindan suficiente información sobre dicha imagen para saber si queremos hacer clic en ella o no. Eso es brillante, y muchos más de nosotros deberíamos implementar esta técnica para no solo limpiar texto de subtítulos innecesarios, sino también para dar un impulso a la experiencia del usuario.
Así que recreemos eso para su blog personal, pero con su propio toque, para que pueda mostrar la información del cliente para las imágenes del sitio web en las que ha trabajado:
Primero necesitamos crear un contenedor para la imagen, y luego dentro de eso tenemos que crear otro contenedor para el texto que queremos usar. En este caso, utilizaremos un subcabezal, un poco de texto y un enlace. luego dentro de eso creamos un contenedor para el texto y enlaces al sitio web del cliente que estamos exhibiendo.
En esta sección, lo que estamos haciendo es obtener la transición de la imagen real y preparar el texto para la transición. También estamos identificando que queremos que la imagen salga a lo largo del eje X y no del eje Y, por lo que significa Tendremos un efecto de puerta corredera.
Ahora configuraremos el efecto de desplazamiento del mouse y obtendremos la transición para comenzar con este evento.
.image_container:hover .text_container { transform: translateX(0px);}.image_container:hover img { transform: translateX(300px);transition-delay: 0.1s;}.image_container:hover p { opacity: 1; transition-delay: 0.4s; }Como puede ver aquí, lo que hicimos fue similar a lo que hicimos arriba para la imagen. Simplemente introdujimos el texto después de la imagen que quedó, y le dimos un retraso de + 0.1 para asegurarnos de que funcione sin problemas. Y eso es todo.
Hay muchas otras maneras en que puedes personalizar esto, y definitivamente una tonelada de otros efectos de transición que puedes usar. Sin embargo, recuerde que si trabaja con transiciones más avanzadas, no las use de manera tan repetitiva como lo haría con algo tan simple como esto. Se usan mejor con moderación para enfatizar las imágenes clave.
Trabajando con diseños creativos
A menudo, como diseñadores web, veremos las tendencias excesivamente utilizadas que se han abusado año tras año, y queremos ser una voz para el cambio con respecto a ellas. Pero ir contra la corriente puede ser una práctica arriesgada, especialmente si no lo está haciendo correctamente (como nota: no estoy diciendo que tenga que ser creativo de la "manera correcta" porque no hay un "camino correcto" para ser creativo). Mencioné eso porque creo que ser creativo es, por definición, desvincularnos de las limitaciones o normas creativas, y de hecho lo alentaría, pero también creo que deberíamos desconfiar de la razón por la que dichas normas se han arraigado en nuestra web. temas de diseño y lo que podemos hacer para ser innovadores con ellos, con eso en mente.
Alineación de texto única
Cuando se trabaja con texto de forma creativa o única (es decir, no con 12pt Arial alineados en el centro), es muy importante recordar que su texto ya no es el contenido principal de la página. Se ha relegado a un elemento de apoyo, aunque importante.
Una pregunta que siempre debe hacerse al trabajar con texto es: "¿Equilibra esto bien con el resto de la página?" Puede estar junto a un trabajo de cartera, una imagen aleatoria o quizás varias otras columnas de texto a cada lado de la página.
Pero independientemente de lo que sea adyacente o perpendicular a usted, debe intentar equilibrarlo lo mejor que pueda. Piense en las líneas de la cuadrícula y estudie los sistemas de cuadrícula que existen si es necesario ( Sistema de red 960 es lo que recomendaría). Estudie dónde colocaron el diseño de la cuadrícula en la página y luego pregúntese por qué; luego, deduzca si el suyo está igualmente equilibrado. Imagine que está colocando su contenido a lo largo del sistema de cuadrícula, y trate de pensar cómo se vería en ese caso; luego, replique eso en CSS.
Pies de página creativos
Los pies de página creativos realmente pueden agregar mucha personalidad a un blog o sitio web, y parece algo contra-intuitivo pensarlo. Ya sea que estemos hablando del desplazamiento de jQuery que nos lleva a un hermoso pie de página con un estilo 'bajo la tierra', o solo para el fondo del sitio web o blog de una compañía, es una parte muy pequeña de un sitio web, pero una que puede tener un impacto muy poderoso. Las opiniones se dividen en qué medida es este el caso y por qué podría ser. Tengo mi propia teoría: cuando leemos una página web, comenzamos en la parte superior y pasamos al final, y es al pie de la página que sacamos nuestras conclusiones sobre lo que hemos leído.
Cuando trabaje con un pie de página creativo, hay algunas cosas que debe tener en cuenta, y algunas de las mejores prácticas que he notado se usan en los pies de página que más me gustan. Para mí, la parte más importante de usar un pie de página de esta manera es utilizar el mismo esquema de color que su sitio web, pero con un contraste diferente . Esto es increíblemente importante y, por supuesto, puede bombear el contraste hacia arriba o hacia abajo en el color de la fuente con respecto al contraste con el que está trabajando para el tema general en el pie de página en primer lugar.
Lo importante que debe recordar es que desea tener un bonito conjunto de estilos profundo para esta sección. Le da una buena sensación de finalización al sitio. Al usar esta técnica, puede hacer que el pie de página sea tan alto como desee, dentro de lo razonable, porque con el esquema de color contrastado, es obvio que se trata de una sección de pie de página.
En cuanto al contenido, en el mundo del pie de página nuevo puede ser apropiado agregar la ilustración de su logotipo y el nombre del blog, las imágenes o enlaces de su red social, su último tweet e incluso un buen formulario de contacto simplista. Esto, por supuesto, puede variar en función de sus preferencias personales, pero mi objetivo al mostrar todas esas opciones es ilustrar la evolución del pasado al presente en lo que es apropiado mostrar en la parte inferior de un sitio web o blog.
jQuery desplazamiento
Esta es una de mis formas favoritas de navegar en un sitio web, y también creo que es específicamente aplicable a la navegación de publicaciones en un blog. Hay algunas maneras diferentes de trabajar con jQuery para esto, así que aquí voy a repasar cuál es una de mis formas favoritas (y más fáciles) de hacer un desplazamiento suave y luego revisar lo que está sucediendo y cómo implementarlo.
Este es el código para el desplazamiento vertical, ya que el desplazamiento horizontal no es tan deseable.
$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top} , 1000); event.preventDefault ();});});Lo que está sucediendo aquí puede parecer complicado, pero en realidad es bastante simple. Estamos abriendo una función en la "clase" del elemento de navegación en el que vamos a hacer clic (llamamos a esto un evento de clic). Entonces la parte más importante aquí es titular la clase de la lista (ul) a "nav". O reemplace el "nav" en el código con lo que haya llamado esa clase. Y eso es más o menos para un desplazamiento de jQuery que funciona, simplemente agrégalo a tu sitio web y vincúlalo al jQuery minificado (preferible) y ya está listo para comenzar.
En lo que respecta al uso de un desplazamiento vertical como este, es bastante ilimitado. Muchas personas disfrutan de no tener que desplazarse hacia abajo manualmente, realmente disfrutan de la página haciéndolo por ellos, y también es una manera brillante de pasar de una publicación a otra en un sitio web, especialmente si esas publicaciones son grandes. A menudo lo usaré para moverme a varias subsecciones de cartera dentro de mis blogs o a través de categorías en sitios web. También es una técnica perfecta si te gusta el sitio como un tema de día a noche o temas para tus categorías o temas del blog.
Espero que algunas de estas técnicas sean útiles para todos ustedes al tratar de aplicar varias estéticas de diseño en su blog. Recuerda, úsalos con moderación y trata de asegurarte de que actúas con tu mejor juicio al usar efectos llamativos. Tenemos la obligación de crear una Internet que no sea tan fea como se han convertido ciertos aspectos del mundo exterior. A pesar de que es una tarea grande y abrumadora, es una que podemos lograr si solo tomamos un diseño a la vez y un día a la vez. Manténgalo simple, manténgalo honesto, manténgalo real, y siempre ponga pasión en lo que hace, ya que siempre brillará.
¿Cuáles son tus mejores consejos de diseño de blog? ¿Qué hace un gran diseño de blog? Háganos saber en los comentarios!
