Tecnología y Coaching para Emprendedores

Los 10 Pasos a Seguir en el Diseño de una Web

wireframe-diseno-web

Cuando empezamos, muchas veces nos preguntamos cuáles son los pasos que deberíamos seguir en el diseño web. Incluso a veces no se sabe qué es lo primero que se debería aprender, si HTML5 y CSS o Photoshop, cuando en sí se pueden aprender ambas a la vez. Este post es una guía práctica que muestra los pasos a seguir en el diseño de una web. Este es el ideal, la guía de referencia, por decirlo de alguna manera, pues muchas veces en la práctica uno se salta alguno de los pasos. Sin embargo, si pretendemos crear sitios web profesionales, vale la pena tenerlos presentes y valorar la importancia de cada uno de ellos antes de lanzarnos a la aventura.

En el curso de diseño web desde cero seguimos estos pasos a la hora de plantear un diseño. Te dejo aquí el vídeo de una de las primeras lecciones con los 10 pasos del diseño web, por si te sirve de orientación:

Los 10 pasos a seguir en el diseño web


Paso 1: Definir Objetivos

No hace mucho me encontré a un amigo que me dijo que tenía a una clienta a la que le iría muy bien tener una web. Cuando le pregunté a mi amigo cuáles eran los objetivos de la web, me contestó sin pestañear ni un poco que vender más, porque el futuro estaba en Internet y la floristería de esta amiga estaba perdiendo clientes y que si eso me pasaba unas fotos y yo hacía una web. Historias como esta, por extrañas que parezcan, están a la orden del día en los países latinos donde todavía se cree que con cuatro fotos y tres pinceladas tenemos una web que funciona. Mi consejo: si quieres un buen portafolios, así como ahorrarte dinero en aspirinas, define muy bien los objetivos con el cliente, o abstente de tomar un proyecto en el que no hay objetivos claros.

No son los mismos los objetivos de una tienda online, que el de un bufete de abogados o un estudio de arquitectos. Hay que definir muy claro el qué y el para quién, el cómo ya vendrá después. ¿Quién es nuestro target? ¿En qué lugares del mundo se encuentra? ¿Qué necesita? ¿Qué espera encontrar? Sin una definición clara de objetivos, el sitio web será un fracaso, hazme caso y no te involucres en proyectos perdidos. Y si lo haces, ten ética y déjale claro al cliente que esa no es la mejor opción ni de lejos y no incluyas ese trabajo en tu portafolios.

Los objetivos se han de definir tanto a nivel global como a nivel de página. Esto es, cada una de las páginas del sitio web ha de tener un único objetivo. Ejemplos: que nos llamen, que se suscriban a la newsletter, generar confianza, etc.


Paso 2: Definir contenidos

Con el paso del tiempo me he dado cuenta que es un error crear primero el diseño y luego adaptar los contenidos al mismo. El proceso debe ser el inverso, primero debemos saber, ni sea a grosso modo, los contenidos que queremos publicar, para así después adaptar el diseño a los contenidos. Y más todavía hoy en día con el diseño web responsive. Tampoco es necesario tener los textos e imágenes de antemano, ni mucho menos, simplemente tener una idea clara de lo que hay que publicar, para así poder hacernos una mejor idea de las necesidades concretas del cliente.


Paso 3: Dibuja un sketch

¿Papel? Uff, a algunos les da alergia. Pero si que es verdad que es más fácil pensar sobre papel que directamente en herramientas de wireframing y que en reuniones con el cliente puede ser muy útil utilizar un bloc de notas. En el caso del diseño web responsive recuerda que habrás de tener en cuenta varias vistas, tanto para smartphones como para grandes pantallas.


Paso 4: Utiliza una herramienta de Wireframing

En el mercado hay un montón de herramientas de wireframing, aquí tienes un post con una recopilación de wireframes para que te ayuden en tu trabajo de diseñador web. Estas herramientas lo que hacen básicamente es algo parecido al sketch manual, a partir de aquí se podría abrir una discusión sobre si el paso anterior de dibujar el sketch a mano es necesario o no, pero en el fondo creo que verdaderamente es más fácil crear sobre papel que sobre pantalla, aunque quizás eso sea porque soy de la generación de los dinosaurios:-)


Paso 5: Haz el diseño en Photoshop

Con el diseño web responsive se terminaron los días en que sólo hacíamos un diseño. Ahora necesitamos grids responsive que nos permitan adaptar el diseño a la pantalla. Esto requiere más tiempo, pero va a garantizar una mejor experiencia de usuario. Es recomendable empezar de menor a mayor, a diferencia de lo que se venía haciendo hasta ahora en que se partía de la versión desktop para crear la móvil.

