El correcto diseño de una página web exitosa

En los tiempos actuales toda institución pública o privada hasta incluso personas necesitan estar en internet y la página web esta en el centro de todo el ecosistema digital, es la vinculación entre marca y cliente, es atreves de este medio donde puede plasmar su propuesta de valor.

Muchos ya han iniciado con una presencia en las redes sociales pero al comenzar a crecer se ven en la necesidad de levantar un pagina web para poder gestionar de una manera más estructurada su presencia digital.

Hoy, ningún emprendimiento  o pyme pude tener una vinculación potente con sus consumidores sin tener una página web, el impacto de las tecnologías digitales han abierto un cambio de paradigma donde los consumidores pueden organizarse y acceder a información de primera fuente por lo cual equilibran en cierta medida la información entre los emisores y los receptores de la información.

Debido a eso el consumidor digital tiene más control de la relación, tiene que ser escuchado, a expresarse, a preguntar y exigir respuestas de parte de las instituciones o empresas. A esto se le ha llamado “El ciudadano empoderado”.

Este ciudadano en su rol de consumidor ha elevado los estándares de exigencia y solicita mayor información, transparencia y derechos. Es por eso que las páginas web son cada vez más importantes en diseño, contenidos y atención que le brindan al usuario. Es por eso que se hace importante conocer el proceso creativo y de desarrollo de una pagina web que exprese de manera atractiva y cercana la propuesta de valor de la organización.

Breve Historia del desarrollo web

El desarrollo web nace a finales de 1990 gracias a un Ingeniero y Fisico Britanico llamado Tim Berner-Lee, su objetivo era el intercambio de datos del Centro Europeo de Fisica Nuclear (CERN).

En ese entonces Berner era un experto en hipertexto y ya había creado el lenguaje HTML (hyper Text Marup Language), el protocolo HTTP (Hyper Text Transfer Protocol) y la URL (Uniform Resource Locator), esto posibilito darle otro uso a la internet que hasta entonces solo servía para enviar correos electrónicos y transferencia de archivos.

Fue así como el 20 de diciembre de 1990 Berner publica la primera pagina web la cual no tenia colores, imágenes, videos, animaciones, ni grafico, solo textos, enlaces o hipertextos y algunos menús. Puedes ver la página haciendo click aqui.

En el año 1993 este sistema se liberalizo lo que permitió que toda persona que quisiera creara su página web. Las universidades, gobiernos y corporaciones vieron nuevas oportunidades, en ese año es creado el primer navegador en el Centro Nacional de Aplicaciones de Supercomputación (NCSA) en la Universidad de Illinois llamado Mosaic.

Mosaic se podía ejecutar en computadoras Windows y dio acceso a las primeras páginas web, salas de chat y bibliotecas de imágenes. Su creador llamado Marc Andreessen tiempo después creo Netscape Navigator, el primer navegador web comercial naciendo desde entonces una guerra por la preferencia de los usuarios.

En 1995 Microsoft obtuvo la licencia de Mosaic y crea Internet Explorer, al tiempo despues Netscape creo JavaScript y en respuesta Microsoft crea el  Cascading Style Shett (CSS). Ambos códigos JavaScript como CSS son estándar para el diseño de páginas web en la actualidad

Más adelante Netscape se transformara en la actual Mozilla Firefox, e Internet Explorer será Microsoft Edge, a finales del los años 90 y principios del 2000 nacen nuevos competidores como Opera, Safari y Google Chrome.

En la actualidad los dispositivos móviles son la forma preferida de acceder a internet y los principales navegadores están disponibles para plataformas iOS y Android.

Como crear una página web

Hoy el diseño web se ha transformado en una disciplina que  requiere de múltiples habilidades que consiste en la investigación, modelamiento, diseño, desarrollo e implementación de los sitios web, landing pages, ecommerce, blog.

A diferencia de los soportes estáticos como diarios o publicidad en la vía publica el diseño web se sustenta en soportes dinámicos donde la relación con el usuario cobra gran relevancia. Es por eso que la navegación, interactividad, contenido e interacciones deben ser de la manera más intuitiva y sencilla posible.

Un sitio web no pude ser desarrollado únicamente desde el punto de vista estético, la prioridad es un estudio del modelo de negocio, de esta forma se podrá proponer un sitio que vincule a la audiencia con la marca y que asegure que habrá visitantes que cumplan con los objetivos propuestos.

El Metodo de Garret

