# Grayhat Blog Tag: Design

> Expanded public blog context for posts tagged Design.

## Page

- [Design Tag](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/design)
- [Design Tag LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/design/llms.txt)
- [Root LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms.txt)
- [Root Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms-full.txt)
- [Tag API](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/api/public/v1/tags/design)

## Tag Details

- Slug: `design`
- Description: Ideas, inspiration, guides and more - With ❤️ from Grayhat's Design team.
- Post count in current snapshot: 7

## Current Posts

- [Our struggles (and minor wins) with Rive for character animation in 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/our-struggles-and-wins-with-rive-2025) - Inspired by Duolingo, we also gave the beta Rive Editor a try to make our AI virtual friends in MindChat come alive. TLDR; It didn't go too well.
- [Pixels to Players: How Good Game Designs are Executed](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/pixels-to-players-how-good-game-designs-are-executed) - Taking a game from an idea to reality is hard. How do you navigate through a sea of endless ideas and technologies, to deliver something... fun?
- [Reflections from executing a Design Sprint](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/reflections-from-executing-a-design-sprint) - How we (partially) applied the Google Design Sprint Kit in a project, and its reflections.
- [The rise of the Full Stack Designer](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/the-rise-of-the-full-stack-designer) - Design the future.
- [Building Blazingly Fast with Material Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-blazingly-fast-with-material-design) - In our fast-evolving world of web and mobile design, it's essential to stay in sync with cutting-edge design ideas. At the forefront of this design revolution lies Google's Material Design – a beautiful blend of precision, functionality, and visual charm. But what's the magic behind it for developers and designers? Beyond its eye-catching visuals, Material Design gives your projects wings, propelling them into captivating user experiences.

I’ve been recently working on a project that, for some 
- [Design to Scale](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/design-to-scale) - Look beyond tech, trends, and fancy buzzwords; look back to humans.
- [Will Google Material withstand XR?](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/will-google-material-withstand-xr) - How to Material You.

## Child Route Content

### [Our struggles (and minor wins) with Rive for character animation in 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/our-struggles-and-wins-with-rive-2025)

- Slug: `our-struggles-and-wins-with-rive-2025`
- Published: 2025-11-06T14:00:03.000+05:00
- Updated: 2025-11-19T23:03:41.000+05:00
- Reading time: 5 min
- Tags: Animation, Design, AI, Artificial Intelligence, Flutter, Developer Tools, Design Tools
- Authors: Saad Bazaz, Abdurrehman Subhani, Aniqa Sadaf, Talal Ahmed Khan, Wasif Sadiq, Muhammad Usama Rashid
- Visibility: public

Grayhat first met the Rive team at GDC 2024. Early startup energy, cool booth, tons of hype. At the time, we already knew about Rive, but we hadn’t actually battle-tested it in any real production scenario. It looked promising, and we filed it away as a “maybe one day” tool.

*Fast forward to this year... We finally decided to give it a real shot.

## **Solly, Our First Rive Experiment**

Our first test was simple. We built an animated mascot named **Solly** for MindChat. Just a cute, lively animation. It turned out pretty solid.

*An animated Solly, the mascot for MindChat.In our hubris, we decided to go big. Not just animated characters. We wanted **full lip-sync and animated avatars reacting in real-time during video calls**.

That’s when our rabbit hole journey began.

## **Research and Learnings**

To understand what “good” looks like, we researched teams already doing this at scale.

We studied Duolingo’s approach to visemes and character speech, which instantly made them our north star. We also pored over Guido Rosso's breakdown of how Duolingo uses GenAI and Rive for more technical insight. It's an excellent blend of art and tech, I highly recommend watching it:

*For character structure and workflow inspiration, we found Tolan’s process incredibly useful, detailed in their post on designing their character.

We also dove into the broader concepts of phonemes and visemes, looking at established solutions in the 3D space like Reallusion's iClone for AI-powered lip-sync.

Enough theory, let's build.

## **Intersecting art and tech (Rive + Flutter)**

To get hands-on, we learned the basics through foundational tutorials like this Rive in Flutter video and this more advanced follow-up. Community tips, like this Reddit thread on a better way to animate, and the official Rive best practices guide were essential reading.

Then we got our hands dirty by running our first interactive test. We replaced the Interacting Bear Demo from GitHub with the Monster Mouth (found on the Rive Marketplace), and lipsynced it.

*At this point, we were feeling pretty confident. We started exploring Rive's marketplace for rigs, especially mouth rigs and lip-sync templates:

- Mouth Movement Rig
- Custom Talking Avatar Lip Sync
- Karaoke with Zari
- Monster Mouth
- Wave, Hear and Talk
- Mouth Rig

We built our own character in a flat, simple style so iteration would be fast.

## **Nested Artboard Hell**

Then came the pain. Nested artboards. Calling inputs inside nested rigs from the parent board. This should have been trivial, as most of our designers came from an Adobe After Effects and Sony Vegas background. Instead it became a multi-day excavation.

We even built a minimal reproducible Rive file just to understand the problem first, with data binding and nested artboards.

We searched everywhere for answers. We scoured Stack Overflow for solutions, read through Reddit threads where users lamented broken nested animations, and followed a critical GitHub issue in the rive-flutter repository that highlighted our exact problem. The Rive community forum had a thread on passing input values that never got a definitive answer.

Finally, we found a random deep-internet video that solved it. From Rive, but not on the surface. Not from official docs. Just some obscure YouTube video that succeeded where the actual product failed to explain itself.

*And that’s when it hit me.

Rive is not designed for professionals yet.

