Like every 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 folks requested about most.
What follows is an element design story, half course of breakdown: from the preliminary reference level and the concept behind the portfolio, by to the visible selections and a better take a look at two interactions inbuilt Framer.
The way it All Began
It began with a Japanese ebook cowl design.
Not a quick, not a temper board, not a design system. Only one poster I actually appreciated, and a obscure feeling that my portfolio ought to someway seem like 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 appreciated. 😅
The Downside With Chasing a Reference
Like most designers, I began my portfolio course of by on the lookout for inspiration. Pinterest, Cosmos, X — the standard spots. I landed on a classic Japanese ebook cowl I liked (see above), and I spent months making an attempt to make my portfolio seem like it.
The error wasn’t the reference. The error was that I used to be translating a mode as a substitute of an idea.
Every part turned: “How would this poster look as a UI?” And the reply saved being: not fairly proper. The poster had qualities I liked, however pulling these qualities right into a display screen with out understanding why they labored simply produced one thing that felt like a fancy dress, not a viewpoint.
After sufficient months of this, I did what each designer ultimately does.
I scrapped it.
However making that mistake introduced me someplace extra attention-grabbing. It pressured me to ask a greater query, not what my portfolio seems to be like, however what it appears like, and why (I used to be additionally studying Begin with Why – Simon Sinek on the time, 10/10 would advocate)
Beginning With a Idea As a substitute of a Look
Going again by all my Pinterest boards and Cosmos saves, I pressured myself to search for an thought slightly than a visible reference. I used to be going extensive, artwork actions, subcultures, bodily supplies, something outdoors of UI. I didn’t need it to seem like each different design portfolio on the market, so I intentionally regarded the opposite manner.
On the identical 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 simple. A viewpoint is uncommon. So I used to be taking a look at all this inspiration by the lens of who I believe I’m.
The idea I’ve landed on is a bit summary: it’s the feeling of getting objects which are there to shortly seize an thought. It’s momentary, but essential 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. Short-term by nature, however important to every thing that comes after.
That is my “inspo” board, how I wish to make this:
- Maintain it bounded. One part, mounted dimension. No increasing the body to suit extra stuff in. The constraint is the purpose.
- Go away notes. What did I like about this? What am I really making an attempt to steal? If I can’t reply that, I haven’t checked out it exhausting sufficient.
- Curate the structure. Dimension, spacing, what sits subsequent to what. Deal with it like a mini design train. The way in which it seems to be 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 subsequent shiny factor earlier than you’ve executed something with the final one.
- I broke this rule quite a bit. Each time I did, I’d pivot, then pivot again, then surprise why I’d wasted a lot time entering into a circle. Study 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, rapid
- The sort of factor you do if you’re pondering, not performing
The concrete reference I saved 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 a sudden each design resolution had a filter. The way it seems to be, the way it features, the way it behaves. Every part 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 elements and interactions I genuinely liked, that I’d spent actual time on, that simply didn’t match. Gone. That’s the factor about having a north star, it makes selections sooner and in addition tougher. You possibly can’t preserve one thing simply because it seems to be cool.
I ended evaluating towards “does this look cool” and began asking “does this match.” A lot better drawback to have, particularly if you need 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 selections:
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 prime of all of it
Texture
The portfolio wanted texture, nevertheless it couldn’t be soiled. If you happen to’ve labored with textures earlier than, you’d know there’s a effective 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 the usage of:
- 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 by utilizing prime borders as a substitute of a lightweight inside 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 (Main + Black and White solely)
Constraint can be a type of path. As a substitute 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 sort is the doodle itself, the freehand mark, the factor you set down shortly. The serif performs the function of the printed grid strains on a pocket book. The construction you’re drawing on prime of. Two issues that shouldn’t go collectively, however really make sense as a pair when you see it that manner.
From right here, it’s reps. Iterate, transfer on, iterate once more. I’m not making an attempt 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 completely different states utilizing the Stroke function in Framer. Make sure that to maintain the naming constant, as you may be utilizing a transition to maneuver the precise strains.
As soon as I’ve the completely different states of my doodle, I then hooked it as much as the principle nav element. The method is strictly the identical, completely different hover states will set off the completely different doodle states. And since the identify is similar and there’s a transition utilized to it, it’s going to “good animate” like in Figma.
The cardboard flip
This card trick has two elements to it:
- The cardboard animation: A flip that cuts immediately 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 facet.
- The sections as triggers: Every of the playing cards has a corresponding #part. The cardboard element is ready 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 every thing by it, executed. However discovering an actual idea takes longer than discovering a reference, and it requires being trustworthy about who you really are, not who seems to be good to a hiring supervisor.
The Japanese ebook cowl section wasn’t wasted. It taught me what wasn’t working, which obtained me to the proper query. Typically that’s the one manner.
A couple of issues that helped:
- Look outdoors UI. If you happen to’re taking a look at different portfolios for inspiration, you’ll find yourself making one other portfolio.
- Write down the qualities, not the visuals. Not “classic Japanese ebook 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 let you know what to make. It tells you what to do away with. That’s the extra helpful half.
