search

ashishnagpal2498 / hackstation

It is a web-app that help you track your coding status, showing it in form of dashboard. It also provides reminders to users for various competitive coding contests.
https://hackstation.netlify.app/
27 stars 44 forks source link

Color code and Typography for the project #4

Closed ashishnagpal2498 closed 3 years ago

ashishnagpal2498 commented 4 years ago

Define color codes and fonts to be used for the project. This issue is purely based for UX researcher. Provide the reasons for choosing color codes.

utchak160 commented 4 years ago

@ashishnagpal2498 Please assign this to me.

utchak160 commented 4 years ago

I've to add the variables of the color code? As then it would be in scss and the project is setup for css.

ashishnagpal2498 commented 4 years ago

No, Just mention the color codes in json file and all the fonts. Also when you provide the PR, do mention the reason of choosing such colors and fonts. Add links for viewing.

utchak160 commented 4 years ago

https://coolors.co/7400b8-6930c3-5e60ce-5390d9-4ea8de-48bfe3-56cfe1-64dfdf-72efdd-80ffdb According to me, this color palette will best be suited for this use case because it has a smooth mixture and the user will like to see the page so as to track his or her coding hours regularly. Please tell me your views.

antaramunshi commented 3 years ago

32,194,14 RGB with a black bg would look actually cool since it's a coding status bar. We can also keep a light mode for those who would like to work in the light mode. And ig Lato as a font would enhance the page. I think i'll be able to work on this. Can you assign this to me?

himanshu007-creator commented 3 years ago

i would like to work on this issue. Please assign me this issue.

ashishnagpal2498 commented 3 years ago

@antaramunshi . Since you are designing homepage. Assigning this to @himanshu007-creator Please provide a relevant color code, fonts. I want you to explore different webpages and then come up with something providing the reason for choosing. You can attach links for sites you visit.

himanshu007-creator commented 3 years ago

SIR, as we are making a website that will track number of hours of coding, we need to focus on coders.I would suggest to use dark themed background as mostly coders code at night. But using green color for text is TOO MUCH predictable! For that i suggest, we will use orange color. and for font, we will use OSWALD font [ light 300 varient]

so i finally propose these:- background color:- black text color [for headings]:- #ff7b00 font [for heading]:-Source Sans Pro text color :- white font [for text]:-Oswald [light 300 varient] other colors( for image background, etc):- #907163, #3a9e66,

implementing these changes, our website will be similar to this one COLOR SCHEME

himanshu007-creator commented 3 years ago

@ashishnagpal2498 Sir, i have suggested color code and Typography. What next?

ashishnagpal2498 commented 3 years ago

Add these configs which you have selected in App.css and submit a PR.

himanshu007-creator commented 3 years ago

Add these configs which you have selected in App.css and submit a PR.

Hi sir, can i add a separate css file of proposed changes?

ashishnagpal2498 commented 3 years ago

Sure. Submit a PR asap.