
Part 2: Design
These are the pictures I created in Republic Poly.

Part 2a: Adobe Illistrator
These are the pictures I created using Adobe Illustrator

Paper sketch of business card
Business Card Design Explained:
Here are the guiding principles behind my name card designs: ​
​​
-
Color Scheme: Utilizes a deep red background with a black border, creating a professional and bold look that reflects the "Rouge Noire" brand. White text is used for strong contrast, ensuring excellent readability.
-
Layout & Balance (Front):
-
The brand logo is prominently positioned on the left side, immediately establishing brand identity.
-
The individual's name is clearly displayed in large white text on the right for easy recognition.
-
-
Layout & Balance (Back):
-
Essential details like job title, contact information, and website are neatly organized with white text for clarity and quick reference.
-
-
Typography: Employs a clean, professional font (such as "Myriad Pro") for all text, enhancing readability and maintaining a polished appearance.

The main logo:

Digital design concepts:

Paper sketch of Logo
Logo Design Explained:
The design choices are guided by the following principles:
-
Color & Contrast: Uses "Rouge" (red) and "Noire" (black) from the brand name for striking visual contrast. White text and elements ensure high visibility.
-
Gaming Theme: Features a classic game controller as the central element, instantly communicating the "Games" focus of the brand.
-
Brand Prominence: The name "Rouge Noire Games" is clearly displayed in the middle of the controller for strong, immediate brand identification.
-
Bold Typography: The "Impact" font is chosen for the text to convey excitement, energy, and a sense of determination.
-
Shape: The design is contained within a hexagon, providing a modern and distinct frame.
​


Part 2b: Figma
These are the pictures I created using Figma

1. My infographic/mindmap
This is the infographic/mindmap that I have created with Figma.
Link: https://www.figma.com/design/riEiNLmwXCPiGJz6KiJtIX/Jhin-Kiat-Infograph?node-id=0-1&t=q1tgFPYaLVUvHxd0-1

2. StyleShop App and Website
This is a Figma wireframe I created during one of the UX/UI lessons.
​
Phone website link:
https://www.figma.com/design/R5zLH0DhIwIEBSomw0BqMa/L08-assignment?node-id=0-1&t=uQsWInG0LSx9584V-1
PC website link:
https://www.figma.com/design/XL89jEl45BerzVMXZLIQIx/L12-assignment-Desktop?t=uQsWInG0LSx9584V-1
Phone Website Homepage:

PC Website Homepage:

3. ArtzNVidz
This is a phone website wireframe that I have created with Figma as part of the UX/UI module. The wireframe here is an early prototype version of the potential final product.
Link: https://www.figma.com/design/8As1owAZzXlgk4lstLQFR4/ArtzNVidz-figma?node-id=0-1&p=f&t=zYguZdlrHRzBPf4z-0
Phone Website Homepage:

Phone Website About Page:

Low Fidelity Wireframe:

4. ThisSideUp
This his to be one of if not the largest project I have ever created and has a lot to unpack as it contains the website itself, but also a database, a figma wireframe, and some documents. This was createdwith the assistance of my teammates such as Darys and Adriel as part of our final year project.
Website link: This Side Up Website
Figma wireframe link: This Side Up – Figma
Website home page:

Website product page:
_PNG.png)