Rive is built for early adopters, vibers, Behance-Dribbble motion designers, landing page razzle dazzle, and social media loops. Not structured engineering-grade animation pipelines.

Anyone doing real character systems will eventually hit architecture problems. Rive isn’t there yet.

But we were too deep in this to give up.

## **Building Our Own Playground**

Once we finally got our rig working, we wanted to test it with our custom lip-sync algorithm.

We tried using the third-party playground, rive.rip. Cool idea, but feature-limited. Not useful for live algorithmic testing.

So we built our own playground in Flutter, specifically for real-time lip-sync with AI voices and Rive characters. You can find the source code for our Rive Playground on GitHub.

And here is the deployed version you can play with:

  *
  Drag to resize ⤡

  Open in new tab

(function(){
  var box = document.getElementById('rive-resize');
  var iframe = box.querySelector('iframe');
  var handle = document.getElementById('rive-resize-handle');
  var minW = 200, minH = 200;

  // If Ghost gives width:100% (or if you want it to *look* full-width initially),
  // set a pixel width equal to the parent's computed width so the element can be resized.
  function setInitialWidth() {
    try {
      var pw = box.parentElement.clientWidth || document.documentElement.clientWidth;
      // Use parent's width but not less than minW
      box.style.width = Math.max(minW, Math.min(pw, 700)) + 'px';
    } catch(e) { /* ignore */ }
  }

  // Initialize
  setInitialWidth();

  // Recompute if window changes (keeps sensible starting width)
  window.addEventListener('resize', setInitialWidth);

  var dragging = false;

  function startDrag(e) {
    e.preventDefault();
    dragging = true;
    // allow mouse events to reach document while still interacting with iframe
    iframe.style.pointerEvents = 'none';
    window.addEventListener('mousemove', onDrag);
    window.addEventListener('mouseup', stopDrag);
    window.addEventListener('touchmove', onDrag, { passive: false });
    window.addEventListener('touchend', stopDrag);
  }

  function onDrag(e) {
    if (!dragging) return;
    e.preventDefault();
    var clientX = (e.touches && e.touches[0]) ? e.touches[0].clientX : e.clientX;
    var clientY = (e.touches && e.touches[0]) ? e.touches[0].clientY : e.clientY;
    var rect = box.getBoundingClientRect();
    var newW = Math.max(minW, clientX - rect.left);
    var newH = Math.max(minH, clientY - rect.top);
    box.style.width = newW + 'px';
    box.style.height = newH + 'px';
  }

  function stopDrag() {
    dragging = false;
    iframe.style.pointerEvents = '';
    window.removeEventListener('mousemove', onDrag);
    window.removeEventListener('mouseup', stopDrag);
    window.removeEventListener('touchmove', onDrag);
    window.removeEventListener('touchend', stopDrag);
  }

  handle.addEventListener('mousedown', startDrag);
  handle.addEventListener('touchstart', startDrag, { passive: false });

  // optional: double-click handle to snap back to parent's width
  handle.addEventListener('dblclick', setInitialWidth);
})();

## **Final Result**

We managed to make our animation work, with nested artboards and lip-sync. Check it out here:

*It's still a work-in-progress, but we continue to learn and improve.

## **The Rive Reality Check**

After this entire journey, here’s the honest breakdown.

### **The Cons**

- The interface is unintuitive and tries too hard to cosplay as Figma without earning it.
- Features like components and preview mode feel half-baked.
- Pricing is preposterous, especially when they suddenly made exports paid mid-project.
- Performance is unoptimized and multiplayer is buggy.
- Browser sync pauses make it feel clunky instead of modern.

### **The Pros**

- It works, at least in Beta terms.
- Web-based.
- Collaborative.
- Fun for simple animation use cases.

### **My Verdict**

If you already have working pipelines in Blender, After Effects, Spline, or your own tooling, stick with them. Rive is cool, but it is not ready for serious production beyond funky assets, splash animations, and loading screens.

I still believe Rive should eventually be acquired by Figma and merged into a full pipeline. But if I see them pull a “we’ll stay independent forever” move like Figma did with Adobe, my remaining hope will evaporate.

To anyone from the Rive team: If you're reading this, I'd love to talk and have a feedback session on our team's experience on the Paid plan. Maybe we can find a better way out!

Peace ✌️

*Credits to:*

- Umayma binte Saleem, our Web, Interactions and Graphics intern, for the first Solly animation
- Ayesha Aamir (UI/UX Designer) for her research, character design and animation implementation
- AbdurRehman Subhani (Lead Engineer) for building the open source Playground, and developing the lip sync algorithm with AI
- Aniqa Sadaf (Product Designer) for world-building

### [Pixels to Players: How Good Game Designs are Executed](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/pixels-to-players-how-good-game-designs-are-executed)

- Slug: `pixels-to-players-how-good-game-designs-are-executed`
- Published: 2024-08-14T23:04:07.000+05:00
- Updated: 2024-08-15T11:11:02.000+05:00
- Reading time: 6 min
- Tags: Game Design, Product Design, System Design, Design, Gaming, Multiplayer Gaming, Playroom, PlayroomKit, Development, Software Engineering
- Authors: Maaz Tariq
- Visibility: public

**
Great video games are like great books or movies; they resonate with us because they reflect our own experiences, dreams, and fears

Like a composer crafting a symphony or a painter stroking onto their canvas, designing a game is a similar creative endeavour to any other art. There are no ways to design a game and a million ways to create one simultaneously. Making a good game is like making a good movie, it is supposed to be an experience one goes through that leaves an impact and gives a new perspective. Crafting together a piece of media that can deliver enough sentimental value to keep players coming back, that is what game design is all about.

## Making your Game Relatable

