12 Inspirational Web Designer and Developer Portfolios
The worlds of web design and development are complex and competitive. Creatives are continuously striving to challenge themselves, push the boundaries in their field of expertise, and stand out in the digital landscape. While the number of both web developers and designers is tremendous, the inventiveness of some of them is on a whole new level. These experts fearlessly experiment in their work, setting new trends with each new project. Their portfolios speak volumes of their creative genius and skillset, demonstrating an artist’s prowess and an ability to transcend common practices and to craft authentic works.
The creatives we will introduce to you include some of the biggest names in the web design and web development industries. They are currently among the most sought-after and awarded experts known for their awe-inspiring work. We will show you how they chose to present their portfolios to the world and discuss some of their projects we particularly enjoyed so that you can better understand what it is exactly that sets these artists apart from others. We will talk about:
Bruno Arizio is an award-winning designer and art director with over 12 years of experience in the industry. This February he joined Resn, a digital experience agency where he currently works as the Design Director. His clients list includes some pretty big names such as Adidas, Toyota, Gatorade, and Samsung.
Arizio has received numerous accolades for his work, including several “Site of the Day” recognitions from Awwwards, The FWA, CSS Design Awards, Typewolf, and many others. He serves as a juror at the Webby Awards – one of the most respected international awards for web design and development. He’s also a judge at Awwwards. In case you’re only just beginning your career as a designer, understanding how experienced jurors review websites might be of great help for your progress. Arizio participated in a discussion in which he and Jonas Lempa (another terrific designer) analyzed some websites and shared valuable knowledge and tips along the way. Make sure to watch Jury Website Reviews as you’re guaranteed to learn a lot from these two experts.
Arizio’s website is a beautiful example of his capability to make enthralling designs by skillfully combining simple elements and playing with geometric shapes. The loading animation consists of several straight vertical lines stretching from the top to the bottom of the screen. But as the site loads and the basic information about the studio starts to appear on the screen, the lines simultaneously begin to contract, settling in the middle of the screen. Their peacefulness is interrupted by large black circles chasing each other from one side of the page to the other, causing a commotion on the site. The use of horizontal scrolling, the heavy use of grid lines, and the main navigation displayed as a table of contents make this portfolio look like a magazine. You feel like you’re going through a special edition on Arizio’s creativity, filled with large typefaces and gorgeous project presentations. Hover effects and scroll-triggered animations are for the most part subtle, but he did weave in some surprising elements here and there, such as several sections with vertical navigation, breaking the sovereignty of the horizontal scroll and surprising the viewers. Arizio developed his website in collaboration with Romain Avalle, a highly-skilled freelance interactive developer.
As for the projects Arizio has worked on, we especially liked the portfolio site he devised for Garoa Skincare. He opted for subtle, warm hues and peppered the pages with numerous sun-kissed visuals to lure viewers into Garoa’s world of healthy, glowy skin. The hidden menu attractively slides onto the screen, with the content you were viewing moving slightly aside and making room for the menu links. Arizio combined vertical and horizontal navigation on the site and implemented interesting scroll-triggered animations to make browsing the content a real treat. At one point, as you hover over the names of Garoa’s essentials, preview images appear, following the movement of your cursor wherever you may place it on the screen. In some sections, Arizio skilfully entwined small images into the text, amplifying the meaning of the words.
Aristide Benoist is a freelance developer who specializes in motion and interaction. The projects he has worked on have won a number of awards on CSS Design Awards, Awwwards, and FWA. In 2017 alone he collected 38 awards from these three platforms. He was even the recipient of the Awwwards’ Independent of the Year award two times, in 2017 and 2019. He has developed websites for Bear Grylls, CRSA Architects, and countless events, designers, and artists.
Benoist’s new website has a somewhat cinematic appeal. The background is entirely black, with monochromatic, rectangular project showcases slowly assembling one next to the other on the right side of the screen. When you hover over them, the featured images gain color. As you begin to scroll, displayed works start to slide horizontally. Their smooth movement resembles an undulating ribbon. The faster you scroll, the more convex the ribbon becomes. The progress bar placed at the top of the page mirrors the movement of the “ribbon’’. To learn more about any of the featured projects, simply click on preview images. The selected preview photo then enlarges pushing the other works towards either side of the screen. The color of the background changes as well, matching the palette used on the project in question. Some basic information about the project also appears on the page along with the “Explore” button, inviting you to discover more details and view more imagery on single project pages. The layouts are beautifully structured and the displayed content is eye-appealing. The engrossing microinteractions used throughout the site demonstrate Benoist’s inspiring skillset and highlight the beauty of his terrific works.
One of his latest projects that commands attention is a website he developed for Paul & Henriette, a photographic duo based in Paris. As the site loads, colorful project previews appear in the viewport, dispersed all over the screen. On hover, their color inverts, making them look like negative shots. At the top of the screen, you can see numbers from one to three. “01” is the default photo arrangement you see once the site loads. “02” groups all images in one column on the left. When you hover over them, the rest of the screen fills up with an enlarged project preview. “03” reveals a list of Paul and Henriette’s clients. On hover, featured black-and-white images appear on the page, giving you a taste of what each project is like. Single project pages contain large, immersive photographs, very little copy, and a useful percentage number showing you how much of the project showcase you have seen. Benoist didn’t exaggerate with wild effects and graphics. Instead, he found three beautiful and fun ways in which viewers can get acquainted with Paul and Henriette’s work, letting their images do all the talking.
Zhenya Rynzhuk is an art director and a popular name in the world of visual design. She is also the co-founder of the Design Thinking School called Sochnik as well as an Awwwards design judge since 2018. In 2020, she was chosen as the winner of Awwwards’ Independent of the Year award. She has collaborated with ESPN, Allure, Huckleberry, and many other notable brands. She even worked on the Adobe XD Influencer kit and Adobe Editorial Kit.
On her website, Zhenya demonstrates an astounding mastery for creating exciting yet harmonious environments. She chose gorgeous visuals, selected perfect font combinations, and topped it all off with gripping animation effects. Moreover, she found a way to add a fun factor to her portfolio without distracting viewers from her work. She peppered a bunch of smiley faces throughout the site as well as some bold, rotating asterisks. The site is busting with scroll-triggered action, making the content all the more immersive.
Zhenya is one of the co-founders and the design director of Synchronized Studio. The website she designed for this full-service creative studio is just one of the numerous impressive projects from her extensive portfolio. The entire website is bustling with gorgeous animations and engrossing project showcases. Zhenya skillfully imbued the pages with some movement, starting from the news ticker section at the top of the screen where you can access the studio’s archive page. As you move the cursor over the black background, you will notice that the backdrop is actually a rustled black sheet that follows the movement of the mouse. The pointer also leaves a striking lime green trace behind, juxtaposing the black-and-white scenery. While this whole site is undoubtedly stunning, the archive page is particularly interesting to browse. It is designed as an infinite canvas that you can explore by dragging the mouse in any direction you want. Project previews are splayed all over its surface. As you press and hold a mouse button, the previews become blurry and wavy, but they go back to normal as soon as you release the mouse button.
Eric Van Holtz is a web developer who specializes in animated, responsive, and interactive content. Since 2013, his creativity and the authenticity of his projects have been continuously awarded by all major design platforms, including Awwwards, CSS Design Awards, and The FWA. He has worked for onXMaps, Icon Motosports, and many creative studios and agencies, such as Studio Mega, The Brigade, and many others.
Eric’s website provides an attractive overview of the projects he has worked on. The most striking page on the site is the homepage, with its distinctive fusion of bold, massive typography on a purple background. The letters are black, but on hover, they become outlined. Elsewhere on the site, Eric combined uppercase fonts with lowercase typefaces and stunning graphics, creating visually appealing content that fully immerses viewers into the story about the displayed projects. In some sections, especially those with huge bold fonts, he added somewhat rigid effects, enhancing the robust character of the typography.
As for the projects Eric devised for his clients, we really enjoyed the Decoded Advertising’s site. This project emanates slight brutalist vibes. Its pages are bursting with bright colors, movement, vibrant visuals, large typography, and textual content, but Eric found a way to blend it all in and make a cohesive and sensical system out of it. He played with vertical and horizontal navigation, added illustrations, videos, icons (e.g. of a magnifying glass, smiley face, etc.), creating an electrifying presentation of Decoded Advertising’s work.
Kenta Toshikura is a web designer and a front-end developer based in Tokyo. So far, he has won 12 awards from Awwwards, two FWAs, as well as several accolades from CSS Design Awards and Commarts. Some of the clients he has worked for include the DDD Hotel, Stone & Style, Aircord, and others.
The design of Kenta’s portfolio website is not something you see every day. The peculiar and sometimes abstract 3D project previews are paired with an omnipresent black color, making the site look enigmatic and exciting. Projects are displayed using the infinite loop effect, making the list seem never ending. Single project pages contain an enlarged version of the 3D project preview positioned at the center of the screen, surrounded by the name of that specific work. These 3D mystic elements are something Kenta is known for and you can spot them on pretty much all of his projects.
For instance, the website he made for the nightclub Drift includes several 3D features that are associated with the clubbing scene, such as headphones and hand horns. The atmosphere on the site is similar to that on Kenta’s portfolio, with predominantly dark hues used for the majority of the site’s elements. A surprising splash of bright green and yellow gradient occurs once you click on the fullscreen menu. Its vibrancy and ecstatic colors shake up the site’s otherwise tame and demure color palette. The content looks futuristic and mysterious, and that vibe is further amplified by intriguing visuals and electronic music in the background.
Marvin Schwaibold is interested in corporate, digital, and print design. He is currently employed as a senior designer at Squarespace, but he has previously worked with Netflix, Halsey, A24, Disney, and Amazon, to name a few. He’s gained recognition for his projects from Clio awards, FWA, CSS Design Awards, and Behance.
On his website, Marvin didn’t exactly go overboard with wild effects or graphics. Instead, like many other artists on the list, he managed to create a beautiful portfolio presentation by finding a way to attractively combine simple elements. The homepage is rich with visuals that subtly slide onto the screen, giving users an alluring overview of his creativity. Even though in some parts images slightly overlap, they almost look as if hanged in a gallery that’s hosting an exhibition of Marvin’s artistry. He used a calm beige hue for the background which allowed him to balance out the vibrancy of the colorful image previews. While the majority of the pages include vertical navigation, the design of the “All Work” page comes as a bit of a surprise compared to the rest of the site. This layout features horizontal navigation with vertically placed project names. When you hover over them, featured images appear on the screen while the backdrop color changes depending on the style of the visuals.
As for the work he did for his clients, we enjoyed browsing the VC Swipe website. This company matches investors with startups and Marvin thought of a way to present the brand’s mission in an engaging and fun fashion. Using some beautiful transition effects, he ensured the content appears on the screen in a stunning way, with lots of fullscreen imagery. There are also several background videos telling the story of what the selected project really is about and how it works. Marvin adorned pages with lots of colorful, animated 3D progress bars and charts, and their abstractness is what adds to the site’s slightly alternative vibe. One probably wouldn’t expect to see something like that on a site about an investor group, but it’s precisely this unusual way of showcasing standard elements that makes the project all the more appealing.
Freelance WordPress Themes
View Collection
Victor Work is a graphic designer, art director, and front end developer. He received many “Site of the Day” recognitions at Awwwards, FWA, CSS Design Awards, and Typewolf. He has also won several Developer awards and many others accolades that celebrate his inventiveness. Victor has worked for Adidas, Zara, and has helped many creatives share their art in a stunning way.
The first thing one notices on Victor’s website are the gigantic fonts and a lively color palette. As you discover his work and get to know more about him, the colors of the background and the displayed content change. The pronounced dynamicity of this one-pager makes it exciting to browse from top to the bottom. But if you like, you can settle on one of the several available color combinations and enjoy a more peaceful browsing experience (this option is available at the bottom of the page). While you scroll, photographs will appear to be slightly convex because of your movement down the page. But as soon as the movement stops, the lines become normal again.
One of the websites that best demonstrate Victor’s creativity is the website dedicated to Käthe Kollwitz’s art. The intriguing loading animation shows a bunch of animated swirly lines filling up the background as if someone were scribbling across the page. In the midst of all that mess, there is Käthe’s name seemingly written with chalk. As the site loads, the name becomes bolder. The website allows viewers to discover more about Käthe and her legacy by following a timeline. There is a lot of text with some accompanying images, but thanks to the cool scroll-triggered animations, transition effects, and varying font weights and sizes, the site is not dull for one second. For instance, each time you reach a new chapter in Käthe’s story, the color of the background changes. At the bottom of the page, there is even a “Let’s Draw” section. As you start making your own art, you will notice that the strokes are designed to match Käthe’s style.
Martin Ehrlich is an interactive art director and UX designer based in Prague. He has won recognition from all major design platforms multiple times and was nominated for Independent of the Year 2019 on Awwwards, where he also serves as a judge. Martin has worked with Google, Facebook, Adidas, and many other notable brands.
The black-and-white homepage on his website contains preview images placed in some sort of a digital spinning wheel that viewers control with their mouse. Each featured project includes a case study, so anyone who’s interested can take an in-depth look at Martin’s work. Transition and hover effects are particularly eye-catching. When you place the cursor on the “Explore Case Study” button, a colorful preview image appears on the screen, juxtaposing the darkness of the homepage. Upon clicking the button, the case study loads. The preview image then slightly shrinks but stays on the screen behind the name of the selected project, which is displayed over it. Every case study contains many large photos, enabling viewers to fully immerse themselves into Martin’s creative world.
His extensive portfolio includes a myriad of terrific projects but we’ve singled out the Young Creative’s website made in collaboration with studio Heed and Anoush Abrar. The site is designed as an infinite canvas filled with black-and-white photography. You can explore the gallery on scroll or by dragging the mouse in any direction you please. With each movement the scenery changes and even if you try to go back, you will not see the same photos as before. The site’s ephemeral character is its most astonishing feature and its enigmatic appeal is further enhanced by the dramatic music in the background.
Charlie Montagut is an art director and designer based in Paris. He’s worked on websites for Kenzo Story, Lacoste F/W Outerwear 2015, Chanel x Pharell, Google Play, Far Cry, and many others. He received several “Site of the Day” awards from the Awwwards platform, including the one for his own portfolio site.
Charlie’s website starts off with a fullscreen video preview of all the projects he has worked on, leaving a great first impression on viewers. The colorfulness of the intro clashes with the black, grey, and white color palette on the inner pages. On his “Projects” page, the typography is black. However, when you place your cursor on any project name, a preview image in full color appears, dyeing the names of other works in a dormant grey shade. At the same time, the letters that are partially covered by a picture become either transparent, black, or white, depending on the color of the visuals. The “About” page demonstrates Charlie’s astonishing capability to create exciting scenery just by making smart typography choices and organizing texts into easy-to-digest chunks and columns.
Charlie’s portfolio is nothing short of impressive, but we particularly liked the website he devised for L’Écurie. First off, he beautifully organized the content and made a distinction between the brand’s three identities – one is L’Écurie, a production company, the other is Cavalerie, a design roster, and the third is the Intersection magazine. Background colors change as you go from one site to the next, making thedistinction between the branches more pronounced. These three separate websites perfectly illustrate several creative ways of displaying visuals. From a metro gallery layout to the scrolling gallery that stops only when you hover on it, Charlie created unobtrusive yet alluring and inviting visuals that incite viewers to find out more about all of the L’Écurie’s identities.
Sofia Papadopoulou is a visual designer and creative director. She created several award-winning websites, including those for Plato and Dot Lung. Her own portfolio presentation has received praise from the design community and has won a number of awards. She’s been awarded by Awwwards, CSS Design Awards, Mindsparkle Mag, and EBGE Awards.
Sofia’s website resembles outer space. It looks dark and mysterious. In the background, there is a perfectly round planet with a smooth surface. However, as soon as you start to scroll, the shape of the planet distorts. The more you scroll down the page, the messier, larger, and the more abstract the form becomes. The only source of light on the site is the cursor shaped like a star. Wherever you may move it, it will light up the area you’ve placed it onto. The typography is mostly colored in a dark grey hue, complementing the site’s mystical vibe. Sofia combined regular fonts with italics as well as serifs and serifless types, creating playful typography pairings that are appealing to the viewer’s eye. As you reach the end of the page, you discover light that envelops the entire bottom section in white.
One of our favorite projects from Sofia is the website she made for Dot Lung. The layouts are filled with 3D geometric shapes such as pyramids and circles. The content is mostly colored in deep violet, bright orange, and white hues. The colorful interplay and stark contrast between these three shades steals the viewer’s attention from the get-go, fully immersing them into Dot’s story. Transitions from one page to the next are particularly fun – they are designed as two concentric circles that cover the entire screen before revealing the content.
Fabio Carretti is a creative web developer. He has devised many award-winning projects for brands such as Nike, Fendi, and Vogue. His love for mysticism, the dark arts, and metal music are more than obvious on his website.
The pages are imbued with a chaotic crimson, blood-like color that clashes with the neutrality of the black background. There are lots of mystical and abstract illustrations on the site. The site’s heavily pronounced occult character is beautifully complemented by the terrific typographic choices. The serif fonts only amplify the esoteric character of this unique portfolio that is sure to leave a strong impression on anyone who visits it.
As for the projects Fabio has worked on, we enjoyed Better Half’s website. This one-page project starts off with a playful interaction between typography and visuals. When you place the mouse on the agency’s name displayed at the top, the letters bend and move sideways, leaving room for an image. Each time you hover over the name a different photo appears. The site is rich with vibrant, often animated project previews, and their liveliness is balanced out with simpler typography. A particularly interesting section is the clients list – as you hover over the names, brand logos appear in the viewport.
Bruno Simon is a creative developer currently living in Paris. He has worked on the Three.Js Journey project, teaching users how to create websites with WebGL, and he has developed websites for Prior Holdings, Orano, Zenly, and Redbull. His immense creativity displayed on his portfolio website has secured him Developer of the Year 2019 and Site of the Year 2019 accolades on Awwwards (the latter was voted by the audience). He has also won the Website of the Year 2019 award on CSS Design Awards.
Bruno’s portfolio presentation exemplifies playable interactive websites at their finest. This fantastic project puts you in charge of a car that roams the virtual 3D surroundings, discovering details about Bruno and what he does along the way. You can hit and move almost everything you see on the screen, including Awwwards, FWA, and CSS Design icons. The interactivity of this site and its specific design put Bruno’s skills into the spotlight while making the whole project hard to forget.
The website Bruno created for Zenly is similar to his site in terms of concept and interactivity. This app lets you track the whereabouts of the contacts from your friends list in realtime. The site is designed like a colorful 3D adventure game that takes you through different scenarios showing you how useful Zenly is, especially if you’re on a festival, at the beach, or trying to quickly find some company for lunch.
Closing Words
Exploring the works of these web designers and developers has been a true artistic feast. Their portfolios and the websites they devised for clients demonstrate their immense talent and expertise. Analyzing these projects allowed us to understand a bit better how these creative geniuses operate and how immeasurable their contribution to the creative community truly is. They bravely mix and match seemingly incompatible features and are unafraid to break the seriousness of a site by adding fun illustrations, unusual icons, quirky animation effects and other unexpected elements to it. What they care about the most is staying true to themselves. And that honesty resonates with audiences.
We hope these examples showed you how far and wild you can go in your work. Even though you may think some combinations simply won’t work, try them out nonetheless. Be fearless when it comes to experimenting. A cute emoji or an abstract object here and there can be just the ingredient you’re looking for to give a project some character. You can add engaging audio and video elements where possible and make your project interactive to increase user engagement. The possibilities are endless. All that matters is that you create something that reflects who you truly are or who your client is. To do that in an appealing fashion, be bold and never stop playing and experimenting in your work.
