Todo aquel que este un poquillo relacionado con eso del diseño web sabrá lo que Lorem Ipsum, el texto que se utiliza para rellenar algún espacio de una plantilla web y que sirve principalmente para conservar un orden en ésta y asi que no se vean garabatos al momento de visualizarla. Todo esto solo para el texto, pero cuando se manejan imágenes, varía un poco y se tienen  que insertar las mismas «a mano», generar una imagen con X programa e insertarla…

Afortunadamente existe DummyImage, una herramienta web que hace una función similar a Lorem Ipsum, genera imágenes según los parámetros enviados; por ejemplo en la imagen superior se generó una de la siguiente manera: <img src="http://dummyimage.com/500x250" alt="A Dummy Image"> en donde el 500 representa el ancho y los 250 su altura. Todo eso, de manera html pero en caso de que se requiera puede ser directamente en el navegador (http://dummyimage.com/500x250). LifeHacker!~

Entre las tantas webs que existen de Mashups, SmashingMagazine es una de las que vale la pena, su contenido es muy bueno y publican casi todo lo orientado a diseño web entre otras cosas relacionadas al mismo; una razón más para publicar algo de Smashing por aquí es que realizaron un showcase del diseño web en México y pusieron algunos proyectos importantes y algunos que en realidad valen la pena echarles un ojo.

Con una gran variedad de contenido, la recopilación da una idea «masomenos acertada» (corregirme si estoy mal) de lo que anda pegando en el país en eso del diseño web. Si te ha gustado en la recopilación completa puedes mirar algunos otros más bonitos y muy interesantes también.

Una excelente compilación de tips para sitios web que se deben de tomar en cuenta al momento de diseñar una página web.  Están en inglés todos pero son en realidad muy sencillos de comprender ya que son bastante gráficos.

Lo que los hace un poquitín más divertidos es que todos están ilustrados con imágenes del legendario He-Man Lo miré hace algunos días allá en la Vecindad

Diseñar y programar una web no es tarea sencilla, se tiene que persar en todo, desde lo más mínimo, el tiempo de carga, el renderizado en todos los navegadores, y un largo etcétera, que teniendo en cuenta unos cuantos consejos, ésto podría ser más sencillo, aquí algunos consejos para diseñar mejor una web:

1. Sólo hay poco tiempo para impresionar al usuario
2. Recordar que el usuario escanea la web; lo mismo pasa con un baño, antes de usarlo, lo miramos para ver que tan bien/mal se ve… es lo mismo con un sitio.
3. Utiliza el espacio en blanco
4. Los gráficos: sencillos y claros
5. Darle formato al texto adecuadamente

Otros más los pueden encontrar en el artículo original, el cual abarca otros cinco puntos más no menos interesantes y además de eso, una ligera explicación del porque (inglés).

(WebmasterLibre)

Existen muchos detalles que tenemos que tomar en cuenta a la hora de desarrollar un sitio web, sin embargo existen algunos más importantes que otros. Después de pasar la etapa de planeación del sitio, lo demas recae en la etapa de diseño de la interface, el contenido y algunas otras importantes como la optimización para los buscadores (SEO). Al no entrar a fondo en lo que sería SEO, aquí una lista de lo que se denominaría 15 elementos claves que cualquier top site debe tener.

1. Buen diseño visual

Primero lo primero, simplemente a todos nosotros nos gusta que los sitios tengan una diseño atractivo. La mayoría de nosotros nos vamos a la primera impresión, “la primera impresión es la que cuenta”, con esa frase conocida por todos se explicaría este punto. Un diseño limpio y fácil es lo que comunmente todos necesitamos, algunas veces lo podemos “adornar” un poco más, pero siempre y cuando respetemos lo limpio y fácil. El adornarlo demasiado puede ser contradictorio, pues al abusar de estos puntos puede hacer pedante el sitio.

2. Tener una interfaz de usuario reflexiva

Este elemento viene pegado junto con el buen diseño visual. Una buena interfaz de usuario es clave para un sitio web, ponernos en el lugar del usuario es fundamental. Hacer el sitio funcional sería la clave para este punto, “Keep it simple”.

3. Navegación primaria encima de todo

Elementos en un sitio como “Inicio – Contacto – FAQ – Categorías”, son elementos que deben de ir encima de todo, conmunmente estos enlaces son colocados abajo del top banner lo cual los hace facilmente localizables. Las areas principales de nuestro sitio deben ir en este lugar.

4. Repite la navegación en el pie de página.

Si hay algo que me molesta cuando estoy navegando en una página cuyo contenido es extenso, es que cuando termino de ver la página no haya un menú en la parte inferior de esta, tener que utilizar la barra de scroll para regresar a navegar es simplemente tedioso. Ponernos en el lugar del usuario resolvería estos problemas, que pueden parecer pequeños y sin importancia pero no lo son.

5. Buen contenido

Frases como “el contenido es lo que manda”, pueden estar en lo cierto. El tener un sitio con un buen diseño y una buena interfaz de usuario y algunos otros elementos claves, si el contenido no es bueno simplemente lo dejaremos de visitar.  Si tienes un blog por ejemplo, el tener contenido que resulte útil para tus usuarios y les brindes además de eso contenido en el que tengas experiencia será de mucha ayuda.

6. Una página solida acerca de tu sitio.

Sea cual sea la temática de tu página, la página “about me” es una de las más visitadas. La gente simplemente por curiosidad de ver quien esta detras de una empresa o de un blog da clic en estas paginas. Incluir fotografías de tu persona, tu experiencia laboral y algunos detalles que puedan hacer más informativa esta página. Simplemente los usuarios se sentiran más en confianza al tener esto en tu sitio.

7. La información de contacto

Si eres una empresa, nada resultará más confortante para un potencial cliente que tener la posibilidad de comunicarse contigo de una manera rápida. Simplemente si el cliente no encuentra esto, terminará por irse con la competencia. En el peor de los casos el proveer una dirección de correo puede ser útil, pero sería mucho mejor que brindes un formulario de contacto fácil para que facilite la tarea.

8. Busqueda

Uno de los más importantes de todos, algunas veces el usuario encuentra contenido interesante en el sitio, al cabo de un tiempo el usuario puede que quiera utilizar ese contenido que vió en tu sitio. El tener en tu sitio la posibilidad de buscar contenido puede ser de gran ayuda. No todos los usuarios guardan enlaces, si les facilitas esto poniendo un textbox en tu sitio para que puedan encontrarla más fácilmente, adelante.

9. Crear cuentas ó suscribirte

Si tu sitio ofrece un buen contenido, por ejemplo en un blog la gente querrá seguir visitándolo. El crear una cuenta ó suscribirte a un servicio como un feed RSS sería de gran utilidad para tus usuarios.  Si tienes un blog es sumamente fácil ofrecer la posibilidad de un Feed RSS pero sería mucho mejor si tienes una cuenta en FeedBurner. Si no tienes una plataforma de blogging, pero quieres ofrecerles a tus usuarios la posibilidad de recibir contenido en su correo, feedburner también te puede ayudar.

10. Mapa del sitio

Existen dos mapas de sitio, uno para los humanos y otro para los motores de busqueda. Un mapa en html, php, etc. Pueden ser invaluables para que los usuarios encuentren contenido en tu sitio. Creando un buen mapa de sitio – una buena estructura de todas las páginas de tu sitio web – es muy útil especialmente si no puedes agregarle una sección de busqueda a tu sitio.

11. Separar el diseño del contenido

Los días de crear tablas usando layouts de diseño terminaron. La mayoría de los sitios web ahora utilizan XHTML y CSS, el cual es separado uno de otro.  Utilizando etiquetas como Div y referenciando archivos CSS fuera del contenido facilitan esta tarea, pues el CSS estará ajeno a nuestro contenido.

Con esta separación les resultará más fácil a los motores de busqueda su tarea. Pues no estarán buscando entre tantas lineas de código como las de el fondo, letra, etc.

12. Validación de XHTML y CSS

No es suficiente con tener estructurado nuestro sitio, validarlo puede ser útil para agregarle a nuestro sitio algo de ‘cache’. Servicios tales como W3C Markup Validation Service y como W3C CSS Validation Service nos pueden ayudar mucho. ¿Para qué nos servirá esto?, pues existen muchos navegadores web, el validarlo sería asegurarnos que nuestro código se verá bien en todos.

13. Compatibilidad de navegadores

No todos utilizamos Firefox, existen personas aunque no lo crean que aún utilizan Internet Explorer 6, asegurarnos que nuestro contenido se verá bien en todos los navegadores es una tarea fundamental. Pues de nada servirá que nos adornemos tanto para Firefox si el contenido no estará disponible de una forma adecuada en cualquier otro navegador. Si nos queremos evitar algo de trabajo existe una web llamada Browser Shots, la cual nos ayuda a ver como se vería un sitio en X navegador.

14. Imágenes optimizadas

Al diseñar un sitio es importante guardar las imágenes en una forma optimizada, pues simplemente no todos tus usuarios tendrán el ancho de banda que tu tienes. Al hacer esto también le das puntos a tu favor al sitio, lo haces más liviano. Debemos tener cuidado pues debemos optimizarlas más no deformarlas, cuidar que no se pixeleen es fundamental.

15. Estadísticas, Rastreo y Análisis

Todo esto esta detrás del sitio, si es un blog y tiene varios editores, no a todos les puede interesar. Pero debe de interesarle al propietario del sitio, pues aspectos como las visitas recibidas, de donde vienen enlaces, que es lo más buscado, lo artículos más interesantes, las páginas más visitadas, etc. Si tienes una plataforma como Wordpress esto se te facilitará, pues resulta muy fácil revisar estos puntos.

Enlace |  15 key elements all top web sites should have