Like several good on-line recipe, I’m going to begin with the meta-story earlier than I present you something helpful. Then I’ll stroll by what I constructed, and break down the 2 interactions individuals requested about most.
What follows is a component design story, half course of breakdown: from the preliminary reference level and the thought behind the portfolio, by to the visible choices and a better have a look at two interactions inbuilt Framer.
The way it All Began
It began with a Japanese guide cowl design.
Not a quick, not a temper board, not a design system. Only one poster I actually favored, and a obscure feeling that my portfolio ought to by some means appear to be that. For a very long time, that was my plan. And for a very long time, it didn’t work.
That is the story of how I scrapped it, discovered a greater query to ask, and ended up constructing one thing lots of people apparently actually favored. 😅
The Drawback With Chasing a Reference
Like most designers, I began my portfolio course of by on the lookout for inspiration. Pinterest, Cosmos, X — the same old spots. I landed on a classic Japanese guide cowl I beloved (see above), and I spent months attempting to make my portfolio appear to be it.
The error wasn’t the reference. The error was that I used to be translating a method as a substitute of an idea.
Every little thing turned: “How would this poster look as a UI?” And the reply stored being: not fairly proper. The poster had qualities I beloved, however pulling these qualities right into a display screen with out understanding why they labored simply produced one thing that felt like a dressing up, not a perspective.
After sufficient months of this, I did what each designer ultimately does.
I scrapped it.
However making that mistake introduced me someplace extra fascinating. It compelled me to ask a greater query, not what my portfolio appears like, however what it looks like, and why (I used to be additionally studying Begin with Why – Simon Sinek on the time, 10/10 would suggest)
Beginning With a Idea As an alternative of a Look
Going again by all my Pinterest boards and Cosmos saves, I compelled myself to search for an thought quite than a visible reference. I used to be going large, artwork actions, subcultures, bodily supplies, something outdoors of UI. I didn’t need it to appear to be each different design portfolio on the market, so I intentionally regarded the opposite method.
On the similar time I used to be questioning what a portfolio ought to even be. My take: it needs to be about you as a designer, not simply the work itself. A group of screenshots with labels is straightforward. A perspective is uncommon. So I used to be all this inspiration by the lens of who I feel I’m.
The idea I’ve landed on is a bit summary: it’s the feeling of getting objects which can be there to rapidly seize an thought. It’s momentary, but crucial to the method and the sum of the output.
The idea is a bit summary: objects that exist purely to seize a thought earlier than it disappears. Non permanent by nature, however important to all the things that comes after.
That is my “inspo” board, how I prefer to make this:
- Hold it bounded. One part, fastened measurement. No increasing the body to suit extra stuff in. The constraint is the purpose.
- Depart notes. What did I like about this? What am I truly attempting to steal? If I can’t reply that, I haven’t checked out it exhausting sufficient.
- Curate the structure. Measurement, spacing, what sits subsequent to what. Deal with it like a mini design train. The way in which it appears impacts the best way it feels to reference later.
- Have limits. As soon as the sections are full, cease. Don’t go on the lookout for extra. Actively keep away. This retains you centered and stops you chasing the following shiny factor earlier than you’ve achieved something with the final one.
- I broke this rule rather a lot. Each time I did, I’d pivot, then pivot again, then marvel why I’d wasted a lot time entering into a circle. Be taught from my errors!
As I’m making my board to seize this concept, I additionally write down the qualities that make this concept what it’s:
- Spontaneous, not treasured
- Imperfect by design
- Private, tactile, fast
- The type of factor you do if you’re pondering, not performing
The concrete reference I stored coming again to: doodling on paper. That was the bodily manifestation of all of those. The sketch you scribble in a pocket book margin, the drawing that exists solely since you wanted to assume. It’s an ideal object of seize.
And all of the sudden each design choice had a filter. The way it appears, the way it features, the way it behaves. Every little thing runs by the identical query: does this really feel like one thing you’d use to seize a thought, not show one?
Sure? Do it. No? Scrap it.
And I used to be ruthless about it. There have been parts and interactions I genuinely beloved, that I’d spent actual time on, that simply didn’t match. Gone. That’s the factor about having a north star, it makes choices quicker and likewise more durable. You possibly can’t preserve one thing simply because it appears cool.
I finished evaluating towards “does this look cool” and began asking “does this match.” Significantly better drawback to have, particularly if you wish to preserve your sanity.
How the Idea Confirmed Up within the Design
The portfolio is designed in Figma and inbuilt Framer, largely utilizing native Framer capabilities. The design course of took considerably longer than the construct. As soon as I knew precisely what I used to be making, the execution was comparatively fast.
The idea translated into 4 concrete design choices:
Precise doodles
Hand-drawn components. These aren’t inventory illustrations or SVG icons, they’re issues I drew on my iPad in Procreate. I took a screenshot of the design, pasted it in Procreate and simply doodled on high of all of it
Texture
The portfolio wanted texture, but it surely couldn’t be soiled. When you’ve labored with textures earlier than, you’ll know there’s a tremendous line between having a texture look “soiled” since you need the feel to be seen, and having a cleaner, crisper look since you need it to be felt. I’m aiming for the latter, with using:
- Utilizing shapes to offer the bodily really feel, like the form of a tear within the paper.
- Far more refined textures and simply trusting that it’ll be felt
- Crisper highlights through the use of high borders as a substitute of a light-weight interior shadow.
Color
I took a screaming U-turn from my earlier portfolio, which had a bunch of various saturated colors. This time I’ve tried a extra restricted set (Major + Black and White solely)
Constraint can be a type of route. As an alternative of deciding what to go for, you’re deciding what to rule out.
Typography
I used a handwritten font paired with a serif.
The handwritten kind is the doodle itself, the freehand mark, the factor you place down rapidly. The serif performs the function of the printed grid strains on a pocket book. The construction you’re drawing on high of. Two issues that shouldn’t go collectively, however truly make sense as a pair when you see it that method.
From right here, it’s reps. Iterate, transfer on, iterate once more. I’m not attempting to get every thought to 100%, simply far sufficient to get an thought.
The Interactions That Made It Bodily
Okay, so now let me take you thru how I did these two interactions.
The navigation
I first created the doodles of their totally different states utilizing the Stroke function in Framer. Ensure that to maintain the naming constant, as you can be utilizing a transition to maneuver the precise strains.
As soon as I’ve the totally different states of my doodle, I then hooked it as much as the primary nav part. The method is strictly the identical, totally different hover states will set off the totally different doodle states. And since the identify is similar and there’s a transition utilized to it, it can “sensible animate” like in Figma.
The cardboard flip
This card trick has two components to it:
- The cardboard animation: A flip that cuts straight from entrance to again. The important thing was utilizing delayed animations on the in-between states, so there’s a second the place the cardboard is edge-on, neither face absolutely seen, earlier than it resolves to the opposite aspect.
- The sections as triggers: Every of the playing cards has a corresponding #part. The cardboard part is about to set off when it hits every part, utilizing Framer’s scroll animation. So your scroll controls the flip, not a click on.
What I’d Inform Somebody Beginning This Course of
Sounds apparent on reflection. Discover a idea, run all the things by it, achieved. However discovering an actual idea takes longer than discovering a reference, and it requires being trustworthy about who you truly are, not who appears good to a hiring supervisor.
The Japanese guide cowl section wasn’t wasted. It taught me what wasn’t working, which received me to the suitable query. Generally that’s the one method.
Just a few issues that helped:
- Look outdoors UI. When you’re different portfolios for inspiration, you’ll find yourself making one other portfolio.
- Write down the qualities, not the visuals. Not “classic Japanese guide cowl” however “momentary, private, made to seize not show.” The qualities journey. The visible doesn’t.
- Be ruthless with the filter. Loving one thing isn’t sufficient.
The north star doesn’t simply inform you what to make. It tells you what to do away with. That’s the extra helpful half.
