About This Project

QuickGa.me is an online game engine for game developers to easily create 3D multiplayer games without the need for game developers to have server hosting and network coding from the users.

Status: The platform is still under development

Duration

• Research: 6 hours
• Wireframe: 24 hours
• Color Testing & Mockup: 16 hours
• Style Guide: 8 hours

My Design Process

Client's Request

• Redesign UI (Simplify current layout)
• Overall Theme (Semi-Professional & Dark Theme)
• Style Guide
• Prefer not using too many images in the new layout to prevent web traffic

Identifying Design Problems

• The overall layout is cramped with info
• Too many layers of navigation all on the left side of the screens
• Main editing/preview screen on the right side
• Reusing icons
• Missing icons on the top nav
• Font size & Font type

Competitive Analysis

The client is aiming to construct a web-based semi-professional platform with a dark theme

Research Direction

• Web game engine
• Semi-professional game engine
• Dark Mode

Scratch https://scratch.mit.edu/

Gdevelop https://gdevelop-app.com/

Gdevelop Dark Mode

ct.js https://ctjs.rocks/

ct.js Dark Mode

Scratch

• Having 2 layouts for users to choose from
• Picture of each item (sprite, background, etc) with a delete button next to it
• XY Axis has a smaller text area
• "Show" using buttons with icons instead
• The editor screen in the center of the screen
• Having categories tap separated and labelled with icons (code, costumes and sounds)
• Rounded textarea

Gdevelop

• Picture of each object next to the name of the object with a menu button next to it for dropdown
• XY Axis & width and height have a smaller text area
• Taps underneath the main nav bar
• Having categories separated and labelled (properties, objects and layers)
• Objects panel on the left or right side while the properties panel is on the other side
• The editor screen in the center of the screen
• Search bar to search for objects to edit the properties
• Used different types of blue colors in the dark mode

ct.js

• Picture of each object next to the name of the object
• Width & height have a smaller text area
• Thin line used for highlights
• The main nav bar was resized with icons
• Dark Blue or Black would look a bit more professional in general
• Black background color with a light color for contrast
• Done button floating at the bottom of the screen