One of the key aspects of making a moving art piece is adding elements in the piece that help the audience relate to it. When one sees another character going through situations they have gone through in real life, it develops a bond with the character. This pattern is commonly seen with anime protagonists having very relatable personality traits or situations in even a supernatural world.

**
It should be the experience, that is touching. What I strive for is to make the person playing the game the director

***- Shigeru Miyamoto***

*****Papers, Please****Invoking that feeling of relatability is a key part of keeping the players coming back. A good example of executing this strategy is “Papers, Please”. To say very loosely, it's a game about checking and approving documents.  A very simple premise, but it is a hit game because the way it sets the mood and develops the scene is very natural. It reminds you of a paperwork-heavy office, it makes you feel like an actual clerk with all the tediousness that comes with it. flipping through pages to check for rules, the applicant’s documents missing or fraudulent cards and ID cards and you have to manage all this junk under a time limit. The authenticity of the experience sells the game.

*****Katana Zero****The experience we want to invoke is not limited to experiences our player has personally experienced but also seen others experience in their vicinity. The video game “Celeste” does an excellent job of explaining what depression feels like to people who haven’t experienced it, helping them understand people who suffer from depression. “Katana Zero” is a game with an excellent storyline. It explains the struggles of a soldier dealing PTSD in a very supernatural, ongoing conspiracy theory setting.

After going back and forth with some product teams, I've learned that this goes hand-in-hand with KYC (Know Your Customer). Something which might help you to narrow down an idea is to first do some bare-bone **audience research. **Who is the target audience you have the most access to, whether in your friends circle, community, or in your company's easiest access? What is daily life for them, what is entertainment, what makes their heads turn? Just some raw data from here, organized and transformed into a "player persona", can act as a prompt for you to brainstorm some better ideas - Then you can easily validate or verify your ideas by just bouncing them off of that persona. (you can even reach out to an audience member and present ideas to them)

## Using the Right Tools

Invoking experience is one of, if not the greatest, priorities for a game designer. The designer must have tools capable enough to pull off the ideas they draft. A designer’s canvas is the engine they use. The way you cannot achieve on a smaller canvas what you can on a larger one. You cannot do things on an engine that is incapable of following through with the mechanics of your design.

More often than not, the development-end of game-building is almost as artistic as the design side. It makes sense, given that you need to create a world which truly captures the emotion conveyed in the game, or at least having enough helpful snippets which can keep the code clean while building out the game. This usually drives companies to build custom game engines, or at least base them off of existing ones. Many times, technological advances are the reason for designing new experiences to human entertainment.

Grayhat's npm package "create-multiplayer-game" is built to speed up the development process and simplify implementing game designs. We use it thoroughly when building out game prototypes - However, by the time the game reaches production, the engine does take a beating. But we use the new findings to improve the engine once more.

The package aims to streamline the creation of React-based (more coming in the future!) multiplayer games, making it easier for developers to focus on the creative aspects of game design rather than being limited by technical challenges.

*create-multiplayer-game (CMG) does lots of heavy lifting for you. It provides you with prebuilt modules so you don’t have to reinvent the wheel every time. CMG provides a silent router, letting you change game phases without any changes in the URL bar. This makes the game-flow entirely in control of the game itself and handles the possibility of cheating by messing with the URL to switch phases. It also has its own loading module which can show what file is being loaded in real time. All in all it has the essential parts of a video game for any kind of game prebuilt, so you can focus on the design instead of the execution.

## Learning from Retrospective

“Meme, Chat, Robots” has a user interface and design similar to Meta apps. When talking about the game with Saad Bazaz, I learned Meme, Chat, Robots’ UI was designed by a talent at Meta.

Using Radix, helps us make reusable components that can be used throughout the project, giving it a coherent look and feel. Addition of a silent react-router, one that can route to different pages without showing changes in the URL. While seemingly a small change, it makes a substantial difference for video games. A video game has to follow a game flow, unlike apps where users can go to whatever page they like. moving from stage 1 to stage 2, or from a cut-scene to gameplay requires a game flow that cannot be tampered with from the URL.

## Get Your Hands Dirty

As a game designer, your tools are the technologies and languages you build games with and your canvas is the game engine you use. To translate your designs into the game, you will have to know how the game works. How it's built and why it does what it does. You can’t get away with skipping learning a phase of development, learning development helps the design be grounded and realistic.

*## Recycle your Trash

There’s no such thing as bad ideas. I have used parts of stories and themes I wrote in my high school essays in complete products! Stories and ideas that don’t seem like a good fit are just in the wrong place. Always save your drafts and keep them close whenever you want to brainstorm a new theme or look for your game. Have different folders for all kinds of media you draw inspiration from, then try to fit them to any future projects. Make different folders for music and art and keep adding any ideas in those folders.

**
The first mark on an empty canvas is the most difficult to make

Having a stash of resources like these help you form your first stroke on a blank canvas.

## Verdict

As daunting as designing a video game may seem, following only a couple of principle can guarantee an interesting result. Trial and error is part of the game, like any design process. Pair it with some direction and you’re good to go!

Here’s a small recap:

- Design the experience, not the app
- Bind real-life experiences with the video game’s experience
- Use a capable game engine, that fits your game aesthetic and can pull off your design
- Learn and apply from previous projects, embrace failure
- Learn and experience every part of the dev process firsthand

Now building the latest video game, I have learnt a few more lessons to help me contribute to CMG. Stay tuned for more in-depth articles discussing game design and CMG!

### [Reflections from executing a Design Sprint](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/reflections-from-executing-a-design-sprint)

