Designing a Pokémon application: Wireframes, UI and Prototype

Designing a Pokémon application: Wireframes, UI and Prototype - Coletiv Blog

An interface for our Pokémon development challenge 🔮

At Coletiv, developers joining our team need to build an application to fetch the entire list of Pokémon from an external API. But, because this challenge does not have its dedicated design, developers in the recruiting process take a long time, not only to program but also, design the UI at the same time. 😅


In the real world, usually, developers don't need to worry about the UI. Often, they have access to a ready-to-use design file. But, because we didn't have the UI ready, we couldn't even evaluate how the developers followed a design. 📱


For that reason, we decided to invest some time in designing the interface for this Pokémon challenge. This Pokédex-like application should allow users to enter each Pokémon for more details on moves and other characteristics.


Here are the requirements of this app 👇

  • Home Screen - List of Pokémon
  • Detail Screen - Display more information about each Pokémon
  • All Moves Screen - A list with all the moves of each Pokémon
  • Pokémon Search - Search bar with input

Wireframes

As a marketer learning UX/UI, my first attempt designing the homepage wireframe fell short. 🤣 But I learned a lot while doing it!


I tried doing everything from scratch (like a real greedy newb 😅) and forgot about the guidelines. This article, at least, saved me from messing up my layout grids.


The result: everything was super small and impossible for any person to interact with on a mobile device. And the text required a magnifying glass for you to read. 🔍


Here's to the biggest flop ever 🤡

designing-a-pokemon-app-wireframes-fails.png



So, after this attempt, I checked Material design guidelines for buttons, typography, and other elements like progress bars and chips. I also tested the interface using Figma Mirror on my smartphone to check if everything was ok.


Everything got a lot bigger, as you can see here 👇

pokemon-challenge-homepage-screen-wireframe.png



Then, after designing more screens, I got together with our lead designer at Coletiv and got some feedback. Here are some things that I learned👇


  • Always use Frames instead of Groups so you can add constraints (she was specific about this and almost killed me🔪);
  • You should create Components even in Wireframes (it's easier to make changes, I regretted not doing it right away 🥲);
  • You should also add Text styles and Color styles in Wireframes;
  • To make your design responsive, you need to add Constraints in every frame;
  • You should pay attention to smaller icons and add a clickable area when necessary;
  • If your tags are not clickable, avoid making them look like buttons and be careful with sizes;
  • Although your design should work on all devices, you should start by using the newest models available in Figma;
  • Avoid using small font sizes and try to structure information through typography;


After making many adjustments, here is the result 👇

Designing a Pokémon application - Wireframes - Coletiv Blog.png



If you're a newbie like I am, don't forget to take advantage of Grids and other Figma features like Tidy UpVertical SpacingHorizontal Spacing, and alignments. 🙌 All located in the sidebar, at the top.


Screenshot 2021-12-07 at 10.31.21.png



The shortcuts I used most were: the Shift + Arrows and the Command/Ctrl + Option to check spaces between elements. 🤣

Interface

The look & feel of the application is the best part for me! Seeing the before and after makes me motivated to learn more. 🤩 But it was the most time-consuming part, as I had to review it many times with our lead designer to make sure everything was ok. 🤓

Moodboard 💭

Since it's a Pokémon application, the interface needed to reflect that same energy with bright colors and appealing illustrations of each Pokémon. Before starting, I created a small mood board to help set the pace for the UI design.


It looks like this:

pokemon-challenge-moodboard.png



Most of the designs were related to gaming applications and Pokémon itself. So my mood board has many fun colors and appealing 3D illustrations.


I mostly used Behance and Dribbble to gather inspiration and check on trends. I recommend you to try it out as well.

Colors & Typography 🎨

I still need to learn more about colors and typography, so I checked some recommendations from articles and tools online. 💻


I used Coolors to explore some trending pallets. But then it hit me. Pokémon types have specific colors associated that are important to the user. So I had to research and make some adjustments so that the interface could be consistent.


Inspired by the Pokémon logo, I decided to use blue and yellow for the interface colors. But with a modern twist in the tones.


Pokemon-Logo.png



Here is the final interface pallet 👇

Designing a Pokémon application - interface colors - Coletiv Blog.png



Here is the pallet for the Pokémon Types 👇

Designing a Pokémon application - colors - Coletiv blog.png



In terms of Typography I went with the fastest route: use just one. 🤓


I wanted to use something modern, round and clean. So, I checked Google Fonts and Poppins seemed like a good choice for this concept due to its friendliness.

UI Design 📱

Let's get into the fun part! After trying out colors and typography and deciding on these aspects, suddenly, the UI gained some life.


At this stage, I created different components to make future changes easier. It included Pokémon cards, headers, tags, buttons, search bar, and other elements reused across the interface. You can learn more about components here.

Designing a Pokémon application - Interface - Coletiv blog.png



The structure itself was faithful to the wireframes since I didn't make critical changes after reviewing them with our lead designer. 🙌 I did improve the headers and the Pokémon tags.


I used an iPhone 8 Plus frame and then added constraints to respond to different devices. Next time, I'll make sure to use a more recent smartphone!


In terms of look and feel, I decided to keep it fun, just like the designs in my mood board.

Designing a pokemon application ui look and feel - coletiv blog.png



It was a challenge to add more depth to the look & feel, so I took advantage of shadows, transparency, and appealing colors and illustrations.

Prototype ⏭

Last but not least: making it dance! 🕺


Figma makes prototyping very easy. All you need is to head over to the Prototype option in the sidebar and start connecting elements in your design. I only had to connect the dots between the buttons, cards, and the search bar to make it move. 💃


You can also define the device you want and the background color. Here's a good tutorial on Figma prototypes if you're also getting started.

Designing a Pokémon application - prototype - Coletiv Blog.png



Since there weren't many screens in our Pokémon application, prototyping was pretty straightforward.


Here's how the prototype looks 👇

Resources 🗂

To design this Pokédex, I used different resources kindly provided by the community of designers and Pokémon fans. Below are the links, in case you want to check them out.



Graphic Design


Feather icons (Figma Plugin)

Pokemon 3D illustrations

Pokeball design

Pokemon types icons



Research


Complete Pokedex (Pokemon Go)

Bulbapedia

Pokédex

Thank you for reading!

Thank you so much for reading, it means a lot to us! Don’t forget to follow Coletiv on Facebook, Twitter, and LinkedIn as we keep posting interesting articles on technologies, processes, and experiences.


If you'd like to work with us on a digital product just drop us a message here.




Do you want to become part of our community?

Join our newsletter 😎