Asegúrate de crear un diseño que aporte una buena experiencia de usuario y que siga los requisitos de la usabilidad y accesibilidad. Porque si tu diseño es fantástico pero no hay quien encuentre las cosas, ten por seguro que la web será un fracaso. No profundizo más en estos temas porque se pueden escribir libros enteros, pero tenlo presente cuando hagas la maquetación en Photoshop.


Paso 6: Crea el HTML

Sí, sí, crea el HTML sin el CSS, porque así seguro que crearás un código web semántico y podrás separar el diseño del contenido. Créeme, a largo plazo lo agradecerás. Hoy en día deberías ya maquetar con HTML5, porque es mucho más semántico y versátil que el tradicional, además que la W3C ha dejado de dar soporte a otras versiones de HTML.


Paso 7: Crea el CSS

Una vez tenemos hecha la estructura del documento con HTML, entonces empezamos a darle forma con el CSS. Mi consejo es que diseñes para navegadores modernos y que utilices un CSS diferente para otros prehistóricos o que no siguen los estándares como IE7. Así, mira de implementar todo lo que puedas con CSS3 en lugar de imágenes recortadas del Photoshop, pues esto creará un código mucho más limpio y eficiente y reducirá el consumo de ancho de banda en dispositivos móviles que navegan con 3G.


Paso 8: Compatibilidad entre navegadores

Este es el punto que a mí personalmente menos me gusta. Tienes un diseño que se ve fantástico en Chrome y Firefox y abres IE y se sirve el desastre. O lo pruebas en el iPad vertical y genial, pero lo giras y de nuevo el desastre. Esta es la fase que requiere de más paciencia, pues implica hacer que la web se vea correctamente en todos los navegadores, con la dificultad añadida de los dispositivos móviles que hace unos años no hacía falta tener en cuenta.


Paso 9: Comprueba que el código valide

En su momento se abrió un debate de hasta que punto es importante que el código valide si la web se ve bien. En mi opinión, hay que procurar hacer un código lo más limpio posible que también en la medida de lo posible valide. Y digo esto porque cuando pongas la likebox de Facebook como la que sale en esta web, verás que tu web deja de validar, pues Facebook va por libre en temas de estándares. Por eso yo soy de la opinión de sopesar los pros y contras de utilizar elementos que no validan, y en el caso de la likebox los pros son claramente superiores a los contras, pues muchos seguidores del Facebook me llegan gracias a este elemento. A partir de aquí, pienso que nos hemos de esforzar en la medida de los posible por crear un código que valide y arreglar los errores básicos que son fáciles de solucionar, pues si una página web tiene 10 errores hay un pase, pero si tiene 100 ya no.


Paso 10: Sube la web al servidor

No lo he dicho antes, pero espero que todo este trabajo lo hayas hecho en local, porque de otro modo los potenciales usuarios y clientes se habrán llevado una mala impresión. Una vez has comprobado que todo funciona como es esperado, ha llegado el momento de subir la web al servidor. No te asustes si algo no funciona, a veces hay permisos que no están activados en el servidor. Yo acostumbro a subir las nuevas páginas web la noche del sábado, porque la gente está de fiesta y raramente se dará cuenta de si ha habido algún error.


Conclusión

Hemos visto los 10 pasos a seguir en el diseño de un sitio web. Podríamos haber profundizado más, pero la idea era dar una visión general. A partir de aquí me gustaría abrir el debate de cuáles son los pasos que sigues tú en el diseño de una nueva web y de si estás de acuerdo o no con lo aquí propuesto.

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Te animo a compartir el artículo y a dejar un comentario.

Un abrazo!


