advertisement
advertisement

7 Design Portfolios That Double As Awesome UIs

Well-designed or distracting? These portfolios are bound to spark debate.

7 Design Portfolios That Double As Awesome UIs
[Screenshot: narrowdesign.com]

It goes without saying that having a professional website is a necessity for anyone in a creative field. But for designers, an online portfolio isn’t just an opportunity to showcase your past work–it’s also a way to show off your skills. Whether you’re a graphic designer or UX designer, you don’t want to miss out on a chance to impress a future boss or client when they come to your website.

advertisement

But how do you stand out from the crowd? Some designers and artists opt for interactivity on their websites, making 2017 something of a golden age for wild concept portfolios–what some might call gimmicks. Others prefer something clean and simple that shows off their work without getting in the way too much. After I asked for examples of cool and clever portfolio design on Twitter, the graphic designer Kara Gordon wrote, “I’m not gonna lie, I usually hate ‘cool’ and ‘clever’ websites. I just want to see the damn work.”

Love ’em or hate ’em, here are some of the most striking portfolio designs out there.

[Screenshot: narrowdesign.com]

The Fibonacci Spiral Scroll

When you first pull up the freelance designer Nick Jones’s personal website, it looks fairly normal: a subtle gray pattern background, with his name in bold up top. But as you begin to scroll, the web page literally rotates to the left. You realize that the site is composed of tiles that form a spiral, which you can descend and ascend by scrolling. The scroll follows the golden ratio, zooming in and out based on the Fibonacci spiral.

When Jones first announced the new website, it went viral on Twitter, inciting plenty of debate. Of course, it is a bit disorienting, especially since we’re all so used to our content fitting quite neatly into boxes that move in expected ways as we scroll. Apparently, the design even gave some people vertigo (and offended others), so Jones now offers a more “accessible” version.

[Screenshot: carlyayres.com]

The Google Doc As Website

Many of us use Google Docs to manage our work. So why not just use one as your portfolio site as well? That’s what the designer Carly Ayres did, listing her job, contact information, and past and current projects in a simple doc. The default mode for the doc is set to “suggesting,” meaning that while Ayres maintains control over the document, visitors are free to add comments directly. The right column of the site, where Google Docs’ comments usually lie, is filled with people enthusiastically taking her up on that offer–usually by endorsing her work in some way.

[Screenshot: hawraf.com]

Drawing You In

The design firm HAWRAF, at which Ayres is a partner, also has a very cool website. The best part? Your cursor becomes a pencil when you visit it, allowing you to actually annotate the website as you go (though unlike Ayres’s Google Doc, your scribbles don’t remain after you leave).

advertisement

But as you doodle your way through the site, your pen helps you discover other subtle interactive elements. For instance, there’s a box where you can use your mouse to sketch something you want to work on and send it to the firm. Drawing becomes a handy interface element that encourages people to really explore the firm’s site.

[Screenshot: shantellmartin.art]

Animations That Add Character

The artist Shantell Martin’s personal portfolio site features an image of her laying down across an interactive backdrop of line drawings. As you move your mouse around, the drawings come to life. Hover over the “Work” button and the letters wiggle, almost like they’re dancing. As you scroll further down, you see her with a pen in her hand–the dancing drawings are all her work, an interactive representation of who she is as an artist.

[Screenshot: melaniedaveid.com]

Accent Color Magic

Melanie DaVeid’s website is a striking visual statement about her creativity as a UX designer. You’re first greeted by an animated, personalized logo of her name atop a black hand with quick navigational links below it. If you’re a more leisurely visitor, subtle but cohesive interface elements start to emerge–particularly the brilliant coral color and the hexagon that begins to make appearances throughout the site. When you do reach the end, you’re greeted with a message: “High Five,” in a similar style to her personal logo. The site is a great example of a designer creating a cohesive language of interface elements to help you explore her approach to design.

[Screenshot: jeremyvitte.com]

Bringing The Physical World Online

What about online portfolios that need to creatively highlight work that’s mainly printed? Art director and graphic designer Jérémy Vitté has a clever solution. His site makes use of scrolling to display his rich portfolio of magazine covers and spreads. But there are no clean lines here–the images move organically up the page as you scroll, as though Vitte has tossed them onto a coffee table for your perusal. The white backdrop feels almost physical, giving the website’s viewer a more tangible grasp of Vitté’s print work.

[Screenshot: timobecker.com]

Connect The Dots

Perhaps the most delightful of these portfolio sites comes from the illustrator Timo Becker. The front page of his personal portfolio site consists simply of a white page with seven strategically placed dots near its center. If you hover your mouse over them, you can connect them in any pattern you desire. Once they’re all connected, an animation starts, transforming the pattern into an adorable illustration. One pattern turns into a large man with a striped shirt and stick figure arms; another becomes a smiling, hunched figure with a cane; a third becomes a child bending over to pick a flower.

Whether you think these interactive portfolios act as proof of their author’s creativity or you find them distracting, they’re undeniably eye-catching. And in the vastness of the internet, sometimes daring pays off.

About the author

Katharine Schwab is a contributing writer at Co.Design based in New York who covers technology, design, and culture.

More