- Slug: `reflections-from-executing-a-design-sprint`
- Published: 2025-10-30T14:00:46.000+05:00
- Updated: 2025-10-30T14:00:46.000+05:00
- Reading time: 5 min
- Tags: Design, Product Design, UI, UX
- Authors: Aniqa Sadaf
- Visibility: public

We're experimenting hard in Grayhat right now to figure out a design flow that actually *works*.

We're throwing everything at the wall, trying out all the best practices, using both physical tools (like, chart papers on walls, stickies, real Kanbans, paper and pens... the works) and digital ones (Figma, obviously 💃), and seeing how far we can push AI to help us out.

We're not starting from zero, though. We're taking a lot of inspiration from the Google Sprint Kit and mixing it with solid SDLC/GDLC principles. It's important that we first learn the basics, and don't reinvent the wheel.

We started with a startup, called Camply (now it's called Enrichly). We were in the "Planning Phase," just trying to figure out what we were even building, who for, and what problem it was going to solve. Camply is a web app for finding and signing up for camps, and the whole goal was to make it super smooth and hassle-free for customers.

Our main focus was on fixing two big pain points for users. To do that, we had to dive into research - checking out competitor websites like Outschool, Allschool, you know, the ones our client used and recommended. The cool part was our client *was* the user, so she knew exactly where all the problems were on these other sites. She was our Onsite Customer.

I moodboarded all these competitor sites in Figma. Compared their features, their flows, what worked and what totally didn't. From talking to our client and looking at the pain points, we realized we needed a design that was just… intuitive. Something that guides the user on its own, you know? Easy to understand and just fixes their problems.

We had a bunch of features to think about - camp listings, search and filters, authentication, all that. But with the budget and timeline, we had to pick what would have the biggest impact. We narrowed it down to the search mechanism. We really had to put our brains into designing the best search. We even looked at sites like Amazon because, let's be honest, their search is just good, and users are familiar with the patterns in it (especially moms!).

Then came the system design phase. The team set milestones and planned out the Camply flow for the POC. We had a ton of collaborations just to make sure the design and the tech architecture were compatible and could actually solve the business problems. We did the usual stuff - daily standups, cross-disciplinary meetings, weekly sprints, design handoffs.

During the design phase, I made user personas for the "parent" and the "camp manager." Started with rough sketches, got initial client feedback, and discussed everything with the team. I had to constantly update the system architect on every little design change so we could track compatibility. Every design decision I made, I had to be sure it could actually be built well and on time.

After the initial sketches (which we did with the system architect using paper and colored pens, lol), I turned them into wireframes in Figma and got the client's feedback. Once the flows were locked, I moved to high-fidelity prototypes. I used the Material Design library because it's neat, has great guidelines, and makes everything consistent. Client feedback was a constant loop until everything was finalized.

Once the functional Figma prototypes were ready, we shipped them to the business team. They did the initial user surveys and interviews to test the designs. That led us into the development phase.

When development started and the first version of the app went live, I was deep in design QA. I had to make sure the experience was smooth, the flows were accurate, and all the features worked as designed. We recorded all the issues, prioritized them, and got them fixed by the devs systematically.

After version one was out, we planned to test it with real users: usability testing.

Usability testing is ideal to:

- Validate your hypothesis
- Fix issues before the big launch
- See how users actually use your product vs. a competitor's

You should do it at every step. Depending on the stage, you ask different questions. There are three main times to ask users questions: before the test (to screen them), during the test (to answer your research questions), and after the test (for overall feedback).

The most important thing? You gotta have the *correct audience*. Not everyone is your user. So you do a quick screening test first with questions like:

- How does your everyday life look?
- How often do you use products like this?
- What do you identify as? etc.

Then, during the test, your questions shouldn't lead the user. Let them think aloud. You just watch them interact, notice their body language, and ask things like:

- I noticed you did [this action], why so?
- What features do you find the most valuable?
- Can you try performing [this specific action]?

After the test, you ask more open questions:

- How was your overall experience?
- How likely are you to use this product?

And as a designer, you HAVE to note the "critical incidents."

- You expected the user to do one thing, but they did something totally different.
- They seemed frustrated, or happy, or confused.
- You assess what was a success and what was a failure.

Tools like website heatmaps also help a ton. They show you the hottest areas on your site - where people click, scroll, move. It helps you understand where to focus on improving the experience.

And lastly, you HAVE to document all the test feedback properly. Spreadsheets, screen recordings, audio notes… everything. You'll be amazed at what you notice when you rewatch it.

So what do you do after usability testing?
You analyze all that data. Look for patterns and common pain points. You need to look at both the numbers (quantitative data, like task completion rates) and the observations (qualitative data). Then you make informed decisions.

But listen, NOT EVERY ISSUE IS IMPORTANT. You have to prioritize. Think about how often a problem happens, how much it messes up the user experience, and the potential ROI for fixing it.

Collaboration between design and dev is crucial here. You gotta discuss possible solutions together.

And then you make iterative changes. Don't try to fix everything at once.

After you've made the initial changes, you go for another round of testing. See how the experience has improved and track the data.

**So what could we have improved?**

In our case, we did apply the best practices for usability testing. We went through all three stages, but we didn't record the feedback in a systematic way. Which led us to just assume we had to change everything a user didn't like.

We really needed to group the common user issues and prioritize them properly. And you can't forget that as you move from a POC to an MVP, the client always has new feature demands.

If we had recorded what needed to be worked on *after* the usability testing, and also tracked the new features, in a proper, systematic way… it would have led to a much happier client and way more realistic deadlines.

We still have a long way to go... We're trying to incorporate technologies like Dev Mode, AI, scripting and more. Also, our Design offering has expanded beyond just UI/UX: We now also focus on Graphic Design, Character Design, Animation and more (coming soon - 3D is exciting!).

I'd love to learn more about what your design process is, and how you think we can improve.

## **Some resources**

- https://designsprintkit.withgoogle.com/
- https://designlab.com/blog/guide-to-usability-testing-methods
- https://designlab.com/blog/what-is-the-ux-design-process
- https://www.lyssna.com/guides/usability-testing-guide/usability-testing-methods/
- https://www.lyssna.com/blog/website-heatmaps/
- https://www.linkedin.com/pulse/next-steps-after-conducting-ux-testing-your/

### [The rise of the Full Stack Designer](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/the-rise-of-the-full-stack-designer)

- Slug: `the-rise-of-the-full-stack-designer`
- Published: 2023-12-19T14:21:00.000+05:00
- Updated: 2024-05-13T16:30:26.000+05:00
- Reading time: 5 min
- Tags: Design, Artificial Intelligence
- Authors: Muhid Abid
- Visibility: public

Human creativity, evident since the era of cave paintings, has consistently driven advancements in design. From early sketches to digital tools shaping other tools, the evolution of UI/UX and HCI has been remarkable.

The convergence of design and technology has given rise to tools like Figma, Adobe XD, and platforms such as FlutterFlow and Webflow, transforming the way we build digital experiences. The future, marked by innovations in AI, promises a paradigm shift in sketching and design.

In this dynamic landscape, the emergence of the full stack designer reflects the evolving roles in technology and design. Who is the Full Stack Designer? What is the future of design? Let’s touch upon such questions, together.

### The Evolution of Design

Humans have been designing since the early days; cave painting. It’s a core part of planning and strategizing. The ability of humans to plan and coordinate attacks is what has distinguished us from other beings, and in the future, perhaps will be the sole differentiator between us and newer beings.

In the history of computing, UI/UX or HCI has evolved from sketching, to drawing and to using digital tools themselves to design other digital tools (trippy!). For years, humans have used visualization to achieve a “vision” of what they’re building, from movies to games and to all kinds of computer programs. The term “User Experience” itself is relatively new. It was coined by Don Norman in 1993 (Nielsen Norman Group, 2017).

Using digital tools to **build** other tools is not a new idea. Since even before the millenia, UML, codegens, and tool-builders like Eclipse have been blurring the lines between what is a “sketch” and what is real implementation. Today, we see more refined versions of such tools. Prototyping tools like Figma and Adobe XD are allowing designers to create functional prototypes, and plugins like Figma → Code AI are making it possible to generate entire screens with just a few commands. Additionally, platforms like FlutterFlow and Webflow are making it easier than ever to visually build websites and apps.

All this is about to change. Back in 2016, Google’s early stage text-to-sketch demo, named “Quick, Draw!”, showed us how the concept of sketching may be revolutionized, replacing your sketches with real-life drawings. Today, in 2023, we see Gemini, which boasts exceptional cognitive understanding of visual scenarios. We also see Figma taking huge strides in reducing handover with their Dev Mode, with interesting AI-based features which bridge the gap between engineering and design.

As we evolve AI and the tooling around it, we may see humans honing in on their strengths (their brains) than their weakness (their bodies), which was one the sole differentiator between us and other animals. We may become more of "orchestrators", and the planners of the future, while AI and robots are the executors.

### The Full Stack Designer of Today

Below are some schools of thought about who the Full Stack Product Designer is (Pixso, 2023):

- A person with a wide range of skills who can handle all aspects of software development unilaterally.
- A web designer who knows his way around coding and can develop the designs they have designed.
- A designer that is well-versed in the technical aspects of a product and can take it from idea to prototype on his own.
- A professional that’s highly skilled in strategic planning, user analysis, interface design, and visual design.
- A technical professional who can take a product end-to-end, understand complex Business Requirement Documents, decide which features should be built, communicate with all the stakeholders from engineering to clients, handle high fidelity designs, and help QA.

There are many definitions of the Full Stack Product Designer and they are all right in their own context! The kind of a Full Stack Product Designer you need completely depends on what your company team needs.

In her blog “What does it mean to be a “full stack” designer? Is it worth the effort?” Chung calls a remarkable multitalented designer, a Unicorn 🦄. Below is an illustration from that blog post showing the overlapping skills of a unicorn designer:

*Image from:### The next few years…

The standard UI designer, up until now, branches into two directions; either they become 1) an executive with a high level understanding of design or product (Chief Product Officer, Chief Design Officer), or, 2) a technical master of their craft, that is, a Senior UI Designer. The diagram below shows how these careers evolve and eventually become extremely distinct.

