Intro
Suppose you have matured as a UX/UI designer and it is high time to create your own site that would reveal your genius to the broader world, mesmerize a potential employer, and make people say: “Wow... it is my love at first sight”. But the web is replete with a myriad of portfolio websites, so the great question is how to stand out, show your talent and uniqueness. Before starting, you would certainly like to get some inspiration and see what others do.
So to save your time and stimulate fresh thinking in this direction, we have chosen the 5 most creative designers' portfolio websites made in 2023. By calling something “top”, one pretends to bite off more than they can chew. The application of this term is always relative and context-specific, i.e. based on certain criteria. For instance, websites can be ranked as “top” based on visual aesthetics, trendiness, usability, originality, consistency with certain guidelines (e.g. material design), and so on and so forth.
In the case of our rating, we have tried to select the most creative and innovative sites that slightly challenge but do not disrupt the conventional approaches to creating portfolios. Fair warning, from the standpoint of a standard UX/UI design portfolio they may seem a little bit crazy and too much for being a reference point for most businesses. But originality is what matters in the realm of design along with keeping in line with established practices and design trends.
That is why sometimes it makes sense to take a look at something unconventional and offbeat for unleashing creative freedom and finding your own voice in the ocean of look-alikes coming unnoticed by most potential clients. Besides, the UX/UI of these sites is so innovative and interactive that you will definitely want to stay for a little journey on a high-speed train of curiosity.
Top 5 creative UX/UI designer portfolio websites and approaches in 2023
Applying unique symbolic central theme [muskat.com]
The website of a UX/UI designer Katharina Muske is a real piece of art, and it shows a significant investment of time, energy, and intelligence.
Source: https://www.muskatux.com/
First of all, don’t look at this screenshot and visit a website in the flesh. You will find this stone mind-blowing. Literally. And the more you are going to explore its elegant chambers, the more you are going to realize why.
The site is created as a non-linear, multi-dimensional space, and a visitor may choose one among several ways to explore it.
First, you may click on the round icon “Explore” in the upper right corner, and it will bring you directly to the main menu with a beautiful kaleidoscopic play of colors.
Source: https://www.muskatux.com/
Or, by hovering on a rotating stone, you may watch and enjoy quite a big show leading through labyrinths of transformations and revelations.
Source: https://www.muskatux.com/about
You have already noticed that a stone is a central visual and semantic symbol that unites and unifies both the structure and content of the entire website. It looks like stonemasonry serves as a metaphor for UI/UX design, bringing amazing meaningful parallels between the two domains. Every piece of copy elaborates on the symbol of a stone, and you will find most of them extremely wise and genuine.
Source: https://www.muskatux.com/about
This is very creative to use one thing as a common theme for a site. This gives a visitor a sense of an enlightening journey that they would like to continue. And what about visual aesthetics? A visitor gets stunned by high-level 3D models of rock blocks, their precision, clarity, and the depth of their textures. It is amazing how the author managed to make unsightly boulders look so appealing.
As it is impossible to explore every facet of a site in a short article, let’s focus on the most creative and offbeat UI design solutions in application to the sections of skills and design process – two very important things any designer should properly showcase on their site. The former is represented as a set of cards from a natural history museum, flashing as you hover on them.
Source: https://www.muskatux.com/about
For the latter, Muskat incorporates some popular visions of the Asteroid belt, with stones moving in concert around elliptical orbits or rotating around their own axes. On the site, how they appear and move with flawless animation effects within an immobile rectangle alluding to some kind of a telescope lens.
Source: https://www.muskatux.com/workflow
And all these special (and spatial) effects take place in the background of a gentle and pure earth color palette that is an undisputed match to the entire concept of a website. This UX portfolio is really worth further exploration, especially for people loving allusions to sci-fi and natural history, as well as narratives of eternal wisdom.
Leveraging imagination and creating a highly interactive space [luсalem.com]
This one is an acquired taste, and personal views of it may range from delight to dislike. But what matters is that nobody would remain indifferent and emotionally unaffected by Lucas De Melo.
Source: https://lucalem.com/
Like it or not, you are going to stay for a while and start examining his fantasy world with its own depths, planets, and weird creatures. And then... Gotcha! You get hooked and want to explore further.
Source: https://lucalem.com/
And here are a lot of cute things to explore.
To start with, a designer switches a visitor's attention from a normal “rational” representation to the realm of fantasy and imagination. Visit a website to see how you would land on an almost blank page with quite a commonplace tagline, and then gradually “unpack” this alternate cosmos where planets move, a flying saucer is coming from behind, and an eerie being in underwear peacefully sleeps amidst this splendor.
Note how much care and love are invested in making every spatial object sufficiently detailed. A pink cutie sitting in meditation seems to be the key character of this universe. Most probably, it is supposed to be some kind of an avatar conveying the mood and spirit of the designer's visual identity.
Source: https://lucalem.com/
If so, this is a truly amazing and unique form to represent the personality of a website owner, instead of a boring or standard “about” section with a photograph and a biographic memo.
Taking another step, we have an opportunity to ascertain graphic and motion design skills of Lucas. But you need to be a little investigative: the site encourages a visitor to interactivity. For instance, by hovering over a pictogram with a closed eye in the corner of every section, we can watch an animated scene of perfect quality.
Source: https://lucalem.com/
Scrolling further, and – what is it? In the section dedicated to UX/UI, we can drag and drop every object. These cards, buttons, taglines...
Source: https://lucalem.com/
This is not a site but an amusement park! It really claims to become an interactivity champion. By proceeding down the page, a visitor finds a pink alien appearing again. It is hard to see from the screenshot, but the professional quality and brilliance of animation for its third eye are remarkable.
Source: https://lucalem.com/
By reaching the end of the page, you find out that you never got to see the actual portfolio. Only if you are able to guess and press an unpretentious menu icon in the right upper corner, it will lead to case studies of Lucas' portfolio projects.
Source: https://lucalem.com/
It is questionable if this is a good idea to hide a portfolio that way. UX portfolio is about a designer’s work in the first place, so it would be wiser to make it more recognizable and easy to find for a user. In conclusion, let's click on any finished product just to figure out how it works.
Source: https://lucalem.com/
You see, when it comes to real business, fantasy stays behind: all the cases are grouped by category, and each one has a separate page with a textual description and a brief video recording. Nothing extra. That is smart.
Using high-quality transitions and motion effects [filsdegraphiste.fr]
“Parlez vous Français?"
Source: https://www.filsdegraphiste.fr/
France is a homeland of glamour, and here it is. Asymmetrically balanced composition, an elegant dark mode, natty serif lettering of diverse size and style, and a lot of empty space. This is how the personal website of a Squarespace designer from Guadeloupe Lionel Taurus looks at first sight.
It also contains some-face melting devices such as a singing beak cursor with visible sounds released into space. Let's see where this bird is gonna bring us...
Source: https://www.filsdegraphiste.fr/
If you visit a site and make this captivating journey personally, you will see that it is transformed into a handsome starling that will lead you on a meditative flight over an ocean... This impressive device is not quite justified from the usability standpoint, as such animation should consume just an enormous amount of energy and hardware resources. But this is really beautiful – no questions asked.
But what is really rewarding you for your attention is the portfolio section of this website. Unlike the previous case where the case studies were least elaborate, this one is, on the contrary, most incredible.
Source: https://www.filsdegraphiste.fr/selected-projects
Note how Lionel has organized visual representation of his projects. This system of slots or a file cabinet with telescopic sections looks very high-tech and trendy. The solution with large capitalized captions is very well-turned. By hovering over each slot, we have a caption being changed for a three-dimensional space leading into a distinct world. As you can see, the UI is very neat and the animation is flawless.
Interestingly enough, the visual aesthetics of the portfolio page with its snowy tidiness and accuracy is very much different compared to the “noir” style of the landing page. But this does not confuse a user in any way. By clicking on any case study, you will be able to appreciate the excellent motion and graphic design applied by Lionel.
Source: https://www.filsdegraphiste.fr/selected-projects
The designer also combines flat design with 3D models to engage a viewer emotionally. At the same time, every case contains a lot of stunning visuals and very little text. Such an approach to devising case studies is dubious. A visitor may eternally enjoy the beauty of interfaces and graphics, but they won't have much opportunity to figure out what this project is about and how it was implemented.
Referencing real-life simulation games [david-hckh.com]
To say this UX design portfolio website is creative and ultra innovating is to say nothing.
Source: https://david-hckh.com/
David from Germany positions himself as a designer “creating beautiful user experience”, but it is clear at the first sight that a general set of UX design skills and a standard design tool will not suffice to create such technologically intensive splendor. Obviously, it could not have been done without some “heavy artillery” of 3D modeling and programming.
It is a very refreshing idea to represent a personal website as some kind of an apartment that at the same time makes an allusion to the popular genre of real-life simulation games. As we scroll down, this metaphor becomes most accomplished, as we see a classical format of an avatar description with personality characteristics, skills, and even a digital matrix of a character in this futuristic tube connected to a computer.
Source: https://david-hckh.com/
UI quality is awesome. Consider the beautiful colors, excellent composition, exceptional drawing of 3D models, and perfect animation effects. By visiting a website, you may even enable sounds to make this idyllic interior even closer to the real-world environment. David hence earns another point for interactivity.
As you can see further, the designer did not pay too much attention to detailed case studies. In contrast to previous websites with separate pages and lengthy descriptions, here we have only a list of works with a very brief description, and links that direct us straightforwardly to other resources.
Source: https://david-hckh.com/
This is quite understandable: after what we have seen on this site, a visitor doesn't need to have any additional proof of David's skills and competencies. At least, this may be his way of thinking. Finally, if you still need some proof and additional information, you may always clarify issues by filling out this simple form.
Source: https://david-hckh.com/
Did you notice how small and simple this portfolio website is? It has only one page which actually contains everything you need. And at the same time, you want to stay here a bit longer. To make UX simple but engaging is the true art of a designer, so David's work is highly commendable.
Combining futuristic motives with a unique geometric approach [kentatoshikura.com]
Source: https://kentatoshikura.com/
The website of Kenta Toshikura, a designer from Japan, incarnates the very zeitgeist of this enigmatic country. Put together Japanese arts of manga and calligraphy, poetic rhythms of haiku, the minimalistic design of temple gardens, and melancholic arthouse 1970s movies in black and white. Then you will get an idea of what it is made of. But let's better see it for ourselves.
As we appear on the landing page, the first impression is the feeling of some disorientation, with “where am I?” and “what to do?” sentiments, quite in line with Asian ambiguity. But in reality, everything turns out to be very clear and intuitive. As you scroll down, following, by the way, a clear tooltip at the bottom of the page, you can realize these abstract pictograms encased in white spheres are case studies that Kenta invites us to explore.
