{"id":24898,"date":"2021-05-28T15:00:58","date_gmt":"2021-05-28T13:00:58","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=24898"},"modified":"2021-06-15T11:56:02","modified_gmt":"2021-06-15T09:56:02","slug":"inspirational-web-designer-portfolios","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/inspirational-web-designer-portfolios\/","title":{"rendered":"12 Inspirational Web Designer and Developer Portfolios"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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\u2019s prowess and an ability to transcend common practices and to craft authentic works.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#bruno-arizio\">Bruno Arizio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#aristide-benoist\">Aristide Benoist<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#zhenya-rynzhuk\">Zhenya Rynzhuk<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#eric-van-holtz\">Eric Van Holtz<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#kenta-toshikura\">Kenta Toshikura<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#marvin-schwaibold\">Marvin Schwaibold<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#victor-work\">Victor Work<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#martin-ehrlich\">Martin Ehrlich<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#charlie-montagut\">Charlie Montagut<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#sofia-papadopoulou\">Sofia Papadopoulou<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#fabio-carretti\">Fabio Carretti<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#bruno-simon\">Bruno Simon<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"bruno-arizio\"><\/a>Bruno Arizio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Arizio.jpg\" class=\"attachment-full size-full\" alt=\"Bruno Arizio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Arizio.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Arizio-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Arizio-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Arizio-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/brunoarizio.com\/\" target=\"_blank\" rel=\"noopener\">Bruno Arizio<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Arizio has received numerous accolades for his work, including several \u201cSite of the Day\u201d recognitions from Awwwards, The FWA, CSS Design Awards, Typewolf, and many others. He serves as a juror at the Webby Awards &#8211; one of the most respected international awards for web design and development. He\u2019s also a judge at Awwwards. In case you\u2019re 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 <a href=\"https:\/\/www.youtube.com\/watch?v=Ry6y42uzpqI\" target=\"_blank\" rel=\"noopener\">Jury Website Reviews<\/a> as you\u2019re guaranteed to learn a lot from these two experts.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Arizio\u2019s website is a beautiful example of his capability to make enthralling designs by skillfully combining simple elements and playing with geometric shapes.<\/strong> 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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/horizontal-scrolling-websites\/\">horizontal scrolling<\/a>, 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\u2019re going through a special edition on Arizio\u2019s creativity, filled with <a href=\"https:\/\/qodeinteractive.com\/magazine\/large-typography-web-design\/\">large typefaces<\/a> 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 <a href=\"https:\/\/www.romainavalle.com\/\" target=\"_blank\" rel=\"noopener\">Romain Avalle<\/a>, a highly-skilled freelance interactive developer.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Arizio-2.jpg\" class=\"attachment-full size-full\" alt=\"Bruno Arizio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Arizio-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Arizio-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Arizio-2-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Arizio-2-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the projects Arizio has worked on, we especially liked the portfolio site he devised for <a href=\"https:\/\/garoaskincare.com\/\" target=\"_blank\" rel=\"noopener\">Garoa Skincare<\/a>. He opted for <strong>subtle, warm hues and peppered the pages with numerous sun-kissed visuals to lure viewers into Garoa\u2019s world of healthy, glowy skin<\/strong>. The <a href=\"https:\/\/qodeinteractive.com\/magazine\/web-design-hidden-menus\/\">hidden menu<\/a> 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\u2019s essentials, preview images appear, following the movement of your cursor wherever you may place it on the screen. In some sections, <strong>Arizio skilfully entwined small images into the text, amplifying the meaning of the words. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"aristide-benoist\"><\/a>Aristide Benoist<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Aristide-Benoist.jpg\" class=\"attachment-full size-full\" alt=\"Aristide Benoist\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Aristide-Benoist.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Aristide-Benoist-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Aristide-Benoist-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Aristide-Benoist-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/www.aristidebenoist.com\" target=\"_blank\" rel=\"noopener\">Aristide Benoist<\/a> 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\u2019 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Benoist\u2019s 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 \u201cribbon\u2019\u2019. 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 \u201cExplore\u201d button, inviting you to discover more details and view more imagery on single project pages. <strong>The layouts are beautifully structured and the displayed content is eye-appealing. The engrossing microinteractions used throughout the site demonstrate Benoist\u2019s inspiring skillset and highlight the beauty of his terrific works.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Aristide-Benoist-2.jpg\" class=\"attachment-full size-full\" alt=\"Aristide Benoist\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Aristide-Benoist-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Aristide-Benoist-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Aristide-Benoist-2-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Aristide-Benoist-2-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One of his latest projects that commands attention is a website he developed for <a href=\"https:\/\/paulethenriette.com\/\" target=\"_blank\" rel=\"noopener\">Paul &amp; Henriette<\/a>, 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. \u201c01\u201d is the default photo arrangement you see once the site loads. \u201c02\u201d 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. \u201c03\u201d reveals a list of Paul and Henriette\u2019s 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.<strong> Benoist didn\u2019t exaggerate with wild effects and graphics. Instead, he found three beautiful and fun ways in which viewers can get acquainted with Paul and Henriette\u2019s work, letting their images do all the talking.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"zhenya-rynzhuk\"><\/a>Zhenya Rynzhuk<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Zhenya-Rynzhuk.jpg\" class=\"attachment-full size-full\" alt=\"Zhenya Rynzhuk\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Zhenya-Rynzhuk.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Zhenya-Rynzhuk-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Zhenya-Rynzhuk-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Zhenya-Rynzhuk-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/zhenyary.com\/\" target=\"_blank\" rel=\"noopener\">Zhenya Rynzhuk<\/a> 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\u2019 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On her website, Zhenya demonstrates an <strong>astounding mastery for creating exciting yet harmonious environments.<\/strong> She chose gorgeous visuals, selected perfect <a href=\"https:\/\/qodeinteractive.com\/magazine\/google-font-combinations\/\">font combinations<\/a>, 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Zhenya-Rynzhuk-2.jpg\" class=\"attachment-full size-full\" alt=\"Zhenya Rynzhuk\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Zhenya-Rynzhuk-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Zhenya-Rynzhuk-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Zhenya-Rynzhuk-2-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Zhenya-Rynzhuk-2-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Zhenya is one of the co-founders and the design director of <a href=\"https:\/\/synchronized.studio\/\" target=\"_blank\" rel=\"noopener\">Synchronized Studio<\/a>. The website she designed for this full-service creative studio is just one of the numerous impressive projects from her extensive portfolio. <strong>The entire website is bustling with gorgeous animations and engrossing project showcases<\/strong>. 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\u2019s archive page. As you move the cursor over the <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-black-websites\/\">black background<\/a>, you will notice that the backdrop is actually a rustled black sheet that follows the movement of the mouse. <strong>The pointer also leaves a striking lime green trace behind, juxtaposing the black-and-white scenery.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"eric-van-holtz\"><\/a>Eric Van Holtz<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Eric-Van-Holtz.jpg\" class=\"attachment-full size-full\" alt=\"Eric Van Holtz\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Eric-Van-Holtz.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Eric-Van-Holtz-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Eric-Van-Holtz-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Eric-Van-Holtz-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/vanholtz.co\/\" target=\"_blank\" rel=\"noopener\">Eric Van Holtz<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Eric\u2019s website provides an attractive overview of the projects he has worked on.<strong> The most striking page on the site is the homepage, with its distinctive fusion of bold, massive typography on a purple background.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Eric-Van-Holtz-2.jpg\" class=\"attachment-full size-full\" alt=\"Eric Van Holtz\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Eric-Van-Holtz-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Eric-Van-Holtz-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Eric-Van-Holtz-2-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Eric-Van-Holtz-2-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the projects Eric devised for his clients, we really enjoyed the <a href=\"https:\/\/decodedadvertising.com\/\" target=\"_blank\" rel=\"noopener\">Decoded Advertising<\/a>\u2019s site. This project emanates slight brutalist vibes. <strong>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.<\/strong> 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\u2019s work.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"kenta-toshikura\"><\/a>Kenta Toshikura<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Kenta-Toshikura.jpg\" class=\"attachment-full size-full\" alt=\"Kenta Toshikura\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Kenta-Toshikura.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Kenta-Toshikura-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Kenta-Toshikura-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Kenta-Toshikura-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/kentatoshikura.com\/\" target=\"_blank\" rel=\"noopener\">Kenta Toshikura<\/a> 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 &amp; Style, Aircord, and others.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The design of Kenta\u2019s portfolio website is not something you see every day. <strong>The peculiar and sometimes abstract 3D project previews are paired with an omnipresent black color, making the site look enigmatic and exciting.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Kenta-Toshikura-2.jpg\" class=\"attachment-full size-full\" alt=\"Kenta Toshikura\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Kenta-Toshikura-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Kenta-Toshikura-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Kenta-Toshikura-2-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Kenta-Toshikura-2-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For instance, the website he made for the nightclub <a href=\"http:\/\/drift.cc\/home\" target=\"_blank\" rel=\"noopener\">Drift<\/a> 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\u2019s portfolio, with predominantly dark hues used for the majority of the site\u2019s elements. A surprising splash of bright green and yellow gradient occurs once you click on the <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-fullscreen-navigation-menus\">fullscreen menu<\/a>. Its vibrancy and ecstatic colors shake up the site\u2019s otherwise tame and demure color palette. <strong>The content looks futuristic and mysterious, and that vibe is further amplified by intriguing visuals and electronic music in the background.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"marvin-schwaibold\"><\/a>Marvin Schwaibold<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Marvin-Schwaibold.jpg\" class=\"attachment-full size-full\" alt=\"Marvin Schwaibold\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Marvin-Schwaibold.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Marvin-Schwaibold-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Marvin-Schwaibold-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Marvin-Schwaibold-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.marvinschwaibold.com\" target=\"_blank\" rel=\"noopener\">Marvin Schwaibold<\/a> 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\u2019s gained recognition for his projects from Clio awards, FWA, CSS Design Awards, and Behance.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On his website, Marvin didn\u2019t exactly go overboard with wild effects or graphics. Instead, like many other artists on the list,<strong> he managed to create a beautiful portfolio presentation by finding a way to attractively combine simple elements.<\/strong> 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\u2019s hosting an exhibition of Marvin\u2019s 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 \u201cAll Work\u201d page comes as a bit of a surprise compared to the rest of the site. This layout features<strong> horizontal navigation with vertically placed project names<\/strong>. When you hover over them, featured images appear on the screen while the backdrop color changes depending on the style of the visuals.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Marvin-Schwaibold-2.jpg\" class=\"attachment-full size-full\" alt=\"Marvin Schwaibold\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Marvin-Schwaibold-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Marvin-Schwaibold-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Marvin-Schwaibold-2-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Marvin-Schwaibold-2-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the work he did for his clients, we enjoyed browsing the <a href=\"https:\/\/www.vcswipe.com\/\" target=\"_blank\" rel=\"noopener\">VC Swipe<\/a> website. This company matches investors with startups and Marvin thought of a way to present the brand\u2019s 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. <strong>Marvin adorned pages with lots of colorful, animated 3D progress bars and charts, and their abstractness is what adds to the site\u2019s slightly alternative vibe.<\/strong> One probably wouldn\u2019t expect to see something like that on a site about an investor group, but it\u2019s precisely this unusual way of showcasing standard elements that makes the project all the more appealing.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;freelance-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"victor-work\"><\/a>Victor Work<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Victor-Work.jpg\" class=\"attachment-full size-full\" alt=\"Victor Work\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Victor-Work.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Victor-Work-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Victor-Work-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Victor-Work-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/victor.work\/\" target=\"_blank\" rel=\"noopener\">Victor Work<\/a> is a graphic designer, art director, and front end developer. He received many \u201cSite of the Day\u201d 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first thing one notices on Victor\u2019s 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. <strong>The pronounced dynamicity of this one-pager makes it exciting to browse from top to the bottom.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Victor-Work-2.jpg\" class=\"attachment-full size-full\" alt=\"Victor Work\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Victor-Work-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Victor-Work-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Victor-Work-2-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Victor-Work-2-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One of the websites that best demonstrate Victor\u2019s creativity is the website dedicated to <a href=\"https:\/\/kathememorial.com\/\" target=\"_blank\" rel=\"noopener\">K\u00e4the Kollwitz<\/a>\u2019s art. <strong>The intriguing loading animation shows a bunch of animated swirly lines filling up the background as if someone were scribbling across the page.<\/strong> In the midst of all that mess, there is K\u00e4the\u2019s name seemingly written with chalk. As the site loads, the name becomes bolder. The website allows viewers to discover more about K\u00e4the and her legacy by following a timeline. There is a lot of text with some accompanying images, but thanks to the cool <a href=\"https:\/\/qodeinteractive.com\/magazine\/scroll-triggered-animations\/\">scroll-triggered animations<\/a>, 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\u00e4the\u2019s story, the color of the background changes. <strong>At the bottom of the page, there is even a \u201cLet\u2019s Draw\u201d section. As you start making your own art, you will notice that the strokes are designed to match K\u00e4the\u2019s style.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"martin-ehrlich\"><\/a>Martin Ehrlich<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Martin-Ehrlich.jpg\" class=\"attachment-full size-full\" alt=\"Martin Ehrlich\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Martin-Ehrlich.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Martin-Ehrlich-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Martin-Ehrlich-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Martin-Ehrlich-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/www.martinehrlich.com\" target=\"_blank\" rel=\"noopener\">Martin Ehrlich<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>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.<\/strong> Each featured project includes a case study, so anyone who\u2019s interested can take an in-depth look at Martin\u2019s work. Transition and hover effects are particularly eye-catching. When you place the cursor on the \u201cExplore Case Study\u201d 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\u2019s creative world.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Martin-Ehrlich-2.jpg\" class=\"attachment-full size-full\" alt=\"Martin Ehrlich\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Martin-Ehrlich-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Martin-Ehrlich-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Martin-Ehrlich-2-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Martin-Ehrlich-2-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]His extensive portfolio includes a myriad of terrific projects but we\u2019ve singled out the <a href=\"http:\/\/youngcreatives.heed.agency\/\" target=\"_blank\" rel=\"noopener\">Young Creative<\/a>\u2019s 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. <strong>The site\u2019s ephemeral character is its most astonishing feature<\/strong> and its enigmatic appeal is further enhanced by the dramatic music in the background.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"charlie-montagut\"><\/a>Charlie Montagut<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Charlie-Montagut.jpg\" class=\"attachment-full size-full\" alt=\"Charlie Montagut\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Charlie-Montagut.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Charlie-Montagut-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Charlie-Montagut-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Charlie-Montagut-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.charlie-montagut.com\" target=\"_blank\" rel=\"noopener\">Charlie Montagut<\/a> is an art director and designer based in Paris. He\u2019s worked on websites for Kenzo Story, Lacoste F\/W Outerwear 2015, Chanel x Pharell, Google Play, Far Cry, and many others. He received several \u201cSite of the Day\u201d awards from the Awwwards platform, including the one for his own portfolio site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Charlie\u2019s website starts off with a <strong>fullscreen video preview of all the projects he has worked on, leaving a great first impression on viewers.<\/strong> The colorfulness of the intro clashes with the black, grey, and white color palette on the inner pages. On his \u201cProjects\u201d 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. <strong>The \u201cAbout\u201d page demonstrates Charlie\u2019s astonishing capability to create exciting scenery just by making smart typography choices and organizing texts into easy-to-digest chunks and columns.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Charlie-Montagut-2.jpg\" class=\"attachment-full size-full\" alt=\"Charlie Montagut\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Charlie-Montagut-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Charlie-Montagut-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Charlie-Montagut-2-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Charlie-Montagut-2-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Charlie\u2019s portfolio is nothing short of impressive, but we particularly liked the website he devised for <a href=\"https:\/\/lecurie.eu\/\" target=\"_blank\" rel=\"noopener\">L\u2019\u00c9curie<\/a>. First off, he beautifully organized the content and made a distinction between the brand\u2019s three identities \u2013 one is L\u2019\u00c9curie, 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. <strong>These three separate websites perfectly illustrate several creative ways of displaying visuals<\/strong>. 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\u2019\u00c9curie\u2019s identities.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"sofia-papadopoulou\"><\/a>Sofia Papadopoulou<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Sofia-Papadopoulou.jpg\" class=\"attachment-full size-full\" alt=\"Sofia Papadopoulou\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Sofia-Papadopoulou.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Sofia-Papadopoulou-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Sofia-Papadopoulou-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Sofia-Papadopoulou-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.sofiapapadopoulou.com\/\" target=\"_blank\" rel=\"noopener\">Sofia Papadopoulou<\/a> 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\u2019s been awarded by Awwwards, CSS Design Awards, Mindsparkle Mag, and EBGE Awards.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Sofia\u2019s 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. <strong>The more you scroll down the page, the messier, larger, and the more abstract the form becomes.<\/strong> 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\u2019ve placed it onto. The typography is mostly colored in a dark grey hue, complementing the site\u2019s 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\u2019s eye. As you reach the end of the page, you discover light that envelops the entire bottom section in white.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Sofia-Papadopoulou-2.jpg\" class=\"attachment-full size-full\" alt=\"Sofia Papadopoulou\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Sofia-Papadopoulou-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Sofia-Papadopoulou-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Sofia-Papadopoulou-2-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Sofia-Papadopoulou-2-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One of our favorite projects from Sofia is the website she made for <a href=\"https:\/\/dotlung.com\/\" target=\"_blank\" rel=\"noopener\">Dot Lung<\/a>. 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. <strong>The colorful interplay and stark contrast between these three shades steals the viewer\u2019s attention from the get-go, fully immersing them into Dot\u2019s story.<\/strong> Transitions from one page to the next are particularly fun &#8211; they are designed as two concentric circles that cover the entire screen before revealing the content.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"fabio-carretti\"><\/a>Fabio Carretti<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fabio-Carretti.jpg\" class=\"attachment-full size-full\" alt=\"Fabio Carretti\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fabio-Carretti.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fabio-Carretti-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fabio-Carretti-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fabio-Carretti-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.crrtt.com\/\" target=\"_blank\" rel=\"noopener\">Fabio Carretti<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The pages are imbued with a <strong>chaotic crimson, blood-like color that clashes with the neutrality of the black background<\/strong>. There are lots of mystical and abstract illustrations on the site. The site\u2019s heavily pronounced occult character is beautifully complemented by the terrific typographic choices. <strong>The serif fonts only amplify the esoteric character of this unique portfolio<\/strong> that is sure to leave a strong impression on anyone who visits it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fabio-Carretti-2.jpg\" class=\"attachment-full size-full\" alt=\"Fabio Carretti\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fabio-Carretti-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fabio-Carretti-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fabio-Carretti-2-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fabio-Carretti-2-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the projects Fabio has worked on, we enjoyed <a href=\"https:\/\/bttrhlf.com\/\" target=\"_blank\" rel=\"noopener\">Better Half<\/a>\u2019s website. This one-page project starts off with a <strong>playful interaction between typography and visuals<\/strong>. When you place the mouse on the agency\u2019s 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 \u2013 as you hover over the names, brand logos appear in the viewport.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"bruno-simon\"><\/a>Bruno Simon<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Simon.jpg\" class=\"attachment-full size-full\" alt=\"Bruno Simon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Simon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Simon-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Simon-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Simon-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/bruno-simon.com\/\" target=\"_blank\" rel=\"noopener\">Bruno Simon<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Bruno\u2019s portfolio presentation exemplifies <a href=\"https:\/\/qodeinteractive.com\/magazine\/playable-interactive-websites\/#bruno-simon\">playable interactive websites<\/a> at their finest. This fantastic project <strong>puts you in charge of a car that roams the virtual 3D surroundings, discovering details about Bruno and what he does along the way<\/strong>. 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\u2019s skills into the spotlight while making the whole project hard to forget.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Simon-2.jpg\" class=\"attachment-full size-full\" alt=\"Bruno Simon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Simon-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Simon-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Simon-2-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bruno-Simon-2-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The website Bruno created for <a href=\"https:\/\/zen.ly\/\" target=\"_blank\" rel=\"noopener\">Zenly<\/a> 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 <strong>colorful 3D adventure game that takes you through different scenarios showing you how useful Zenly is<\/strong>, especially if you\u2019re on a festival, at the beach, or trying to quickly find some company for lunch.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Closing Words<\/h2>\n<p>[\/vc_column_text][vc_column_text]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 <strong>honesty resonates with audiences.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019t 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\u2019re 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.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Explore our selection of some of the most impressive web designer and developer portfolios. Enjoy the artistic prowess of these creative geniuses and their ability to transcend common practices and craft authentic works<\/p>\n","protected":false},"author":4,"featured_media":24940,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,112,43],"class_list":["post-24898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-portfolio","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/24898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=24898"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/24898\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/24940"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=24898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=24898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=24898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}