Proceso de rediseño de OscarViedma.com

A finales del 2017 me entró la inquietud de rediseñar mi sitio después de aproximadamente un año y medio de su lanzamiento (19 de abril del 2016) . Por cargas de trabajo (y vacaciones 😎) este proceso fue lento.

El rediseño lo empecé en octubre 2017 e hice su lanzamiento el 26 de febrero del 2018, si hacemos cuentas (difíciles cuentas) el rediseño duró aproximadamente 5 meses. 😖

En este artículo quiero compartir contigo parte del proceso (objetivos, tecnologías y herramientas) que realicé durante cinco meses para llegar a este resultado.

Por qué el rediseño

Cómo menciono arriba, mi sitio llevaba prácticamente año y medio siendo el mismo, sentía que era un sitio que no transmitía la esencia de lo que quería y quiero lograr como diseñador; mis servicios estaban mal definidos, tenía un portafolio obsoleto dónde solamente mostraba una imagen del trabajo realizado que no te decía nada. Si bien, era un sitio muy llamativo por la gama de colores que utilizaba ya no reflejaba lo que yo como diseñador quería transmitir.

En su momento el diseño de mi sitio anterior funcionó, porque antes era un diseñador todo terreno y era lo que trasmitía mi sitio, con esa paleta de colores primarios (rojo, azul, amarillo) me identificaba más como un diseñador gráfico que hacía casi de todo y por consiguiente me llegaban trabajos que no disfrutaba.

Pero llegó el momento del cambio y fue así como empecé con el nuevo diseño de mi sitio web.

Definiendo objetivos

Lo primero que tuve que hacer después de plantearme el rediseño de mi sitio fue definir los objetivos, a continuación te enlisto los objetivos planteados de mi nuevo sitio y la solución que le di a estos.

1. Definir y actualizar mis servicios.

Necesitaba enfocarme solamente en un área de diseño para atraer clientes y proyectos con los que en verdad me sintiera a gusto trabajar. Por lo tanto después de ser una “navaja suiza” decidí únicamente brindar los dos servicios que más me apasionan: Diseño y desarrollo web, y como segundo servicio diseño de identidad visual. Probablemente estos dos servicios no son parte de la misma área, pero déjame decirte que si están relacionados ya que muchas veces el cliente que necesita un sitio web aún no tiene definida su identidad visual y es ahí dónde entra mi segundo servicio porque antes de un sitio web debe estar una identidad.

También brindar dos servicios me sirve como punto diferenciador de otros diseñadores simplemente porque hay diseñadores que no saben desarrollar sitios web y hay desarrolladores que no saben diseñar y yo soy una mezcla de ambos 😎. Está bien, tienes razón sé que hay miles como yo, pero para diferenciarme de ellos tengo que dar siempre el plus. 💪

Lo recomendable pudiera ser «hiperespecializarme» en este mundo tan competitivo, por ejemplo; en lugar de solamente ser un diseñador web general puedo ser un diseñador web para psicólogos autónomos. O bien, puedo dejar a un lado mis servicios de diseño de identidad visual y diseño web para enfocarme en ser solamente un diseñador de interfaces web.

Por ahora seguiré brindando estos dos servicios y probablemente en un futuro me especialice aún más o hiperespecialice.

2. Atraer buenos proyectos y mejores clientes.

Anteriormente me llegaba cada proyecto que lo único que conseguía era estresarme, proyectos que no disfrutaba, clientes que eran tóxicos, que creen que por pagarnos tienen el derecho de tratarte como se les da la gana. Pero esto está empezando a cambiar y eso es realmente genial 😁.

Atraer buenos clientes y buenos proyectos va de la mano de los servicios que ofreces y por supuesto que disfrutas hacer, como los mencionados anteriormente. Ahora cuando entra un posible cliente a mi sitio web se da cuenta que solamente ofrezco dos servicios: Diseño de identidad visual y diseño y desarrollo web. Se da cuenta que no ofrezco por ejemplo el diseño solamente de una tarjeta de presentación, o únicamente el diseño de un logo, conmigo es la identidad visual o nada, ya que el logo por si solo no sirve de mucho (lo hago por el bien de mi cliente 😇).

Podrás pensar que estoy dejando escapar clientes, pero créeme que no es así, al contrario, sólo atraigo a los que en realidad necesitan de mis servicios y a los que en verdad valoran mi trabajo.

3. Transmitir ser un diseñador digital remoto.

