Curated by: Luigi Canali De Rossi
 


1 October 2008

Diseño Web: Consejos Para Diseñar Tu Primer Blog O Página Web

Si estás por comenzar a diseñar el "look" de tu primer blog o página web, he aquí mis recomendaciones específicas sobre como moverte en esa dirección. Lo que estoy por presentarte no es una colección de trucos encontrados acá y allá y re-ensamblados para esta nota. Es un enfoque básico y directo del diseño web que he desarrollado a lo largo de mi propia experiencia como editor profesional para la web y asesor en comunicación estratégica para muchas compañías online.

web-site-design_id87035_size485.jpg
Crédito de la foto: Vladislav Gansovski

Diseñar para la web requiere, como premisa fundamental, entender que acceder a la información en la pantalla de una computadora o de un equipo móvil es, para el usuario, una experiencia completamente distinta a la lectura de un diario, revista o libro o la de ver televisión. Si te basas en las mismas hipótesis para diseñar la interfaz de tu valioso contenido que las que usarías si estuvieras dirigiendo un medio impreso o televisivo solo estarás malgastando un montón de dinero y tiempo.

Detente ahora.

A continuación mis recomendaciones básicas para el diseño web, escritas a pedido de Wix.com para sus nuevos usuarios sin experiencia pero igual de buenas para cualquier otro novicio de la web fuera de allí.

 




Diseño Básico de Sitios

Dejame darte algunos consejos poco ortodoxos. Hay muchos libros sobre diseño web, sites, tutoriales e incluso videos sobre este tema, por lo que pienso que no podría agregar algo importante a lo mucho que ya está publicado.

Pero, si me dejas, pienso que puedo darte algunas sugerencias básicas, como para quien se inicia, que no solo complementen lo que ya sabes sino que te harán ver el proceso de diseño para la web desde una perspectiva completamente distinta.




1) Estrategia Para el Diseño de Sitios Web

Se Simple - Enfócate

web-site-design-focus_id16930291_size295.jpg

Para diseñar tu sitio piensa primero sobre qué contenido estás por incluir en el mismo.

Sí, cuando se trata de diseño web las cosas deberían estar guiadas por la estructura de tu contenido. Esto es, tu sito debería ser diseñado alrededor del tipo de contenido, y la experiencia que esperas que tus usuarios tengan en tu sitio..

Cuando un lector llega a tu sitio, lo hace porque ha buscado algo en Google y encontró tu sitio, o porque alguien le dijo que hay algo interesante para ver o hacer en tu sitio. También puede haber encontrado tu link en otro sitio o medio social donde alguien recomendó visitar tu sitio.

En cualquiera de estos casos quien llegue a tu sitio trae algunas expectativas sobre lo que va a encontrar. Dependiendo de lo que resulte fácil de encontrar de tu sitio para los principales motores de búsqueda o que tipo de links de tu sitio sean recomendados por otra gente, la gente llegará a tu sitio esperando encontrar algo interesante y valioso en ese tema.

Tu primera meta cuando comiences a diseñar tu website debería ser, entonces, que puedas realmente presentar eso que buscan.

¿Cómo?

Mejorando el foco de las áreas de contenido clave de tus páginas, de manera que le den al lector una experiencia valiosa que vaya a recordar.

Por lo tanto no coloques un montón de elementos diferentes en la página con el objetivo de que, de esa manera, uno o dos de ellos coincidan con el interés de tu lector. Enfócate en una cosa y pon todo lo que tengas y sea útil para complementarla cerca de ella. Todo lo demás mantenlo separado, para que no interfiera.




2) Estilo de Diseño - No Busques Agradar - Se Analítico

web-site-design-analytical_id587421_size335.jpg

Otra regla clave esencial para diseñar un sitio que se vea y sienta profesional es evitar ir detrás de una idea "bonita" ¿Qué quiero decir? Todos tienen su propia idea de lo que luce bien, pero salvo que seas un diseñador profesional mi consejo es que te esfuerces en no perseguir ese sentimiento. Se trata, sencillamente, de un objetivo equivocado. Mira, todos tienen un concepto distinto de belleza en su cabeza y nuevamente, salvo que hayas pasado tiempo aprendiendo cuales son los principales elementos estratégicos para hacer que las cosas luzcan bonitas, estarías por hacer un sitio que te guste solo a tí.