*A recent discussion with Ouzair Hafeez, senior Product Designer at Spotify, showed us how similar career paths are followed in emerging startups and even corporates. How do we see this map out in the next 5 years?

We may see fullstack engineering mixing with fullstack design, and the gap between technical and executive eventually merging into one. Plus, depending on the type of company, the senior Product Designer and Chief Product Officer may be the same person.

Today, we see many startups lead by designers. We’ve worked with Tabish Ahmed, who has an awesome career as a Product Lead and Designer at Meta, Google and Adobe, working on a technical startup, Playroom. It seems like the ease of prototyping enables designers to directly communicate and achieve objectives with engineers, and their contributions can directly be mapped out to code.

However, we still have separate roles (so far!) for technical and design leads. As the gap between prototyping and real engineering decreases, at least for MVPs, we may see early stage startups having one person for both executive functions in design and engineering; the Chief Product Officer, and one person for both technical functions in design and engineering; the Full Stack Product Developer. A similar pattern is followed at Omni, which enables them to achieve goals with a tiny team.

### AI Revolution & the future Designer?

With the rapid development of AI there has come a wave of intelligent design and development assistants. These tools are still in their early stages but with the speed they are being developed, it won’t be late till we see them being used everywhere as a basic tool.

So what does it mean for the Full Stack Product Designer of the future? They need to leverage this AI to accelerate the design and development process, utilizing tools and systems that allow them to create efficient and effective designs. They will have to get proficient in using low code tools and hardware at the very least. Soon we should be seeing unicorns leading entire projects end-to-end.

