Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Weekly Developer Update #15

The evolution of Cosmicrafts UX/UI

Welcome to this week’s deep dive into the ever-evolving world of Cosmicrafts’ User Experience (UX) and User Interface (UI). My name is Omar, and I wear multiple hats at Cosmicrafts: Founder, Game Designer, Technical Artist, and, of course, the UX/UI Designer.

The journey of refining Cosmicrafts’ UX/UI has been both challenging and rewarding.

While I don’t claim to be a seasoned expert in the realm of UX/UI design, my dedication and passion have driven me to constantly learn and improve.
Over the years, I’ve collaborated with fellow artists, enrolled in courses, and scoured tutorials. Yet, much of my understanding has been forged through hands-on experiences and, admittedly, a few missteps along the way.

Join me as we delve deep into the core of Cosmicrafts’ graphical user interface evolution, retracing the steps, decisions, and lessons that have shaped its current design.

Cosmicrafts Logo in 2017

Cosmicrafts 2D Alpha — 2017

A Retrospective

Journeying back to 2017, we uncover the foundations of Cosmicrafts’ graphical user interface (GUI). This is where our documented history begins.

Initial Sketches:

The design process commenced on the humble canvas of white paper. The mockups showcased a sleek, sci-fi art direction. Smooth, technologically-advanced buttons, devoid of any sharpness, were a hallmark of this iteration. Yet, the complexity of the design was its Achilles heel.

Aesthetic Inspirations

The visual style drew heavily from the gritty, mechanized aesthetic of StarCraft’s Terran faction. I envisioned interfaces framed by rusty concrete panels, interspersed with interconnected wires.

The prominent yellow stripes were reminiscent of caution tapes, invoking a sense of a work-in-progress or a danger zone.

The first Cosmicrafts Main Menu

Button Design Philosophy

I embarked on a bold experiment with the buttons, opting for an icon-only approach. The rationale was that intuitive icons would negate the need for textual explanations or tooltips. In hindsight, this decision proved to be overly ambitious and didn’t resonate as intended.

A Draft of the Gameplay UX/UI
To truly appreciate the roots of Cosmicrafts, I invite you to watch one of the earliest recordings from May 2017. This video provides a glimpse into the main menu’s initial design.
Despite the hiccups, I genuinely believe that for a first venture, the design wasn’t half bad. It was a learning curve, a stepping stone that paved the way for the iterations that followed.

Cosmicrafts 2D Beta— 2018

As 2018 dawned, I embraced a bolder approach to Cosmicrafts’ UX/UI design. Eschewing the traditional mockup phase, I dove directly into design execution, leveraging images, 3D renders, and sprite animations to breathe life into the interface.

Deck section without NFTs

Stylistic Pivot:

The design direction for this iteration took a cue from the immensely popular game, Overwatch. Given its widespread acclaim and user-friendly gameplay, I hypothesized that an interface inspired by Overwatch’s UX/UI would resonate with players and offer an intuitive experience.

Main Menu

A Text-Forward Approach:

Contrasting starkly with the previous icon-centric design, this version leaned heavily on textual elements. Icons were selectively used, primarily to represent in-game currencies, chests, and other elements that warranted a visual cue.

The design philosophy was to provide clarity and make interactions self-explanatory.

Gameplay Adaptations:

While the core gameplay remained anchored to the original Game Design document, certain modifications were introduced. These tweaks aimed to streamline the gaming experience and simplify the coding process.

Gameplay
However, feedback from my peers suggested that the game still posed a steep learning curve for newcomers, signaling the need for further refinements.

For a more immersive experience, I invite you to watch a recording of Cosmicrafts from May 2018. This video provides a snapshot of the game’s interface and mechanics during this pivotal phase.

Cosmicrafts 2D — 2019

Navigating Challenges and Embracing Change

As the calendar turned to 2019, we took a significant leap by launching Cosmicrafts on both iOS (via Testflight) and Android (on Google Play). While the game was still a work in progress, we felt an urge to explore the vast mobile gaming arena and gather real-time feedback.

Main Menu

Design Evolution:

