Open Source, Web Development

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


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:


 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:





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.





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:





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:



The End Result



Leave a Reply

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

You are commenting using your 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