Yo quería (o quiero) ser visto como un diseñador digital y web, qué su oficina se encuentra en internet y que desde aquí puedo trabajar para clientes de cualquier parte del mundo. Es principalmente por esta razón que decidí hacer un cambio tan drástico de los colores de mi web.

Anteriormente predominaba el rojo, azul y amarillo con una tonalidad flat, eran colores llamativos que hacían que mi web anterior se viera muy bonita, pero estos colores están más asociados al diseño tradicional que al digital y yo ya no quería ser visto como un diseñador gráfico tradicional.

Por lo tanto lo mejor fue definir una nueva paleta de colores asociada al mundo digital. Tomé la decisión de usar solamente dos colores (azul y verde) y estos unificarlos creando un degradado (pasa el cursor aquí). Con estos colores considero que mi web ya está más asociada a lo digital que a lo tradicional.

Otra forma de transmitir que soy un diseñador digital remoto era simplemente diciéndolo, y es algo que hago en los textos de mi web, de hecho al entrar a mi web lo primero que ves es quién soy y qué hago, junto con la llamada de acción (botón con degradado azul y verde).

4. Mostrar un portafolio más profesional.

La llamada de acción principal de mi sitio mencionada acá arriba ☝ nos dirige a los últimos trabajos que he realizado. Esto quiere decir que es la acción principal que deseo realicen los visitantes de mi web, ese grado de importancia le estoy dando al portafolio en mi web.

Anteriormente la acción principal era el listado de mis servicios, pero con este nuevo diseño he cambiado mi enfoque, la decisión nace porque me di cuenta que lo primero que siempre me pedía un potencial cliente era mi portafolio.

La llamada de acción puede variar dependiendo tus objetivos, hay diseñadores que sólo quieren hacer crecer su lista de suscriptores, otros quieren venderte sus servicios, otros más le dan prioridad a su blog, etcétera, por lo tanto cada proyecto es diferente. En mi caso tengo usuarios que entran a buscar un servicio, otros quieren saber un poco más de mí y otros más como tú que sólo entran a leer mi blog, yo decidí darle prioridad a mis trabajos.

En mi sitio predomina el espacio en blanco, está decisión es para que el usuario enfoque su atención en los proyectos del portafolio. En cada proyecto narro un caso de estudio dónde hablo sobre el cliente, sobre el proyecto y voy describiendo cómo lo realicé acompañado de imágenes para hacer un portafolio visualmente atractivo. Con esto mi potencial cliente, aparte de ver imágenes bonitas, sabe qué es lo que hago y cómo afronto cada proyecto.

5. Mantener actualizado el blog.

Uno de los objetivos que me planteé en este nuevo rediseño fue que ahora si debería ir en serio con mi blog ya que antes de esta entrada siempre habían estado dos y nunca me había dado un tiempo para escribir más.

Este objetivo apenas lo voy a empezar a cumplir, la verdad me ha costado mucho porque soy una persona que le cuesta escribir como puedes darte cuenta en este post, pero créeme estoy haciendo mi mayor esfuerzo para empezar a publicar periódicamente una entrada nueva. Así que te invito a suscribirte para que no te pierdas las próximas, te prometo que con el tiempo iré mejorando. 🤓

Eso si, puse mi mayor esfuerzo en el diseño del blog, cómo puedes ver este no es el típico blog que tienen la mayoría de los sitios en internet, este diseño es único y pensado especialmente para los lectores. Sinceramente es de las secciones de mi página que más me gustaron, es una pena que lo haya estado desperdiciando, pero eso ya no será así, hoy estoy feliz porque he dado el primer paso. 👊

6. Hacer crecer mi lista de suscriptores.

Aumentar mi lista de suscriptores es una de las tareas que voy a ir cumpliendo conforme comparta información de valor en el blog.

Por ahora sólo tengo dos formularios en el blog dónde invito a mis lectores a ser parte de mi lista. Estoy consciente que este es un trabajo de mucha dedicación, por tal motivo, a partir del día de esta publicación ya no pienso dejar de escribir.

Siendo honesto mi lista de suscriptores sólo la quiero para enviarles información de valor (procesos, herramientas e ideas sobre diseño, web y trabajo remoto) qué considero les puede ser de gran ayuda.

En un blog por lo regular le hablas a tu cliente ideal, en mi caso no es así, el blog es para compartir mis conocimientos y experiencias con diseñadores que quieran aprender un poco sobre diseño, web y trabajo remoto.

7. Tener un sitio con una estética limpia, sencilla pero elegante, un sitio amigable, predecible y fácil de navegar.