Jesse James Garrett es un arquitecto de información que ha plasmado y organizado estos conceptos en un diagrama titulado “los elementos de la experiencia de usuario”, en el se explica con mayor facilidad los procesos ligados al diseño de la experiencia del usuario (UX) y a la Arquitectura de la Información.

La estrategia

Fundamentalmente, consiste en definir qué quiere lograr el usuario del producto que estamos diseñando y qué quiere conseguir la empresa u organización con la creación del producto.

En esta etapa se privilegian los objetivos que el sitio debe tener en conjunto con las necesidades del usuario.

Los objetivos más usuales que puede tener una página web son:

  • Dar a conocer la marca, producto o servicio.
  • Dar a conocer contenidos.
  • Vender.
  • Recoger opiniones
  • Ofrecer información
  • Jugar
  • Socializar
  • Etc.

En este sentido se recomienda que lo primero que se haga sea responder dos preguntas. ¿Para qué existirá mi sitio web?, ¿Cuáles son los sueños para mi sito de aquí a 3 años mas?

El alcance

En esta segunda etapa se definen las especificaciones funcionales. La forma de identificar las especificaciones funcionales del producto debe de ser positiva, específica y objetiva.

Entre los requerimientos funcionales esta:

  • Capacidad Multi-idiomas
  • Posibilidad de Login y password
  • Presencia de buscador
  • Carrito de compra
  • Formularios de contacto
  • Descarga de documentos
  • Etc.

También se debe considerar los requerimientos de contenidos que el usuario espera. Por ejemplo:

  • Cantidad de idiomas
  • Profundidad del contenido
  • Ámbito del contenido
  • Tecnicismo del lenguaje
  • Tono de la comunicación

Hay que tener en cuenta lo qué se quiere hacer para definir el alcance y si satisface los objetivos de los usuarios y de la empresa para lo cual es necesario tener una buena comunicación con cada parte involucrada del proyecto.

La estructura

En este punto se define la AI (Arquitectura de información), es decir la estructura lógica y niveles de información. La AI comprende la identificación y organización de opciones involucradas en el momento de proporcionar información correcta a los usuarios del producto de manera de facilitar al máximo el acceso intuitivo del contenido.

Normalmente la AI se grafica por un mapa de navegación en el cual se muestran de manera grafica los niveles y subniveles de los contenidos lo que permitirá jerarquizar, distribuir y organizar como el usuario accederá al contenido.

Para realizar esta tarea hay herramientas dedicadas como Lucidchart, Mindmeister, Smartdraw, Creately o Power Point de office.

En paralelo se analiza el diseño de interacciones en donde se define como el usuario va interactuar en el sitio y como las distintas secciones del sitio interactúan entre si. Por ejemplo. Cuantos clic necesita el usuario para llegar a la información.

El esqueleto

Aquí es donde se diseña los llamados Wireframes, elementos donde se muestra la interfaz gráfica de la navegación pero libre de componentes que no sean necesarios como colores o tipografías finales para que no interfieran en la última etapa.

Acá encontraremos los botones, pestañas, textos, enlaces, formularios y menús.

Se trata de generar un diseño simple de la interfaz, que sea fácil de entender y comprender mostrando la información y en qué posición se colocará cada componente que da acceso a la funcionalidad.

Algunos sitios para realizar wireframe miro, ninjamock adobeXD Sketch Microsoft Visio

La superficie

En esta última etapa tenemos lo que es el diseño grafico. Es aquí donde tenemos al sitio como se verá  y percibirá la experiencia del usuario (UX).

Es en este momento donde se plasma la vinculación emocional que se quiere conseguir cuando el usuario interactué con nuestro sitio (look and feel). Se definen los estilos visuales, se alinean diseño y lenguaje de la marca junto con la guía de estilos.

Luego de cumplir con las cinco etapas se definirá el lenguaje de programación o si se usara una base ya programada conocidas como Content Management System (CMS).

Entre los CMS mas populares esta WordPress, Joomla, Drupal, Wix, Shopify que están basados en plataformas open surce.

Algunas variables a considerar en la elección de un CMS

  • Presupuesto.- Los hay desde gratuitos hasta de pagos
  • Planificación y tiempo para lanzar productos – algunas ya vienen con plantillas prediseñadas
  • Tipos de contenidos – Por ejemplo no todos sirven para crear un e-commerce
  • Eficiencia en buscadores – No todos permiten intervenir en el SEO
  • Soporte – Posibilidad de acceso a soporte en línea.

Deja un comentario

Tu dirección de correo electrónico no será publicada.