ASPECTO VISUAL DE TU WEB



Ahora adentrémonos en los tips que darán el mejor aspecto visual a tu website.

Para que tus visitantes se enamoren de tu sitio, no necesitarás ser ostentoso, recuerda, la sencillez y el buen gusto te darán presencia y calidad.

Si no me crees, te recomiendo que visites los siguientes sitios y observes el aspecto visual de sus páginas de búsqueda:

Google, Ask, AltaVista, eBay, e-gold y MercadoLibre.

Estas páginas pertenecen a algunas de las empresas más exitosas de Internet, corporaciones con ganancias en millones o billones de dólares al año.

Como podrás ver ninguna de ellas tiene sofisticadas animaciones, gráficos exagerados o sonidos impresionantes. Su sencillo diseño permite que estos sitios carguen rápido y sean rápidos de navegar.

Existen páginas carísimas elaboradas con flash. Son páginas atractivas y espectaculares, pero no son útiles, son muy lentas, los visitantes deben esperar a que las animaciones carguen para poderlas apreciar en su totalidad. Lo mismo ocurre con los audios y los efectos especiales.

Cuando se trata de entrar a un website, los usuarios optan por lo practico e inmediato. Su prioridad es encontrar buena información y el aspecto visual de las animaciones espectaculares pasa a segundo término.

Te recomiendo que sigas el ejemplo de los más grandes que han apostado a la sencillez. El aspecto visual de tu página debe ser equilibrado y profesional, sencillo, serio y con contenidos útiles. Para lograrlo te sugiero lo siguiente:

• Los internautas son tradicionales, están acostumbrados a que las páginas que visitan tengan una estructura estandarizada. Si cambias las reglas, sólo los confundirás.

• No cambies de lugar la barra de navegación o el menú, el visitante los buscará del lado izquierdo.

• No cambies el color azul que identifica los enlaces a otras páginas. El usuario reconoce que en esa palabra o frase hay un enlace y podrá dar click. De lo contrario lo desviarás de tu propósito que es llevarlo a otra página.

• Puedes hacer una variante del aspecto visual con tres columnas: navegación lateral a la izquierda, otra columna a la derecha que conste de una cabecera con foto, una zona central donde va el texto y un pie de página con el nombre de la empresa y enlaces generales no relacionados con la temática de la página (“quienes somos”, “contáctenos”, etc.).

• No abuses de los colores. Si utilizas muchos colores en el texto el aspecto visual será poco profesional.

Lo más conveniente es utilizar texto negro, sobre fondo blanco. No uses fondos de color oscuro y letra blanca o clara, porque eso cansa mucho más la vista, además de transmitir una imagen poco profesional. ¡Acuérdate cómo lo hacen los grandes! el único color que destacan es el azul para los enlaces.

Si quieres resaltar alguna parte del texto, utiliza negritas o cursivas pero sin abusar, o perderán el efecto deseado.

• Con respecto a las fuentes o tipos de letra, te conviene utilizarlas sencillas y fáciles de leer. Si empleas un tipo de letra poco común, la mayoría de los usuarios no podrán visualizarla, porque no tendrán esa fuente instalada en sus computadoras y además su navegador tomará la letra por default en su sistema operativo: Times New Roman. Las fuentes para lograr un óptimo aspecto visual que te aconsejo utilizar son: Arial o Verdana y en un tamaño de 12 o 14 puntos para facilitar su lectura.

• Aunque las imágenes siempre serán atractivas no abuses de ellas porque volverán lento tu sitio. Además de la imagen que conforma tú logo o cabecera, puedes introducir una o dos más dentro del texto para hacer el aspecto vidual de tu sitio más “asimilable” a la vista.

Para cargar imágenes utiliza los formatos “jpg” o “gif”, porque pesan menos. Las imágenes pequeñas no deberán ocupar más de 20 KB y las grandes no más de 50 o 60 KB. Es importante que definas el tamaño de las imágenes en valores absolutos, de lo contrario se deformarán cuando la gente las vea en pantallas con una resolución distinta a la tuya.

• No utilices fotos con baja resolución, se verán caseras, ni fotos de otros websites porque pueden estar bajo derechos de autor y te enfrentarás a problemas legales. Existen webs especializadas que ofrecen imágenes de manera gratuita para poder usarlas pero te exigirán que coloques un enlace de su sitio y no es conveniente que enlaces páginas que no tengan relación con tu tema.

• Para optimizar las fotografías que colocarás en tu website para contar con un buen aspecto visual puedes utilizar Photoshop, es uno de los programas más populares para recortar, retocar, mejorar su calidad y tamaño.

