Redoing Everything

Where I throw in the towel, and redo the whole design from scratch and it's amazing.

October 22 2020, by Karl Oscar Weber,


Hi,

It's been a while, but 2020 has just kept on going... A website redesign is the farthest thing from important at the moment. But I need to work and apay bills so I've got to convince ya'll that I can do my job. So here are all the latest details about the redesign.

Throwing it all out

I became really frustrated with the direction of the redesign sometime in July I think. It wasn't really looking nice to me. My typfaces choices were alright, but everything felt small and unambitious. I needed to go in a new direction.

I first revaluated the homepage design. Before It was much more functional, introductory text with inline links to interesting parts of my website. Now I've taken that idea to the extreme. JUST the text with links.

Bold new design attempt for the homepage.

I wanted to do some experiments with the hover states, so I did:

Really bombastic hover states.

The vision for the site is Bold pieces of color contrasting against pretty plain hues of grey. I didn't want the background to be white, white is the internet's color, the color of websites. Just like white everywhere. Grey feels better.

I also switched a bold, sans-serif typeface for all headlines. I was using Playfair-Display before, and although it was playful, I just never leveraged it in a way that was satisfying. When redoing everything I started with a baseline system instead of designing individual pages. I already had a pretty good type scale that I modified, so It was all about nailing the weights and sizes.

Type sizes and weights tied to css.

I think I did a good job. I outlined how the text should look and feel next to each other, then I put it all into CSS. Having links be bright splotches of color felt like a really great choice to me. I have an idea to use nth-child to alternate colors, but I'll push that in another update.

Moving onwards to design the how each page type would look, I became really restless and simplified a lot. Now there are 4 types of pages: Index, Page, Post, Chapter. Pretty simple. Every post wherever it is, is a post. Book Chapters are, well, chapters. I've decided to put the whole book I'm writing online right on my site, no separate site to messy things up. It would just get stuck in endless redesigns and never launch anyways.

Components

Moving to a more bold design and building from scratch meant that I would need to build some baseline components first, and then fit them together. I started with Type, then continued with colors.

Colors used in kow.fm

I had/have a plan to add lots of content, I thought it would be interesting to give each content type their own accent color. Going to each section would mean the links would be different. And it worked. It looked nice. But seeing as how I don't have a lot of that content even made yet... I axed all of those pages. I axed an Apps Page, Tutorials page, Courses Page. I axed a lot.

I had never done really well in adding illustrations to my posts, but wanted to try to do so easily, with little effort. I found that a square illustration style, with simple background colors would work well.

Illustration style for this website your reading now.

This opened up an opportunity to explore what Titles would look like with an illustration behind them, next to them, around them. I decided on a simple CSS blend effect of a title over the image. Having Really bright, or just plain solid colors in the illustrations gave posts a really great firm foundation, at least at the top of the page.

Title over the image.

I want to illustrate some more possibilities with this approach using the primary colors that we chose earlier.

Afterwards I started to experiment with the menu. I had already made a pretty ostentatious menu, but threw that thing out. It depended on too much javascript, and was a bit slow on my old laptop. I needed something simple, bold, and clear. I iterated on the highlighted link idea and made something that felt really bold.

Iterations and tests of the menu for this website.

I really really really like how it came together. A simple top navigation, that turns into a hamburger when it's on a mobile device. After removing a lot of the derelict pages and focusing on the core content, it looks even better. Now It's very clear to site visitors where I would like them to go, and how to find content on the site. You'll also see a redesigned prologue logo in there. It never felt right to me, reusing the prologue logo on my personal site, hopefully this new mark can connect me to prologue in a small way.

I became frustrated animating the transition of the hamburger symbol, into an X symbol. It's really common and everyone does this, but I was trying to animate the SVG it's self. I haven't done much of that yet. So as a stroke of experimentation I wondered if I could just rotate the X from the backside of the Hamburger. Then I thought why not make it a cube? Like why not? I want to do more 3D stuff on this site in the future anyway, maybe I can signal my intentions. Making a cube in pure CSS was not difficult, then animating that cube also wasn't difficult. The result is a playful, moving element that I didn't plan or expect.

The animated CSS Cube thingy on this website.

Animating the cube is pretty simple. We're transitioning between two states with different rotations. I'll go into that later. The sides of the cube that don't have symbols are filled with our accent colors from earlier. Thankfully investing in some playful colors has given the menu cube an even greater sense of fun.

Future Elements

I'm not yet complete with the site, but it's very close. I think I just need to redo the footer a bit and then focus all of my efforts on the book. In the future I want to bring back unique app elements. Rather than design something completely unique, I thought it wise to reuse as many components as I could. I came up with simple Cards that could have content dropped into them, just like a page.

Design for a future app card.

The old app cards were cute, but most of those apps aren't even close to being complete. I'd rather keep my intentions secret until just before launch.

That's it for now.

I'll hopefully have this thing wrapped up before halloween.

Stay safe. If you're in the USA, vote. Preferrably not for the people sympathetic to neo n*zis and fascists.