The menu design, inspired by Overwatch, remained consistent. However, the gameplay interface underwent multiple transformations throughout the year. Our primary challenge was adapting a UX/UI initially conceived for desktop platforms to the intricacies of mobile devices.

Gameplay UX/UI for Mobile
This transition, riddled with complexities, highlighted the disparity between our desktop-centric design and the mobile-first game mechanics.

Facing Responsiveness Hurdles:

Our initial foray into mobile design was fraught with challenges. Responsiveness, a crucial aspect of mobile UX/UI, proved to be a formidable obstacle.

Our limited experience in this domain meant that interface elements often didn’t adapt seamlessly to various device sizes and resolutions.

Main Menu Sketch for iPad
To delve deeper into this phase, I encourage you to watch a recording of Cosmicrafts from May 2019. This footage showcases the game’s interface during this period of transformation.

A Turning Point:

Despite our best efforts, the outcomes of 2019 were less than ideal. Moreover, the rapid evolution of gaming technology meant that our foundational tech stack was becoming obsolete.

Cosmicrafts Gameplay
With newer Unity versions offering advanced features, we faced a crossroad. The decision was unanimous: 2020 would mark the beginning of a fresh chapter.

Armed with cutting-edge technology and a vision to incorporate 3D models into gameplay, we aimed to align Cosmicrafts with contemporary mobile gaming trends.

Cosmicrafts 3D — 2020–2021

The subsequent two years posed a formidable challenge for Cosmicrafts. Global upheavals, financial constraints, and the lingering shadow of past setbacks tested our resolve.

A 2020 Sketch for the new 3D version
Yet, amidst the adversity, flickers of hope emerged, propelling us forward.

Rethinking Game Mechanics:

The pandemic-induced introspection led us to revisit core game elements. We decided to eschew storylines for mobile versions, even though Cosmicrafts originally began with a rich backstory.

Introducing game characters
Instead, our focus shifted to the game’s characters. Each character would bring their unique fleet and prowess to the battlefield.

The Cosmicons

UX/UI Redesign:

Drawing inspiration from Brawl Stars and contemporary mobile UX/UI trends, we adopted a hybrid approach, combining icons with text.

The design philosophy revolved around accessibility: elements should be large and legible, ensuring easy interaction on mobile screens.

Radiant buttons adorned with notification ribbons became hallmarks of this design phase.
While still reflecting an amateurish charm, the interface was undeniably a step forward from its predecessors.

Deck section to choose your fleet

Gameplay Adjustments:

While the essence of gameplay remained intact, we had to pare down certain features. Transitioning to 3D from 2D presented unforeseen coding challenges.

Venturing into the Crypto-Economy:

By late 2020 and early 2021, the crypto bull run brought blockchain technology to the forefront of our considerations. However, integrating a crypto-economy wasn’t straightforward.

Ethereum’s prohibitive transaction costs were a deterrent. Alternatives like BNB, Matic, and Solana were riddled with dubious projects, making them unsuitable platforms for Cosmicrafts.

Embracing the Future with the Internet Computer:

Our search for a groundbreaking technology led us to the Internet Computer, a pioneering blockchain platform branded as the ‘World Computer.’ With the capability to host applications, databases, and smart contracts, it promised a revolutionary approach.

Our association with the DFINITY Foundation bolstered our confidence. Their support, without any prior connections, was a testament to their commitment to fostering genuine innovation.

This partnership rekindled our faith and reignited our drive to sculpt Cosmicrafts into a gaming sensation.

Cosmicrafts Web3

With our foray into the cryptocurrency domain and the unwavering support of DFINITY and the Internet Computer community, Cosmicrafts embarked on an exhilarating trajectory as 2022 dawned.

A Fresh Artistic Vision:

Our newfound resources allowed us to onboard talented artists who meticulously reimagined Cosmicrafts’ UX/UI. While the foundation remained rooted in the original Game Design, the facade underwent a radical transformation, aligning with the avant-garde technology we were integrating.

Cosmicrafts 2022 Main Menu
While the foundation remained rooted in the original Game Design, the style underwent a radical transformation, aligning with the technology we were integrating.