Existe un programa gratuito, open source, similar a PhotoShop, es multifuncional, se llama Gimp y está disponible tanto en español como en inglés. Puedes descargar la versión en español en Gimp , incluye un manual de usuario. Una vez que lo instales, te aconsejo que experimentes un poco con la función del menú “filtros/decorador”.

Algunos consejos para que tu web se visualice de manera correcta:

La resolución determina la calidad de la imagen en pantalla y se mide en píxeles (puntos de información). Cuanto mayor sea la resolución de la pantalla, más píxeles están disponibles para presentar la imagen, estos puntos estarán más juntos y serán más pequeños es decir, agrega nítidez, pero hace la imágen más pequeña, lo cual afecta el aspecto visual.

Las configuraciones de resolución habituales para los diferentes tipos de pantalla son:

Pantallas de 14” a 15”: resolución 800x600.

Pantallas de 17”: resolución 1024x768.

Pantallas de 21”: 1024x768 o mayor.

La resolución en pantalla puede variar de un usuario a otro. Las personas que navegamos por Internet, usamos diferentes tarjetas gráficas y tipos de pantalla.

¿Qué consecuencias tendremos si tenemos una pantalla de 17” y diseñamos nuestra página web para la resolución de 1024x768 que la ocupe toda?

Sucederá que a un usuario con un monitor de 15” y resolución de 800x600 no le cabrá la página entera en su pantalla y se verá obligado a usar las barras de desplazamiento lateral para poder verla, situación que es incómoda y poco práctica. Y al que use un monitor de 21” y resolución mayor que 1024x768 le sobrará espacio por un lado de la pantalla.

Te recomiendo usar la resolución 800x600. Aunque hay usuarios que ya trabajan con resoluciones de 1024x768 o mayores. Incluso se habla de porcentajes superiores al 80%. Convendría que analices qué usuarios conformarán tu target. Es probable que haya una mayoría de usuarios con resoluciones menores, por lo que podría hacerse aconsejable trabajar en 800x600.

¿Cómo lograr diseñar una web en la resolución que hemos escogido?

La manera más habitual consiste en trabajar con tablas. Cuando abras una nueva página en blanco de tu editor web, utiliza el menú “insertar tabla” e introduce una tabla con una sola fila y una sola columna. En el cuadro de dialogo escoge como unidad de medida el píxel. Después dale el formato de anchura 1024 u 800, según lo que hayas decidido. La altura se adaptará según la longitud que vaya a tener tu web. A partir de ese momento, trabaja sólo dentro de esa tabla cuidando el aspecto visual.

Para definir las diferentes zonas de tu página, introduce una tabla más pequeña en el interior de la primera (esto se llama tabla “anidada”), con tantas columnas como subdivisiones tendrá tu web. Con esta técnica podrás rellenar las páginas, porque tendrás una especie de compartimentos cerrado para tus contenidos. Según los márgenes que quieras ir dejando podrás hacer las tablas interiores con unas dimensiones más pequeñas.

Si quieres que un elemento ocupe varias secciones, combina dos o más celdas para que se unan en una sola. Con este técnica podrás elegir si quieres que los bordes de las tablas se vean o sean invisibles, al igual que en Word.

Los editores WYSIWYG también tienen una opción que permite definir la anchura de la web o de una tabla en porcentaje. Es decir si escoges 50% ocupará la mitad del espacio disponible en tu pantalla y si tomas el 100% la llenará completamente de este modo se adapta a todas las resoluciones de pantalla.

Como definirás el ancho de cada tabla en píxeles conseguirás que se mantenga la relación de tamaño en cualquier resolución. Para que en las pantallas con resoluciones superiores a la que has elegido, tu página mejore su aspecto visual, puedes poner un color de fondo para que llene los huecos vacíos y elegir una alineación centrada, para que en ambos lados quede el mismo espacio.

¡Si no has entendido muy bien el contenido de este capítulo, recuerda que con lo nuevo tenemos que pasar por una curva de aprendizaje!

Estudia bien el tutorial de tu editor de páginas web y cuando domines el programa, vuelve a leer este capítulo. Entonces comprenderás mucho mejor su contenido.

Te recomendaré dos sitios web que considero muy útiles y que ofrecen información vasta y gratuita sobre diseño de páginas web. Incluyen tutoriales que te ayudarán a diseñar webs desde cero.
Desarrollo web
La webera

Son sitio con contenidos gratuitos y en los que puedes aprender muchas cosas útiles.

En el siguiente capítulo continuaremos con más conceptos y aplicaciones prácticas.

Ir a Artículos de Interés