Cuando empezamos, muchas veces nos preguntamos qué pasos deberíamos seguir en el diseño web. Incluso a veces no se sabe qué es lo primero que se debe aprender, si HTML5 y CSS3 o Photoshop, cuando sí se puede aprender ambos a la vez. Este post es una guía práctica que muestra los pasos en el diseño de un sitio web. Esta es la guía de referencia ideal, ya que de alguna manera, porque a menudo en la práctica se omite ningún paso. Sin embargo, si vamos a crear sitios web profesionales, vale la pena tenerlos presentes y evaluar la importancia de cada uno de ellos antes de lanzarnos a la aventura.

Si quieres una buena cartera de clientes, así como el ahorro de dinero en aspirinas, define muy bien los objetivos a alcanzar o a los que quieras llegar con la página web.

No son los mismos objetivos los de una tienda online, co los de un bufete de abogados o una empresa de arquitectura. Tienes que definir claramente qué y para quién, y el cómo llega más tarde. ¿Quién es nuestro objetivo? ¿Dónde en el mundo es? ¿Qué necesitas? ¿Qué esperas encontrar? Sin una definición clara de los objetivos, el sitio va a fracasar, no debes involucrarte en proyectos perdidos.

Los objetivos deben estar definidos tanto a nivel global como a nivel de cada una de las página. Es decir, cada una de las páginas del sitio web debe tener un único objetivo. Ejemplos: Llámenos que empiezan las inscripciones, aviso de campaña de navidad, etc. crear confianza, es el objetivo final.

Primero tenemos que saber, ni es más o menos el contenido que queremos publicar, y luego adaptar el diseño a contenido. Y más aún hoy con el diseño web adaptable. Tampoco es necesario contar con los textos y las imágenes por adelantado, ni mucho menos, sólo para tener una idea clara de lo que debe publicar, con el fin de obtener una mejor idea de las necesidades específicas de los clientes.

¿Papel? Uff. Pero si bien es cierto que es más fácil pensar en el papel, la mayoría no lo usa. Existen herramientas que nos ayudan a trabajar como si fuera el papel directamente.

En el caso del diseño web adaptable tenemos en cuenta diversos puntos de vista, tanto para teléfonos inteligentes y pantallas de gran tamaño.

Estas herramientas lo que hacen básicamente es algo similar al dibujo manual, desde aquí se puede abrir un debate sobre si es necesario o no el paso anterior de dibujar el boceto a mano, pero en el fondo creo que lo que realmente es más fácil crear en función de pantalla.

Ahora necesitamos rejillas de respuesta que nos permiten adaptar el diseño a la pantalla. Esto toma más tiempo, pero va a garantizar una mejor experiencia de usuario. Es recomendable comenzar de abajo hacia arriba, a diferencia de lo que se hizo hasta ahora que se inicia desde el escritorio para crear la versión móvil.

Primero hay que crear un diseño que ofrezca una buena experiencia de usuario y seguir los requisitos de usabilidad y accesibilidad. Porque si su diseño es fantástico, pero nadie puede encontrar cosas, ya tenemos el problema montado.

Sí, sí, se crea el código HTML sin CSS, ya que estoy segura va a crear un código de web semántica y se puede separar el diseño del contenido. Créeme, lo agradecerás a largo plazo. Hoy en día ya se debe establecer con HTML5, ya que es mucho más versátil que la semántica y tradicional, además de la W3C ha dejado de apoyar otras versiones de HTML.

Una vez que hemos hecho la estructura del documento HTML, entonces empezamos a dar forma a la CSS. Mi consejo es que el diseño de los navegadores modernos y utilizar un CSS diferente a otros prehistóricos o que no siguen las normas como IE7. Por lo tanto, hay que aplicar todo lo que pueda con CSS3 en vez de imágenes recortadas de Photoshop, ya que esto crea un código mucho más limpio y eficiente y reduce el consumo de ancho de banda en los dispositivos móviles que navegan con 3G.

Este es el punto que Personalmente no me gusta. Porque tienes un diseño que se ve muy bien en Chrome y Firefox y al abrirlo en IE se ve un desastres. O probarlo en el iPad vertical y grande, pero giras y nuevo desastre. Ésta es la fase que requiere más paciencia, ya que implica la realización de la web se muestra correctamente en todos los navegadores, con la dificultad añadida de dispositivos móviles hace unos años no había necesidad de tener en cuenta.

En el momento de un debate de hasta qué punto es importante que el código es válido si la web está bien abierta. En mi opinión, hay que tratar de hacer código tan limpio también puede lo más lejos posible de validación. Y digo esto porque cuando se pone el Likebox Facebook como saliendo en este sitio web, verá sus paradas web validan, como Facebook va gratuita sobre temas de normalización. Es por eso que yo soy de la opinión de que sopesar los pros y los contras de la utilización de elementos que no validan, y en el caso de Likebox las ventajas superan claramente las desventajas, ya que muchos fans de Facebook que me saque de este elemento. A partir de aquí, yo creo que hay que esforzarse en el mejor de los mejores para crear un código que valida y corregir los errores básicos que son fáciles de solucionar, ya que si una página web tiene 10 errores no es un pase, pero si usted tiene 100 no más.

No he dicho antes, pero todo este trabajo se realizada a nivel local, ya que los usuarios y clientes potenciales de lo contrario habrá sido una mala impresión. Una vez comprobado que todo funciona como se espera, es el momento de cargar el servidor web. A veces tienes permisos que no están activos en el servidor. Por lo general subo nuevas páginas web sábado por la noche porque las personas están de fiesta y rara vez se dará cuenta si hubo algún error.