Merkur Slots | Phase 0.1

General project description

The objective of this project was to instruct me how to be a UI designer creating a good base and understanding of the functionality and composition of a UI KIT. In the second phase it consists of the creation of Key pages starting from a design already created in code, where I learned a little about CSS. These Key Pages will serve to streamline the process of creating and implementing improvements to the website. The third phase consisted of high-fidelity prototyping.

My contributions

This project was created together with the UX team and the guidance of the product managers.

Fase 01. UI Kit Recreation

This phase was the first contact with the Merkur Slots brand, it helped me to empathize and understand its patterns, specifications and rules of use. The UI Kit is made up of the following pages: Spacing, Styles (Colors, typography, grids), Icons, Buttons, Components (Main header, footer, pills, accordions, Searcher, etc.) Navigations, Forms, Modals, Thumbnails, Banners, Content modules, Brand, Illustrations, Cards and loaders and spinners.

Spacing

Typography

Grids

Icons

CTA Component

Radio buttons

Checkbox button

Text Links

Component: Main Header

Component: Sections Rail

Component: Footer

Component: Pills

Component: Switches

Component: Accordions

Component: Search Game

Navigation: Categories

Navigation: Breadcrumbs

Navigation: Tabs

Navigation: Help center

Header, Navigation and Sections

Forms: Inputs

Forms: Password

Forms: Dropdown

Forms: Input Date

Modals: Prompts

Modals: Informationals

Modals: Pop ups

Modals: Snackbars

Games Thumbnails

Swimlanes

Banners: Main Structure

Banner Specs for Desktop

Log in prototype

This is a temporal test.