This week I have chosen two sites to feature. They are two vastly different sites, but they both do a good job with their designs. Keviin Cosmos does a great job with animations, making it feel very “Webflowy”. Agency sites are always fun to experiment with various ideas (looking at you cursor tails). The other one uses a much underappreciated box shadow technique that I happen to really like – I used some of it on this site in fact.
Gridrule
As I said above, I call this the Gumroad style, but it is also known as a feature neubrutalism. This involves using heavy contrast, and no blur. Often it uses slightly desaturated colors, reminiscent of the Saved By The Bell or early 90’s/late 80’s cartoon effects.
This one doesn’t go so far, it uses a very simplistic approach other than icons and buttons. This heavy white space feels very refreshing when you see the pops of heavily contrasted buttons and icons. The color palette is typical of a neubrutalist website. Here are some other examples:
The simplistic nature of the site is great, especially for a site that sells courses. I did really like the simple testimonial section, again elevated by the neubrutalism design. I wouldn’t want to see it on every site, but it definitely stands out from the current “dark mode is everything” trend.
I really liked this section as well on the actual course page. It has a neat but simple and non scroll-jacking feature.
Things To Possibly Improve
The only complaint that I really have from quick glance at the page is that the blog cards aren’t how I would like to see them done. I am not a fan of multiple links to the same page in a blog card. On their blog cards, it has the image and the heading linked, which isn’t really the best UX. It would be very easy to make the header link cover the whole page.
Keviin Cosmos
I want to find more well done sites that feature animation. I’m sure I could get the guys at Bricksforge or Motion.page to recommend some sites, but I’m not going to keep paying $250 a month for Builtwith.com just to find sites to post on this page I know that.
It’s hard to capture animated sites, so if you see a wonky screenshot, it’s because none of my screen capture tools worked to capture that particular section. I use a few different ones – did you know Chrome has one built in?
CTRL+SHIFT+I > CTRL+SHIFT+P > type screenshot and select your choice. It works well 90 percent of the time.
Back to the site – I really like what he did with the buttons. He made them look like pill shapes until you hover – really nice as it draws attention to it. We are all so used to toggles that we know instinctively what it is meant for and he really did a good job with this idea for a button.
While the site does a great job at the bigger animations, I actually really liked the more subtle ones the most, and I’m probably going to do a short tutorial on how to achieve a few of the effects. Like this one with the rays of light sliding along the screen (it is actually much smoother, but the rendering of the gif makes it jumpy):
I hate scrolljacking, and will absolutely leave a website if you start taking my ability to scroll away. That being said, he doesn’t do that for the most part (there’s one section but it fits with the page and doesn’t annoy me).
This is a great animation and it leaves enough visual interest to keep people moving down the page (the goal). Check this out:
Things I Would Change
I really wouldn’t change much on this one. I am not a huge fan of the desaturated purple in the headings, as that makes it a bit hard to read. See here:
The only other things would be the second half of the page starts to get a little scrolljack happy, but again, it is pretty well done so not a deal breaker.
The animation I wish would only run when you scroll down, not reverse when you scroll back up. I saw it once, I don’t need to see them disappear when I scroll up – I’m trying to read it, not re-scroll!
The only other thing would be hopefully he continues to build it out to have more pages.
Wrap Up and Future Developments
That’s it for this week. As I said, I really want to start posting some text and image based mini tutorials, so hopefully in the coming weeks I’ll pump a few out. I keep a little archive of SOP’s for how to do certain things, and I think it would probably be better served out in the public domain rather than sitting inside my Notion setup.
I have been restructuring some things on the backend to make it easier for me to get things posted. I’m making little tweaks to navigation and how things are structured (it is sort of a complicated setup with all of the various post types relating to each other).
I have also been tweaking some of the blog setup as well to make it more “readable”.
Would anyone like to see how the backend is setup? Request it here