DEV Community

loading...

Building My Personal Site – Part 1: Planning and Designing

Eka
Web developer, late bloomer. Can center an element with grace and style (pun intended). Mostly sensible (citation needed).
・7 min read

ekaaa.me landing page design preview

Work in progress

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.

My personal site's simple data model diagram

Basic data model diagram for my personal site

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

spiderman pointing at spiderman

Designer: Me, Client: Me

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.

More than forty artboards of landing page design variations, some are almost similar, some others are vastly different

These don’t even include ones that got discarded along the way

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?

garish landing page design contenders

Me: *reads an art book once...*

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.

Person pulling her hair out

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. 🤷🏽‍♀️

Landing page design - top

Landing page design layout

I’ll let the illustrator choose whichever version suits her artwork better (screenshot above uses placeholder)

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

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

Discussion (6)

Collapse
terabytetiger profile image
Tyler V. (he/him)

This was a fun read to follow along on the journey, especially as someone that's setting this as their goal for 2019! :D

Collapse
ekafyi profile image
Eka Author

Thank you for reading! Probably a good idea to not leave it til mid-December though. 😁

Collapse
terabytetiger profile image
Tyler V. (he/him)

Leaving it for mid-December is just part of the procrastination workflow challenge fun!

Collapse
didin1453fatih profile image
Didin 👨‍💻

Nice post!!!
I think you can try dbdesigner.id to create Entity Relationship Diagram 😎😎😎.
This can help you to collaborate with your team on web and cut off your step in generate SQL Create database.
I write this article to explain more about this devtool dev.to/didin1453fatih/database-des...

Alt Text

Collapse
anarchalk profile image
Anar Chalk

Hi Eka, it was great thanks for sharing your adventure story :) I enjoyed reading it and will check out the suggested design tools

Collapse
itsjzt profile image
Saurabh Sharma

Thanks for sharing. Humaans.com and undraw