Entonces lo que deberías buscar no es "lucir bonito" sino tratar de resultar

a) enfocado y ser

b) legible.

Estos deberían ser tus principales objetivos.

Mira, si puedes explicar claramente de lo que se trata tu sitio ya estás un paso delante de un montón de otra gente. Entra en algunos sitios que conozcas y mira si puedes decir inmediatamente de lo que ese sitio se trata. Encontrarás una algarabía de cosas, cada una reclamando tu atención a los gritos y tirando de ti en distintas direcciones. ¿Qué tiene eso de bueno?

Simplifica, persigue la esencia, da a tus lectores unas pocas cosas pero que sean buenas y valiosas. Ellos lo apreciarán mucho más que si encontraran un sitio con cientos de diferentes cosas en él. Será más elegante, más valioso, con solo adoptar esta simple estrategia.

El enfocarte es también la habilidad de ser "visto" por los más importantes motores de búsqueda como un sitio que cubre un tópico muy específico, haciéndolo más relevante entre los resultados de las búsquedas para la gente que anda necesitando esa información exacta. Para lograr esto necesitas dar a entender claramente y por escrito ese enfoque de tu contenido y de presentarlo de forma consistente y sistemática, escribiendo y publicando contenido valioso de manera regular.

La legibilidad para un sitio web es como el alcance de su emisión para una estación de radio. Si la señal es baja, interrumpida, a veces muy débil o interferida por la radio de al lado, abandonaré rápidamente esa estación, aun si su contenido es lo que quiero escuchar. Es lo mismo para la web. Si un sitio es muy lento para cargar o, peor aun, muy difícil de leer y navegar, también me iría a otro que ofrezca claridad, un diseño bien organizado, títulos y texto en letra grande y clara, imágenes relevantes y un esquema de navegación intuitivo. ¿No harías lo mismo?




3) Tipos de Página Web

web-site-design-page-types_id6620011_size355.jpg

Para desarrollar un sitio web básico, tienes que diseñar, esencialmente, dos tipos de páginas: la inicial y la interna. Si, puedes querer tener otras páginas con diseños más completos para secciones especiales, pero mi sugerencia es que inicialmente te enfoques en estos dos tipos básicos. Haciéndolo así simplificarás enormemente tu tarea y te enfocarás en hacerlas tan efectivas como sea posible.

Algunas sugerencias básicas:

Home page - esta es tu puerta de entrada, tu vestimenta, tu tarjeta comercial, placa identificatoria, currículum y portfolio, todo en uno. Lo que está escrito eres tu, o la empresa que representas. No debe lucir como un folleto electrónico. Debe ser precisa, directa, informativa, y tener elementos de información que sean relevantes y se complementen entre si. No se necesitan gráficos elegantes, fondos coloreados, o acrobacias visuales para hacer de esta una página efectiva. El foco debe estar puesto en comunicar claramente aquello de lo que se trata el sitio y en mostrar información valiosa que sirva como apoyo.

Página Individual - esta es la típica página "interior" de tu sitio o blog. La verdad es que, hoy en día, cada página de un sitio es un poco como la página inicial, ya que muchos visitantes que llegarán a tu sitio lo harán directamente a una de tus página individuales y se irán de allí sin siquiera haber visto tu página inicial. Sabiendo esto deberías organizar el contenido de tus páginas individuales para dirigirlos a secciones complementarias de contenido relevante, mientras que le das al lector toda la información básica de importancia de tu empresa y los componentes de navegación que le das en la página inicial (cabezal, links para la navegación básica, etc.). Entonces, el dato clave en este punto es que debes tener un cabezal funcional e informativo (ver más abajo), darle suficiente espacio a tu contenido principal para hacerlo muy legible, y reforzar el área al pie para dar acceso a otras informaciones relevantes y complementarias a la que fue presentada en esa página específica.

En cada página, ¿cuáles son los elementos clave por los que debes preocuparte?




4) Componentes de la Página Web

web-site-design-page-components_id15280641_size350.jpg

a) Cabezal
El cabezal es la parte superior de tu página web. Tu distintivo, tu identificación comercial, y el enfoque que tendrá tu contenido deberían estar claramente definidos aquí. Evita hacer esta banda muy alta o muy decorativa. Mantente dentro de los 100 pixeles verticales, si te es posible. Ten en mente tu meta principal: hacer que tu lector sepa en el más corto tiempo posible de qué es de lo que trata tu sitio y porqué debería seguir leyendo. - hazlo claro - informa.



