16 Feb Rediseño Completo a la Web de Kodyto: Nueva “hero-section” y Nueva Sección de “¿Por Qué?”

Ha pasado ya un tiempo desde que comenzó el restyling a la web de Kodyto. Se inició con su fase preliminar y para el día de hoy el diseño ha sufrido varios cambios relacionados con la hero-section, que trae consigo una imagen muy llamativa; y una nueva sección de “¿Por qué?“. Te muestro la razón de ser de los nuevos cambios que se realizaron para cada sección y como se llevaron a cabo. Para empezar, hablemos sobre lo que se pretende lograr con la nueva landing page y el público objetivo al que va dirigida.

Objetivo de la Nueva Landing Page

El propósito de la nueva Home landing page es mostrarle a los posibles clientes la importancia de que su web reciba mantenimiento, en qué consiste y por qué este debe realizarlo un experto. Todo esto se logra con una analogía que se manifiesta por toda la web en sus textos e imágenes.

El público objetivo son aquellas personas que tienen un negocio y han pagado a una agencia para que les hicieran una web para el mismo o la han hecho por su cuenta; pero por una razón u otra su sitio no recibe mantenimiento. No son pocas las personas que infravaloran el mantenimiento de una web; que piensan que ellas mismas se las pueden apañar actualizando los componentes del sitio. Puede que la agencia que creó su sitio web cobre por el mantenimiento una cantidad que el cliente no está dispuesto a pagar. O quizás sea otra la razón. Sea como sea, estas personas necesitan entender la importancia de que su web reciba mantenimiento por parte de un experto cuanto antes. Esto aplica sobre todo a las tiendas online. Este tipo de webs no se pueden permitir estar sin mantenimiento contratado. Pues, en esencia, esto es lo que la web le enseña al cliente. Ahora hablemos sobre los diferentes componentes de la web.

Header

El header, o encabezado de la página, es el componente global que contiene el logotipo y el menú de navegación. Es sumamente importante que esté presente en la web ya que de lo contrario los usuarios se perderían. En toda web tiene que haber una manera fácil de acceder a todas las secciones de la misma; el header cumple ese objetivo.

Y en este caso, no han habido grandes cambios en el diseño. La estructura se mantiene. El logo obviamente había que cambiarlo por el nuevo. Los enlaces permanecen prácticamente iguales, sólo cambia de momento el enlace “Sobre nosotros” a “¿Por qué?“. Y es que la sección “Sobre nosotros” ha sido sustituida por otra que será mucho más útil, y que se puede intuir por el título en lo que consiste.

Hero-Section

Llegamos al plato fuerte: la hero-section. En la actual versión de la web lo que muestra la hero-section muestra un encabezado que dice de qué se trata el servicio y debajo un slider con los servicios que ofrece Kodyto. Pero el cambio de objetivo pide a su vez un cambio de diseño para la hero-section, sobre todo para esta sección debido a que tiene la más alta visibilidad de la web.

Todos estos elementos que puedes ver en la sección comunican una idea a modo de analogía, que lo que en esencia dice es lo siguiente: “Al igual que las flores se marchitan si no se cuidan, tu web puede estropearse si no se le da un buen mantenimiento”. Esto lo plasma en la pantalla del usuario de forma sencilla y llamativa con una ilustración de vibrantes colores y una tipografía en el título que reflejan muy bien la estética de la imagen.

En principio, había creado esta imagen:

Muy bonita, sí, pero no transmite “tecnología” por ninguna parte, cuando el negocio trata justamente de eso: servicios informáticos. Eso era un problema. ¿Cómo enseño esta analogía al mismo tiempo que transmito la idea de “tecnología”, todo en una misma imagen? Le daba vueltas y vueltas en mi cabeza, hasta que se me ocurrió una idea: un ordenador en un espacio de trabajo típico de un informático, cuya pantalla mostraba un jardín con flores que sobresalían de la pantalla de forma surrealista; esto con un estilo realista pero a la vez vibrante. Y así surgió la nueva imagen.

Esta fue generada con IA. Pero, como posiblemente sepas, generar una imagen con IA que quede exactamente como tú quieres puede ser un poco complicado; incluso si le pasas un prompt super detallado. Por eso, lo mejor en estos casos es crear un boceto, puede ser dibujado o con mediante diseño gráfico. Esta última fue la forma que escogí para lograrlo. Descargué varias imágenes: mesa, silla, teclado, ratón, ordenador, regadera. Todas esas las uní en una imagen con las posiciones y ángulos que yo quería y luego le pedí a la IA que me generara un imagen según mis criterios y basada en ese boceto que le pasé. El resultado quedó bastante cerca de lo que quería. Sólo tuve que hacer algunos retoques y así quedó.

Luego tenemos el título, para el cuál usé varias fuentes: “Great Vibes” para el texto superior, imitando la estética de la imagen; “Poppins” para el encabezado principal; e “Inter” para el texto de los botones. El texto del encabezado tiene además un sombra discreta que le da un poco de profundidad y le sienta bien.

Los botones CTA son, como ves, dos. El botón “¿De qué se trata?” enlaza a la sección “¿Por qué?” y el botón “Contacto” como su nombre lo indica enlaza a la sección de contacto.

Sección “¿Por qué?”

Esta nueva sección sustituye a la sección “sobre nosotros”, ya que es mucho más útil. La misma sigue el hilo de la hero-section, ilustrando con una analogía la necesidad de una web de recibir mantenimiento. Pero ahora sí, todo esto se explica con detalle en los párrafos de la sección. Aunque, se sigue aprovechando el poder que tiene una buena representación visual y se ilustra esta idea nuevamente con una imagen.

En este caso la imagen está dividida en dos partes, siendo así que prácticamente se explica sola. A la izquierda hay un brote que recibe cuidados, la tierra alrededor suya está siendo escardada por dos manos humanas para remover todas las malas hierbas que podrían impedir que la planta crezca bien. A la derecha se ve un hombre trabajando en su ordenador; y no hay que decir lo que él está haciendo, ¿verdad?

En uno de los párrafos hay en enlace que lleva a un artículo que muestra lo que conlleva un buen mantenimiento y por qué es necesario que sea realizado por un experto, este aún no ha sido escrito pero estará disponible para cuando se lance la página. Debajo de los párrafos de la sección hay un botón CTA para ponerse en contacto con Kodyto.

Próximos pasos

La idea es continuar con el diseño de las secciones restantes de la Home: “Servicios”, “Proyectos”, “Testimonios” y “Contacto”. Además, queda aún diseñar el footer. Después de eso se pasará al diseño del nuevo blog. Mientras tanto, la labor de mantenimiento no se detiene. Ya sabes, si no se cuida se marchita. Y por mi parte, seguiré subiendo artículos al blog de Kodyto y actualizando el estado del restyling. El trabajo no se detiene, y la transformación de nuestra casa digital es solo el principio. Quédate por aquí, que lo mejor está por llegar.