When was the final time you up to date your design portfolio? (If you’re like me, it’s in all probability been some time.) Maintaining a contemporary portfolio is an efficient strategy to exhibit your abilities to potential purchasers and may be useful when trying again on work for annual contest entries.
If you’ve fallen behind along with your portfolio design, or simply want a brand new portfolio in common, this can be a nice alternative to create one thing utilizing fashionable strategies and visuals.
A contemporary portfolio utilizing design tendencies could make an important impression. A portfolio can be a illustration of your abilities — so design properly! Here’s a have a look at a few of our favourite portfolio design tendencies.
Personal Touch
A portfolio is a spot to point out off who you’re, your fashion, and function an introduction to potential purchasers or employers. Make it private.
By utilizing language and a tone that feels such as you and a photograph or video that exhibits your persona, you can begin to ascertain a connection on-line with those that go to your portfolio. People who know you personally would possibly even say they will “really see you” in the design – actually or figuratively.
In the instance above, Colin Reitz makes use of a enjoyable video to assist present he’s a personable, pleasant, enthusiastic designer. It’s an inviting possibility that makes him really feel approachable, a very good factor for a freelancer.
Brutalist Style
The brutalist development that’s popped up throughout web site design additionally applies to portfolio websites as effectively.
The benefit of brutalism for a portfolio is that it may give photographs and work extra room to shine with out so many results in the design. The problem is that it may flip off some potential connections which may not respect the bluntness of the design.
An “almost brutal” aesthetic is the stability that almost all designers go along with for his or her portfolios.
Unexpected Visuals
If there’s a single picture on the homepage of a portfolio, it tends to be of the designer or of a selected piece of labor. But what whether it is one thing fully sudden?
That’s what designers are doing extra of. They are creating fascinating parts to assist set their portfolios aside in order that they don’t seem like the ocean of different portfolio websites that probably come throughout hiring managers’ desks.
In the instance above, Ryo Irago makes use of a little bit of superbly created imagery to attract you in. The design of the homepage is gorgeous, the picture is charming, and if nothing else you’ll probably scroll to study extra (which is strictly the intention of a portfolio design akin to this).
Subtle Animation
An internet site portfolio is an ideal place to point out off a few of your design abilities. Use a cool approach or fashionable factor to create simply the temper to point out your design fashion and skill. For many designers proper now, this consists of utilizing delicate animated results – usually with different daring parts – to deliver consideration to portfolio designs.
Eumray’s portfolio does simply that with massive, daring typography that explains what they do with a nifty animation with the picture. (A headshot on a portfolio web site is one other design development that’s held on for a very long time.)
The use of area right here and a black-and-white colour scheme are additionally fashionable parts, making this portfolio appear very in the second. There are different delicate animations under the scroll that tie every thing collectively superbly as effectively.
Show, Don’t Tell
The “show, don’t tell” idea has been an enormous a part of web site design for a very long time. It can work equally effectively for portfolio websites, by telling guests what the design does or the place to seek out details about their work.
Here, Rekhchand Sahu makes use of bouncing icons to assist take you to design parts and knowledge. The general aesthetic is straightforward and simple to grasp with a transparent headline/hero textual content space.
Click on the icons for extra work or scroll for a collection of items. The design feels trendy and exhibits the kind of fashion that you just’ll get from this designer/developer.
Over-the-Top Design
While minimal portfolio types are common, over-the-top portfolio designs are starting to development. (Likely as a result of they’re so disruptive in a sea of black and white, minimal designs.)
This portfolio makes use of lots of trending parts collectively and it really works. There’s the large hero headline with a gradient colour therapy, liquid animated results, and funky sort parts.
As you scroll, the whole portfolio web site has an virtually brutalist really feel to it with slab font selections and a darkish define. Although the design has a little bit of harshness to it, there’s motive to scroll and get into the design and study extra concerning the designer.
Layered Graphic Elements
Cool layered results, particularly those who embody nifty CSS results akin to parallax scrolling or hints of animation could make for enjoyable layers.
This portfolio approach is gaining recognition and supplies a very good alternative for designers to play with sure results earlier than deploying them on a shopper challenge.
This one-page portfolio by Sophie Doukhopelnikoff makes use of transparencies and textual content parts in layers that create depth and visible curiosity. Having letters each behind and in entrance of photographs is somewhat gorgeous and attracts you into the design. Sans serif typography lends an much more basic really feel to the general design.
Subtle Color Effects
You’re going to need to click on by way of and hang around on this portfolio web site for a couple of minutes to get the complete impact of the design.
The easy “Hello There” first expands to fill the display screen with different textual content parts that higher clarify the portfolio, then the background colour softly adjustments each few seconds for a rainbow impact. It’s easy, delicate, and really stunning.
This is a colour impact that would have lots of functions elsewhere and speaks to the artistic nature of a portfolio web site itself.
Super-Simple Aesthetic
It looks as if there’s a development in portfolio design the place designers don’t lead with their work. Their web sites are easy and visually fascinating after which lead you into their challenge solely after a primary look.
The easy design right here is glossy and intriguing. It works equally effectively with darkish or white backgrounds and easy typography and graphic parts.
Valentin Semes makes the many of the super-simple aesthetic with neat interactive divots – take note of the mouse hover – to maintain you transferring by way of the design so that you just see parts of the portfolio.
Magazine-Style Layouts
Magazine-style layouts have lengthy been common for blogs however may assist exhibit a portfolio as this development exhibits.
Each block can be utilized to spotlight a unique sort of labor or particular person challenge in a manner that offers every design room of its personal.
Antoine Barres makes use of this format to point out a wide range of artistic items in a manner that makes it simple to see every design. The grey background blocks with the white grid have an extremely basic fashion that offers every design much more room to shine.
Homepage Bios
There’s no rule that your bio needs to be on the About web page of your portfolio web site. One of the strongest tendencies in portfolio design is to maneuver that bio – or a minimum of a brief model of it – to the homepage.
It’s a good way to inform folks precisely what you do from the beginning. There will likely be no guessing what your portfolio is about and what sort of artistic you’re.
It’s a spot the place you may create a private assertion and even spotlight numerous tasks. Bill Chien’s portfolio does this superbly with a movie-credits-style bio that scrolls on the homepage. His bio is straightforward, and to the purpose, displaying his artistic mindset.
Lots of Interactivity
Interactive portfolios are in.
Many of those portfolio designs are visually loud, filled with motion, colour, and issues to click on or cool altering hover states. There’s an virtually limitless alternative to make use of results and design strategies.
What’s neat a few extremely interactive portfolio is that it supplies a spot to point out off some supreme UX abilities.
The problem is that typically the designs can get only a wee bit overwhelming. Make positive to trace person habits and engagement and if you’re dropping guests, it is perhaps value an opportunity. (It may also be a very good take a look at for deploying related strategies in different tasks.)
Unusual Design Patterns
Portfolios that take a look at new design patterns are additionally trending. Moving conventional navigation parts, obscuring textual content, and even experimenting with animation states are all frequent.
This development is perhaps common as a result of it supplies a chance for designers to have slightly playground to check strategies and results. What’s good about it, is that this development pushes our thought of what’s and isn’t the best strategy to do one thing.
The instance above makes use of a couple of visible tendencies and strange patterns on the identical time. There’s define typography that’s partially obscured, an animated hover state for the colour orb, and navigation that’s on the vertical edges of the display screen.
The portfolio development makes you consider design norms and the way you’re feeling about them as you dive into the work.
Black and White
Black and white designs, usually with a colour accent, are big proper now.
The largest contributing issue is perhaps that black-and-white design patterns make it simple to see portfolio works, which are sometimes in colour. It provides the factor you need folks to see higher consideration when it does seem on the display screen.
Paired with this black-and-white development is one other frequent issue. Portfolio items don’t seem on the homepage; customers need to click on by way of to seek out them.
Trendy Typography
You can by no means go unsuitable with wonderful typography. Whether you’re utilizing a trending sort factor, such because the outlines above, or just a stupendous typeface, this development by no means will get previous.
Strong typography abilities will assist your portfolio shine and assist others perceive the standard of your work. This development exhibits why making a portfolio that represents the energy of your abilities is vital.
Potential employers and purchasers will usually get an impression of the sort of artistic you’re just by your portfolio web site. Almost each designer would like to be regarded as somebody with robust typography abilities. Using fashionable typography effectively positively matches the invoice.
High-Performance Effects
Victor Costa’s portfolio is a first-rate instance of how one can create a high-performance portfolio.
Because net designers, photographers, and different creatives are utilizing their portfolios to point out off what they will do, there’s a definite shift to extra high-performance designs. (Some of that are an excessive amount of for cellular shows. Make positive you’ve gotten another gateway should you go this route.)
These high-performance designs are filled with nifty JavaScript, animation, and results which can be designed to wow customers.
Victor Costa’s portfolio is a first-rate instance of how one can create a high-performance portfolio. It opens with an possibility for customers – normal or high-performance. The portfolio is crammed with interactive parts, fades and scroll actions, and animation. These strategies match the weather he references in his bio and isn’t solely a showcase of previous work however an indicator of what else he can do for purchasers.
Plenty of Space
Something that’s been popping up in extra designs throughout the board is making its manner into portfolio design as effectively – loads of area between parts and objects.
This development appears to have roots in making certain that objects are appropriately separated on cellular units and have loads of faucet area, however the extra area can look nice on desktop screens as effectively. (Granted, I’ve all the time been a fan of white area.)
Lotta Nieminen’s portfolio is an ideal instance of this design in motion. The super-deep header takes up greater than a 3rd of the display screen whereas the vertical and horizontal area between portfolio photographs is tremendous huge. Each factor stands by itself and the exaggerated spacing provides every challenge room to face by itself, which may be notably good for a portfolio design with the potential for therefore many several types of photographs.
Groovy UI
Pairing a minimally-styled design with trendy person interface results can create fairly a surprising portfolio. This mixture of visible simplicity and complicated interplay can delight customers and hold them trying by way of totally different screens and portfolio tasks.
Click by way of the instance above to see how every portfolio challenge glides onto the display screen with a cool ripple impact earlier than it stops. The cursor shifts and shapes as effectively, denoting click on parts to take customers by way of every challenge in a manner that’s extra than simply studying about how the design got here collectively.
This is a portfolio you may spend hours with due to the groovy UI.
Large Typography
Typography and textual content are a few of the most regularly missed design parts when planning a challenge or portfolio.
Strong typography and language may be the right introduction to your work (and portfolio). Most folks in all probability know of Tobias van Schneider from his ventures as a designer or podcaster, however would you anticipate his portfolio dwelling web page to be largely textual content?
Typography and textual content are a few of the most regularly missed design parts when planning a challenge or portfolio. Most of us are so involved with visuals or animation.
This instance exhibits why so many designers are choosing portfolios that characteristic robust typography. It units the best tone – what he does and what the location is about – earlier than stepping into the deeper visuals. (This possibility additionally highlights his energy for designs that characteristic lots of textual content.)
Portfolios That Don’t Look Like Portfolios
…as a designer you don’t need to provide you with one thing fully new to point out off your work
One of the largest tendencies in portfolio design is crafting a portfolio that appears like one other sort of web site altogether.
Robin Mastromarino’s portfolio appears to be like like a web site for a bar or designer or skilled athlete, relying on which a part of the slider you view first. It’s stunning and easy and what’s most spectacular is the room every challenge has to shine.
Subtle cues assist customers perceive parts of the portfolio, akin to small numerals above the headline, and the date under. Plus, the slide factor encourages left-to-right scrolling with partial headlines from different tasks.
The different issues which can be so good about this portfolio fashion are that as a designer you don’t need to provide you with one thing fully new to point out off your work. With massive “art” for tasks, accomplished jobs are the main focus, somewhat than creating one thing fully new. (How’s that for creating one thing you may replace shortly?)
Split-Screen Patterns
Split-screen patterns have been trending for some time and extra portfolios are utilizing this design, even when they don’t use the performance. It works as a result of the pairing of parts helps drive customers throughout the display screen to take in every thing in entrance of them.
Xavier Cusso makes use of a split-screen design with nice parallax scrolling results to maneuver from challenge to challenge. The color-block display screen design helps emphasize that the web site is his creation, whereas the factor in the center is the portfolio challenge to look at. It places some separation between the portfolio and challenge designs.
This is a pleasant strategy to deal with big-name tasks – notice the graphic for Adidas Climaheat right here – whereas sustaining your id in the portfolio design. (Make positive to click on by way of and go to particular person tasks right here; the general portfolio design is spectacular.)
Minimalism-Inspired Design
The smartest thing a few minimalism-inspired portfolio is that it provides the design loads of room to shine. The design of the particular portfolio turns into comparatively invisible so that every one the main focus is on the weather that you really want folks to see.
Designer Shawn Park not too long ago wrote about how he redesigns his portfolio yearly for UX Collective – I extremely suggest that you just go read that article here – and the present design (above) exhibits an evolution of design tendencies in itself.
Park consists of iterations of his portfolio design in the publish, starting in 2013, and you’ll see how design tendencies impacted his portfolio. You may see how this contemporary minimal fashion makes it simpler to see his work in the present day than in earlier incarnations.
Oversized Homepage Headshots
Big headshots are an enormous deal, notably with builders and interplay designers.
This portfolio development is perhaps common as a result of it’s tougher to visually present this work: Do you spotlight code?
The trick to creating this portfolio design work is a powerful picture. It must be greater than a headshot; it must have a moodiness to it. Then pair it with robust typography to make it apparent that this can be a portfolio web site and what you do. Keep all of that data above the scroll for the very best probability of preserving guests transferring by way of the design.
And a couple of nifty results can’t harm both.
Modular Grids
One portfolio design development that by no means appears to fade is using modular grids to point out off tasks. This is a superb – and useful – possibility as a result of you may “float” photographs of various tasks on a single canvas.
Kimi Lewis does one thing slightly bit totally different together with her portfolio, above. Rather than a number of small blocks to point out portfolio tasks, this design goes massive. It mixes and matches squarer and lengthy horizontal photographs in an outsized grid.
Users get a very good really feel for every challenge proper from the beginning. Add the outsized grid photographs to some exaggerated spacing between parts and this portfolio is perhaps one of many best to digest that I’ve seen in some time. There’s additionally a nifty hover animation on every picture with the shopper identify and challenge sort to supply additional data earlier than you click on by way of.
Color Overlays
Heather Shaw’s portfolio works as a result of every challenge is so totally different, however the colour overlays give the homepage a linked really feel.
One of probably the most difficult issues about making a portfolio is the homepage. How do you preview work or challenge sections in a manner that may entice customers to truly click on by way of?
The reply is perhaps to partially obscure the work. Using fascinating colour overlays on preview picture hyperlinks could be a visually participating strategy to encourage clicks to particular person tasks. It’ll hold your homepage cleaner with a constant look and elegance for various sections of the web site, make sure that one web page isn’t too heavy and gradual to load, and supplies a chance to spotlight one thing a few challenge earlier than the press.
Heather Shaw’s portfolio, above, works as a result of every challenge is so totally different, however the colour overlays give the homepage a linked really feel. The person additionally is aware of what sort of challenge they’re about to view due to labels with shopper names and challenge varieties proper there. This is a extremely navigable and easy-to-understand format that appeals visually.
Streamlined Project Showcase
And then there’s the other finish of the spectrum – portfolios which have a extra streamlined appear and feel. There could be a profit to solely displaying a handful of tasks.It ensures that customers solely see what you need them to concentrate on and never get distracted.
Stefanie Bruckler additionally makes use of a module grid format however with fewer objects in a extra contained area. Plus, it’s all under the principle scroll which contains a minimal enterprise card-style design.
It has a glance that’s polished and fashionable, setting a definite tone for the work of this designer.
Conclusion
Still not fairly prepared to revamp your portfolio? While it’s a artistic challenge, that is additionally an funding in your small business, whether or not you’re employed for a corporation or as a freelancer.
Potential purchasers are in search of you earlier than you even know they exist. A contemporary, fashionable portfolio along with your greatest tasks could make a powerful first impression.