Oliwia Bober, an illustrator based in London, approached her latest web design portfolio the way an editor would.
Her previous website had everything on it: “big and small projects, lots of click through pages, tabs, illustrations, and paper art—it was a mess,” she says. “This time, I wanted to have only a few pages, for each page to have a slightly different feel, and be fun to look at and scroll through.”
This meant she had to cut and curate: “I’ve left a few projects out so that everything you see is most representative of the kind of work I’d like to make going forward,” she says. This includes bold illustrations, like flowers that reveal themselves below the fold when the user scrolls.
“I like to paint big so it was important to me that the images take up space,” she says. Here, as part of our How I Made This series, she explains how she created the impossible-to-ignore scroll effect featuring her original illustrations.
Bober's illustrations before and after scroll.
Describe your website and company.
I’m a freelance illustrator, and the website is a portfolio of my favorite work so far. I wanted the design of the website to work hand in hand with the illustrations.
What was your goal in designing this website?
The portfolio was always going to take center stage, but I didn’t want the remaining pages to seem like an afterthought. I also wanted a bit of my personality to show, so people looking at it get some insight into the person behind the work.
What’s the one design feature on your site with a major wow factor?
Flowers are everywhere in my work. It seemed only right to incorporate them into the website itself. The idea behind this feature was to have flowers growing out of the ground at different intervals.
Now spill: how’d you do it?
Follow along with Bober as she makes a layered footer illustration in under five minutes.
What do you love about the feature?
I wanted to include play for the sake of play on the landing page before you click through to the meat and potatoes of what I do. There are hundreds of good illustration portfolios online, and it can feel hard to make your work stand out.
I wanted to use these additional, small, interactive elements to get people to slow down and spend a little more time on each page. Visually it’s not very complex, but I think it’s fun, and hopefully it sets the tone for what the rest of the website is like.
How long did it take you to build the feature from start to finish?
It took me weeks. This isn't because Editor X is difficult to use; it’s more a testament to how I tend to work. I had a vague idea of what I wanted to do but not a solid design or plan. There was a lot of going back and forth, lots of iterations and trying to incorporate many different things that I liked.
In the end, I had to strip it back to basics and only include elements that visually worked with my illustrations. I’m still a little scared to open the ‘website 2022’ folder on my computer and see all the files named “final.” I’m patting myself on the back for managing to condense it into a neat four-minute recording.
The completed scroll effect in action.
What’s your one piece of advice to a fellow web designer who wants to try it themselves?
The grid is your best friend and getting your head around the more technical aspects—l
ike docking, margins, the difference between viewport height/width, percentage, fraction, and so on—will save you time in the long run.
What’s next for you?
I’m working on a couple of personal illustrations to turn into an old school lenticular print. I’ve also got some commissions in the pipeline, but they’re very much in their early stages. They’ll definitely find their way to the website once they see the light of day.
