Open Source, Web Development

Release 0.4: PR #2; A blank canvas and some pastels

Introduction

For this Pull Request, I worked on an internal open source project developed by my classmates called CreativeCollab – a turn-based creative writing app. In its current form, it’s still in very alpha stages as the server isn’t properly setup and the Client component of the project is the only functional component of it so far. The Issue can be found here and the PR that I made can be found here. What I implemented in the project is basically front-end work concerned with improving the UI as I see fit (…my design choices are a bit…questionable) as it was too bland for my tastes:

CreativeCollabOriginal

 The Process

To improve the UI, I was mainly concerned with the Client component of the project and the CSS files involved. There’s only CSS file for the project as it stands right now and that is creative-collab.css file and so I had to mainly add my CSS customizations to this file while making minor in-line CSS styling in the app.js and board.js to properly accommodate the CSS changes that I made.

First stop – the header doesn’t stand out. It needs more flair and some spice. A simple change in the background of the header itself is fine but the font of the header needs to stand out against the normal fonts:

creative-collab.css

Collab-header

app.js

collab-header_appjschng

Second stop – the right panel that contains the ‘Player 1’ and ‘Player 2’ text seems like an unknown to the user – why is there a panel there in the first place? What is it for? It needs to immediately tell the user what it is used for and it needs some spice.

creative-collab.css

players-container

board.js

players-container_boardjschng

Third stop – there’s a random ‘Disconnected’ and ‘<App-player….>’ text floating around. Hmm…maybe a simple panel that displays ‘Player Information’ is needed? Perhaps just to show their Status and Name:

creative-collab.css

playerinfo-panel

board.js

playerinfo-panel_boardjschngs

Fourth stop – what is that “Tell Tale” button design…it reminds me of 2000s. Nostalgia. Windows 90s. Early internet forums. It needs to be modernized. Since the project is using Bootstrap 4 framework, there’ an easy way to implement a modern button design:

board.js

button

The End Result

CreativeCollabDemo

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s