Comentarios

  • Manuel Lago

    Últimamente vengo dándole vueltas a la cabeza sobre el tema que expones en este post. Creo que es esencial encontrar un buen sistema de trabajo con el cliente que te asegure varias cosas: Recabar los objetivos, como tu dices.
    Poder presentar al cliente algún borrador o prototipo sin perder demasiado tiempo antes de que apruebe el diseño y presupuesto.
    Y por último que puedas utilizar el mismo sistema con clientes online y offline.
    Yo me decanto más por la idea de saltarse el diseño en photoshop a no ser que sea un proyecto con mucho presupuesto, que no suele ser mi caso.
    Es un tema muy complicado porque cada cliente es un mundo y es difícil acertar.

    • eSandra

      Hola Manuel,

      muy buena aportación. Efectivamente, yo en muchos casos me salto el Photoshop también, pero sí que es verdad que para grandes proyectos o determinados clientes es un paso imprescindible. En mi opinión, todo depende del presupuesto, y es algo que vale la pena aprender a hacer, aunque después no lo apliquemos a muchos proyectos :-)

      un abrazo!
      Sandra

  • Miguel Ramírez

    Que tal Sandra, llegué a tu página mientras buscaba un manual de Sublime text 2 y me he seguido navegando los demás apartados. Me gustó mucho el diseño y contenido de tu Web y me ha detenido una duda… Me pregunto si me convendrá hacer uno de los cursos online de diseño Web, y en su caso cual me recomendarías si el “Desde cero” o el “Responsive”. lo anterior dado que yo soy programador en PHP y otros lenguajes orientados a Web, básicamente lo que hago son aplicaciones backend y frontend y me gustaría mejorar el aspecto visual. Vaya, la duda surge porque no me dedico (de momento) a hacer webs comerciales, y no se cual sea el perfil al que van dirigidos los cursos, cabe mencionar que nunca me he considerado creativo en cuestiones de diseño (Photoshop por ejemplo).

    Espero haberme dado a entender, jeje.

    Saludos desde México. :-)

    • eSandra

      Hola Miguel,

      muchas gracias por tu mensaje, te mando ahora un correo electrónico y lo vemos, te parece?

      un abrazo!
      Sandra

  • Lois

    El paso 8 me tiene durado dias gracias a IE. Como programador, el diseño normalmente me viene dado, asique esos pasos los salto, pero cuando me toca a mi hacer el diseño, lo hago directamente en HTML5 y CSS3, voy más rápido que con photoshop.

    Un saludo :)

    • eSandra

      Hola Lois,

      creo que IE nos trae a todos locos, jajaja..

      un abrazo!
      Sandra

  • gladys flores

    Me parece interesante y muy fluida la forma como explicas estos aspectos relayivos de la web. Especialmente porque doy una persona que desconoce del tema pero que desde hace meses me tiene la espinita en lla cabeza, u he estadi buscando una preparacion presencial profesional pero aun nada. En mi caso cual de los dos me recomiendas que haga primero?

    • eSandra

      Hola, te refieres a los cursos que tengo? Depende del nivel de conocimientos que tengas, mejor manda un correo a info@esandra.com y lo vemos. Un abrazo!

  • Daniel Tortosa

    Hola Sandra, buscando info sobre cómo empezar a desarrollar una web, he vuelto a dar con tu página, lo cual me es muy grato por otra parte. Quiero mejorar y estos pasos que has descrito se me antojan una ayuda imprescindible. El diseño en photoshop o gimp debo esforzarme mucho… no es lo mío, pero pondré todo de mi parte. El artículo, me parece, está enfocado a páginas estáticas, lo digo por el hecho de que no se profundiza más que mencionar un html y un css, cosa que por otra parte agradezco. No obstante, al principio del post indicas que cada cual podemos adaptar los pasos a nuestras necesidades y, por tanto a páginas dinámicas codificadas por ejemplo con php. Es un lujo poder contar con estos recursos que personas como tú ponéis a nuestra disposición, y además poder ampliar la información apuntándonos a cursos más o menos avanzados como los de tu web, totalmente asesorados. Desconozco los precios de los mismos, pero pese a estar desempleado, no dudaré en apuntarme a alguno si como seguro comprendes google no me da respuestas primero (mis posibilidades económicas son limitadas). Vídeos en castellano, con lecciones gratis, y asesoramiento… muy tentador. Muchas gracias por tu trabajo, una vez más, te animo a seguir a tope con ese positivismo que desprendes. Un saludo, Daniel Tortosa.

    • eSandra

      Hola Daniel!

      muchas gracias por tus palabras. Este artículo lo escribí hace un par de años y estaba enfocado a personas que justo se inician en el diseño web. En él tampoco hablo del diseño web responsive, algo fundamental hoy en día, pero es la base de mi curso básico de diseño web, pues es lo ideal para personas que justo empiezan en este mundo. Aún así, no descarto escribir un ebook en profundidad sobre todos los aspectos a tener en cuenta a la hora de crear una web :-)

      si tienes dificultades económicas, en este mismo blog tienes muchos artículos en profundidad gratis. He de reorganizar las categorías y etiquetas de los posts para que sean más fáciles de encontrar, pero sino puedes de momento usar el buscador. La ventaja de comprar un curso o un libro es que tienes todo el contenido en un sitio bien organizado, pero si no tienes dinero y sí tiempo, con paciencia puedes ir encontrando toda la información que necesitas, es así como yo me autoenseñé alemán y diseño web sin ir a clases antes, jejeje

      un abrazo!
      Sandra

  • Jhon Carlos Colorado

    Excelente. Gracias nuevamente

    • eSandra

      Un placer, me alegro te haya gustado.