Características de un sitio moderno de cartera
De todos los tipos de sitios web, el sitio de la cartera tiene que superar lo que podrían ser algunos de los obstáculos más difíciles. Habla con casi cualquier diseñador y ellos estarán de acuerdo, el lanzamiento de tu propio sitio de portafolio es un proceso doloroso. Con mayor frecuencia, este proceso incluye numerosas versiones y, muchas veces, un lanzamiento por pura frustración.
Lo bueno de esto en mi opinión es que el sitio de la cartera puede ser una ventana hacia el futuro del diseño web. Sugiero esto porque cuando un individuo diseña su propio sitio, solo está bajo limitaciones autoimpuestas. No hay un cliente que dicte las cosas, ningún comité que destruya el diseño ni un proceso de aprobación para arrastrar las cosas y destruir el impulso.
Pero no todos los sitios de cartera son creados iguales. A pesar de la gran cantidad de sitios de carteras de muestra disponibles, sorprendentemente hay pocos que se sienten distintos e interesantes de los que hablar. Sin embargo, son estos sitios los que elevan el nivel y exponen lo que el futuro podría significar para el diseño web.
Sumérgete en un gran conjunto de portfolios impresionantes y busca algunos elementos comunes que los hagan funcionar. Algunos de estos elementos exponen las tendencias generales de la industria, mientras que otros demuestran floreos de diseño simples y comunes. No todos tienen un gran significado, pero todos se suman a diseños fantásticos que te desafiarán a crear un sitio de cartera realmente extraordinario.
Contar una historia
Uno de los aspectos más interesantes de un sitio de cartera moderno es el esfuerzo por crear un entorno de narración de historias. La idea es crear un flujo de contenido que esencialmente controle la experiencia y el mensaje para el usuario. Este control crea un flujo de contenido en el orden deseado.
Muchos sitios intentan hacer este tipo de cosas colocando la navegación principal en un orden deseable. Pero estos sitios llevan el enfoque a un nivel completo de conocimiento y lo convierten en una parte inevitable de la experiencia.
Jan Ploch
El uso de un sitio de una sola página no es nada nuevo, y por su definición obliga al usuario a desplazarse hacia abajo en la página. Esto crea un flujo natural de contenido que se ha utilizado en innumerables ocasiones. Sin embargo, en este sitio, encontramos un enfoque poco utilizado con un fondo animado. A medida que se desplaza hacia abajo en la página, es como si la gaseosa en el fondo estuviera siendo absorbida por la paja.
Este elemento simple y decorativo hace algo realmente poderoso; lo alienta a recorrer todo el camino de la página. Esto es fundamentalmente un aspecto crítico del sitio de una sola página: garantizar que los usuarios lleguen al final de la historia. Y el final de la historia suele ser el punto de conversión del sitio (como lo es en este caso).
Tam Cai
El sitio de este individuo también muestra la página única, el modelo de narración de historias. Lo que me parece interesante de este sitio en particular es que la historia está terminada en dos efectos visuales poderosos, con toda la carne en el medio. El gran conjunto de ilustraciones en la parte superior de la página establece un estado de ánimo, demuestra la personalidad del artista y generalmente te invita a sumergirte en su mundo. La página se completa con las opciones de contacto (puntos de conversión) y una fotografía dramática de lo que supondríamos que es el creador.
Ciertamente no es un estilo para todos, pero cuando un enfoque temático se produce de una manera tan pulida como esta, los resultados pueden ser impresionantes. Y aunque es posible que el sitio no atraiga a todos los visitantes, atraerá a las personas adecuadas y ayudará al creador a establecer el tipo de conexiones que valorará.
MacMillan Lynch
Este ejemplo toma un enfoque diferente. La parte de la historia de este sitio es breve, y todo está contenido dentro del gráfico principal de la página de inicio. En este caso, la historia es bastante irrelevante, excepto que crea una sensación de misterio para comprender. Al aterrizar en el sitio me encontré preguntándome de qué diablos se trataba esta persona. A veces quieres alimentar con cuchara a tus visitantes; en otras ocasiones puede funcionar muy bien para absorberlos con una historia o misterio interesante. Esto también tiene la ventaja de crear un sitio bastante distinto y, con suerte, memorable.
Sallee Design
En el sitio de Sallee Design encontramos un enfoque más típico de la estructura del sitio. Logotipo en la parte superior izquierda, navegación principal en la parte superior y la presentación de diapositivas estándar de la página de inicio. En muchos sentidos, este es un sitio muy normal (con un hermoso diseño aplicado).
Sin embargo, lo que me pareció interesante fue que la presentación de diapositivas de la página de inicio no era solo una serie de imágenes Flash que giraba automáticamente. En cambio, la presentación de diapositivas se inicia por el usuario y comienza con una invitación para comenzar un recorrido. Una vez que te sumerjas, te llevarán a través de una serie de diapositivas que resumen lo que obtendrías si exploras las distintas páginas del sitio. Y todo se completa con puntos clave para el resto del sitio.
Creo que este enfoque es inteligente. Para empezar, es refrescante ver que un elemento como el control deslizante de la página de inicio tiene un propósito completamente planificado. También me encanta que obtengan el beneficio de un argumento de venta de una sola página, y el SEO adicional proporcionado al tener un mayor número de páginas.
Diseño de respuesta
El tema de diseño web adaptable es, por decir lo menos, un tema extremadamente candente. Por lo tanto, no debería ser una sorpresa encontrar que este enfoque se puede encontrar en las nuevas carteras que se están produciendo ahora. Sin obstáculos, estos individuos han adoptado la nueva técnica. Y no es de extrañar que los tres ejemplos aquí sean para sitios de cartera de desarrolladores front-end, exactamente el tipo de lugar en el que deberíamos esperar encontrar tal cosa.
Ryan Taylor
El sitio de Ryan sigue la fórmula estándar de una página para una cartera personal. Este enfoque funciona muy bien al integrar técnicas de respuesta en el sitio. Con solo una página para tener en cuenta, puede ser mucho más fácil probar y construir un sitio como este. Pero no pienses que es fácil. Se necesita un gran esfuerzo y planificación para crear un sitio limpio y hermoso que se transforme de esta manera.
Aaron Shekey
La siguiente es la cartera de Aaron Shekey. Este hermoso y pequeño sitio abarca muchas técnicas probadas y verdaderas para un sitio de cartera. Es semi-minimalista, tiene colores atenuados para permitir que las imágenes aparezcan, y tiene un diseño en gran parte basado en la tipografía. Como este sitio funciona maravillosamente y es extremadamente eficiente para mostrar el trabajo del artista. Pero con la ventaja adicional de un diseño receptivo, se garantiza que el sitio se verá bien en una amplia gama de dispositivos. Esto asegura que el usuario obtenga una experiencia positiva, sin la necesidad de acercarse o alejarse.
Andrew Cohen
Finalmente, en la categoría de respuesta, encontramos el sitio personal del desarrollador front-end Andrew Cohen. Al igual que los demás, tiene una estructura de página única con lo que yo llamaría un diseño impulsado por el fondo. De esta manera, el fondo puede cambiar y cambiar sin una gran necesidad de cambios estructurales. Esto hace que el sitio sea un candidato perfecto para la introducción de técnicas receptivas.
Diseños creativos
A veces, la mejor forma de impresionar es destacarse como único y diferente. Y qué mejor manera de lograr esto que con una estructura de diseño inusual que se burla de las normas y expectativas que todos tenemos. Hasta cierto punto, casi todos los ejemplos de esta colección demuestran este atributo en particular, pero he seleccionado este pequeño subconjunto para demostrarlo.
Y antes de sumergirme, quiero señalar que estos sitios no hacen uso de diseños creativos solo por el bien de la creatividad. Todavía son sitios funcionales que son extremadamente claros y fáciles de usar. Sin embargo, tienen sus propias personalidades distintas que les permiten destacarse. Esto se relaciona exactamente con lo que debería hacer un sitio de cartera: ayudar a su creador a destacarse de la multitud.
Krichevtsova Alexandra
Lo que realmente me gusta de este ejemplo para el tema de diseños creativos es que no es un diseño radicalmente diferente. Sí, el sitio no sigue el logotipo normal en la esquina superior izquierda, navegación a través del enfoque superior. El diseño está a solo unos pocos pasos de allí. Creo que esto demuestra el punto extremadamente bien.
El objetivo no es inventar un diseño por el hecho de ser creativo. Más bien, para ser creativo al diseñar la página para comunicar la información de la mejor manera posible. En este caso, el flujo creado por el diseño ligeramente atípico funciona maravillosamente.
David Desandro
En este caso, el diseño se siente completamente inusual. En cierto nivel, se siente incompleto y, al mismo tiempo, se siente completamente organizado y fácil de usar. Sin embargo, adéntrese en la cartera y en otras páginas y quedará impresionado con la diversidad que presenta este sitio. Definitivamente tiene un atractivo para los creativos, pero con una mentalidad técnica.
Deidre Bain
Este sitio de desplazamiento de una página también rompe las normas de la estructura del diseño. En esta muestra, casi todo el diseño se basa en diseños e ilustraciones específicos de la página. Por lo general, este es un enfoque que no funciona bien y genera problemas de mantenimiento. Pero en el caso de un sitio de cartera personal, en realidad es una gran manera de demostrar algunas habilidades útiles. Más particularmente hay minuciosidad en el sitio que lo hace esperar que este diseñador sea del tipo que sigue con las cosas. Es este tipo de mensajes sutiles que pueden ser extremadamente poderosos para comunicarse en su propio sitio de portafolio.
Siddharth Arun
En la primera toma, este sitio tiene la sensación de uno que sigue el protocolo estándar. Pero interactúa un poco con el sitio y se siente totalmente único. A veces, idear tu propio giro creativo no significa que tengas que reinventar todo. Simplemente cambie lo suficiente como para que los resultados sean sorprendentes (y funcionales).
Texto en negrita
Como observé las miniaturas de los sitios recopilados para mostrar aquí, una cosa realmente se destacó: el uso de texto extremadamente grande y audaz. Todos los ejemplos enumerados a continuación presentan texto enorme que se destaca en el sitio. La razón principal por la que se me ocurre este enfoque es la claridad.
Este gran texto en negrita garantiza que se comunique al menos un mensaje principal. En algunos casos, se siente más funcional que otros, pero al final el resultado es siempre el mismo. La atención del usuario está casi garantizada para ser dirigida a esta copia de gran tamaño. Observe las muestras y tome nota de las diversas formas en que las creatividades han puesto en funcionamiento este elemento.
Garth Humphrey
Justin Burns
Amman, Jordania
Ross Angus
Alex Pierce
Recortar en la parte superior
Como mencioné anteriormente, algunos de los patrones son mucho menos funcionales y significativos que otros. En este caso, casi me siento mal al colocar las siguientes muestras en un conjunto tan frívolo. Los sitios presentados a continuación son absolutamente hermosos; por favor, no tome esta clasificación como ningún tipo de insulto en absoluto. De hecho, dos de mis sitios favoritos de este artículo se encuentran aquí.
Básicamente, el patrón es que aparece una especie de banda decorativa, una línea continua o un patrón en zigzag en la parte superior. Limité este conjunto a tres sitios, pero si analiza algunos de los otros ejemplos, encontrará el mismo elemento en funcionamiento.
¿Por qué es tan pequeño un detalle tan pequeño? Tal vez con el enfoque de una sola página es bueno denotar la parte superior de la página. De esta forma, los usuarios obtienen una pequeña señal visual de dónde comienza la página.
Mathieu White
Touch Nerds
Danilo Giagnoli
Textura, textura, textura
Otro detalle visual que es extremadamente común en los sitios de cartera es la textura. Esto es especialmente cierto cuando se trata de elementos de fondo. Parte del estilo visual actual incorpora texturas sutiles en el fondo.
Encuentro que este elemento hace un gran trabajo al incorporar un poco de un elemento orgánico en la página que ayuda a eliminarlo de sus fundamentos técnicos. Este elemento simple puede agregar un toque cálido que de alguna manera respira muchísima vida en un diseño. De nuevo, explore muchas de las muestras cubiertas anteriormente y encontrará numerosos ejemplos de este elemento en funcionamiento. Aquí hay algunas muestras que hacen esto extremadamente bien.
Bjarke Clauson-Kaas
Aaron Lumsden
DS Higdon
Andrew Ckor
Sitios de portafolio adicionales dignos de mención
Hay innumerables candidatos para este tipo de colección. Es tentador incluir casi demasiadas muestras en este caso. En cambio, me he centrado en una colección adicional de sitios que presentan una amplia gama de estilos, estructuras y enfoques generales.
Una cosa que notará es que algunos de estos sitios no son para diseñadores. Me pareció muy interesante ver cómo otras industrias han usado la web para vender a un individuo. Después de todo, un sitio de cartera tiene la intención de hacer exactamente eso. Entonces, por el bien de la inspiración y las ideas nuevas, he incluido algunas fuera de la comunidad de diseño web.
Collin Henderson
Josh Miller
Nate Croft
Torsten Meb
Joey Rabbitt
Eric Salvail
Bekka Reese
Felix Menard
Marija Zaric
Tobias Persson
Jake Dahn
Conclusión
Crear un sitio para representarlo en línea no es una tarea fácil. Con suerte, los sitios recopilados aquí te inspirarán y desafiarán.
Algunos de los elementos presentados aquí representan mecanismos muy intencionales para controlar la experiencia del usuario y vender el individuo. Otros demuestran tendencias de diseño más o menos visuales. Creo que ninguno de los dos debe ser ignorado, y ninguno de los dos debe controlar las cosas por sí solo. Es desafiando las normas, adoptando patrones funcionales y evaluando su imagen en línea bajo una nueva luz que puede llevar a ideas revolucionarias que lo ayudan a sobresalir.
Y con respecto al tema de destacar, me siento obligado a recordar a la gente que el objetivo aquí no es inventar la interfaz más original. En cambio, el objetivo es pensar creativamente dentro de las limitaciones que tenemos.
Fuera de esto, siempre espero que encontremos soluciones creativas que nos ayuden a destacar con resultados increíblemente funcionales. Si miras las muestras recolectadas aquí, no solo son hermosas, sino que funcionan sorprendentemente bien.
¿Cuáles son algunos de los mejores sitios de cartera que has visto? ¿Alguna otra tendencia que hayas notado recientemente en las carteras de diseñadores? Háganos saber en los comentarios!