12 Ene Rediseño Completo a la Web de Kodyto: Fase Preliminar

¡Hola a todos! Estoy muy contento de anunciar que la web de Kodyto está siendo rediseñada por completo. Cuando me propuse crear la web para Kodyto estaba un poco corto de tiempo así que la hice con prisas, y el resultado aunque no está mal tampoco fue ideal. Y con el logo pasó lo mismo; tenía pensado que fuera temporal, así que generé uno con IA y ese mismo utilicé.

Al final, ese período temporal se acabó extendiendo y cinco meses han pasado ya. Es como dice el dicho: “En casa de herrero, cuchillo de palo”, aunque en este caso no conviene que el cuchillo sea de palo ya que la web de una agencia de marketing o desarrollo web es el propio portafolio de la misma. Por eso mismo he decidido no dilatar más el asunto y he comenzado con el restyling de la web.

En los próximos artículos (no necesariamente secuenciales) os iré mostrando como avanza el restyling. En este artículo os enseñaré las cosas que he hecho en esta primera faceta preliminar del diseño. Pero no sin antes mostraros el nuevo logotipo para Kodyto…

Nuevo Logotipo de Kodyto

Como ya os he dicho el logotipo que ha estado hasta ahora es temporal y por lo tanto hay que cambiarlo por uno mejor, que se adapte al enfoque y a los objetivos de Kodyto. Y de hecho eso ha sido lo primero que he hecho antes de tocar el archivo de diseño. Os presento al nuevo logo de Kodyto:

¿Qué os parece? ¿A que está guapo? Por supuesto, hay una versión en negro también:

Y hay otras variantes del logo que he creado también: sin texto, en blanco y en negro; y tanto en blanco como en negro con el texto pero también con el fondo transparente.

Me he decantado por este diseño por las siguientes razones:

• Asterisco: He querido que tuviera esta forma porque representa muy bien el tipo de servicios que Kodyto ofrece: creación y mantenimiento de sitios web con WordPress. Pero no sólo eso, lo que tengo planeado es ir añadiendo servicios en la medida de lo posible, todos dentro del ámbito de la informática. El asterisco puede ser sencillo, pero incluye 4 símbolos: barra vertical, menor que, mayor que, y el propio asterisco. Este es un guiño muy obvio al trabajo que se hace en este sector, que implica muchas veces teclear símbolos como estos.
• “K” en el asterisco: Se puede distinguir claramente esta letra en el asterisco. He decidido que quede así para que la mente de la persona que lo vea lo relacione con la inicial de la marca.
• “K” en el texto: Para que el anterior funcione estas letras tienen que ser parecidas cuando menos. En principio le iba a poner una fuente un poco más “juguetona”, que hacía a la “K” de Kodyto más redondeada, pero entonces perdían parecido. Una opción era hacer un poco redondeada la “K” del asterisco para que se pareciera a la otra, pero entonces perdía la forma de asterisco. Así que opté finalmente por cambiar la “K” de Kodyto para que se pareciera a la del asterisco. Esto logra una mejor armonía entre todos los elementos que conforman el logotipo. Además, conceden una mayor versatilidad a la hora de hacer animaciones con el logo, cosa que es bastante común.

Por si se lo preguntan, el logo lo diseñé con Canva, por lo fácil que es crear un logo allí (esta vez nada de inteligencia artificial). Aunque pudiera haber utilizado otras herramientas muy buenas como Gimp o Figma.

Fase Preliminar del Diseño

Para crear el nuevo diseño he utilizado Figma, por su facilidad de uso, por toda la información que hay sobre esta herramienta y por su accesibilidad. Como veis, de momento el diseño no está muy trabajado. Lo que he hecho ha sido crear un “boceto” con los cambios que ya tengo pensados y a partir de ahí seguir modificándolo. Esta que veis aquí es la Home, que tiene hasta ahora 6 apartados (uno más que la actual): hero, servicios, proyectos, testimonios, sobre nosotros y contacto.

Sección Principal (Hero Section)

Aquí de momento no es muy diferente del diseño actual: el encabezado principal, dos botones debajo y una imagen al costado. Tengo que considerar si mantengo el título actual o lo cambio por uno mejor. Los botones permanecerán así a menos que decida cambiar a que sección apuntan. La imagen, eso sí, tiene que ser muy llamativa, así como el logo; usará colores que complementen el naranja del logotipo.

Sección de Servicios

Esta sección tampoco cambia mucho. Se mantiene el diseño de los servicios, sólo que cambia la disposición, siendo dos filas de 4; de esa forma encaja y no desagrada a la vista.

Sección de Proyectos

En esencia es lo mismo pero hay un cambio importante de cara al responsive. Hasta el momento la vista de ordenador y de móvil estaban combinadas en una misma imagen. Esto dificultaba el responsive, no estaba del todo optimizado. Ahora cada mockup será una imagen individual. De esa forma se verán mejor en un dispositivo móvil. Además, le he añadido un pequeño botón de “switch” para cambiar entre vista desde ordenador y vista desde móvil, todo esto dentro del contenedor del mismo proyecto.

Sección de Sobre Nosotros

Aquí permanece la misma estructura. Aunque posiblemente cambie la imagen de esta sección, respetando el resto del diseño e imágenes del sitio.

Sección de Testimonios

Esta sección es nueva y sin duda necesaria; ¡ya era hora! Lo que tengo previsto es poner un slider en esta sección con la estructura que se ve en la imagen. Los que queden al fondo se verán más opacos y sólo cuando pasen al frente aparecerá el contenedor con la imagen, el nombre, el sitio web y la reseña.

Sección de Contacto

Y por último la sección de Contacto, que de momento permanece igual. Queda a consideración si quitar la imagen y dejar sólo el formulario, o poner una imagen. Se hará lo que sea más conveniente.

Quedan aún Muchas Cosas por Hacer

Como dije, esta es sólo la fase preliminar. Seguiré trabajando en el diseño para que refleje las intenciones de la marca de forma clara. Aún queda por definir como se usarán los colores de branding por todo el sitio; faltan también las imágenes; confirmar si todas las secciones irán dentro de la Home o en páginas separadas; crear la cabecera y el footer y diseñar desde cero el nuevo Blog de Kodyto. Estoy muy emocionado con este nuevo proyecto. Seguiré actualizando el estado del diseño a través de artículos que estaré escribiendo en este blog, así que… ¡Estate atento!