<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Oh! Gráfico &#187; blogs</title>
	<atom:link href="http://www.ohgrafico.com/tag/blogs/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ohgrafico.com</link>
	<description>Blog de diseño gráfico</description>
	<lastBuildDate>Mon, 19 Sep 2011 15:00:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Recomendaciones en el diseño de un blog</title>
		<link>http://www.ohgrafico.com/recomendaciones-en-el-diseno-de-un-blog</link>
		<comments>http://www.ohgrafico.com/recomendaciones-en-el-diseno-de-un-blog#comments</comments>
		<pubDate>Sat, 26 Sep 2009 02:18:14 +0000</pubDate>
		<dc:creator>kozmica</dc:creator>
				<category><![CDATA[Diseño web]]></category>
		<category><![CDATA[blogging]]></category>
		<category><![CDATA[blogs]]></category>
		<category><![CDATA[recomendaciones]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://www.ohgrafico.com/?p=744</guid>
		<description><![CDATA[Además del diseño gráfico los blogs o el blogging también me encanta, y para que un blog triunfe su diseño es pieza clave. Este diseño se puede catalogar en diseño web y claro que entra dentro del enorme mundo de lo que es el diseño gráfico.]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-1067" title="recomendaciones-diseño-blog" src="http://www.ohgrafico.com/wp-content/imagenes/recomendaciones-diseño-blog.jpg" alt="recomendaciones-diseño-blog" width="400" height="200" /></p>
<p>Además del diseño gráfico los blogs o el <em>blogging</em> también me encanta, y para que un blog triunfe su diseño es pieza clave. Este diseño se puede catalogar en <strong>diseño web </strong>y claro que entra dentro del enorme mundo de lo que es el diseño gráfico.</p>
<p>Antes ya hablé de los <a href="http://www.ohgrafico.com/errores-mas-comunes-en-el-diseno-de-un-blog">errores más frecuentes en el diseño de un blog</a>, pero en esta nota les voy dar algunas <strong>recomendaciones para el buen diseño de tu blog</strong> desde mi punto de vista.</p>
<p><img class="aligncenter size-full wp-image-1068" title="contenido-ancho-blog" src="http://www.ohgrafico.com/wp-content/imagenes/contenido-ancho-blog.gif" alt="contenido-ancho-blog" width="400" height="268" /></p>
<ul>
<li><strong>Que el espacio de contenido sea más ancho que el de las columnas o sidebars.</strong> No estoy hablando de portadas de blog tipo magazine, puesto que la estructura es muy diferente, pero en una estructura estándar siempre hay que procurar que el espacio que le vas a dejar a tus posts sea más ancho que el que ocupan otros elementos, tu contenido es lo más importante. Yo recomendaría un ancho mínimo de 500 pixeles, para incluir imágenes que no sean tan pequeñas y que el texto no se vea muy apretado.</li>
</ul>
<p><span id="more-744"></span></p>
<p><img class="aligncenter size-full wp-image-1069" title="encabezado-sin-scroll" src="http://www.ohgrafico.com/wp-content/imagenes/encabezado-sin-scroll.gif" alt="encabezado-sin-scroll" width="365" height="179" /></p>
<ul>
<li><strong>Que el encabezado no ocupe demasiado espacio verticalmente</strong> y deje ver el contenido sin tener que ir hacia abajo en el blog para poder verlo. Así cuando un visitante entre a nuestro blog podrá ver el contenido sin tener que hacer <em>scroll</em>, recuerda que la resolución pequeña más usada es de 1024 x 768px, toma en cuenta esas medidas al diseñar tu blog. Además si usas publicidad tienes que procurar que esta quede también visible en cuanto entres al sitio.</li>
</ul>
<p><img class="aligncenter size-full wp-image-1070" title="menu-header-visible" src="http://www.ohgrafico.com/wp-content/imagenes/menu-header-visible.gif" alt="menu-header-visible" width="400" height="268" /></p>
<ul>
<li><strong>Incluye un menú para las páginas del blog que sea fácilmente distiguible</strong> de otros links, que no se pierda, lo mejor es en la parte superior, en el encabezado (header) o al comienzo de la columna lateral.</li>
<li><strong>Que se note que los enlaces son <a href="recomendaciones-en-el-diseno-de-un-blog">enlaces</a>.</strong> Preferentemente con otro color haz que los enlaces sean diferentes del texto en general, también puedes subrayarlos ya que los usuarios promedio en general esperan que sea así.</li>
</ul>
<p><img class="aligncenter size-full wp-image-1071" title="contraste" src="http://www.ohgrafico.com/wp-content/imagenes/contraste.gif" alt="contraste" width="360" height="119" /></p>
<ul>
<li><strong>Procura contraste entre el texto y el fondo.</strong> No tiene que ser simplemente blanco y negro pero busca que no se pierda, tanto en el texto como con los enlaces y titulares. Te dejo esta herramienta online que te ayuda a checar el contraste: <a href="http://www.snook.ca/technical/colour_contrast/colour.html">Colour Contrast Check</a> (fijate especialmente que en el campo de resultados <em>Are colours compliant?</em> diga YES!).</li>
</ul>
<p><img class="aligncenter size-full wp-image-1072" title="delimitar-entradas" src="http://www.ohgrafico.com/wp-content/imagenes/delimitar-entradas.gif" alt="delimitar-entradas" width="400" height="268" /></p>
<ul>
<li><strong>Delimita bien las áreas.</strong> Sobre todo en portada que quede bien claro cuando termina un post y cuando comienza otro, esto puede ser logrado simplemente con una línea de separación o con un buen tamaño y color de los enlaces de título.</li>
</ul>
<p><img class="aligncenter size-full wp-image-1073" title="imagenes-demasiado-grandes" src="http://www.ohgrafico.com/wp-content/imagenes/imagenes-demasiado-grandes.gif" alt="imagenes-demasiado-grandes" width="400" height="268" /></p>
<ul>
<li><strong>Cuida que las imágenes no sean demasiado grandes</strong>, es decir más grandes que el área de tu post porque luego se empalmarían con la sidebar o descuadrarían todo el diseño. Puede que ahora esté perfecto pero recuerda eso a la hora de cambiar de theme o plantilla, busca tus posts con imágenes y anota cuánto miden las más anchas, toma eso de referencia como el mínimo de ancho que deberá de tener de ahí en adelante, a menos que pienses en redimensionarlas todas&#8230;</li>
<li><strong>Mantenlo ligero.</strong> Puede que tu blog se vea super, con muchos efectos e imágenes pero para un visitante nuevo pudiera ser una tortura esperar a que cargue la página. Para esto nunca utilices imágenes en formato BMP, prefiere GIF o incluso JPG (a excepción del logotipo, en ese caso siempre prefiero PNG). Visita tu blog desde otra computadora que no sea la tuya, así verás cuanto tiempo espera un visitante para que abra la página, ¿abre muy lento? a optimizar se ha dicho.</li>
<li><strong>¿Se ve igual en firefox que en IE?</strong>, pues espero que sí. Ya sabemos que IE es el dolor de cabeza de los diseñadores web porque es un navegador que no cumple con los estándares, por eso en algunos casos es imposible lograr algunos detalles que en otros es pan comido, sin embargo sigue siendo el navegador más usado y es mejor checar en ambos navegadores que el sitio se vea lo mejor posible. Ten ambos navegadores abiertos cuando estes editando el diseño de tu blog y a cada cambio que hagas lo checas en los 2.</li>
<li><strong>Valida tu CSS y HTML.</strong> Un blog que está correctamente estructurado desde su código es mejor tratado por los robots o spiders de los navegadores, si tu blog valida será mejor interpretado e indexado, además es muestra de profesionalismo y del empeño que le pones a tu blog. ¿Cómo saber si valida?, accede al validador de la w3c: <a href="http://validator.w3.org/">The W3C Markup Validation Service</a>, solo escribes la dirección de tu blog en el campo de Address y le das enter o presionas el botón Check. <em>Si estas en blogger ni te apures, la estructura de la plataforma nunca te va a permitir que valide</em>.</li>
</ul>
<p>Espero que les hayan gustado estas sencillas recomendaciones que harán que tu blog sea más agradable para los visitantes e incluso para ti mismo. Claro que todo es desde mi punto de vista y cada blog es un mundo muy diferente, pero creo que los puntos que traté son aplicables a la mayoría.</p>
<p>Seguro tienes otra sugerencia, ¡anímate a agregar tu recomendación en los comentarios!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ohgrafico.com/recomendaciones-en-el-diseno-de-un-blog/feed</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>Errores más comunes en el diseño de un blog</title>
		<link>http://www.ohgrafico.com/errores-mas-comunes-en-el-diseno-de-un-blog</link>
		<comments>http://www.ohgrafico.com/errores-mas-comunes-en-el-diseno-de-un-blog#comments</comments>
		<pubDate>Thu, 04 Dec 2008 11:17:30 +0000</pubDate>
		<dc:creator>kozmica</dc:creator>
				<category><![CDATA[Misceláneos]]></category>
		<category><![CDATA[blogs]]></category>
		<category><![CDATA[diseño]]></category>
		<category><![CDATA[errores]]></category>

		<guid isPermaLink="false">http://www.ohgrafico.com/?p=122</guid>
		<description><![CDATA[Cuando estas diseñando tu blog, o al menos adaptando un diseño el objetivo es que quede un blog diferente, original y agradable para la navegación de los usuarios. Y en [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="aligncenter" title="Errores comunes en el diseño de un blog" src="http://img.photobucket.com/albums/v202/vicede/ohgrafico/errorescomunesblog.png" alt="" width="400" height="110" /></p>
<p>Cuando estas diseñando tu blog, o al menos adaptando un diseño <strong>el objetivo es que quede un blog diferente, original y agradable para la navegación de los usuarios.</strong> Y en el proceso de diseño podemos cometer algunos errores como los que te describiré:</p>
<p><strong>Usar fondo negro con letras blancas</strong></p>
<ul>
<li>Usar este tipo de diseño espantará a muchos posibles lectores antes de que se pongan a leer. El caso es que no a todos les gusta porque cansa la vista. Si quieres un color así mejor usa un gris oscuro, lastima menos.</li>
</ul>
<p><strong>No tener bien a la vista el título del blog</strong></p>
<ul>
<li>Es casi obligado tener el título de tu blog en la cabecera (header), he visitado blogs que no lo tienen, que incluso tengo que buscar para encontrar el nombre. El título del blog es importante para que te recuerden, y lo ideal es que sea de lo primero que ve el visitante.</li>
</ul>
<p><strong><br />
Dejar entradas larguisimas en portada</strong></p>
<ul>
<li>Es buenísimo hacer posts extensos pero no si estos son tan largos que parecen no terminar y aparecen en la portada del blog haciendo interminable llegar a otro post para el visitante que no le interesa ése. Lo ideal es que tu lector pueda ver lo que hay en portada y si le interesa un artículo largo haya un enlace para seguir leyendo bien visible.</li>
</ul>
<p><span id="more-122"></span></p>
<p><strong>Tener una columna o sidebar llena de botones, imágenes, animaciones</strong></p>
<ul>
<li>Cuando se empieza es fácil querer llenar nuestras columnas para que no estén vacías. Pero es un error, menos es más. Lo mejor es dejar sólo lo que tiene que ver con el blog, además de que las imágenes y animaciones harán que tarde más en cargar la página. Un diseño lleno de cosas hará que tus visitantes se distraigan en cosas que no son importantes o que no encuentren lo que buscan.</li>
</ul>
<p><strong>Tener una sidebar muy larga, o tener 2 y que una esté mucho más extensa que la otra<br />
</strong></p>
<ul>
<li>Una sidebar muy larga se ve mal especialmente en posts individuales, e igual de mal se ve que haya 2 y una de ellas sea el doble o más extensa que la otra. Lo mejor es equilibrarlas.</li>
</ul>
<p><strong>Usar una plantilla o theme mucho más ancho que la resolución de pantalla más usada</strong></p>
<ul>
<li>Este es muy común, pero más que un error es un descuido. La resolucion más usada de pantalla tiene un ancho de 1024 pixeles, así que cualquier blog que sea más ancho que eso será incómodo de navegar en una pantalla con esa resolución o más chica. Es mejor mantenernos por debajo de ese número de ancho en pixeles o usar un theme que se &#8220;estire y se encoja&#8221; respecto al tamaño de la ventana.</li>
</ul>
<p><strong>No resaltar bien los links</strong></p>
<ul>
<li>Aunque no es un error muy cometido, si es uno muy malo. El visitante espera ver los enlaces de un color distinto al texto general, si no es así los enlaces se pierden igual que la navegación, Hay que hacer bien evidente qué es un enlace y qué no lo es.</li>
</ul>
<p><strong>No poner el crédito del creador de la plantilla o theme<br />
</strong></p>
<ul>
<li>Muchas plantillas para WordPress o Blogger son creadas por diseñadores que se toman su tiempo en hacerla para luego poner una descarga gratuita, si tú modificas la plantilla lo ideal es que pongas en algún lado de quién es el diseño original y que tú la editaste.</li>
</ul>
<p><strong>No tener bien visible un enlace o botón al feed del blog</strong></p>
<ul>
<li>Cuando alguien se quiere suscribir a tu blog y no encuentra el Feed es un problema. Lo mejor es facilitarle la búsqueda poniéndo bien visible un ícono del feed, no tiene que ser enorme, pero lo mejor es que esté cerca de la cabecera.</li>
</ul>
<p>Si vas empezando tal vez hayas cometido más de uno de estos errores, pero todo se puede remediar, y si ya eres veterano y aún tienes alguna cosita que cambiar nunca es demasiado tarde.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ohgrafico.com/errores-mas-comunes-en-el-diseno-de-un-blog/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>

