Diseño web para mi marca personal

Proyecto:

Actualizaciones en este proyecto: Dado que he hecho algunos rediseños en la propuesta de branding que han afectado a la interfaz de esta página, algunos de los asuntos comentados en este proyecto no se corresponden actualmente con la realidad. No obstante, considero que el contenido sigue siendo relevante, por lo que te animo a leerlo de igual modo.

Cómo diseñé esta web

Uno de mis proyectos preferidos ha sido el diseño de esta web de marca personal en la que te encuentras ahora mismo navegando.

El reto era presentar una interfaz sencilla con una estructura básica y que fuera fácil de manejar. Por ello, gran parte del trabajo de planificación ha ido encaminado a simplificar la experiencia al máximo,  procurando eliminar ventanas, elementos y pasos intermedios.

Aquí va un pequeño resumen de los diferentes procesos de ideación, esquematicación, prototipado y ejecución real del proyecto.

Los componentes de la marca personal

Me gusta partir, siempre que puedo, con un acercamiento a los componentes básicos de la identidad visual de la marca, ya que es muy interesante desarrollar las propuestas con ellos en mente. A continuación, un rápido esbozo de los principios básicos de la identidad que tracé para mi marca y que tuve en cuenta para el posterior desarrollo de esta web.

Selección tipográfica.
Paleta básica.

En cuanto a los elementos iconográficos, siempre en favor de la sencillez pretendida, opté por la convivencia de ilustraciones lineales y emojis por su conexión directa con el lenguaje de la red.

Emojis y motivos lineales como propuesta iconográfica.

He diseñado este sitio de marca personal bajo la premisa de la sencillez y la sobriedad, con pocos elementos disruptivos y ahorrando pasos innecesarios.

Por último, también he tenido en cuenta a lo largo de todo el proyecto algunas directrices de los principios básicos de Material Design desarrolados por Google, especialmente en cuanto al uso de sombras, por su más que consolidado planteamiento visual y su limpia forma de entender la presencia de los elementos y sus relaciones con el entorno.

Exageración de la tridimensionalidad de las sombras según los principios de Material Design.

Mapa web

A continuación, un sencillo esqueleto de la estructura del sitio. Como podrás comprobar, el planteamiento general es muy sencillo, de acuerdo a los valores presentes desde el comienzo del mismo proyecto.

Mapa web del sitio con las rutas principales en azul y las alternativas en rojo. Siempre conviene dar al usuario la posibilidad de volver sobre sus pasos o enmendar sus acciones...

Esquemas y wireframes

Para planificar las secciones, desarrollé unos esquemas iniciales (con papel y lápiz, aunque he preparado versiones más pulidas para mostrarte en esta presentación) a modo de boceto como paso previo a la realización de prototipos más detallados.

Aquí algunos de los esquemas iniciales para esta página. Encarar estos bocetos a la manera tradicional, directamente en papel, me permite hacer y deshacer ideas de forma eficiente y ahorrando costes, tanto económicos como de tiempo.

Los wireframes (o esquemas más detallados) de esta página han sido creados posteriormente usando Adobe XD, cuya plasticidad agiliza bastante el trabajo. Así puedo comprobar directamente cómo funciona la interfaz con las visuales ya aplicadas.

Con este paso previo al desarrollo web en sí mismo, pongo a prueba en un entorno simulado los elementos de la identidad visual y compruebo la eficiencia de los esquemas planteados por cada pantalla.

A continuación presento, para los curiosos, la comparativa entre algunos de los esquemas y wireframes desarrollados para este proyecto web.

Esquema base para la "Home".
Wireframe detallado de la "Home" elaborado con Adobe XD.
Wireframe detallado de la sección "Conocimientos" elaborado con Adobe XD.
Esquema base para la sección "Conocimientos".
Esquema base para la sección de "Proyectos".
Wireframe detallado de la sección "Proyectos" elaborado con Adobe XD.

Desarrollo web y cierre

Tras comprobar la efectividad de la interfaz en los wireframes, toca por fin poner en acción todo lo aprendido en el sitio web real.

A fin de no ser redundante, te invito a que explores tú mismo esta página y compruebes algunos de los pequeños cambios que sin duda he tenido que hacer a la hora final del desarrollo, o incluso mucho más tarde (en función de en qué momento estés leyendo sobre este proyecto).

Recordemos que el diseño web está siempre vivo en una especie de fase beta constante, lo cual en realidad resulta de lo más excitante. ¿No te parece?

Pablo Bonnet <br> <span class="charge">Diseñador web & Creativo digital</span>

Pablo Bonnet
Diseñador web & Creativo digital

Dueño y señor de estas tierras. Quien gestiona el cotarro en este lugar.

Sobre mí

Contacta conmigo

Escríbeme para cualquier colaboración, proyecto u oferta. Generalmente tardo entre 1 ó 2 días en contestar.
También puedes encontrarme en estas redes sociales. Si te urge contarme algo, seguro que por aquí te leo antes:
¡Aviso! ¡Cookies!

Esta página web usa cookies para mejorar tu experiencia. Al seguir navegando aceptas su uso. Para enterarte de más, puedes leer la Política de Privacidad y Cookies.