If you’re a designer today, you should be trying to get into both deeper design concepts as well as doing some end-to-end product building. Side projects really help!

### Conclusion

The rapid development of technology is giving rise to a new era of Full Stack Designers. With their unique blend of technical, creative, and business skills, full stack designers play a crucial role in bridging the gap between various teams while being the think tank in the team. As technology continues to advance, design roles are becoming less pronounced, and the full stack designer is becoming an integral part of the entire product development process. The future holds exciting possibilities for full stack designers, as they continue to adapt and evolve alongside the ever-changing landscape of technology.

### References

- https://pixso.net/tips/full-stack-designer/
- https://careerfoundry.com/en/blog/ux-design/what-is-a-full-stack-designer/
- https://medium.com/ux-school/what-does-it-mean-to-be-a-full-stack-designer-is-it-worth-the-effort-575b07e3a4ea

*We love building new, visually-stunning and performant technology, for the future. A lot of our work is R&D-based and on experimental tech. If you're interested in working with or for *Grayhat*, DM or comment!*

**Author:** Muhid Abid

**Co-author:** Saad Bazaz

### [Building Blazingly Fast with Material Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-blazingly-fast-with-material-design)

- Slug: `building-blazingly-fast-with-material-design`
- Published: 2023-10-13T16:01:00.000+05:00
- Updated: 2024-05-09T16:23:02.000+05:00
- Reading time: 5 min
- Tags: Material UI, Flutter, UI, UX, Design
- Authors: Wasif Sadiq
- Visibility: public

*Build fast and stable, and get MVPs done faster.In our fast-evolving world of web and mobile design, it's essential to stay in sync with cutting-edge design ideas. At the forefront of this design revolution lies Google's Material Design – a beautiful blend of precision, functionality, and visual charm. But what's the magic behind it for developers and designers? Beyond its eye-catching visuals, Material Design gives your projects wings, propelling them into captivating user experiences.

I’ve been recently working on a project that, for some reason, started off with a totally custom UI. It was quite painstaking, trying to nail down multiple screen sizes, ensuring consistency, etcetera. That’s when our team brainstormed and decided to redesign the entire app, Figma and Flutter both, in Material UI. That's when I decided to delve into the world of Material Design. Using it immediately gave the app a fresh and engaging user interface. The client was passionate about creating an application that not only served a purpose but also left users with a memorable experience, so Material UI fit perfectly into the users’ native systems, Android, and gave them a seamless experience.

*Let's take a deeper dive into Material Design, shall we?*

Back in 2014, Google unveiled its masterpiece - Material Design. It's like a special design guide for making digital interfaces look and work better. It uses grids, smooth movements, and cool lighting and shadows. It's all about grid-centric layouts, fluid animations, and those subtle yet striking lighting and shadow effects – all coming together to create a user experience that feels as intuitive as a well-worn path.

As I delved deeper into Material Design's guidelines and principles, I could immediately sense the attention-to-detail the designers at Google had. They’ve worked on almost every aspect of the design system, and made it super general so it can adapt to almost any system. It wasn't just about making things look beautiful; it was about making them work seamlessly too.

You can learn more about the design side of Material in our previous article.

*Now, **why** did Material Design supercharge our process?*

***A Unified Visual Language. ***Embracing Material Design means joining a conversation that Google has been perfecting for years. It's like speaking the same language as Android enthusiasts – a familiar, comforting dialogue. Since most of our users were on Android, it was a no-brainer to use Material to make our app blend in with the OS. Our designers made sure to take hints from Google’s own Drive and Mail app, and from the native Dialer app. We had to bring in a Pixel 4 specially for this (thanks to our team member, Syed Abdullah Nasir, for his phone 😅)

***Ready-Made Building Blocks.*** Material Design gives developers a treasure trove of premade UI components. No need to start from scratch; these elements are like LEGO blocks that speed up your prototyping and development process. Both design and development teams were super happy with this; the designers used the Material 3 Design Kit, and used the standard Android frame in Figma, to design the base screens. Then, all the Flutter team had to do was see the name of the components in the design, go to the Flutter Material 3 Docs, look up the same names of components, and simply use them in our code.

***Seamless Across Platforms.*** As we embrace cross-platform tools, Material Design shines as a beacon of consistency. It ensures your design looks and feels the same, no matter where it's experienced. This was super important for the folks at the development team; our client wanted a consistent look across all Android screens, from Pixels, to Samsungs. The best part of Material was that it was consistent; Heading1 was Heading1, in Figma, in a Samsung phone, in an iPhone, and almost any device. So we were never worried that something might look odd according to screen size.

***Engaging User Experiences.*** Material Design puts user interactions front and centre. It's all about giving users immediate feedback, creating interfaces that feel like second nature, and ultimately, making users smile with delight. We were just glad we got the ripple animation out-of-box. It brought a hint of professionality and polish to our work.

***Continuous Evolution and Community Support.** *With Google's watchful eye, Material Design keeps evolving to stay in tune with the latest UI/UX trends. Plus, there's a vibrant community out there, offering plugins, extensions, and wisdom in forums. The transition from Material 2 to 3, and from color themes, is pretty seamless.

