Test Brief:
Use the provided wireframe and create a fully fleshed-out mockup using your knowledge of typography, iconography, color, and layout hierarchy.
Link to the interactive Figma prototype:
https://www.figma.com/proto/GpeNLYniUboEzoEavM6BWR/Untitled?page-id=0%3A1&type=design&node-id=36-817&viewport=2131%2C81%2C0.25&t=n86hdG3DCaDrTwH5-1&scaling=scale-down-width&mode=design
https://www.figma.com/proto/GpeNLYniUboEzoEavM6BWR/Untitled?page-id=0%3A1&type=design&node-id=36-817&viewport=2131%2C81%2C0.25&t=n86hdG3DCaDrTwH5-1&scaling=scale-down-width&mode=design
Card Design
There are several primary elements of the card that require careful consideration:
- The name of the item
- The selection indicator
- Rarity
- The card's color, which conveys the item's type
- The selection indicator
- Rarity
- The card's color, which conveys the item's type
My objective was to design a card with a Grounded Sci-Fi style, incorporating distinctive elements for each of the sections mentioned. However, I also aimed to ensure that the item remained the focal point of the card and that the card's details didn't detract from the item's prominence.
The entire design was vectorized in Adobe Illustrator, ensuring a high-quality resolution
The entire design was vectorized in Adobe Illustrator, ensuring a high-quality resolution
The card design process began with a rough sketch, followed by iterative refinements to incorporate details and establish basic color schemes. Once I was satisfied with the overall design, I introduced textures and implemented lighting and shadow effects.
In the final step, I established various states for the card, including Default, Hovered, and Selected, and then added interactivity to each one in Figma.
Icon Design
After a thorough examination of the existing Gears 5 icons, I developed a texture incorporating rough sketches and metal textures to serve as a mask for the new icons.
My intention was to incorporate elements from the game, such as characters and equipment, into the icons to make them distinctive and easily recognizable.
Subsequently, I proceeded to create Figma interactive components for each of the icons.