En el mercado existen numerosas herramientas para la creación de sitios web o páginas web con la promesa de hacerlo de una manera fácil, cómoda y sin conocimientos en programación. Se convirtió en una moda para estas plataformas, ofrecer planes de diseño sin bases de código o asesoría alguna. En la hora final, termina representando para el cliente una pérdida de dinero que, a pesar de que puede ser poco, no se compara con las innumerables horas de tiempo que conlleva invertir construirla desde 0 por él mismo.

El Diseño de una Página Web de una empresa debe expresar el día a día de la organización, su propósito, sus alcances, sus metas y el servicio que ofrece a sus clientes. Un sitio web bien hecho y bien diseñado, genera excelentes percepciones ante los clientes de quién la posee y, por ende, otorga confianza al producto que comercializa. Es en este punto donde empiezan a llegar los clientes.

Existen varios tipos de Diseño Web:

-Páginas Web informativas: son Diseño de Páginas Web que se ajustan a brindar información necesaria para el conocimiento de una empresa o negocio. Es usada por organizaciones cuyo propósito es atender a su cliente de manera física y no digital.

-Páginas Web Transaccionales: este tipo de Páginas Web están desarrolladas con Frameworks, CMS (administradores de contenido) o programación manual de acuerdo a las necesidades del cliente. Este tipo de diseño permite realizar pagos en línea, consultar información en tiempo real, transar datos e interactuar con máquinas virtuales, entre otros. Cabe menciona en esta categoría, páginas web de Bancos, Tiendas Virtuales, Consulta de Seguros, etc.

-Páginas Web captadoras de prospectos comerciales: este tipo de Diseño Web está enfocado en captar clientes con diversos formularios. Generalmente están acompañados de una información básica y posteriormente tiene llamados a la acción para que los clientes cumplan un objetivo: Contactar.

-Páginas Web para el entretenimiento: este tipo de Diseño Web en Medellín es utilizado por compañías productoras de video, audio, entretenimiento, videojuegos, entre otros. También cabe en esta categoría las páginas o sitios web de descargas por su alto contenido de archivos y se caracteriza porque utilizan espacios de alta capacidad.

-Páginas Web Interactivas o de Servicio al Cliente: Este tipo de Sitio Web permite interactuar entre usuarios o entre dos máquinas mediante chats, solicitudes de atención y pqrs, subida y descarga básica de archivos, entre otros. Es comúnmente utilizada por Contact Centers, Empresas de telefonía, Servicios varios, Servicios Digitales, Redes Sociales, entre otros.

Metodología de Diseño de la Agencia de Marketing Digital en Medellín Blue Design:

Design Thinking: Es un enfoque para la innovación centrado en las personas. Utiliza herramientas de diseño para integrar necesidades y las posibilidades de la tecnología y los requerimientos para el éxito de un negocio. Este es un proceso interactivo y se parece mucho al empleado en empresas de core tecnológico a nivel internacional conocido como “lean start up” (construir, medir, aprender) y son los que definen más el proceso previo a la generación de ideas de un negocio (es algo disruptivo). Busca solucionar las necesidades, problemas y deseos de los usuarios.

Flat Design: El “Flat Design” o “Diseño Plano” consiste en eliminar o reducir todo tipo de decoración en un diseño de interfaz o web para simplificar el mensaje y facilitar la funcionalidad. Se eliminan texturas, degradados, biselados, sombreados. En definitiva, todo lo que no aporte valor al mensaje o información que se quiere transmitir al usuario que interactúa con la interfaz.

Colores: Se aconseja utilizar colores vivos en paletas flat con pocas variaciones de cada color respetando la marca. Utilizaremos esquemas de color que ayuden al usuario a “comprender” el diseño de forma visual y así facilitar la interacción.

Tipografías: La tendencia es utilizar fuentes Sans Serif para cuerpos. Para títulos sirve casi cualquier fuente de fácil lectura, incluso las creativas. Utilizaremos grandes tamaños, al mismo tiempo que se reduciremos las longitudes de los títulos y subtítulos.