*But… I’m not a Flutter guy 😞 How can I use Material?*

Here, let's talk about *how *to incorporate Material Design into your projects with frameworks and libraries that make it a breeze:

**For the Web.**

- If you're a React enthusiast, MUI is your go-to choice.
- Vue.js lovers can embrace Vuetify for a rich suite of Material components.
- Angular devotees are in luck. Since Angular is also maintained by Google, it has pretty much the best Material library possible, Angular Material! Best docs ever.

**For Flutter (Google's darling).**

Google's Flutter inherently champions Material Design. Just tap into package:flutter/material.dart to unlock a world of Material widgets.

**For Android.**

If you want a true Material experience on Android, look no further than AndroidX's Material Components. They're tailor-made to adhere to Google's Material guidelines.

**For iOS.**

Even in the Apple ecosystem, Material Design has a presence. Material Components for iOS gracefully bridges the gap, ensuring a consistent experience, however, they are entering maintenance mode and recommend shifting to native iOS components, SwiftUI and even Flutter.

*I’m pumped! 🤩 Now what?*

Leveraging these frameworks and libraries not only streamlines your development process but also guarantees an authentic Material Design experience, staying true to its core principles.

I recommend you to read its principles and familiarize yourself with the concepts. That way, you won’t always have to rely on a designer to tell you exactly what to do; you can use your own Material-intuition to solve things yourself, along the way.

Therefore, as you embark on your Material Design journey…

**Dive into the Guidelines. **Immerse yourself in Google's official guidelines. They're like your North Star, guiding you through the vast sea of typography, motion, and more.

**Harness Material Components. **Whether it's web development with Material Components for Web or conquering the mobile realm with iOS and Android versions, Material Components are your trusty companions.

**Designer's Arsenal. **Prototype in style with design tools like Sketch, Figma, and Adobe XD. They offer Material Design kits that'll make your designs sing.

**Stay Ahead.** Engage with Material Design-focused communities or forums. It's how you ensure you're always at the forefront of design evolution.

In closing, remember that Material Design is more than just a pretty face. It's a catalyst for efficiency and aesthetic brilliance. By embracing its philosophy, you're not just hopping on a design bandwagon – you're supercharging your journey in the world of development. Whether you're a developer, designer, or a visionary crafting digital experiences, Material Design is your indispensable ally in shaping the future of the digital landscape. It certainly was mine, and it might just be yours too.

**Author: **Wasif Sadiq

**Editor:** Fatima Majid

### [Design to Scale](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/design-to-scale)

- Slug: `design-to-scale`
- Published: 2023-08-23T16:37:00.000+05:00
- Updated: 2024-08-17T13:22:00.000+05:00
- Reading time: 3 min
- Tags: Design, UI, UX, Product Design, System Design
- Authors: Saad Bazaz
- Visibility: public

Picture yourself driving down a road and making a left turn at the end, only to be confronted by a roadblock due to ongoing construction. Swiftly, you reverse your vehicle, alter your path, and embark on a detour to ultimately reach your intended destination.

Now, expand this scenario on a larger scale. Imagine a crowd of *ten thousand* other individuals navigating the same road, and among them, *one thousand* encounter the obstructed route. Like you, they also backtrack, change directions, and adopt an alternative route.

Another possible scenario: Someone else witnessing both your car and the one ahead of you taking an unplanned detour promptly deduces that something is off. They might assess the situation from a distance and perceive it as an anomaly and follow your lead without seeing what's wrong for themselves.

**Paulo Coelho says, “The problem is, sometimes you stop and think you understand the world. This is not correct. The world is always moving.”At an individual level, making mistakes is a natural part of life's journey. But when these mistakes are magnified on a grand scale, they can become a costly hiccup. Mistakes can inspire systems, but can also mold them like a shell around themselves.

Nature has a keen tolerance to mistakes - it embraces them as part of its change mechanics. A zebra has an instinct to save its life from a threat like a lion, but that instinct is actually the absence of the love of death, which… died. Countless zebras with a will to die had to die, before the ones which didn’t could become the majority.

Designing and scaling systems with a "natural" mindset, often referred to as biomimicry or biologically inspired design, involves drawing inspiration from the efficiency, adaptability, and sustainability found in natural systems. By integrating these principles into human-made systems, it's possible to create solutions that are better aligned with the natural world and more conducive to scalability.

What is natural, though? Is it something which has been iterated over countless times? Can, one day, our robotic and cold systems be called “natural”? If I simulate a system through a genetic algorithm, test every possible edge-case of it, and let it figure out the best way to do something… can I now call that system “natural”? Perhaps the building of systems, whether inspired by the nature around them or not, is inherently “natural” to a human being.

Systems don’t also have to be invented or thought from scratch. They can build upon existing systems, or be a subset of them. You can build a system by connecting a few other systems with one another. Almost every ecosystem on earth is symbiotic in nature; the output of one, becomes the input to another, and vice versa.

Shouldn’t our systems be strict, and built to prevent mistakes? I think otherwise. Keeping things stupidly simple, and building a robust framework of iterative improvement, while keeping a large vision in mind, may still be the best approach to building systems. The objective is always to maintain a balance, while moving progress - a key point of nature’s systems is sustainability. Of course, yes, there could be a “catastrophic event” which changes the course of the system, but good systems will always find a way forward, or, die out and leave a vacuum for better ones.

"Nature has already solved many of the problems we are grappling with. Animals, plants, and microbes are the consummate engineers. They have found what works, what is appropriate, and most important, what lasts here on Earth." — Janine Benyus

In the business world, this “balance” usually translates to burn rates, cost-profit charts, etcetera. As humans and their technology evolves, these iteration cycles may become shorter, but they will always exist. Perhaps one day, we humans could escape the labor which goes into these cycles and become strategic thinkers and visionaries. This evolution would augment (not replace!) human capabilities, and would force us to redesign and rethink some of our inefficient and “unnatural” human systems which have crept into our world.

The first question I ask at Grayhat when designing systems is “How would this system exist if there was no technology in the world?”. In most cases, when software translates to the real world, there is almost always a way to achieve the objective without even touching a screen. Playing around real-world perceptions and experiences is a key stepping stone in the road to invention - only once you’ve understood how humans perceive the existing world, can you bring them out of their everyday lives and blow their minds. In the words of Albert Szent-Gyorgy:

**"Innovation is seeing what everybody has seen and thinking what nobody has thought."**Author: **Saad Bazaz

**Editor: **Aniqa Sadaf

### [Will Google Material withstand XR?](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/will-google-material-withstand-xr)

- Slug: `will-google-material-withstand-xr`
- Published: 2023-07-20T16:55:00.000+05:00
- Updated: 2024-05-09T18:32:34.000+05:00
- Reading time: 4 min
- Tags: Design, VR, AR, UI, Flutter
- Authors: Muhammad Munaf Ul Hassan
- Visibility: public

It goes by many names.

Material, Google Material, M3, Material You, the Worst Design Library Ever As Per Every Posh Designer.

Unveiling Material You - Material DesignThe next stage for Material Design*Material Design*You may know it after Google announced Material 3 as the successor of the widely known, boring Material 2. Perhaps you heard how Material 3 supports super cool widgets on the home screen. Or, you randomly woke up one night to find your Google Pixel looking completely different than it did at the party last night.

The real deal, however, is how Google is shifting the Material mindset to capture a larger range of devices; from watches, to TVs, and even car dashboards.

It's 2023. Why are we writing about M3 now? We're working on building native-like Flutter apps, and have discovered that the latest versions of Flutter are now shipping with M3 beta, as the out-of-box UI solution.

Flutter – Material Design 3Start building with Flutter*Material Design*### UI/UX is changing

For the past two decades, UI/UX was synonymous with "design for screens". A few years up until Apple's sudden announcement of the VisionPro, we've seen a dynamic shift to extend UI/UX beyond the pixels of a screen; it's gone back to its native definition of "how to make people a part of the things they do".

*The official demo of how the "apps" menu would look like in the Apple VisionProApple, as always, went pretty hard on designers.

A complete guideline, along with some great tips, is available on Apple's Design section to build interfaces the "right way" for XR.

This isn't the first time; Apple is notorious for being pretty strict and demanding on designers, and has released guidelines for every single interface they support, each with their bespoke environments, inputs, and dos-and-donts, be it for watches, phones, tablets, and even cars.

### Material 3+ as a competitor

We've discovered that in the world where we're constantly surrounded by digital interfaces, Google's Material Design M3 offers a more powerful blueprint than its predecessors and competitors, for creating a user-friendly UI. Clear, user-focused language is at its heart, ready to transform your platform's user experience across the board.

### How to Material You

**1. Clear Communication is Key**

The hallmark of M3 is direct, user-centric language. Replace ambiguous prompts such as "Are you sure you want to move to trash?" with the more direct "Move to trash?"

**2. Titles Matter**

Avoid all caps in your titles. M3 advocates for sentence case, creating a softer and more welcoming interface.

**3. Make Every Word Count**

Abbreviations can be useful, but clarity is king. Unless you're short on space, full terms outperform abbreviations in ensuring your message reaches every user.

**4. The 'You' Factor**

M3 recommends the use of "you" to create a personal touch. It's about keeping the conversation between the UI and the user, so refrain from mixing "you" or "your" with "me" or "my".

**5. Punctuation Perfection**

Less is more when it comes to punctuation. Avoid periods in short texts and opt for contractions - "can't" is easier on the eyes than "cannot". Oxford commas are endorsed, unless there's an ampersand in play. Remember, commas always live inside quotation marks.

**6. Exclaim with Caution**

While exclamation points aren't banned, they should be used sparingly. Exceptions are allowed for greetings and congratulatory messages.

**7. The Role of Parentheses**

Parentheses are handy for defining acronyms or citing sources, but skip them for side notes or afterthoughts.

**8. The Ampersand Rule**

The '&' symbol is a bit of a diva. It’s acceptable in headings, but best avoided in body text.

Google's Material Design M3 is more than just a style guide - it's a strategic tool for enhancing user experience and making that said experience consistent across multiple interactions. The official Material website does not delve into tiny specifics by mentioning screen sizes, device types, etcetera. I take that as a good sign. That means they design beyond the boundaries and restrictions of mere devices. They design for humans.

However, going through the Foundations section of Material design's official website, it specifically covers touch devices, but not hand gestures through vision cameras. That kind of threw me off. Also, the layouts aren't really capturing the Z-depth factor in XR. This definitely needs some updating and some language change to make the system more inclusive to XR.

There's a world beyond 3-pane layouts and 2-dimensional interfaces: Get going with the times, Google! ;)

They're not too behind in the game though. Apple still uses iPad layouts and interfaces for the VisionPro. Smart or lazy? I'll leave that to you to decide.

### Parting words

A clear, engaging UI built for the right platform, can be a pivotal factor in product adoption and user satisfaction, laying the groundwork for robust business growth. Stay tuned to our newsletter for more updates and insights on enhancing your digital interfaces.

Now, it's over to you: Do you think Material will survive?

Guest Author: Muhammad Munaf

Edited by: Saad Bazaz