Pasos imprescindibles para la creación de una web
Por Carlos Adrián Alfonso Lapaz
A la hora de comenzar en la creación de un sitio web muchas veces no sabemos por dónde empezar y cuál es la manera correcta de hacer las cosas para obtener un buen resultado. Lo cierto es que muchas veces, el no aplicar un método estructurado nos puede llevar a perder mucho tiempo, dinero e incluso hasta abandonar el proyecto. Hoy en día, hay infinidad de sitios en internet que por muy poco dinero, y con frases persuasivas como: …“La página web que puedes crear tú mismo…”; animan a que tú seas el diseñador de tu página web. Pero lo cierto, es que al igual que para construir una casa no debemos comenzar por el tejado; el no seguir pautas y objetivos estructurados nos puede llevar al fracaso. Conozco casos personales, que a día de hoy pagan una cuota mensual bastante elevada a un sitio muy conocido y que no han sido capaces de concluir el proyecto por carecer de un método.
Este post es una guía práctica que muestra los pasos y reglas a seguir en el diseño de una web. Esta es la “guía de referencia para hacer una web” por así decirlo, pues muchos son los que sin tenerlos en cuenta, presumen de diseñadores.
Regla 1: Definir Objetivos
Con la crisis actual por la que atravesamos en España, muchos emprendedores, negocios e incluso algunas empresas ven en internet la luz salvadora que los guiará hacia el éxito que les garantice la supervivencia. Existe una falsa creencia que tener una web con unas fotos colgadas de nuestros productos será sinónimo de vender más ya que el futuro está ahí. Estas creencias e historias reales, por extrañas que parezcan, están a la orden del día en países latinos donde todavía se cree que con cuatro fotos y tres pinceladas tenemos una web que funciona.
Establecer los objetivos de caras a nuestros clientes o público específico es fundamental para ahorrarse dinero y dolores de cabeza; abstente de tomar un proyecto en el que no hay objetivos claros.
Los objetivos de una tienda online, no son los mismos que el de un bufete de abogados o un restaurante. 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?. Si los objetivos no son claros, el sitio web será una ruina que llevará al fracaso, y no te ayudará a tu reputación digital como diseñador. Siempre hay que dejarle claro al cliente cuáles son sus posibilidades … tener ética es fundamental.
Regla 2: Establecer los contenidos
Antes de comenzar con el diseño es fundamental tener una idea de cuáles serán dichos contenidos para de esta forma poder adaptarlos posteriormente al diseño. Intentar hacerlo de forma inversa puede constituir una pérdida de tiempo, ya que muchas veces nos obliga a rediseñar el sitio. Tampoco es necesario tener los textos e imágenes por adelantado; el propósito es simplemente tener una idea clara de lo que hay que publicar, para así poder hacernos una mejor idea de las necesidades concretas del diseño de caras al cliente.
Regla 3: Dibuja un esquema
A pesar de resultar un poco contradictorio o incongruente con la era digital, he comprobado que es más fácil pensar sobre papel que con herramientas digitales y la realidad es que en reuniones con el cliente, puede ser más útil utilizar un bloc de notas de papel que una Tablet.
Regla 4: Utiliza una herramienta de Wireframes
Los Wireframes son un conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas, sin elementos gráficos, de tal manera que implementan aspectos generales del sistema sin entrar en detalle, estos se deben realizar antes de empezar a programar y de crear el diseño visual de la página.
Las ventajas de usar Wireframes son por un lado el equipo y el cliente se centra en el diseño de contenidos y no en el diseño visual, y por otro lado, definiendo la organización y estructura en etapas previas al diseño y programación se evitan cambios posteriores más costosos, reduciendo así costos y tiempos.
La información que deben contener los wireframes, como dicen en Strange Systems, es:
• Inventario de contenido.
• Elementos cómo: cabeceras, enlaces, listas, imágenes, formularios, etc.
• Vínculos, títulos, etc.
• Layout.
• Notas que nos indiquen el comportamiento de algunos elementos.
Regla 5: Diseña en Photoshop
Con el diseño web responsive, sensibles o adaptables a distintos formatos de pantalla se terminaron los días en que sólo hacíamos un diseño. Ahora necesitamos grids responsive o cuadrículas que nos permitan adaptar el diseño a la pantalla. A pesar de requerir más tiempo, el hecho concreto es que garantiza una mejor experiencia a nivel usuario. Contrariamente a lo que se venía haciendo hasta ahora en que se partía de la versión desktop para crear la móvil; a día de hoy es aconsejable comenzar de menor a mayor.
El diseño creado debe aportar una buena experiencia a nivel de usuario y que siga los requisitos de la usabilidad y accesibilidad. Porque si tu diseño es fantástico pero no es navegable, ten por seguro que la web será un fracaso. Es en vano seguir profundizando más en estos temas ya que han sido muy debatidos e incluso se han llegado a escribir libros; lo concreto es que es una pauta muy a tener en cuenta a la hora de realizar la maquetación en Photoshop.
Regla 6: Escribe el HTML
Escribe 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 te beneficiarás. Te recomiendo programar con HTML5, porque es mucho más semántico y versátil que el tradicional, además que cada vez son más los sitios web que se programan con HTML5.
Regla 7: Crea el CSS
Cuando dispongamos de la estructura del documento en HTML, entonces comenzamos a darle forma con el CSS. Es fundamental diseñar para los navegadores más modernos y utilizar un CSS diferente para los navegadores más antiguos o que no siguen los estándares como IE7. Intenta implementar todo lo que puedas con CSS3 en lugar de imágenes recortadas del Photoshop, esto permite 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.
Regla 8: Compatibilidad entre navegadores
Este es el punto que más quebraderos de cabeza nos proporciona los diseñadores. Muchas veces dispones de un diseño que se ve fantástico en Chrome y Firefox y pero que cuando lo ves en Internet Explorer es una calamidad. O lo pruebas en el iPad en posición vertical y se ve de maravillas, pero que cuando lo giras se ve un desastre. La compatibilidad entre navegadores es una fase que requiere de mucha paciencia, ya que implica diseñar una web se vea correctamente en todos los navegadores, más aún ahora que se le añade una dificultad mayor con los dispositivos móviles que hace unos años no hacía falta tener en cuenta.
Regla 9: El código debe validar
Debemos realizar un código lo más limpio posible que también valide, en la medida de nuestras posibilidades. Muchos sabemos, por ejemplo, que cuando introducimos el código de likebox de Facebook en nuestra web automáticamente dejamos de validar, pues como ya sabemos Facebook va por libre en temas de estándares. Está claro que hay que tener en cuenta los puntos a favor y en contra 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.
Llegados a este punto, solo podemos intentar, en la medida de lo posible, crear un código que valide y arreglar los errores básicos que son fáciles de solucionar, procurando tener el mínimo de errores de validación del código.
Regla 10: Cuando subir la web al servidor
Una vez que hayas finalizado todo el trabajo en modo local ha llegado el momento de subir la web al servidor. Nunca hagas el trabajo a nivel de servidor, ya que los potenciales usuarios y clientes pueden haberse llevado una mala impresión si son testigos del proceso de diseño. Es aconsejable subir las nuevas páginas web en días y horarios que se poco frecuentes para la navegación en internet, de esta forma te aseguras que nadie se dará cuenta de si ha habido algún error.
Conclusión
En esta publicación o post, hemos establecido 10 reglas a tener en cuenta en el diseño de un sitio web. Lógicamente, siempre se podría ahondar más y establecer más reglas, pero la idea era establecer una “Guía de referencia para hacer una web”.
Espero que les haya sido de interés y que me comentasen si están de acuerdo con las reglas propuestas o cuales añadirían ustedes. Soy consciente de que el intercambio de ideas genera nuevos conocimientos, por ello, como apasionado del diseño web, el posicionamiento SEO y el marketing digital siempre estoy dispuesto a aprender.
Saludos y gracias por tu tiempo.
Adrián de SEO Diseño Web Málaga
