Como lograr diseños web de buen aspecto gráfico
El aspecto gráfico de un sitio juega un rol muy importante. Mucho se habla en la web de esta importancia y de cómo se deben construir técnicamente los sitios, sin embargo poco de como lograr aspectos gráficos profesionales o diseños “atrayentes”.
29/11/06 - Con la movida de los sitios basados en stándares muchos han decidido sacrificar el aspecto de sus sitios por diseños muy austeros y así tener un código validado. Si bien esto no es directamente negativo se debe recordar que en los sitios comerciales el aspecto cumple una función de “gancho” y logra que los visitantes lo recuerden por su imagen o aspecto.
Pero no caigamos en el error de hablar sobre los “porque” y hablemos de los “como” lograr buenos diseños.
1) Utiliza 100% de CSS y XHTML.
Una de las cosas más importantes a la hora de lograr buenos trabajos de diseño es utilizar CSS. Además de las bondades que este sistema de maquetación tiene (separación entre contenido y diseño, mayor rapidez de carga, mejor accesibilidad, etc) , este nos brinda un sinfín de posibilidades gráficas. Las tablas son realmente muy limitadas en este sentido. No es mero capricho el usar CSS en todos los diseños
La utilización de CSS permite un manejo avanzado de “fondos” y de un control al milímetro de cada objeto.
2) Mira y aprende.
Una buena forma de aprender es mirando, no estoy hablando de copiar o plagiar diseños. Pienso que no hay actitud más denigrante que esta. Me refiero a utilizar las
galerías showcase
(captura de pantallas de diseños) que están concebidas con la pura idea de "inspirar". Aquí un pequeño listados de las galerías más conocidas. Mira el código fuente y estudia como trabajan muchos diseñadores. No es necesario que copies nada, de esta forma te estarás imponiendo un estilo y forma de trabajo que te hará aprender muy rápidamente la mejor forma de realizar web profesionales.
2) Aprende a editar imágenes.
Con la utilización de CSS viene aparejada la necesidad de trabajar con imágenes. Estas deben ser livianas en peso, y en donde se necesite, debemos aprovechar los efectos de transparencias que nos permite el formato GIF o PNG. Esto nos abrirá un mundo de posibilidades que no teníamos con las tablas. El simple hecho de tener un control absoluto sobre los fondos, márgenes y espacios nos hace mucho más fáciles el aplicar buenos diseños.
3) Utiliza un programa Vector para Maquetar Bocetos.
Muchos diseñadores cometen el error de ponerse a diseñar improvisando el tema de la forma o aspecto que tendrá el sitio. Sin embargo existe un sistema que nos permite tener una visión más global de lo que estamos haciendo.
Si utilizamos un programa para manejar vectores (Adobe Illustrator, Corel Draw, etc) , podremos simular como quedará nuestro sitio tanto en formas como en combinación de colores y fuentes. Podremos mover, ampliar y manejar espacios con total libertad.
Para lograr un trabajo óptimo podremos ir haciendo capturas de pantalla de determinados desde nuestro navegador con el fin de tener dimensiones a escalas reales.
4) Aprende los principales Conceptos de Diseño Gráfico
No solo de CSS y HTML se hacen los sitios web, si bien reviste una gran importancia el código de nuestra web, para lograr buenos diseños es necesario conocer los principales fundamentos de diseño; armonía tonal, combinación de colores, uso acertado de tipografías, contrastes, manejo de espacios, etc.
Sin embargo el lograr buenos trabajos se logrará con el tiempo y cuando tengas unos cuantos sitios diseñados.
En mi sitio web, webnova.com.ar, puedes encontrar bastante información en la sección de diseño web. Os indico algunos enlaces que serán de ayuda:
Teoría Visual sobre la afectación de las formas
Como Armonizar los colores
Uso de Imágenes en diseño Gráfico
Teoría Avanzada sobre el uso de fuentes
Blog Sobre tipografías y sus usos
Todas las Teorías del diseño Gráfico. Documento muy entendible. (PPT)
Estética, usabilidad y emoción en el diseño
Las Modas del Diseño Web
Como elegir el color de las tipografías
Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 2 categorias relacionadas
+ 1 comentario (Añadir)
+ 4 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo |
|
|
Manuales relacionados con este artículo
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en
Diseño web+ Entrar en
Marketing
Comentarios de los visitantes
|
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
|
| Se muestra un comentario revisado |
Comentario de Pakos
06/12/06
Saludo, pues en mi mas umilde opinion no estoy de acuerto con lo expuesto aqui, y no es que este en contra de las css y de xhmlt, nunca se esplica el porque usar 100% XHTML, hasta donde se XHTML no es mas que la extencion de HTML para acoplar al XML que no es mas que un formato estadar de intercambio de datos, en lo visual el XHMLT y HTML no tiene gran diferencia, en segunda el CSS se pueden lograr paginas muy preciosas combinando divs's y lo que sea pero estas pagina son de un mantenimiento mas dificil si lo que haces son paginas estaticas no hay problema los problemas vienen cuando tu pagina tiene que ser dinamica o los diseños crecen, entoces las coordenadas top y left con cualquier variante ya no se ven como queriamos y ademas que explorer de MS como siempre marca diferencia nos da muchos CSS que no son mas que compatibles para IE, descartando todo el mundo de exploradores, en si creo que lo importante de toda web es el contenido mas que el diseño entoces devemos cuidar mucho mas que nuestras paginas sean estandar que se vean lo mas parecedidas en un IE, Firefox, Operda, Safari y que mi pagina pueda ser vista correctamente desde un linux, OS Mac, o un windows, y a diferencia de lo que dice el articulo teniendo una muy buena imaginacion y sabiendo usar tablas puedes lograr los efectos de diseños que vez no es mas que saber combinar nuestras tablas con imagnes para crear una web completamente estandar y bonita
| Comentarios sin revisar |
|
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
|
Se han encontrado 4 comentarios sin revisar
Ir arriba