El Rediseño de Nuestra Web
Una de las cosas que significó el 2020 fueron sus grandes retos y, sobre todo, la respuesta que dimos a ellos.
Esa respuesta se basa fundamentalmente en la premisa de adaptación, de renovación.
Por este motivo, a finales de 2020 nos fijamos como meta el rediseño de nuestra web y de nuestra imagen en internet.
¡Aquí te lo contamos todo!
Tabla de Contenido
Antecedentes
Obviamente, siendo la web el epicentro de nuestro proyecto, queríamos iniciar el 2021 con un rediseño de nuestra casa virtual, además queríamos reactivar la generación de contenido que habíamos descuidado durante el 2020.
Como objetivo prioritario de diciembre 2020 – enero 2021 establecimos un rediseño total de nuestra antigua web, mejorando su UX (experiencia del usuario) y haciéndola más intuitiva y fácil de navegar.
Queríamos, además, poner en prácticas ciertos principios de diseño neumórfico (ver más abajo), que conocíamos desde hacía un tiempo y queríamos poner en práctica en nuestra web.
Aunque teníamos claro el aspecto estético que tendría nuestra nueva web, sentíamos que necesitábamos asesoramiento en cuanto a su estructura orientada a nuestro específico proyecto y a nuestros clientes.
Adopción de Génesis
Al iniciar el rediseño web en sí, abandonamos nuestra anterior plantilla de WordPress, porque como toda plantilla, la consideramos un tanto limitada para llevar a cabo nuestro proyecto.
Es así como decidimos adscribirnos al marco de trabajo (framework) Génesis, hecho específicamente para WordPress y su tema-hijo Sample. Sample no tiene ninguna función extraordinaria, ni mucho menos un constructor de webs.
¿Por qué escogimos entonces Génesis y Sample?
Teníamos ya tiempo trabajando con Génesis y Sample -que son framework y plantilla premium y que están incluidas en los diseños para nuestros clientes- y la verdad es que no han encantado por su flexibilidad a la hora de “realizar a mano una web”.
Además, estaba el hecho de que Génesis y sus temas hijos son sumamente livianos, lo que es esencial para la indexación en motores de búsqueda.
El tema-hijo Sample al no tener más que lo esencial para hacer una web, es un excelente lienzo en blanco para lo que queríamos hacer.
El magnífico plugin Atomic Blocks extiende la función de bloques de Gutenberg y es prácticamente, si se sabe usar, un constructor de webs por derecho propio y de peso super ligero.
Fotos
Cuando se trata de diseño web, más aún diseño web minimalista, las imágenes son parte esencial. Es así que precisábamos fotografías de buena calidad y que mostraran los rostros detrás del proyecto. Clic para tuitearNo somos fotógrafos profesionales, pero escogimos cámara Panasonic Lumix DMC-LX3 con objetivo Leica, la cual es a nuestro juicio una extraordinaria pequeña cámara con una rendición de colores excelente.
Pasamos una tarde haciéndonos fotos bajo techo, y probando diferentes opciones de luz y poses.
Las fotos debieron ser tomadas con temporizador, pues debíamos salir ambos en las mismas. Al ser colocada la cámara en un soporte fijo se evitó el movimiento de la mano, logrando máxima nitidez.
Hicimos varias tomas nuestras y de nuestro sitio de trabajo, de entre 2000 y 4000 pixeles de ancho.
Una vez seleccionadas las imágenes que irían en la web, procedimos a despojarlas del fondo y agregarle una sombra inferior. Algunos detalles, como la maceta de la planta fueron editados para calzar con el color de la marca. Esas tareas fueron realizadas con Photoshop.
De este modo aislamos los sujetos que se integraron perfectamente con el diseño de la web, sin límites entre imagen y background.
Paleta de Colores
Mantuvimos nuestra paleta minimalista que hemos venido usando desde que comenzamos nuestro proyecto en octubre de 2018.
#ef2d56
#000000
#393939
#f0f0f0
Nuestra idea es que el #ef2d56 tuviera el suficiente contraste para aplicarlo a pinceladas discretas y, sobre todo, aplicarlo en los CTAs (call-to-action) como los botones.
Para el color de fondo de la web escogimos #f0f0f0, el cual le da un muy sutil y cálido carácter al sitio en general.
En un principio se pensó en un fondo blanco (#ffffff), pero se optó por el ya mencionado para dar efectividad al diseño neumórfico se tenía planeado.
Texto
Sentíamos que el copy de nuestra web era muy genérico. Así, pusimos énfasis en cómo podríamos resolver los problemas de nuestro cliente ideal: monoemprendedores y pequeños empresarios conscientes de la necesidad de una web para escalar sus negocios.
Debíamos poner bien en claro desde el inicio mismo para quienes llegaran a nuestra web qué hacíamos, para quién lo hacíamos y cómo lo hacíamos.
Recortamos la longitud de los textos, yendo a lo esencial y al punto. En nuestra opinión el storytelling largo debe ser dejado para los auténticos especialistas. Clic para tuitearTipografía
Para los títulos decidimos conservar la tipografía que traíamos, la Bauhaus. Pero para los textos en general, quisimos cambiar de la anterior Karla, que era un poco gruesa a una más estilizada Nunito-Sans, con un peso de 400, que es la que aprecias mientras lees esto.
Amamos esa tipografía nada más verla desplegada en ciertas webs, en las que lucía elegante, limpia y clara e invitaba a la lectura.
Estructura Estratégica
El diseño de una web de negocios debe estar supeditado a una estrategia. Sentíamos que necesitábamos más asesoramiento en esa área.
Comenzamos a investigar algunos diseñadores en habla inglesa y española que estaban haciendo un gran trabajo con sus emprendimientos y dimos con Max Camuñas, que ofrecía además asesoramiento en cuanto a diseño estratégico específicamente para webs de diseñadores y creativos.
Max Camuñas es un diseñador gráfico y web de Alicante y una de las referencias en diseño web en España. En octubre 2020, vía videollamada, tuvimos una charla amena con él.
Su asesoría se centró entre otras cosas en:
- Visuales impactantes como medio para que «te recuerden»
- Presentación clara de servicios
- Optimización de Menú
- Más claridad acerca de lo que hacemos y cómo lo hacemos
- Página dedicada para blog
- Tips para mejorar estructura de la web
- Blogging
Aplicamos las recomendaciones de Max en nuestra nueva web y debemos decir que recomendamos su asesoría, especialmente a emprendedores creativos.
Diseño
Una de las recomendaciones dadas por Max Camuñas consistió en dar una bienvenida de impacto a una la web. Estuvimos pensando y nos decidimos por un background de partículas que se conectan al acercarse.
Este background de partículas está presente sólo cuando se accede a esta web desde una computadora desktop o laptop. Por razones de legibilidad está ausente de las versiones móviles.
Pensamos que era una excelente imagen que transmite la idea de dinamismo y conexión nada más entrar en la página, junto con una foto limpia sin distracciones de quienes estamos detrás del proyecto.
Por otra parte, en 2020 entramos en contacto con el diseño neumórfico, el cual llamó rápidamente nuestra atención.
El diseño neumórfico parte del principio de crear una ilusión en la que los elementos parecen surgir desde debajo del background. Clic para tuitear
Esto se logra con el uso de doble sombra (una sombra blanca y una oscura opuesta) y en el uso del mismo color en el fondo y en el elemento.
Se logran efectos como si el mismísimo fondo se elevara o se hundiera, creando los elementos de nuestra web. Puedes ver en el menú lateral en la versión desktop como se hunde el ítem que indica la página donde estamos actualmente.
Quisimos darle a nuestra web este tipo de diseño, pero había un gran reto que había que superar.
Se trata que el diseño neumórfico trabaja con bajo contraste entre los elementos y su entorno, lo que resulta contraproducente con respecto a los “llamados a la acción” o CTAs, siendo los más importantes los botones u otro elemento que realice una acción que queremos que el visitante realice.
De hecho, este hecho es el talón de Aquiles del diseño neumórfico.
La soluciones que encontramos fue a través del mismo diseño. Nos preguntamos: «¿Qué llama más la atención que un efecto de luz?». «¿ Y si podemos crear esa luz debajo del elemento en sí y hacerla rotar como un faro?»
Así nacieron nuestros botones-faro, los cuales creemos son imposibles de no notar.
Para cerrar
En conclusión, este proyecto fue el producto de un plan que agrupó aspectos importantes a la hora de rediseñar una web como lo son: fotografía, paleta de colores, tipografía, copy y composición de la web.
Todo dentro de nuestra tendencia minimalista que busca prescindir de lo superfluo.
El uso de tecnología CSS3 fue fundamental para dar el carácter único y el diseño orientado al visitante que creemos haber logrado en nuestra web.