5/24/2023 0 Comments Pokemon figma![]() Pokémon types have specific colors associated that are important to the user. I used Coolors to explore some trending pallets. I still need to learn more about colors and typography, so I checked some recommendations from articles and tools online. I mostly used Behance and Dribbble to gather inspiration and check on trends. So my mood board has many fun colors and appealing 3D illustrations. Most of the designs were related to gaming applications and Pokémon itself. Before starting, I created a small mood board to help set the pace for the UI design. 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. □ 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. ![]() Seeing the before and after makes me motivated to learn more. The look & feel of the application is the best part for me! The shortcuts I used most were: the Shift + Arrows and the Command/Ctrl + Option to check spaces between elements. □ All located in the sidebar, at the top. If you're a newbie like I am, don't forget to take advantage of Grids and other Figma features like Tidy Up, Vertical Spacing, Horizontal Spacing, and alignments. Avoid using small font sizes and try to structure information through typography Īfter making many adjustments, here is the result □.Although your design should work on all devices, you should start by using the newest models available in Figma.If your tags are not clickable, avoid making them look like buttons and be careful with sizes.You should pay attention to smaller icons and add a clickable area when necessary.To make your design responsive, you need to add Constraints in every frame.You should also add Text styles and Color styles in Wireframes.You should create Components even in Wireframes (it's easier to make changes, I regretted not doing it right away □).Always use Frames instead of Groups so you can add constraints (she was specific about this and almost killed me□).Then, after designing more screens, I got together with our lead designer at Coletiv and got some feedback. I also tested the interface using Figma Mirror on my smartphone to check if everything was ok.Įverything got a lot bigger, as you can see here □ ![]() So, after this attempt, I checked Material design guidelines for buttons, typography, and other elements like progress bars and chips. And the text required a magnifying glass for you to read. The result: everything was super small and impossible for any person to interact with on a mobile device. This article, at least, saved me from messing up my layout grids. I tried doing everything from scratch (like a real greedy newb □) and forgot about the guidelines. All Moves Screen - A list with all the moves of each PokémonĪs a marketer learning UX/UI, my first attempt designing the homepage wireframe fell short.Detail Screen - Display more information about each Pokémon. ![]() This Pokédex-like application should allow users to enter each Pokémon for more details on moves and other characteristics. □įor that reason, we decided to invest some time in designing the interface for this Pokémon challenge. But, because we didn't have the UI ready, we couldn't even evaluate how the developers followed a design. Often, they have access to a ready-to-use design file. In the real world, usually, developers don't need to worry about the UI. 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. An interface for our Pokémon development challenge □Īt Coletiv, developers joining our team need to build an application to fetch the entire list of Pokémon from an external API.
0 Comments
Leave a Reply. |