How I designed the fifth version of my website
This article details how I created the fifth iteration of my website opemipo.com.
Where it started
All four previous versions of my website have been simple HTML files. It usually goes this way: I get bored during some free time and the brilliant idea to upgrade my website pops up. I start building and designing simultaneously, wrap it up in some hours and then publish, future edits to be done directly from Github. This iteration is a deviation from that trend.
This time, I started designing by writing. That’s an approach I’ve been meddling with recently. By writing, I force myself to confront important design and implementation decisions very early. It also makes it such that by the time I’m done with building, writing is no longer a chore. So far it’s been such a great decision.
When this was done, I moved on to sketching as a way to affirm those ideas. Ideation was never completely done though, as I kept tweaking the structure until the very end of the project.
Look and Feel
My approach to visual design is rapid iteration. I rarely have an original idea fully fleshed out in my head. Instead, I start from somewhere — anywhere — and tweak continuously until it’s satisfactory. I start with a basic idea of what the layout will be like and then I continue in code, but I want to be more detailed with my work, so this time I took the time to fully flesh out my ideas first.
As I thought about what I wanted the website to feel like, I wrote down the words that came to my mind. I decided to go with a simple, colourless, magazine-like visual language inspired by a copy of an ArtX magazine I had laying about in my room. By focusing on my strengths and opting for a minimalist approach, this also meant I could create all the assets for the site by myself.
After sketching was done, I started visual design in Figma. Over the course of about a week, I sketched and designed and refined my ideas.
View the design here: Link to Figma file
By the time I was done with the design, I only had two more days of free time before work would start for the year, so I had to build it in much less time than it took to design.
This version of the website curates links to all my content across the internet, and to make updating it easier I decided to ship with a CMS. I thought about using new tools and strongly considered a headless CMS + static file generator combination. I researched Hugo, installed Ghost + Gatsby, almost tried Twill, but in the long run I decided to go with Jekyll.
The pros of Jekyll for me were:
- clearly the easiest to set up considering my time limitations;
- lightweight structure, no bloat;
- every new post has to be written as code so managing the site feels like more technically engaging.
Based on the design, I had two main pages to create
- opemipo.com — landing page with curated information about myself
- wuruwuru.com — curation of my design content (actually served from the same repo)
I broke the pages down into components using Jekyll’s includes, and I managed data separately, leveraging on another Jekyll feature data files. Setting up the site this way will allow me easily change the design without having to move the data. For example, I can decide to show a list of all my journal posts instead of just the latest one since the data is available.
As I moved from planning to actual development, the first thing I did was set up the folder structure for Jekyll. I almost always have a problem with installing things on my computer, so it took about two hours to install Jekyll, but I eventually had some luck with rbenv. I need to spend more time understanding the terminal, rather than ignorantly pasting commands from StackOverflow and hoping for the best.
I set up the layout using HTML5 Boilerplate, included all the — still empty — components, and then loaded the data in the components to make sure everything was working fine. After this, I went on to the easiest part of the project, building out the HTML and CSS.
I moved my hosting from cPanel to Netlify, and that turned out to be a little more stressful than I expected, but eventually I got it all set up and took the site live!
Here are some details I want to highlight:
One thing I tried differently this time was my approach to typography. Instead of scouting Google Fonts for candidates, I decided to buy fonts from an independent foundry. I found an article on Medium that listed eight of these font makers and went on to browse their entire collections for my required aesthetic. The sans-serif had to be very geometric, and I wanted a quirky not-too-serious serif to match. I ended up with Founder’s Grotesk from Klim and Bianco Serif from Alfa Type. I also made sure to optimise webfont performance using this guide from Google.
I’m not great with colours and illustrations, so I used a visual style that I’m very comfortable with — minimalist, white & black, line patterns. I really wanted to infuse colour at different points in the project, but I managed to quell the thought every time.
Opting for this simpler approach forced for me to start thinking creatively so I could have some uniqueness, for example mimicking the design of an engineering drawing title block for the metadata.
I didn’t really use a lot of assets in this version, but the few that I used, I created. For the journal, I started from tracing out a reference image, gradually got more confident and eventually started drawing my own lines and patterns. I learnt that illustration takes a lot of patience, but I’m glad I took the time to do this myself.
I tackled accessibility and semantic code in real time but delayed performance optimizations till I finished building the design. After the first deployment, performance scores came in at 100 percent, so I didn’t immediately see the need for extra optimizations like service worker caching. Eventually though, when I have some free time, I plan to implement that and maybe also use Ire Aderinokun’s guide to make it work offline.
The disc on the currently digging section shows a real-time random list of tracks from my Spotify playlist. On refresh, a different list of tracks is loaded, and you can click each one to go to the Spotify track. I had to write an API to connect to Spotify and sort the track information. I did this using Glitch, and the code is available here if you want to remix it for yourself. Just change the environment config and you’re good to go.
This year at work I’ll be spending more time leading than actually designing, so now more than ever having a creative outlet is very important to me. Redoing this website in the way I did was a very encouraging start, and I’m really positive about the content I want to create this year.
I wrote a large chunk of this article before I even started designing, and I edited in real time as I worked. The goal is to make writing part of my design process, such that there’s no complete body of work I do without some documentation to share.
I think this is a good start.