modayil.me 🛠️

Learn how I built my site

Synopsis

Ben needed a new online living space. So in turn, he created this site.

New Beginnings

If you've been on my site before, pre-November 2017, you'll notice things are quite different. In the past you might have seen a wide variety of adaptations of the site. Currently, I'm sticking with this one, but treating it like good ol' HTML, a living standard.

I don't know what this site will hold in the future, but I know what it's good for now, a place to learn, grow, experiment, and vent.

A brief history

The first time I built my website was in Balsamiq Mockups. For those of you that don't know, Balsamiq Mockups is for making... mockups, but very low-fidelity versions. In fact, I would argue that they are just wireframes at their core.

That was when I was just learning how to make websites in my first web design class. Thank God, my teacher encouraged me to hold off on designing a portfolio site early on and point me into a more capable program for high-fidelity designs.

Sadly, I do not have the old comps from Balsamiq to display. Just know that they looked like poor sketches with bright colors.

Later on in my junior year, I went through marathon periods of trying to design and code a portfolio for myself and I would never settle on a design.

The impossible thing of it all is the acknowledgement that we don't know how to design for ourselves. We are our own worst critics. As you can see from the listing of projects below, it is quite noticeable how much I self critique myself and my design capabilities.

Listing of the MANY coded sites I've made

Each of those directories either denote a new attempted design direction, or an attempt of a feature change.

You might ask why not use .git and github to track these different branches/directions?

And I'd have to admit that my experience with .git and github were significantly lacking at the time. I'm realizing that this whole process only made me recognize the need to learn git more and I'm glad that I did (with help from my experience as an Intern/Apprentice with Viget

Design Directions

I'm not much of a formal designer. I've completed classes for a Web Design minor, but most of my love for the program was directed towards the code-aspect of it. It was only towards the end of my Junior year that I started caring about design more. If I can avoid design work, I do. If I can't, then I get too introspective (as you'll see in the images below).

Here are some of the design directions I've made so far:

Site V.1

Thoughts behind the design:

The primary purpose of this design was to showcase my love for animation on the web. I wasn't good at animation, but I was the only one really doing web animation at my school, so it did place me apart from others around me.

After a critique from a bunch of my professors, I realized there was a small U.X. issue with the site as the navigation on the left lead to different pages instead of scrolling to the corresponding sections below.

Site V.2

Thoughts behind the design:

This actually wasn't the next design made. I'm missing a couple of designs from when I used to work on Photoshop, so this is the next I can show. I wanted to see how might my site might look with a lighter color scheme. I'm a pretty effeminate/unmanly man so I thought having a touch of pinkish tones wouldn't be too bad, albeit color contrast was very problematic, plus a significant amount of other issues.

Site V.3

Thoughts behind the design:

I loved this color scheme. My top three favorite colors are black, dark navy blue, and toned red. So this covered part of those and stuck enough with me to an actual live site version.

This was actually the last version of my site to be live. I had a slow transition into my internship that I wasn't able to give it enough love as I originally intended, so I took my site down until I could.

I never really did get to showing that rendition more love. And of course I explored more paths.

Site V.4

Thoughts behind the design:

This was another proposed design from the batch of of site creations that I liked a lot. The only issue with this one is that it got really complicated very fast. Like some of the past designs I had a "Labs" page and a "Work" page. The purpose of the "Labs" page was to showcase experiments and the work page to display actual work that I wanted people to judge me on. This became very messy that it pushed me to try to simplify these pages into one, but I didn't actually get to do that until my final design (no it's not the next one)...

Site V.5

Thoughts behind the design:

I went back to my favorite color scheme on this one. While I felt this design stacked better and looked more sectioned off, it still sold itself on not being as simple as it could be.

At this point, I just realized that I only needed a place to write blog posts and place some case studies.

I also realized that I didn't care about anyone else's opinions on how my site looked and I used that as an excuse for not actually having anything live. But still, this was lacking in my approval.

The Penultimate Peril

Site V.6

Thoughts behind the design:

Know how much I don't care about what others think about my design choices? I have a freaking red border around my site. I actually liked the border idea, but couldn’t make it fit well.

Finally, done, at last.

Now, I’m happy to present my final site design.

Site V.6

At the moment, I’m done with large scale design work. I’m just going to stick to tinkering with this dark theme for a little bit and fine-tuning it to perfection.

If you were looking for a tech-stack/detailed log of how the site was made, then look forward to a part two piece coming soon once I have the site broken in for a few weeks. I got to use some pretty 👌🏾 things that I learned over my apprenticeship, plus other things that I’ve been learning on the side, like GatsbyJS.

Stay tuned for more. I’ll post the link for part two here when it’s ready

Other articles you might like to read: