I have never been under the assumption that I was good at design. Colour schemes have always been way beyond me; everything design related has always been way beyond me. But I always compensated for it, or so I thought. I wasn’t good at design, but I had found a CSS framework I got along with, mixed in some sass for more control and thought I was functional.
But I distinctly remember the moment that I realized that I was far from functional. I had just pushed Fitness Tracker, had waited for DNS to propagate and was drinking a coffee when I decided to check it out on my phone. Greeted with an icon that makes the Midtown Manhattan skyline look puny and a colour scheme that hurt, I said to myself, “you really suck.”
You really suck
Armed with the realization that functional was too kind, I started critically looking at other things I had put up. As I looked, I realized that I was going for something. There was always a distinct direction behind each page. But I missed it. I missed it by so far I went the other way and fell off a cliff.
Oh well, I tried to push my focus back to Fitness Tracker. It wasn’t really that bad…heck, the page was really just there to get indexed. I could go back and make it look passable.
But how? As I looked closer at every design I had ever done in my entire life, I realized that I couldn’t even articulate what was so wrong with them. They were just bad.
Generative AI to the rescue
Without even the language to search, I turned to ChatGPT and asked it to plan a self directed course where I could start learning about design. As I looked over the materials and at the practice exercises it recommended for me, I got another idea. If I was going to implement menus from scratch for practice anyways, why not build a site as an exercise?
And so ChatGPT and I entered a workflow. I would build a thing, style it and then show ChatGPT my code with a prompt like:
I have attached _header.scss, _nav.scss,
partials/header/nav.html and partials/header/header.html.
Can you review what I have written from the perspective
of solid design principles? Do not compliment me unless I
have followed proper and accepted design principles for
the whole implementation.
When I have deviated from solid design principles, please
follow these instructions:
1.) Point out the markup and classes.
2.) Go through each class and point out the mistakes I
have made.
3.) For each mistake, please explain what I did wrong. Name
any design principles that I violated so that I have terms to
research and if possible provide resources for me to learn more.
That first prompt drove up energy prices around the world and accelerated global warming by at least a century. I had done absolutely nothing right so asking ChatGPT to review four files from the perspective of proper design principles was the equivalent of asking it to simulate the origins of the universe.
My prompts got quite a bit more simple for the next several rounds - I started asking really basic questions about colour schemes, contrast and font sizes. My previous method had always been to go to a colour scheme generator and hit the space bar until I liked what I saw. I never considered things like how contrast between foreground/background, font, size and spacing all worked together. If you clicked the Fitness Tracker link above or even if you look around this blog, I’m sure that is obvious.
For example, look to the right of the page, specifically at the “About Greg” heading and the text underneath. The text underneath is the wrong colour and size. The line-spacing is too tight and there isn’t enough separation between it and the heading. It all looks fuzzy. But then there’s the pencil…
Oh yes, the pencil in the hero. A 200 pixel high pencil…a UIKit icon right there just screaming, “I put a pencil icon in the hero because I am a bit of a zero.” It’s sad because the UIKit designers are very talented. If I had chosen better colours, spent more time coming up with better spacing and really focusing on the visual hierarchy I was creating, I could have done a better job of showing off what their framework can do.
Putting the hours in
I had never been happy with a design but considered it functional enough to leave and didn’t have the language to dive in to figure out why I wasn’t happy. But what I lack(ed) in knowledge, I can make up for in stubbornness. My questions went from basics to much more foundational and I decided to start throwing away tools.
UIKit was really amazing and helped me get away with a lack of knowledge for a long time. But to really learn, I had to implement things from scratch and keep putting in time until I got it closer to being right. And I had a domain I wasn’t using for anything so….
Sass and I got very close over the next ten days. And I used so many different tools to test the contrast between foreground and background colours that I think I want to build one that suits me more.
But after ten days of almost constant work, I pushed 78solutions.com live.
You suck less
The favicon is really bad. The more I look at Playfair display, the more trouble I have discerning between c and e on smaller headings. And the menu is really janky.
But I suck less.
With sucking less came a sudden flood of embarrassment as some of my designs looked really really terrible. Fitnesstracker.ca suffers from the same giant fricking UIKit icon and weird colour combination things that plague this site. But I had two other sites that were absolutely awful.
And so I took what I had learned, started working with one font and got to work again. They’re not quite right, but they’re very close and they somewhat follow the basic ‘hero’ with a sidebar thing that I have going here. When they’re ready for attention, I’ll finish off the tale of three designs with those sites.