b) Contenido
Cuando debas decidir cuantas columnas de texto debes incluir en tu layout, limítate a dos o tres columnas como máximo. Usa la más ancha para tu contenido principal y las otras para publicidad o para sugerencias de contenido adicional. Ten en mente que tu columna principal debe abarcar no más de 10 a 12 palabras. Puedes lograr esto ajustando conjuntamente el ancho de columna y el cuerpo de la letra. Una última cosa: el texto en una página web SIEMPRE debe estar alineado a la izquierda. Usar texto justificado en una página web es como poner al lado un cartel en mayúsculas y negrita que diga: "Los que hacen este sitio NO SABEN NADA sobre comunicación en la web". No entraré en detalles sobre el porqué de esto, pero puedes entrar en los más importantes y populares sitios y blogs y ver por ti mismo qué es lo que ellos hicieron en este aspecto.



c) Navegación
Para navegar un sitio es que se han creado los links y otros tipos de elementos visuales que permiten al lector acceder a otras secciones / páginas relevantes de tu sitio desde cualquier otra página en la que se encuentre. Lo importante aquí no es tanto donde ubiques esos links sino que organices el sitio en secciones razonables, con nombres claros y consistentes. Aunque parece simple esta es una tarea en la que muchos novicios de la web fallan. Comienza identificando las páginas con información fundamental a partir de la inicial, como la "Acerca de" (recomendado), la de "Contactos", así como un juego de 10-12 categorías de contenido (máximo) en las que puedas agrupar tus artículos. Asegúrate de que los nombres de esas categorías estén coordinados de forma consistente y que los títulos elegidos sean adecuados y manifiestamente descriptivos del tema seleccionado.



d) Publicidad y Otros Elementos de Contenido
Pon tus espacios de publicidad en unos pocos lugares clave de tus páginas. Las ubicaciones clave a considerar son bajo el cabezal (ver Boing Boing), debajo del título principal, y en la columna lateral. Puedes mezclar y combinar cualquiera de estos tres enfoques mientras tengas en mente lo siguiente: a la gente como tu y yo NO NOS GUSTA la publicidad; y con la publicidad estás desviando la atención al colocar mensajes que aparentemente no tienen nada que ver con el contenido y tópico de tu página. Esta es la razón por la que los avisos de texto como los AdSense de Google, que están altamente relacionados con el contenido presente en la página web, funcionan tan bien. La gente está buscando información específica y si tu le brindas la misma en una forma que no los distraiga o resulte irrelevante, entonces ellos realmente QUERRAN verla. Por lo tanto organiza la publicidad como si fuera una valiosa y muy relevante categoría más de información. Coloca el espacio de anuncios en forma estratégica, demarca claramente las áreas publicitarias como conteniendo información comercial de productos relevantes para tu lector, y evita los diseños muy elaborados o anuncios coloreados que compitan con los demás por llamar la atención.



e) Pie
Recientemente el pie ha pasado a ser una especie de mecanismo estratégico de navegación e información para muchos sitios exitosos. En vez de relegar allí solo la información legal y el copyright o el logo de la licencia de Creative Commons, puedes comenzar a planear los pies de tu sitio web como un puente que lleve a tus lectores desde un artículo hacia otros contenidos relevantes y relacionados en otro punto de tu sitio. Puedes ver en ProBlogger un muy buen ejemplo de tal uso.




5) Colores

web-site-design-colors_id7510151_size290.gif

Mi consejo personal es: Olvida por ahora los colores. Usa imágenes cuando las necesites pero mantén para tu fondo el blanco sólido y tu texto en negro. Eso te dará máxima legibilidad y te permitirá desarrollar una gran sensibilidad en los detalles mientras estés ocupado con el diseño de la información.

Si no puedes evitar el uso del color, se muy cuidadoso con los que uses. Usar color en los fondos de tus páginas indudablemente disminuirá la legibilidad de tu texto sin importar el color que uses. Aparte del uso de texto en blanco sobre fondo negro, cualquier otra opción de color requiere cierto conocimiento de la teoría del color y de los principios de combinación de colores. Si no estás familiarizado con ello, mira en:

Como Seleccionar Combinaciones de Colores Coincidentes - Mini-Guía

ILU - Color Calculator




6) Tipografía

web-site-design-fonts_id585350_size310.jpg

¿Qué pasa con las fuentes?

Ten dos objetivos en mente:

a) compatibilidad de la tipografía

b) legibilidad de la tipografía.

Esas son las dos únicas cosas de las que debes preocuparte por ahora cuando se trata de fuentes. ¿Qué significan?

Sobre compatibilidad lo que debes asegurarte es que la fuente que elijas usar sea visible también en las computadoras de otra gente y en los buscadores, abarcando una variedad de tipos de computadoras y sistemas operativos. Algunas fuentes y la forma de mostrarlas tal vez estén disponibles en tu computadora, pero luego, cuando los lectores vayan a tu sitio, pueden no ver las mismas fuentes que has elegido o pueden verlas con otro aspecto. Haz una prueba y podrás comprobarlo.

Sobre legibilidad necesitas elegir una fuente que haga que tu texto sea legible, no que sea elaborado o único. Le darás esas cualidades a tu contenido por la manera en que lo formatees y presentes. Por lo tanto elige una fuente que no sea muy chica y controla tu impulso de usar algo demasiado decorativo o extravagante.

Fíjate también lo que han hecho los blogs y sitios importantes cuando se trata de usa fuentes y otros componentes del diseño: A Small Design Study Of Big Blogs




7) Imágenes

basic-web-site-design-images_id5677041_size245.jpg

Lo de las imágenes es un tema tramposo. Llena tu sitio con imágenes sin saber como elegirlas y ubicarlas y estarás haciendo más daño que si no las usaras en absoluto. Algunos consejos básicos: se consistente Selecciona imágenes que reflejen un estilo, enmarcado y tipo de color uniformes. No debes estar saltando entre estilos y tamaños completamente distintos sino que debes hacer el esfuerzo de crear una continuidad visual mediante la selección, ajuste de tamaño y colocación de las imágenes en una forma predecible y consistente.

Si usas imágenes de otra gente siempre dale crédito al autor original y coloca links hace su sitio. Esto te evitará muchos posibles problemas.

¿Dónde conseguir buenas imágenes? Flickr, Google Images (atención con los copyrights), StockXchange así como unos pocos cientos de otros lugares son destinos recomendados, pero, seguramente hay muchos mas.




8) Plantillas Web

web-design-templates-300.gif

Lo anterior solo es una guía básica para tu primer diseño de un sitio web. Como hacer para implementar esos principios es tu siguiente obstáculo. Mi firme recomendación personal es apartarte del código HTML. Salvo que sea tu profesión no diseñes tu sitio codificándolo tu mismo con herramientas tales como Dreamweaver, FrontPage o cualquier otro editor que secretamente hayas planeado usar. Esa es la manera antigua de hacer sitios. Hay demasiado know-how que aprender para que tu puedas hacer un buen trabajo si lo haces a mano en esta forma.

La nueva manera es usar web template o sea, plantillas prediseñadas que puedes ajustar para adaptarlos a tus necesidades. Los templates de páginas web no son excesivamente caros y hay muchos lugares para elegir. Mira las especificaciones que indican que el código es "válido" y que cumple con las especificaciones XHTML-W3C, eso indica que el código detrás de tu template elegido está sólidamente construido y garantizará que tu sitio se verá consistente en diferentes buscadores, tamaños de pantalla y sistemas operativos.

Así como para la vestimenta personal, en que no hay necesidad de ir al sastre o la modista habiendo toneladas de buenos diseños ya disponibles que tu puedes ajustar y acomodar a tus necesidades. Algunos de ustedes pueden necesitar alguna asistencia técnica de alguien que sepa como usar y editar esos templates, pero fuera de eso es un camino mucho mejor y más confiable que cualquier otro si estás por comenzar a diseñar tu primer sitio.

Habrá más sobre este tema. Mantente alerta.

 

Originalmente escrito por y publicado por primera vez en MasterNewMedia.

 

Robin Good -
Referencia: Master New Media [ Seguir leyendo ]
Si te gustó la nota puedes recibir actualizaciones suscribiéndote via RSS o via email.

O compartirla:
 
 
 
 
Comentar    
blog comments powered by Disqus
 


 

 

 

 

Creative Commons License
This work is licensed under a Creative Commons License.

 

14265


Curated by

Publisher MasterNewMedia.org - New media explorer - Communication designer
Web Analytics