Building My Personal Site – Part 1: Planning and Designing

At the beginning of the year, I didn’t have a website. So I had “build a personal website” as one of my 2018 goals. Fast forward to mid-December 2018... I still don't have a website, due to a combination of vices (procrastination, worrying, perfectionism) and life events (got my first official dev job!). Follow me as I build a simple landing page just so I can check at least one goal this year! 🤦🏽‍♀️✅

🔗 Find a list of helpful resources at the end of this post!

Getting a domain name

I prefer not to use my full name and don’t want a pseudonym. I initially toyed with ekamak.es — I like the letter repetitions (“makes” contains all letters from “Eka”) and the possibility of sentence-like URLs (ekamak.es/websites). But I was aiming for a more versatile name that’s not necessarily tied to a “maker” image.

I ran a Twitter poll between ekamak.es vs ekaeka.me, which the latter won. In the end, I went with… neither. I typed ekaaa.me into the address bar, fell in love at the first sight, and bought it right away. ¯\(ツ)/¯

Data modelling

Data model is a model of “the logical inter-relationships and data flow between different data elements involved in the information world” (Techopedia). The most common type is the relational data model, which sorts data into tables, columns, and rows. Entity Relationship Diagram (ERD) is the visualization of the relational database, which “illustrates how ‘entities’ such as people, objects or concepts relate to each other within a system” (Lucidchart).

I’m planning to build my site on Gatsby with data from JSON and Markdown files, hence no database. I did not create a full ERD, but I make a rudimentary diagram as a reference for myself.

Although I’m not planning to use a large scale database (⚠️ this is NOT an accurate ERD for database tables!), and may not even implement this diagram with 100% faithfulness down the road, creating this diagram gives me a bird's-eye view of my site data, which will assist me in architecting the data later.

As you can see, the 2018 iteration of my site will not have much content. It will only have one page, the Landing Page, which contains:

• Text about me and my work
• 3 latest blog posts (one of which will be this post!), which link to the single Post view
• x latest projects, which link to external project URL on Github or Glitch (I’m coding this section but not going to include it in deploy)
• One favourite quote shown randomly, just because

Site contains generic site-wide data to be used throughout all pages, both for SEO metadata and for the “site info” section (ie. the footer/sidebar).

We’ll be revisiting this when we setup the site in the next part!

Prototyping a design on Adobe XD

To me, visual design is the most frustrating part of web development. I understand the basics well (symmetry, proximity, contrasts, grids, etc) and I can make basic layouts and UIs that users like. But I hate that I cannot make complex designs that express particular mood and characteristics through apt choice of colours, typefaces, shapes, etc. I hate not being good —just passable instead— at something I like.

In the past, I’d sweep it under the rug and avoid it altogether. Only recently did I realize it’s something I need to unlearn. So I resolved to suck it up and do my best to design my personal site. If anything, I can know for sure the extent of my design ability (would be interesting to revisit a year from now!). Outside of this, though, I’ll just get good enough to work in companies or with clients that have good UI/visual designers. 😉

Design brief

I’m not sure what an actual design brief entails; I used these guiding points in place of a brief.

Website objectives:

• Create visual brand for my online presence
• Inform about who I am, what I do, and my interests
• Showcase my front-end development and UX skills
• Get engagement, such as comments or shares

Audience:

• Friends and acquaintances
• Tech, design, or music communities I interact with
• Future potential employers, competition judges, etc

Mood and tone:

• Bespoke, not “template-y”
• Clean but not formal
• Striking, playful, but well-structured

Design styles and motifs:

• Modernist, Swiss, Bauhaus, de Stijl, Josef Müller-Brockmann, Factory Records posters
• Geometrical shapes and lines
• Large sans-serif typeface(s)

(No special rationale other than they are my personal favourites and I never got to play with these elsewhere)

Enter Adobe XD

Adobe XD is Adobe’s application for UX design and prototyping. Among some other graphic prototyping apps I have tried, this feels the most intuitive and reassuring.

Some features I particularly enjoy:

• Work offline (main reason I chose it over Figma) with cloud sync
• Customisable grids
• Repeating elements (very useful for eg. “cards” and post excerpts)
• Assets library (save colours and typography styles, change all instances with a click)
• Sophisticated “snap” functionality that makes it a pleasure to move things around

Indeed, moving things around was the only thing I’d accomplished since late July. I’d start a new artboard, add content, move things around, which usually spawned several minor variations. Then I’d get an idea in a different direction, add another artboard, and so on.

All that time, sometimes I’d favour a particular version, only to shift to another the next day. Yet I did not feel strongly enough toward any of those to settle my choice. These designs —except a few “experimental” eyesores— do meet basic requirements (clear hierarchy, legible sizes and colours, fairly easy for users to scan/get the information they want). How do I choose?

From this process, I found what exactly made visual design difficult to me compared to other parts of front-end development: I can’t tell when it works and when it doesn’t, and how to arrive to the best solution. Sure, user testing/interview is the ideal answer, but not always possible.

In comparison, out of the many ways to fetch a data set and serve it to users (for example), I can decide on a solution based on a set of criteria (fastest, most efficient on resources, cleanest and/or least amount of code, least prone to error, in my preferred language/syntax, etc). If I don't know how to do something, I can search Stack Overflow (or dev.to!) and tweak other people's solutions to suit my needs. These are not possible in visual design.

I worked hard on this until August. Morale was getting lower; I was getting busier. Over the next two months I only tried continuing to design roughly once a week, and hardly touched it again afterwards until last week.

The end of this infernal adventure was brought by my domain name hunt last week. While puzzling over the names, I opened XD to see which one looked best when set in type. I decided against writing the domain name in the design, but I also got a new design idea, which I cobbled together with parts from the previous strongest design. I had to leave it the next few days to attend to more pressing things, but yesterday I went back to it, spent several hours on the grids and everything else, and just like that... I knew I was done. 🤷🏽‍♀️

The top image is from Pablo Stanley’s awesome Humaaans set. It’s available in SVG, so editing is a breeze! The middle image is a temporary placeholder from Undraw — I sourced my illustrator friend to make an artwork, and in the meantime I’m going to start developing the site.

If you are reading this far, thank you for bearing with me! In the next part, I will be documenting how I develop the UI component on React and Storybook. Let the fun begin! 😎

---

Resources

Domain

• Namecheap — extensive domain name choice, good service so far
• Random.org Coin Flipper — to pick a good name

Data model & ERD

• Lucidchart — I use this to make the diagram above. Free tier available. They also have good articles on ERD and Database Model.
• ERDPlus — alternative to Lucidchart that focuses on ERD; better technical features, but less pleasing visually

Prototyping

• Adobe XD — free download
• Humaaans — free people illustrations by Pablo Stanley
• Undraw — extensive library of open-source illustrations by Katerina Limpitsouni
• Pigment by ShapeFactory — simple, beautiful two-colour palette generator. I stopped using any other colour picker after finding this.
• Coolors.co — another good colour scheme generator
• Accessible Colors — colour contrast checker (AA and AAA, with customizable font size and weight)
• snook.ca’s Colour Contrast Check — another colour contrast checker with more technical details

Design tips for reluctant designers

• A Web Design Crash Course: From one non-designer to another — Ali Spittel
• Refactoring UI — Adam Wathan & Steve Schoger
• A Five-Minute Guide to Better Typography — Pierrick Calvez
• Laws of UX — Jon Yablonski
• Making and Breaking the Grid: A Graphic Design Layout Workshop — Timothy Samara — Not design tips, but contains extensive examples of grid usage