Challenges
I've been searching for a way to be consistently creative with tiny projects, isolated little explorations where I can design and code a small fun bit. I knew about Codepen for a long while, using it as my go to web design inspo hub, but I've ingreaned getting to it through search that I've shamefully neglected the rest of the platform. Both the trending tab and the challenges.
Well no more. I'm officially a part of the weekly challenges. To increase my community engagement, I'll even be critiquing The other submissions. It's a great way to foster learning, to express my thinking and thus improve it and to better ourselves as designers and web developers in the process.
So here is the first submission: Mugsy's Mugs E-Commerce Layout.
Challenge #1
E-Commerce Layout - Mugs
I did get into this at the end of the month, since the challenges are based around monthly themes I skipped over all the previous ones. I don't mind but I might retroactively create ones, depending on how interested I get in the exercise. But the first one I did is super simple and connected to my last shipped project Nebesna an e-commerce store. Just a product layout.
My creation was very similar to Nebesna, so it might be cheating. But I did play around a bit with the product cards and colors. This type of store is great and versatile for many products and since content is king, I think it works great for selling mugs.
My solution is:
- A simple rounded rectangle product grid
- With an interesting but hopefully not too distracting dark mode which has a night sky and an illuminated mouse;
- Relaxed white light mode;
- Distinct pastel green main shade
- Compact product cards showcasing the mug image (70% of the card), clear headlines, short about text and product variants at the bottom.Add to cart shows up on hover;
Favorite Submissions
I left a detailed review on every submission! There were about 10 of them and I critiqued, praised and philosophized about their work. I loved it and I hope they took my ramblings in the good natured way they were meant.
My unexpected but top submission was pure brutalism. I love brutalism in all things - from the web to the world. It's a hard artistic challenge to force you to limit yourself to the base elements of a thing and combine them well. A lot of people associate brutalism with the lack of decoration and ugliness, but that's not true. Brutalism is very decorative, it just relies on minimal building blocks to do that and in my opinion reaches the highest highs with so little.
This submission decorates, but uses the most basic html elements to phenomenal effect. Masterful work that is as simple as can be without javascript! Something I would've loved to see back when I was in a classroom.
My style does use javascript, but I try to limit it as much as possible. Only when needed. But I look at js use very judgmentally. If you could have done the same thing or similar enough without using it, you should. You are making the internet a better place if you follow this rule and I hope you will use it!
Second favorite is this video game UI inspired layout. It inspired me to write so much that I love it. Now it has so many things wrong with it, I wrote them all down in the comment and the creator (took my feedback and improved it!)[https://codepen.io/editor/Laura-Andreea-the-typescripter/pen/019e8417-2042-7e56-808a-8551b508bcd1]]
You can read the rest of the comments by going through and seeing all the submissions and going to the comments. I'd encourage you to, it was a lot of fun. No one has taken me up on critiquing mine yet, so if you'd like to be the first, [please do]](https://codepen.io/visaint/pen/NPbwZVd)! I'd love to hear your thoughts.
AI
A lot of the submissions were AI generated. My thoughts on this are very simple: I use AI and I know most people probably will. I care about the flow of influence. Is the designer using AI as a coding tool to realize an idea they lack the technical skill to accomplish? Or are they just writing a generic prompt and letting the machine do it's thing?
I called out the ones that are the latter and my second favorite submission is clearly the former. I use AI in my development as well (I am not the best coder) but I work, tailor, rewrite, think and rationalize my use a lot, to create exactly what I want. It's a way to reach my vision, not a lazy plug and play shortcut.
Before AI I would scavenge the internet for the right piece of code or the right hint to help me craft my wish. It was a terrible process of reading useless stack-overflow questions and visiting predatory or outdated websites for the sliver of hope. Now I can spend more time thinking and creating exactly what I want. But that doesn't mean I like AI, I just use the tools available to me.
Conclusion
I loved taking part in the challenge and then I loved going through all the submissions and giving detailed feedback. I find it rewarding and challenging, like a good game. I'll keep at it and if this sounds even partly interesting to you, you should join!