Cómo puedes notar en todo mi sitio sólo tengo acentos de color para resaltar lo más importante, esos detalles hacen que se vea mas agradable el sitio debido a que no está saturado de color. También sólo uso una tipografía de una tonalidad (#212121) en todo el sitio, con sus respectivos estilos y tamaños para jerarquizar secciones. El sitio cuenta con sutiles animaciones para que la experiencia del usuario sea más amigable.

Decidí que mi sitio fuera limpio, que predominará la llamada de acción con dirección al portafolio.

En la página de inicio deberían saber rápidamente quién soy, qué soy, qué hago y cómo lo hago. Posteriormente si quieren saber más de mí pueden explorar la página de acerca, dónde describo más a detalle los puntos mencionados anteriormente y conocerán un poco más sobre mí cómo persona.

Tengo una página dedicada a los servicios, así mismo, me pareció importante mostrar más detalles de cada servicio; dónde describo mi proceso de trabajo, los beneficios y el cómo trabajo con mis clientes para que no tengan ninguna duda de cómo colaboraremos, esto me hace ver profesional y destacarme sobre los demás diseñadores. En cada página de detalle de los servicios finalizo con una llamada a la acción para solicitar una cotización sin compromiso.

Mi sitio se ve excelente en dispositivos móviles, es amigable con todos los navegadores y carga rápido incluso con una conexión lenta.

Tecnologías y herramientas usadas

Papel (ideas y más ideas)

Si bien me considero un diseñador digital no quiere decir que me haya olvidado del papel y el lápiz.

El papel es una herramienta super útil para empezar a escribir las primeras ideas de cada proyecto, de hecho al realizar esta entrada tuve que planear la estructura en papel. Pasa lo mismo cuando inicio un proyecto, en papel hago una lluvia de ideas de cómo creo yo puedo ayudar a mi cliente. Utilizo hojas blancas y una pequeña libreta dónde encontraras puros rayones que yo solo puedo entender (a veces ni yo 🤪).

Lo primero que realicé para este rediseño fue empezar la planeación de mi nuevo sitio en mi pequeña libreta. En la planeación hice un análisis de contenidos, donde definí y clasifiqué los contenidos de la web para posteriormente crear un mapa de sitio con los contenidos ya jerarquizados. Cuando trabajo con clientes esto suelo pasarlo a un documento en Google Docs, para enviárselo a mi cliente, en este caso era mi propio sitio así que no hizo falta.

Continué con unos bocetos básicos en hojas blancas dónde ya empezaba a definir la estructura de la web (páginas, secciones, funcionalidad). A estos bocetos se les conoce como wireframes de baja fidelidad. Teniendo más o menos definida mi idea llegó el momento de pasarme a la computadora.

Sketch (wireframes + interfaces)

En lo personal me encanta trabajar con Sketch. Es una aplicación que se enfoca en la creación de interfaces y prototipos web y móviles. Tiene un interfaz intuitiva, rápida y es demasiado fácil de aprender.

Lo primero que realicé en esta herramienta fue definir bien los wireframes de baja fidelidad creados anteriormente en hojas blancas. En sketch dichos wireframes pasaron de baja a alta fidelidad.

Una vez definidos los wireframes de todas las páginas de mi sitio llegó el momento de empezar a diseñar las interfaces web y móviles.

Foundation Zurb (desarrollo front-end)

Después de finalizar las interfaces de mi sitio, llegó el momento de empezar a pasar esas imágenes estáticas a código.

El desarrollo front-end (HTML, CSS y JavaScript) de mi sitio lo realicé con un framework llamado Foundation Zurb, para mí es el framework más avanzado del mundo.

Hay varias formas de instalar foundation for sites, a mí en lo personal me gusta trabajar con la consola de la computadora e iniciar un proyecto con Template Zurb (es la forma más avanzada) que incluye: Procesamiento Sass, procesamiento JavaScript, creación de plantillas handlebars, comprensión de imágenes, etcétera. Estas son cuestiones más técnicas así que mejor no me adentro mucho, mejor te dejo el enlace por si quieres conocer más sobre este framework.

También me he apoyado de otras librerías JavaScript; para hacer las animaciones de mi sitio use Wow.js, para hacer el efecto de zoom en las imágenes me he apoyado de Medium-Zoom.js y para crear el efecto de texto en la página principal de mi sitio he utilizado Typer.js. Todas estás librerías son compatibles con foundation y no ha sido nada complicado integrarlas.

WordPress (desarrollo back-end)

Con el frontend realizado llegó el momento de desarrollar el backend, la parte más tediosa (al menos para mí) de un sitio web.

Si yo hubiera querido ya podía subir mi sitio a internet únicamente con el frontend realizado, sin embargo, solamente iba a ser un sitio estático, con estático me refiero a que para actualizar una página, subir un artículo o editar un proyecto tendría que hacerlo todo con código y esto a la larga iba a ser muy tedioso y cansado. Pero es justamente aquí dónde entra la magia de WordPress.

WordPress.org es un gestor de contenidos que funciona con temas o plantillas, desde el panel de WordPress puedes actualizar, editar o borrar el contenido de tu sitio siempre y cuándo así lo hayas programado. Cabe decir que hay miles de plantillas para este gestor de contenidos tanto de pago como gratuitas, en lo personal prefiero desarrollar mis propios temas y con mi sitio no fue la excepción.

Hay diseñadores web que prefieren hacer el frontend y el backend con WordPress al mismo tiempo. Yo prefiero primero realizar el frontend para posteriormente convertirlo en tema de WordPress.

Lo primero que hice fue crear un servidor local en mi computadora, este paso anteriormente lo realizaba con MAMP, pero todo cambio desde que conocí Local By Flywheel. Con Local es demasiado fácil crear un entorno de desarrollo ya que es un aplicación que se enfoca especialmente en WordPress y basta con un par de clicks para tener tu servidor local con las características de un hosting real en tu computadora.

Convertir el frontend de mi sitio en tema de WordPress me llevó aproximadamente una semana, en esta etapa tuve que escribir código PHP, no necesitas ser un gurú en PHP para crear tus propios temas pero si es necesario entender al menos lo básico y sobre todo entender el codex de WordPress.

Una vez finalizado mi sitio llegó el momento de pasarlo de mi computadora a un hosting y dominio real. Aquí puedes ver un video dónde explico cómo migrar tu WordPress de Local a un hosting real.

Se me estaba olvidando mencionarte que el editor de código que he utilizado para el desarrollo tanto frontend como backend de mi sitio ha sido Visual Studio Code que junto a Sublime Text son mis favoritos.

Banahosting (hospedaje de mi sitio)

El hosting en el que siempre he confiado y que recomiendo a cada uno de mis clientes es sin duda Banahosting.

De las características que más me gustan de banahosting es que tiene servidores LiteSpeed, este tipo de servidores son mucho más rápidos que los que tiene la mayoría de hospedajes en internet (apache, nginx). Y esto sin duda es muy importante para que tengas un sitio rápido, seguro y estable.

Otra cosa que me fascina de esta compañía es el servicio a cliente, tienen soporte en inglés y en español y están disponibles las 24 horas del día.

El único “pero” que muchos le pueden poner es que sus precios están en dólares, pero la verdad son precios muy competitivos incluso bajos comparado con otras compañías que no te ofrecen servidores tan buenos como banahosting. A demás banahosting te respeta el mismo precio, es decir, no hace como otras compañías que te hacen un descuento el primer año (es un gancho, ¡cuidado!) pero al segundo ya te están cobrando mucho más. Y por si fuera poco Banahosting te ofrece gratis el certificado SSL (es el segurito verde que puedes ver al inicio de la dirección url de mi sitio), esto último es muy importante porque ahora todos los sitios deben contar con este certificado de lo contrario los navegadores marcaran tu sitio como no seguro.

Después de subir mi sitio instalé algunos complementos de WordPress para tener un sitio más seguro, mejor optimizado y más rápido.

El tiempo de carga de mi sitio es de menos de un segundo. Este es el resultado de un buen hosting, un código limpio y una excelente optimización.

Resultado hasta la fecha

Del lanzamiento de mi sitio (26/02/18) a la fecha he tenido comentarios muy positivos de parte de amigos, familiares, clientes, pero sobre todo de expertos y esto me deja tranquilo. Estoy seguro que aún puede haber detalles por corregir, pero estos cambios los iré realizando conforme los detecte.

Otra cosa maravillosa que me ha sucedido después del rediseño ha sido que me han llegado mejores clientes con mejores proyectos y por supuesto con mejores presupuestos.

—

Genial, esto ha sido el proceso del rediseño de mi sitio, lo sé, es un “poco” extenso pero creo que valió la pena. Espero puedas sacar cosas positivas de este artículo, por otra parte, me encantaría leerte en los comentarios y si encuentras algún error en el sitio me lo hagas saber para corregirlo lo antes posible, recuerda que el feedback también es parte del proceso.

Gracias por llegar hasta aquí, un abrazo 🤗
@OscarViedmaWeb