Designing, Developing, & Deploying Your Portfolio Part I: Research & Planning
Plan your portfolio by exploring several other designers’ portfolios
In this series:
- Part I: Research & Planning
- Part II: Wireframing in Figma
- Part III: Building with Bootstrap
- Part IV: Deploying with GitHub Pages
Welcome to the first part of Design Innovation’s online guide on how to design, develop, and deploy your online portfolio. While this was intended to be an on-campus workshop series pre-pandemic, we hope to provide you with a comparable caliber of information and interactivity through Medium. To that end, please leave questions and/or comments down below, email us at designinnovationillinois@gmail.com, or message us on Facebook.
This series will guide you through the sometimes daunting task of creating an online portfolio. If you follow along, you will plan your portfolio by exploring several other designers’ portfolios (Part 1); you will be introduced to the interface design tool, Figma, and create a wireframe of your portfolio (Part II); you will learn how to use HTML, CSS, and the Bootstrap library to build a portfolio (Part III); and you will learn how to deploy your new portfolio with Github Pages (Part IV).
Research & Planning
In this article:
- The role of research & synthesis in the design process
- Portfolio case study samples
- More portfolios to browse
The role of research & synthesis in the design process
Often, the first steps of the design process are researching user behavior and competitor products, and organizing the findings. To produce innovative solutions, designers must understand existing products in the domain, their users, and potential users of the product-in-progress. Corporate design teams will work through the research and synthesis process before launching a new product. And we, too, should understand our users and study other portfolios before launching our own. Of course, other designers are not necessarily our competitors (although, in some cases, we are competing for the same job). Certainly, though, it helps to understand how successful designers have developed a solution to the problem you’re currently facing: how to create a portfolio that will land you a job.
It may not seem necessary to do a lot of research before building your portfolio. But starting to build a portfolio is much like any other product — it’s a solution to a problem. For many students reading this, you have a problem: you need a job after you graduate. To get a job, you need to convince one or several people at an organization you’re interested in to give you one. For those hoping to break into design, that may involve having an impressive portfolio. Upon starting to create one, though, you may hit a wall of questions: How do I organize the projects I want to showcase on my site? Where should I put my biography? What colors/fonts should I use?…
There are several streams you can use to investigate answers to these questions. For example, here is an article which discusses what recruiters look for in a portfolio. Also, you can consult your friends who have managed to land positions and designers. Another great way to find inspiration for your portfolio is to browse other designers’ portfolios. In the next section, we’ll show you a couple portfolios of designers we admire, and we’ll note some properties of their web pages.
Portfolio case study samples
As you browse portfolios, you may notice that one designer has a drastically different portfolio than another. After all, the motivations (and styles) of all designers are not the same. Some designers may seek to impress recruiters, while others are interested in showcasing work to potential consumers, and others seek to keep track of their own progress. In researching other portfolios it’s beneficial to keep your own motivations in mind. To plan your portfolio for your own specific needs, isolate and note the elements and properties that you like (tip: use Inspect Element to investigate colors and fonts). We’ve gone ahead and started to do that for you for a couple portfolios below.
When we introduce you to HTML in Part III, we’ll show you how to create some components that you see, like a project display grid. The benefit to isolating components and knowing how to create them is that you don’t have to rely on presets from website creators. You’ll be able to customize your portfolio as you please. Note that your portfolio will likely change over time, as its purpose changes or as you improve your web design skills.
Devin Halladay’s Portfolio
Notes
- Bio landing: the first thing you see is a biography of the designer, with links to specific pages
- White/gray text on black background
- Primary typeface: Neue Haas Unica
- Big margins on desktop
- Project gallery comprises a carousel of featured projects with the rest listed below
Jason Yuan’s Portfolio
Notes
- Single page portfolio: scrolling down will yield a showcase of projects and scrolling up will yield a biography
- White/gray text on dark gray background
- Primary typeface: NB Akademie Std
- Small margins on desktop
- Project gallery is grid-like
Who do you think each portfolio above was designed for? —
And how does it cater to them?
What do these portfolios have in common and what’s different? —
Why do you think that’s the case?
In the previous section, we declared that we should understand our users… but who are they? Well, who will interact with your portfolio? Perhaps you are building your portfolio for recruiters. Before you begin designing, put yourself in the shoes of your user — in this case, a recruiter. How might you plan your portfolio such that your projects and skills catch the eye of the recruiter?
As you plan your portfolio, feel welcome to ask us questions. For font and color palette inspiration, consider exploring Google Fonts and Color Hunt.
More portfolios to browse
In closing, we’ve listed a few more portfolios below for inspiration. Don’t settle for just the examples we shared — do your own research and explore diverse and creative inspiration for your piece! Stay tuned for our follow-up coming soon, Wireframing in Figma, and follow our updates on Facebook, LinkedIn, and Instagram.
By Austin Sun and Sulaiman Sanaullah (:
