Inspirations

When I first started this project, I knew I wanted to make something visually stunning but had no clue where to begin. After diving into different design techniques and concepts, I found myself gravitating towards a few that really shaped how everything turned out. So, here’s a little breakdown of what inspired me and what I ended up using.

Glassmorphism: A Touch of Depth:

One thing I absolutely had to include was glassmorphism. It’s this super cool effect that makes elements look like frosted glass, with subtle shadows and a layered, transparent look. It adds depth and a modern feel to the design without making it too crowded. Once I tried it out, I was hooked – it gave the whole site this clean, airy vibe while still keeping the focus on the important stuff.

CSS Animations: Making Things Move:

Animations are another thing I wanted to get right. I spent a lot of time playing around with different CSS animations, trying to give the site a smooth, interactive feel. You know, little things like buttons growing when you hover or text fading in as you scroll. These small touches really make the site feel alive and polished, without being overwhelming.

SVG Animations: Custom Visuals

SVG animations were also a game-changer. What’s great about SVGs is that you can scale them without losing quality, which is perfect for animating icons, logos, or any other graphics. I had fun adding custom animations to certain elements, giving them a more personalized, eye-catching look. Plus, it keeps the site light and fast – win-win!

Fonts: Setting the Vibe

Let’s talk fonts, because choosing the right ones was crucial for setting the tone of the site. I’m a big fan of:

Averia Serif Libre: It’s got this warm, slightly imperfect look that makes it feel human and approachable. Perfect for longer reads.

Kola: Super bold and modern. I used it for headings and titles to really grab attention.

Kontanter: Clean and geometric, but still creative. It’s got a good balance between simplicity and character.

Getai Grotesk Display: This one’s more expressive and bold, perfect for when I needed something a bit more eye-catching. Each font brings its own vibe to the design, and I love how they all come together to give the site personality while still being easy to read.

Design Resources: Where I Got My Ideas

Throughout this whole process, I turned to a few awesome websites for inspiration and guidance:

Awwwards: This place is a goldmine for stunning website designs. Every time I’m stuck, I head here for a dose of inspiration.

Laws of UX: If you want to understand the psychology behind user experience, this site is a must. It helped me figure out how to design with users in mind.

CodePen: I’m always messing around with different ideas here. It’s the best place to experiment with animations and interactive elements.

ColorHunt: Sometimes I need help with color palettes, and ColorHunt always comes through with great options. These sites really helped me figure out what direction to take, and they’ve become my go-tos for all things web design.

Wrapping Up: What’s Next?

This project has been such a fun ride. I’ve learned a ton, from glassmorphism and animations to playing around with fonts and getting inspired by the web design community. It’s been all about experimenting and bringing those ideas to life in a way that feels both beautiful and functional. Can’t wait to see where this project goes next!