10 pasos a seguir para crear un buen diseño web


En estos momentos donde la web se ha convertido no solo en un medio de información sino también de expresión para todos, el tener una página web eficiente se ha convertido en una necesidad. ¿Quieres que tu página sea efectiva? Entonces no te pierdas esta lista de 10 pasos:

1- Define tus objetivos: Lo más importante es visualizar los objetivos que quieres lograr al crear la página. Hay que definir el qué y para quién se hace la página. Iniciar por definir un target o público meta y lo que este espera encontrar en tu página es una buena manera de empezar.

2- Define el contenido: Lo más importante es saber el contenido que se colocará en la página, al menos el general o tener una idea de los temas que se trataran en tu página. Es un error tratar de de adecuar el diseño al contenido de la web. Los grandes expertos en el tema dicen que el proyecto debe hacerse a la inversa.

3- Dibuja un sketch de tu página: Puede que lo veas como algo ortodoxo el realizar diseños en papel pero, en vez de perder tiempo haciendo un diseño web y que después no te guste, prueba realizar varios sobre papel y quédate con el que mejor te convenga.

4- Utiliza herramientas de Wireframing: Tal vez sea la primera vez que escuchas esta palabra pero, en diseño web, wireframe se refiere a la representación esquemática de la web sin gráficos y a través de este puedes determinar el contenido y comportamiento de las páginas, además de para comprobar su usabilidad sin elementos distractores como colores, imágenes, etc. La ventaja de las herramientas de wireframing es que podrás llevar a la realidad sin demasiado esfuerzo una primera visión de tu web y ver cómo funcionaría.

5- Realiza el diseño en Photoshop: Considerando que actualmente es necesario que nuestra web tenga un diseño web responsive (Responsive Web Design o diseño web adaptativo al entorno del usuario) y, aunque esto requiera más tiempo, a la larga lograremos mejores resultados. Una buena herramienta para crear un diseño que tenga en cuenta la usabilidad y accesibilidad es Photoshop. Tómalo en cuenta.

6- Crea el HTML: Probablemente piensas que este paso no es necesario y que puedes hacerlo con el CSS, pero si lo haces de este modo podrás crear un código web semántico y podrás separar el diseño del contenido. Recomendamos programar como HTML5 por ser mucho más versátil que el tradicional.

7- Crea el CSS: Una vez hecho el HTML lo siguiente es darle forma con el CSS. Lo recomendable es hacer dos diseños, uno para navegadores modernos y otro para navegadores antiguos como IE7. Lo ideal es crear un código limpio y eficiente, sin imágenes recortadas del Photoshop para reducir el consumo de ancho de banda.

8- Verifica la compatibilidad entre navegadores: Esta fase es la que requiere más paciencia pues debes verificar que tu sitio web se vea correctamente en todos los navegadores y dispositivos móviles que puedas revisar. Que funcione en Chrome, Firefox y Opera es genial, pero si cuando abres IE el diseño se vuelve un desastre, regresa y revisalo. Lo ideal es que todo tu público pueda acceder a él correctamente y desde cualquier navegador o dispositivo.

9- Comprueba que el código valide: Puede que esto te parezca que no importa demasiado, o puede que si lo consideres importante. En cualquiera de los dos casos es fundamental tomar en cuenta de que esforzarnos en crear un código que valide en caso de que necesitemos corregir a futuro errores en nuestra web, sopesa los pros y los contras de usar elementos que no validan.

10- Sube tu web a un servidor: Si todo este trabajo lo has hecho en local (que es lo recomentable) una vez que te aseguras que todo funciona como es debido, puedes subir tu página a un servidor y, una vez allí, revisarla a voluntad y ajustar todos los permisos para asegurarte que no tenga error alguno.

¿Te han parecido útiles estos pasos? ¿Utilizas tú unos diferentes? Coméntanos al respecto.

Fuente: Creativa Sfera

Marian Barrios

Pichón de periodista. Redactor de Mundotech. Curiosa de la tecnología y los tutoriales de diseño.

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

'
Comparte