Our friends at Toptal screen a lot of designers, so over time we have learned what goes into making a captivating and coherent portfolio. Each designer’s portfolio is like an introduction to an individual designer’s skill set and strengths and represents them to future employers, clients and other designers. It shows both past work, but also future direction. There are several things to keep in mind when building a portfolio, so here is the Toptal Guide of tips and common mistakes for portfolio design.
1. Content Comes First
The main use of the portfolio is to present your design work. Thus, the content should inform the layout and composition of the document. Consider what kind of work you have, and how it might be best presented. A UX designer may require a series of animations to describe a set of actions, whereas the visual designer may prefer spreads of full images.
The portfolio design itself is an opportunity to display your experiences and skills. However, excessive graphic flourishes shouldn’t impede the legibility of the content. Instead, consider how the backgrounds of your portfolio can augment or enhance your work. The use of similar colors as the content in the background will enhance the details of your project. Lighter content will stand out against dark backgrounds. Legibility is critical, so ensure that your portfolio can be experienced in any medium, and considers all accessibility issues such as color palettes and readability.
You should approach your portfolio in the same manner you would any project. What is the goal here? Present it in a way that makes sense to viewers who are not essentially visually savvy. Edit out projects that may be unnecessary. Your portfolio should essentially be a taster of what you can do, a preparation for the client of what to expect to see more of in the interview. The more efficiently that you can communicate who you are as a designer, the better.
2. Consider Your Target Audience
A portfolio for a client should likely be different than a portfolio shown to a blog editor, or an art director. Your professional portfolio should always cater to your target audience. Edit it accordingly. If your client needs branding, then focus on your branding work. If your client needs UX Strategy than make sure to showcase your process.
Even from client to client, or project to project your portfolio will need tweaking. If you often float between several design disciplines, as many designers do, it would be useful to curate a print designer portfolio separately from a UX or visual design portfolio.
3. Tell the Stories of Your Projects
As the design industry has evolved, so have our clients, and their appreciation for our expertise and what they hire us to do. Our process is often as interesting and important to share with them, as the final deliverables. Try to tell the story of your product backwards, from final end point through to the early stages of the design process. Share your sketches, your wireframes, your user journeys, user personas, and so on.
Showing your process allows the reader to understand how you think and work through problems. Consider this an additional opportunity to show that you have an efficient and scalable process..
4. Be Professional in Your Presentation
Attention to detail, both in textual and design content are important aspects of any visual presentation, so keep an eye on alignment, image compression, embedded fonts and other elements, as you would any project. The careful treatment of your portfolio should reflect how you will handle your client’s work.
With any presentation, your choice of typeface will impact the impression you give, so do research the meaning behind a font family, and when in doubt, ask your typography savvy friends for advice.
5. Words Are As Important As Work
Any designer should be able to discuss their projects as avidly as they can design them. Therefore your copywriting is essential. True, your work is the main draw of the portfolio – however the text, and how you write about your work can give viewers insight into your portfolio.
Not everyone who sees your work comes from a creative, or visual industry. Thus, the descriptive text that you provide for images is essential. At the earlier stages of a project, where UX is the main focus, often you will need to complement your process with clearly defined content, both visual diagrams, and textual explanation.
Text can also be important for providing the context of the project. Often much of your work is done in the background, so why not present it somehow? What was the brief, how did the project come about?
Avoid These Common Mistakes
The culture of the portfolio networks like Behance or Dribble have cultivated many bad habits and trends in portfolio design. A popular trend is the perspective view of a product on a device. However, these images often do little to effectively represent the project, and hide details and content. Clients need to see what you have worked on before, with the most logical visualisation possible. Showcasing your products in a frontal view, with an “above the fold” approach often makes more sense to the non-visual user. Usually, the best web pages and other digital content are presented with no scrolling required. Avoid sending your website portfolio as one long strip, as this is only appropriate for communicating with developers.
Ensure that you cover the bases on all portfolio formats. Today it is expected for you to have an online presence, however some clients prefer that you send a classic A4 or US letterhead sized PDF. You need to have the content ready for any type of presentation.
Try to use a consistent presentation style and content throughout the projects in your portfolio. Differentiate each project with simple solutions like different coloured backgrounds, or textures, yet within the same language.
Both Sketch and Photoshop are great tools used by almost every designer to accomplish a huge variety of tasks. To Photoshop has even become a dictionary verb. It doesn’t come as a surprise that most clients will expect a designer to have a high level of Sketch and Photoshop expertise. The majority of Toptal design jobs have either Sketch or Photoshop listed as one of their main required software. All of this is probably making you want to demonstrate your Sketch and Photoshop mastery throughout your portfolio.
Before proceeding, keep in mind that both Sketch and Photoshop are just tools and although tools do not make great designers, being a master of the tool gives the ability to execute your ideas professionally and efficiently.
So, how do you showcase that you are a Sketch or Photoshop expert in your portfolio? It mostly depends on the kind of design work you mainly use either program for.
You do visuals, photo manipulation and illustration
If the focus of your design work is in the creation of visuals, illustration, photo manipulation and photo editing in Photoshop, you’ll want that to shine from your portfolio. When deciding which projects to showcase in the portfolio be sure to choose only your best work and try not to be repetitive. There might be some clients that fall in love with your unique style but often clients prefer designers who can adapt to different styles and trends.
Choose work that demonstrates your mastery in detailed visual compositions, combining various layers, masks and advanced blending and some other qualities that demonstrate your proficiency with using light and shadow. Show that you understand perspective. Include an example that illustrates how immaculately you manage colors. In addition to showing complete visuals or illustrations put some emphasis on perfectly crafted details and make a few close-ups of the most interesting details that really demonstrate your perfection. Share your work process in the portfolio, give some sketches, display how raw materials looked like and what you’ve accomplished to make out of them. If it’s appropriate to showcase photo editing skills, put in some before and after the visuals.
You are the branding expert
While developing the visual identity as a part of a branding project you preferably won’t use Photoshop as your main tool of choice but one of the vector tools such as Illustrator. However, Photoshop will come in handy to visualize how that identity (logo, chosen colors palette, and typography) will work and look on stationary, signage, visual identity guidelines, website, apps and other additional advertising materials.
To showcase your branding project at its best, the first step you’ll need to do is to find or make some 3D mockup templates. Be careful to choose ones that won’t interfere with work that you are primarily showing, but instead, choose ones that will put emphasis on its best features. Avoid weird perspectives, too many distractions in the form of surrounding objects, colors, patterns.
Remember that you are showcasing your branding capabilities to prospective clients and not trying to sell them good looking mockups, especially if you haven’t made them by yourself. If you are buying or using some free templates be sure they are of quality. When applying your work inside a mockup, give attention to details, align everything perfectly, take care that there are no pixels hanging around.
Double check that you are putting your pages or screens in the right perspective, that lighting, white balance and shades are all adjusted and that nothing looks pixelated or distorted. Keep in mind that the scene you are building must look like a real one and although it might not be noticed at the first glance some inconsistencies could signify to a potential client that you are not giving enough attention to details or that you are not so versed in Photoshop.
You are a web or UI designer
Photoshop was not developed for web and user interface visual design, but since no completely corresponding tool existed at the time, most web designers were using it as their primary tool. With the adoption of responsive design and the arrival of more appropriate tools and workflows developed specifically for web and user interface design, Photoshop lost its web design tool throne. There are still some designers, especially those not working on Macs that use Photoshop, but Sketch is now the leader in the field.
If you are working as a web or user interface designer, no matter which tool you use you’ll want to show your proficiency and effectiveness in it and that could hardly be accomplished without revealing your process. High-quality visuals can be produced even if you are not a master of your tools, but glancing through your work files and workflow can show potential clients and collaborators that you are one. That is the reason for showing and describing in your portfolio how you use grids, artboards, structure your layers, and deal with Sketch symbols or Adobe CC libraries, handle typography and styles. Show some close-ups that will place emphasis on your attention to detail. If you craft your pixel-perfect icons and other elements in Sketch, display them with pride.
When choosing mockups in which to present web design or UI work stick with ones that won’t interfere with your designs. Let them be clear, without any unnecessary clutter. If using 3D perspective views, be sure that your work, which is core content of your portfolio, is shown in a way all important components are visible and understandable and there are no perspective distortions.
No matter what, take care of this
If you claim to be a Sketch or Photoshop expert, be sure that all your portfolio projects and presentations look professional. Some minor details, like the wrong direction of a shadow, or any pixelation might show a well-trained eye that your design skills are weak or that you lack the ability to polish your projects up to the last detail.
Be sure that all pictures you are putting in a portfolio are sharp and that nothing is pixelated, posterized or distorted. All elements in photomontages should blend seamlessly, and perspectives of different elements must be aligned and lighting effects, shadows and white balance in compliance.
Remember also that although the presentation of projects in your portfolio is very important, and can be a good means of showing your Photoshop skills, don’t let it become more important than the work itself. If by looking at your portfolio, one is more aware of the presentation than the content, be sure that something went wrong and reconsider rebuilding the portfolio around your best projects.
Writer’s Note: This is the 2nd of a series of portfolio guides that aims to help those among our readers with the skill set that is featured.
Before We Begin
Professionals who work in the creative industry need portfolios to showcase their skills to attract clients and peers. Once upon a time this was solved by creating stunning printed pieces. However, no matter how you look at it, times have changed and designers are no longer just designers. We’ve got different specialties that cover many different fields within design. It’s important that you identify your strengths before starting to build your own portfolio.
Today we will cover all the bases that lead to the creation of an amazing User Interface Portfolio, so if this happens to be your specialization, keep reading!
Quality and Quantity
Take the creation of your portfolio as any other important project you would work on and start by picking the number of products or projects you would like to showcase. Think of a number that can cover all of what you can do from the point of view of a UI designer, that can be enough to represent you as the perfect candidate for the next big contract and not a lot to turn your portfolio into an overwhelming and never ending trip for your future clients. Edit your selection with a sharp eye, as you will be judged by your worst piece.
Picking up to 9 projects is more than enough to show a variety of pieces, however, if that would be too many for what you would like to show in your portfolio then don’t worry, as 6 is also an acceptable number of projects to offer.
We all know working on a portfolio can feel endless because it’s hard for us as designers to objectively select the best work. However, the sooner you publish your portfolio, the faster your work will be ready for potential clients to see. Set realistic deadlines for every step of the process: from the very beginning, to when you pick your projects, through to its publication.
What About the Target?
This will mainly depend on you: are you a UI designer focusing on gaming? How about a UI designer specialized in designing mobile apps? Maybe you do both plus more! Each of them has a different solution but these tips are applicable to all UI cases.
A little research has never truly hurt anyone and it’s useful to see what kinds of portfolios are out there, what trends you should avoid for your portfolio to not look the same as everyone else’s, and what details are definitely worth exploring to apply to your own presentation. Inspiration is your best friend when you’re starting to build something from scratch.
Awwwards is a good place to look for web-based portfolios and some users at Dribbble offer more on their profiles to a web portfolio than you might think.
Of course, learning from your fellow colleagues on Toptal is always a good idea, there are stunning portfolios out there for you to check out!
The Three Pillars
There are three things that should be kept in mind throughout the process of building a UI portfolio: remember the importance of the visuals, have a solid process and show the result of each project by telling a story. Be as specific as you want yet keep an equilibrium between all three of them.
While it’s important to pay attention to details and UI designers focus mainly on those, it’s vital for your pieces to be “more than just a pretty face.” UI designers mostly work with UX designers to achieve incredible products, or sometimes hybrid designers do both UX and UI at the same time. Therefore it’s key to keep the essence of your designs by having some storytelling on every single page and by dodging the commonly known “Dribbblisation of Design” which will differentiate you from regular designers.
Layouts & Styles
The recommended size for portfolios nowadays are:
- A4 Horizontal, the width will benefit the amount of content you can show
- Sizes that are always larger in width and no smaller than 1280x800px
Note: Most devices nowadays allow retina images which will make your images look sharper and better. Remember to upload them twice their original size with @2x.
When thinking of the kind of layout you should design for each product, keep in mind that most of your projects will be different and will have a particular style that makes them unique: this will help you with the previously mentioned storytelling. Start from beginning to end, or backward; the possibilities are endless as long as you keep coherence on every single page.
Think of the most eye-catching cover page for each project. Whether it’s the logo of the product with a color background, a mobile product displayed in a beautiful mockup, or the interface of a video game close up, all of them can work as long as you keep the visual noise to a minimum. Clients have only a few minutes per page to spare on your portfolio so it’s important to show and tell as much as possible in a clean and organized way.
Don’t be afraid to put two or three dispositive together for a cover page as it will show how adaptable and dynamic your product is and will also tell the client beforehand how much content they can expect from a project.
We live and breathe visuals so we can’t afford to have pixelated rounded corners on a mockup, different screen sizes or slightly different alignments for the same product.
Keep in mind:
- The alignment of your mockups or screens should be the same as not to generate a slight jump between one page and another. Make sure to check alignments on Y and X.
- Work with vector images. If you’re using Sketch, it’s quite handy to have mockups that can be scalable and will never look pixilated; use the “scale” option instead of manually scaling your mockup, as it will lose its shape. If you happen to be using Photoshop, on the other hand, scale your mockup and use Command + Z (or Control + Z on a PC) to go back and scale again, as every time you scale your image it will get more and more pixelated.
- Check for details once you’re done with the general alignment of your objects by working with zoom. This will help you discard any lines or shapes that are slightly out of place.
- If you’re using mockups for mobile or tablets, there are two ways to go regarding the top bar: if you wish to keep it, make sure the battery is on a 100% charge and that the carrier shows a real company, for example, AT&T, T-Mobile, Virgin, among others, because it will give a realistic touch to your product. If you wish to take the top bar away, mobile products usually look better in a rounded container with 2px of radius, without a mockup.
- The background should always highlight the product you’re trying to show and not turn the client’s view away from it. There are two ways to go about this: 1. either use a plain color background that can make a friendly contrast with your product (keep in mind the mock up’s color and the color scheme of your design altogether) or 2. use a pattern or picture as background but get creative with its opacity and/or add a color layer on top with some transparency. Once again, the options are endless as long as the background is always secondary.
- For web pages or landing pages, you can go ahead and divide them into three pages to allow for a smooth tour through each portion. Making it small and placing them into a single page would make the client miss key points and details that will differentiate your product from others.
It doesn’t matter whether you do UX, UI or a complete different specialization within design: it’s always important to show that your work had a process and that it didn’t just magically appear. Don’t be shy to include rough sketches, the good old technique of paper and pencil, collage or even photography that could have helped you in the thought process of building outstanding UI for your product.
Depending how you want to go to your portfolio, there are different ways and techniques to show these sketches:
- The simplest method is to scan your sketches and make good use of Photoshop to handle levels, contrast, and brightness before using them in the correct size (not too big nor too small). Depending what you want to show with these sketches, they can all be on the same page spread everywhere or more organized, selecting just a few of the most polished ones.
- If you got inspired by particular objects, taking photographs from above at a 90° angle would show the object in a real size and it’s a trend that’s been quite useful as of lately (be careful of any shadows over your object!). If your object isn’t as flattering at that angle, however, using non-conventional angles like diagonals could help give the photograph more movement.
- Other tips regarding photography: 1. make sure the photograph is not blurry and that there aren’t other items creating noise or disturbing the general picture, and 2. consider properly cutting those objects and placing them over solid color backgrounds or alternatively create a scenario that serves as context. For both cases, do check contrasts, brightness, and levels as we don’t want it to be too bright or too dark.
- Collages, paintings or experimentation over a paper with different items like brushes, pens or watercolor pencils can also be scanned or photographed. It mostly depends on what is important to show for each project, and what experiences are important for our client to have when they’re taking a look at those pages.
This is your work process and the way you show it will depend on what kind of projects you’ve worked on. If your main focus is iconography, showing rough sketches and a step-by-step process through to the final form are recommended. If you’re focusing on mobile products instead, screens that are connected to one another to show a feature can also tell a story, and initial sketches of the interface itself are always helpful as well.
Consistency and coherence are important to tell a story no matter how you want to show it. And even though each product will have its own unique style there is a rhythm that will guide your client’s eyes through each page.
To summarize everything, remember to:
- Keep in mind your target which will probably depend on your specialization as a UI Designer.
- Pick reasonable numbers of pages for your portfolio that can showcase the kind of professional you are.
- Do some benchmark; research has never hurt anyone.
- Set realistic deadlines, and treat your portfolio building as another project.
- Whatever you do, don’t forget about visuals, including written details and your work process. If there’s something a UI Designer can stand out in, it is by being quite meticulous with details.
- You live and breathe visuals but storytelling is just as important to differentiate you from regular designers who fall into the “Dribbblisation of Design” category.
- Be coherent and consistent with your style through every part of your portfolio.
Last but not least: have fun! Your portfolio, whether UI, UX or any other kind, should show not only how capable you are as a professional but also part of your personality and that you have a unique voice and style to offer.
Writer’s Note: This is the first of a series of portfolio guides that aims to help those among our readers with the skill set that is featured.
A portfolio is a very important link between a designer and a client. It aims to impress a potential client by showing the designer’s work and skills. At Toptal, we screen a lot of web designers and review a lot of portfolios. Creating a top web design portfolio is by no means easy, even for experienced designers. We’re sharing our tips to help you create a top portfolio.
1. Content Is King
Most web designers are no strangers to the concept of content first. Content is king in web design, so why not apply that same concept to your portfolio? Make content the star of the show and focus on the quality of the message you are trying to get across. Try to avoid eye candy in the images you use and concentrate on engaging potential customers through the statement you are making. This is not to say you should neglect the images — after all, they will without a doubt attract clients and open a few doors — but the copy is likely to make you the ideal candidate for a job. Without great copy, there’s no top portfolio. As a result, you might easily appear less professional and the client could choose a different designer. Well-written content is your best chance to communicate your skills and expertise and sell your work to a future employer.
2. Take Your Target Audience Into Account
Another well-known web design strategy is not to think of yourself (the web designer) as the user. As you would with a web design project, think of your target audience and their wants, needs, and possible limitations. Put yourself into the shoes of the people who will be viewing your portfolio, find pain points and fix them. Help them understand the message you are sending.
Remember that a portfolio is about projects, so aim to find the right balance and remove everything that gets in a way of a clear, concise message. The goal of a portfolio is to showcase your work to potential clients and impress them. They need to find a quick and easy path to the information they want, so think of a way to provide just that.
3. Tell a Story
Engage potential clients by telling a story. For instance, explaining the process behind a project could come a long way. Showcase not only a finished product but also the way you solve real problems. This will help clients appreciate the time and effort invested behind the scenes and get to know you as a web designer. Explain your role in the project and mention the techniques and technologies used to demonstrate the value of your work. Your skills should be reflected in the images you provide.
If you were a member of a team, mention and promote the success of the entire team and the project, not only your role. Are there some detailed UI problems you solved which you can share? What deliverables were produced and why? Which of the major KPIs can be used to demonstrate project goals and success? Was there a part of the project that was not a success and why was that the case? Try to be objective and honest — not every step of the project is without flaws and no web designer is error free. Honesty might just be the best policy and it might impress clients. While you could do all this in a Skype meeting with a potential employer, why not save yours and their time and tell a story in your portfolio? It’s a definite win-win situation.
4. Don’t Make Your Clients Think
“Don’t make me think” by Steve Krug is one of the most famous web design books and, generally speaking, lessons in web design. Avoid being vague to let clients accomplish their task without hitting roadblocks. Make sure your work, as well as personal and contact information is easy to understand and digest. Present goals, results, and features in a direct and concise, intuitive fashion. If your project is live, make sure to provide a link to the website and let the client discover more. The browser is the natural environment for any website, so it only makes sense to let clients view your project in it. If the project is not online, maybe you can provide a link to a detailed case study, a front-end prototype, or a style guide. This might be your only opportunity to make a lasting impression, so invest extra effort.
5. Be Professional
The final tip may be obvious, but is by no means insignificant: be professional in your presentation. Assure clients you are not willing to gamble with the quality of their projects.
There is a number of ways you can do this. Here are a few:
- Use spell-check software to avoid spelling errors and come off superficial.
- Consider specifying the start and end dates to provide additional information and add to the credibility.
- Optimize images without sacrificing quality — no-one wants to see pixelated images, but no-one wants to wait for them to load, either. After all, we’re web designers and therefore no strangers to image optimizations.
- Be honest when stating your work experience and job title.
- Give credit where credit is due. If other agencies and team members were involved in a project, mention them and their role.
- Select only your strongest portfolio pieces — quality will always win over quantity and you may well be judged by your weakest work.
- If the project was a success, ask the client for a testimonial and add it to your portfolio.
- Ask peers for a review to find ways of improving your portfolio.
- Much like any website, your portfolio is never finished, so remember to update it regularly and keep improving it.
This wraps up our tips for creating a top web design portfolio.