Mensajes: “Si puedes decir algo en 4 palabras no lo digas con 10”. Aconsejamos ser directos y utilizaremos claros llamadas a la acción (Call2Action).

Responsive Web Design: “Diseño Web Adaptable”. Normalmente se distinguen 4 tipos de resolución (Smartphone, Smartphone tipo retina, tabletas y monitores).

Cómo es el proceso de Diseño de Páginas Web en Medellín de la Agencia Blue Design Worldwide:

El diseño web utilizado por la Agencia Digital en Medellín Blue Design es caracterizado por lo meticuloso del proceso en su paso a paso:

• Sesión creativa: En este primer paso se involucran los entes responsables de Innovación de la Agencia de Diseño Web de Blue Design: Director de Marketing encargado de enmarcar el diseño del sitio bajo resultados de ventas o persuabilidad, Director de cuentas encargado de direccionar las necesidades del cliente con respecto al requerimiento pactado, Director de Arte y/o Creativo responsable de investigar las tendencias gráficas que debería seguir el sitio web del cliente para marcar la diferencia en el mercado. En esta sesión creativa se juntas estos 3 conceptos para crear un producto único.
• Arquitectura de la información: Define punto a punto cuáles serán las páginas internas del sitio web del cliente, las secciones principales, encargado de recolectar la información de cada cuadro. Realizado principalmente por el director de cuentas.
• Diseño de wireframes o experiencia de usuario: Al igual que en la realización de una construcción de una casa o edificio, primero se debe iniciar por el diseño del plano o mapa funcional. De igual manera ocurre con el Diseño de una Página Web. Esta etapa es generalmente realizada por el responsable de la arquitectura web. Se encarga de la ubicación de los elementos en el espacio gráfico del sitio tanto en móvil (responsive web design) como en su versión de PC.
• Diseño gráfico del sitio: En este punto se involucran el Diseñador Gráfico y el Director Creativo o de Arte para “vestir de color” e imagen los wireframes o planos realizados por el arquitecto web. Es la etapa más importante de la construcción de la página ya que el punto de vista gráfico es quién seduce a nuestros clientes para la realización de una acción.
• Corte y maquetación del sitio: Una vez diseñado gráficamente el sitio web y aprobado por parte del cliente, se entrega a un creativo encargado de cortar en Photoshop o Illustrator cada banner, botón, texto de la página y lo convierte a código fuente HTML de acuerdo a la necesidad del cliente. Este insumo se arma en una maqueta funcional que es entregada al director de programación.
• Adaptación del cortado al CMS o administrador: La maqueta funcional se entrega al director de programación para que la adapte a las etiquetas del CMS a trabajar: Diseño Web en WordPress, Joomla, PrestaShop, Magento, OpenCMS, entre otros. Este depende de las necesidades del cliente. Una manera de optimizar los tiempos de programación es trabajar sobre un template funcional ya existente y adaptarlo al diseño gráfico de la etapa 4.
• Desarrollo sobre el administrador: Algunos sitios web requieren el diseño de plugins o módulos desarrollados a medida para completar las funciones del sitio web. Este punto complementa el diseño de la página web de nuestro cliente.
• A (Quality Assurance o Test de Calidad): Una vez finalizado el proceso de programación, las páginas web son testeadas o verificadas previo al lanzamiento para identificar errores o incompatibilidades con navegadores.
• Lanzamiento: Una vez aprobado el sitio se trasladan o migran los archivos al Hosting Web o Servidor de nuestro cliente.
• Optimización de SEO: A través de un Keyword Research básico se procede a la optimización SEO para el posicionamiento en motores de búsqueda de las páginas internas, títulos del sitio, inclusión de keywords y open graph para las redes sociales. Posteriormente se registra manualmente el sitio web en Google Webmaster Tools.

Agradecimiento,

Equipo de Marketing y Comunicaciones

Agencia Blue Design Worldwide Colombia.