I decided the first thing I’d do was design some buttons for the navigation, So I did a simple box with a round edge, added a nice stroke to the outside and created the first button with one of the fonts I had experimented with, That being Climate Crisis. I then thought, wouldn’t it be fun to include an animation? I thought about having the font melt down when highlighted, so I did that, How I did that was quite simple, I flattened the font and selected the bottom half of the words and dragged it down, similar to what I did with the Scatter icon only more neu-brutalist in mind. I made it a component so that it could be reused throughout the many screens.
This is great but what happens after I’ve hovered/clicked on, so I did the same thing as well only in the reverse. I think this is cool and helps showcase the design style a lot better, further pushing that unconventional yet stylised design that is neu-brutalism.
Now I just need to do this for all the buttons… I’ll show them when I’m done.
Here’s all the buttons, and I think they’re cool and work okay, It’s probably a Figma thing but I always notice some pixelation with these animations, I may switch to Lottie for more motion graphics, with after effects occasionally.
I decided to create this pop-up window as I felt the text on it’s own was a little… boring. so I was inspired by one of the assets I saw on the mind-map and just liked the idea so I implemented it, and made it my own. I included two of my chosen fonts: Climate Crisis and Unbounded. I think it’s cool, It’s fun and most important! it’s ugly(ish) which adheres to the neu-brutalist design.
Here it is as it stands, I want to include some illustrations, hand drawn by me, I have some Ideas, First a Home Icon which has maybe a mascot or something, that would go on the top left like the other screen genres, then maybe a clown waving with a sad frown on his face, this represents sadness in a happy aesthetic, adhering to the self-deprecation, I should also mention this wasn’t really the worst week of my life, I’m just being dramatic, I didn’t hit my usual goals so it wasn’t a great one, doesn’t make it the worst ever. I also included a why part as I felt it was important to explain, don’t want to leave the user in mystery of course, that’s bad UX!
Ah drawing, How I’ve missed you. So for these illustrations I thought that it would be wise to sketch them out and create some drafts before going on Procreate and refining it further, I started with the home screen.
I am inspired by those old American steamboat mickey cartoons as I’ve seen that sort of illustration style in Neu-Brutalist before I want that style and design in a sort of sad/grumpy way, So I sketched these Ideas, A house running from rain, A house smoking a cig and a house defeated, I love the idea of the house smoking and the smoke leaving the chimney rather than the mouth so I think I’ll go for that one.
Here’s the concept. I think it is spot on, it has attitude and I love the cig and the angry expression, this is a house that has had a bad week. Now for some detailing and colouring!
I think it looks great and helps with the aesthetic it is designed for, It reminds me of a newspaper comic about the mortgage crisis or something. Now to export and insert on the home page
For this one I had the idea of the clown being whole bodied and doing an L sign, I created different types of faces for it and sort of combined the ideas into one, Since it is a simpler drawing I Just coloured it to save some time
Here’s the final version, I think it works well and the details included make it look like a proper clown. I like the imperfect eyebrow and eyelashes I feel they’re a nice touch as well as the hat.