Prodigy Computación

Web Design

Cuando me entré a Prodigy Computación el sitio estaba construído con Joomla, no contaba con una versión diseñada para móviles y tardaba hasta 10 segundos en cargar con una conexión a internet normal.

Rediseño

Mi principal motivo para diseñar por completo un nuevo sitio para Prodigy Computación fue el tener un look moderno y limpio. El sitio anterior contaba con un fondo gris claro en muchas páginas, fuentes con pesos y tamaños sin mucha relación y desequilibrio estructural que fueron las bases para el nuevo diseño.

Menú

El nuevo menú quita el botón para la página de inicio, ahora al hacer click en el logo de la empresa se puede ir al inicio. También cuenta con íconos para las cuatro secciones principales del sitio: Equipos, Productos, Redes y Contacto.

Barra lateral

Para la barra lateral, que se oculta en pantallas chicas y dispositivos móviles usé un margen muy claro para separarlo de la sección principal. También cuenta con secciones claramente definidas por títulos y cuenta con información relevante, resaltada por íconos.

Inlcuí también links hacia páginas importantes del sitio pero que no deberían estar en el menú principal: Formas de pago, Envíos, Políticas de garantía, Aviso de privacidad.

Tablas

Las tablas de precios son muy importantes para los clientes ya que les permiten visualizar diferentes productos por categorías según su página, suelen estar organizados por orden alfabético, que los fabricantes también toman en cuenta por lo que muchas veces los precios están ordenados ascendentemente lo que también ayuda al cliente a poder distinguir que productos se encuentran dentro de su presupuesto, que es interior y que superior y decidir si continuar con desición o cambiar de producto.

A diferencia de muchos otros sitios que incluyen una descripción más detallada de los productos e incluso imágenes esa no es la forma de operar de la empresa. Los clientes comprenden y saben que además pueden buscar información del producto con el nombre o preguntarle a un vendedor de la tienda.

Las tablas cuentan con un diseño limpio, alternando colores entre cada fila y bordes inferior y superior un poco más obscuros pero tampoco distractores. La primer fila son los headers los que siempre tienen fondo claro y letras más pesadas.

El precio de los productos está alineado a la derecha, con separaciones de comas cada 3 unidades. Al colocar el mouse sobre la tabla se resalta en un color amarillo muy claro la fila en la que el mouse está colocado, ayuda a la legibilidad y usabilidad. Los títulos de las tablas son en mayúsculas con separación entre letras más grande de lo normal para hacerlo más interesante y fácil de leer.

Equipos

La sección de equipos fue una creación nueva, en lugar de tener una página dedicada para cada equipo (y ya que estos cambian frecuentemente) fue más conveniente tener una página mencionando sus características principales, manteniendo consistencia con la limpieza y espacios abiertos entre cada producto. Los precios con fuentes más pesadas están marcados en color verde, una desición importante en todo el sitio que debe funcionar sobre fondos claros y obscuros.

Footer

El footer al igual que el resto del sitio es la carta de presentación de una empresa pero muchas empresas lo tienen descuidado, suelen subestimar el poder que tiene el ser lo último que las personas ven en cada página y por la misma razón puede ser ignorado.

Aunque se puede tener un footer que solamente tenga la dirección de la empresa y un correo de contacto quería intentar algo diferente con el sitio de Prodigy: Dividir las secciones principales por columnas con links importantes a otras partes del sitio. Las colimnas son: Navegación, Ubicación, Teléfono y Links a redes sociales.

El footer toma una actitud seria con un fondo obscuro, pero con volumen. El logo de la empresa está centrado y cuenta con espacio suficiente para destacar. Los títulos de las columnas usan la misma fuente y color que los títulos de las tablas manteniendo consistencia con el resto del sitio además de iconografía que permite una mejor separación entre cada elemento.

Concluye con un anuncio de derechos de autor al fondo con letras tenues pero firmes.

Elementos adicionales

Diseñé y agregué ciertos elementos importantes al sitio.

Ya que la tienda depende de productos importados y los precios de éstos dependen del tipo de cambio con el dólar americano se cuenta con un pequeño elemento no distractor que indica que los precios pueden cambiar.

De forma similar a los anuncios de los precios diseñé un contenedor superior para mostrar anuncios importantes en el sitio sin tener que recurrir a elementos invasivos como modales o pop-ups.

Las paginas de pagos y envíos cuentan con información clara y bien organizada, con logotipos, tablas e íconos diseñados para mostrar claramente información al usuario.

La división de secciones es una linea verde fina para evitar distracciones pero minimalista y elegante al mismo tiempo.

Migración a Jekyll

La migración de Joomla a Jekyll se realizó cuando el sitio estaba presentable pero no completamente listo, migré los datos hacia las páginas necesarias de Jekyll.

Una de las principales ventajas al hacer la migración fue que hacer cambios en el sitio web después de la actualización era mucho más rápido ya que no dependía de visitar un sitio web para hacer cambios en el sitio, podía hacer todo desde mi computadora y únicamente subir los cambios al servidor.

Jekyll ha probado ser eficiente para diseños web de sitios estáticos o sitios que son mantenidos constantemente sin necesidad de usar un sistema de manejo de contenido que pueda alentar el flujo de trabajo de la persona que lo mantiene.

Script personalizado con Python

Finalmente, programé un script con Python para agilizar la carga de tablas al sitio web.

Al principio, usando Joomla se copiaba y pegaba una tabla de Excel a la que previamente había que darle formato HTML.

La primer optimización vino con Sublime Text gracias a la edición milti-línea pero no era suficiente.

El script que escribí toma un documento de texto plano en el que se ingresa una lista de n líneas de productos seguidas de n líneas de precios, si hay una línea única seguida de una línea en blanco el script detecta que ese es el título de la tabla. El script imprime el HTML con formato para pegar en la página deseada.