Icy Penguins

Context & Brief

For this school project, we were asked to design and build a promotional website for a self-invented NFT collection. Rather than using an existing project, we created our own brand: ICY Penguins – a collection of cute, “dripped out” penguin characters, each with different accessories, expressions and rarities. The goal of the assignment was to treat the website like an ad campaign: tell a story, highlight the product and guide visitors towards a clear call to action.

Concept & Story

We started by defining the tone and narrative of the brand. ICY Penguins should feel light-hearted and slightly tongue-in-cheek: penguins “on the loose” that you can try to catch as NFTs. The copy leans into this idea with lines like “be quick and be icy, like a penguin,” and a roadmap that escalates from paying off student loans to launching clothing lines and “Penguins From Outer Space.” This playful tone shaped the visual direction: bright, bold colors, large headings and a focus on the penguin artwork itself.

Design & Visual Direction

The core of the design revolves around:

• Hero section with a strong headline and a clear “Buy a penguin” button linking to the marketplace.
• Large, hand-drawn penguin illustrations showcased as NFT previews to immediately communicate the collection.
• Short, focused sections for “The NFT” and “Roadmap,” explaining who made the project, why it exists and what’s planned “next.”
• Consistent branding through typography, color palette and spacing to keep the page simple but memorable.

Accessibility and readability were kept in mind while designing, making sure contrast, hierarchy and spacing support a smooth scroll experience.

Implementation & Tech Stack

The website was built with Svelte, JavaScript and CSS. Svelte gave us a lightweight way to structure components and manage state without unnecessary overhead, which was perfect for a single-page marketing site.

Key implementation details:

• Reusable Svelte components for navigation, sections (Hero, NFT, Roadmap, Gallery, FAQ) and footer.
• Simple JavaScript-driven interactions for scrolling and navigation, keeping the experience smooth and responsive.
• Custom CSS for layout and styling, focusing on a clean structure, responsive design and polished hover/focus states.
• Integration of external links (e.g. NFT marketplace and social platforms) to simulate a “real” NFT launch ecosystem.

Challenges & Learnings

One of the main challenges was balancing visual playfulness with clarity. It was tempting to over-design or overload the page with effects, but the project required a clear hierarchy: show the art, explain the concept, then push the call to action. Working in Svelte also reinforced component-based thinking, even for relatively small projects, and showed how quickly we could iterate on layout and structure when everything is modular.

Another learning was how important copywriting is for a fictional product. Because ICY Penguins does not exist as a real NFT collection, the tone of voice and roadmap needed to sell the fantasy while remaining coherent and easy to understand.

Outcome

The final result is a complete, ad-style NFT landing page that:

• Introduces the ICY Penguins brand and story.
• Highlights the uniqueness of the hand-drawn assets.
• Guides visitors toward “buying” a penguin via a clear CTA.
• Presents a playful roadmap that fits the narrative of a student-made project.

Overall, the project was a fun way to combine branding, storytelling and front-end development using Svelte, JavaScript and CSS in a compact but polished experience.