Web3 Login, NFT Characters and Token Rewards

Pioneering On-Chain Multiplayer:

In a historic first, we introduced an on-chain multiplayer, inviting developers to envision projects in the Web3 ecosystem, sidestepping the traditional IT stack that often poses security challenges.

This innovation was particularly pivotal in ensuring asset ownership and championing decentralization.

Introduction of Game NFTs

Revolutionizing Asset Classes with NFTs:

Tokens, Game NFTs, and Artwork NFTs rejuvenated the conventional perception of in-game assets.

Our Genesis NFT collection, which sold out instantly, the distribution of over 10,000 NFT airdrops, and a flourishing community with impressive KPIs bore testament to Cosmicrafts’ long-term potential.

The Spirat Faction

Riding the Crypto Wave:

While the volatile nature of crypto markets introduced us to soaring highs, it wasn’t without its troughs. Yet, through the ebbs and flows of the market, our resolve to craft the paramount real-time strategy game remained unshaken.

Seasonal Extravaganzas & Gameplay Enhancements:

We enlivened the gaming experience with thematic events, including the vibrant Mexican Fiesta and spooky Halloween.

Even themes
New game modes and enhanced bot difficulties added layers of complexity and engagement.

Sombreros and Witch Hats added to the spaceships.

Exploring Camera Dynamics:

In our relentless pursuit of improvement, we reevaluated the game’s visual perspective. Moving away from the static horizontal isometric view, we experimented with diverse camera angles, offering players a fresh visual experience.

Ahead of us:

As the year progressed, the tech realm buzzed with the advent of commercial AI technology. Promising quantum leaps in coding, writing, and artistic generation, this technology signaled a paradigm shift in multiple domains.

Cosmicrafts 2023 Banner

Cosmicrafts 2023: The Dawn of AI

The year 2023 ushered in a transformative phase for Cosmicrafts, characterized by our deep dive into the realm of artificial intelligence.

With trailblazing AI technologies like chatGPT, DALL-E, and Midjourney at our disposal, we embarked on a mission to explore their potential and revolutionize our gaming universe.

First sketch of AI Imagery on UX/UI

AI vs. Algorithmic Design:

While our tryst with AI in the form of game bot programming was not new, there’s a stark difference between designing algorithms and harnessing the power of machine learning.

This exploration was not just about technology but represented a paradigm shift in our design approach.

IC Hub: Crafting a Web3 Social Experience:

The first half of the year saw our dedicated efforts to actualize the social features envisioned in our original game design. This endeavor culminated in the birth of the IC Hub — a decentralized social application.

The IC Hub Mobile Sketch
Beyond mere chatting and group creation, it offered users a holistic platform to explore projects, manage friends, groups, tokens, and NFT lists.

Late concept of the IC Hub

What’s more, developers found a haven where they could list their projects in a decentralized manner — all without incurring any costs.

Access the IC Hub here: md7ke-jyaaa-aaaak-qbrya-cai.ic0.app.

Merging AI Imagery with Game Design:

Parallel to the IC Hub development, our experimentation with AI imagery bore fruit. It provided a fresh lens through which we reimagined the art of Cosmicrafts.

New characters, locales, and narratives emerged, prompting a complete UX/UI overhaul. From login screens to main menus and gameplay, every facet was redesigned, drawing inspiration from AI-generated images.

The Artistic Fusion:

Our design embraced a harmonious blend of traditional and AI-driven art. While some elements were meticulously crafted using vectors, others were birthed through AI’s imaginative prowess.

Actual Gameplay
The result? A mesmerizing tapestry of handmade sprites seamlessly intertwined with AI imagery.

Looking Ahead:

As we stand today, our exploration of AI’s artistic potential is ongoing. We’re poised on the brink of a future where technology and creativity converge, promising unprecedented possibilities.

NASA-like imagery generation

Thank you for accompanying us in this week’s Developer Update. We trust you found our journey enlightening and look forward to sharing more insights with you.

Until our next update, may the stars illuminate your path.

Thank you!

Support this post

Did you like this post? Tell us

Leave a comment

Log in with your itch.io account to leave a comment.