search

fac-14 / OSCEBossKey

Weeks 13-16 > Tech for Better project: An app to help medical students revise for their exams
https://oscebosskey.herokuapp.com/
MIT License
4 stars 2 forks source link

Style ideas #105

Open peterwoodward-court opened 5 years ago

peterwoodward-court commented 5 years ago

Hi all - good to see you today :) Some thoughts on colours:

Green for background of history: #009f5c Red for background of examination: #e4012e Yellow for background of other: #fec311 Tan for 'background' (i.e. what is currently grey): #EAB988

These colours are based on a particularly ubiquitous textbook (Oxford Handbook of Clinical Medicine) and would be familiar to lots of medical students, however, I am very happy to take stylistic input if you think they're naff!

For the font I was thinking Roboto Light (bolded?): https://www.fontsquirrel.com/fonts/roboto

For the 'add station' activity, instead of the cross and tick as we currently have it, perhaps a style with a bar on the top and a back arrow and a tick could look a little cleaner? Here's an example from another app: https://imgur.com/a/aBHzgCD

Let me know your thoughts. I'll get working on some station data to give you and thoughts on the stats page.

See you tomorrow! Peter

@Brymon @sima-qian @njons @martingaston

sima-qian commented 5 years ago

I am very happy to take stylistic input if you think they're naff!

I know @njons and @Brymon have strong opinions about colours. I quite enjoy the bold contrast of the yellow, green & red, though I'm not a massive fan of the beige.

For the font I was thinking Roboto Light (bolded?)

We're actually already using Roboto for body text. I think we're using Regular rather than Light as the latter seemed a too thin to us. The font we're using for titles is Nova Round -- this is the one that with current kerning has the VOMITING <--> VOMMING issue.

... perhaps a style with a bar on the top and a back arrow and a tick could look a little cleaner?

I like this idea. I think it'll make the layout more manageable on those pages currently carrying cross/tick buttons and can also hold the page title as in the example you link to.

njons commented 5 years ago

Hi @sima-qian & @peterwoodward-court, Good news! We are already using the suggested yellow and a red that is very similar. I have also reworked the layouts in line with the comments above and am able to share a screenshot here after getting an ok from the team. 👍

peterwoodward-court commented 5 years ago

We're actually already using Roboto for body text. I think we're using Regular rather than Light as the latter seemed a too thin to us. The font we're using for titles is Nova Round -- this is the one that with current kerning has the VOMITING <--> VOMMING issue

Cool - if people are happy then perhaps we could try Roboto for the title text too then?

Thanks for the update @njons! Looking forward to seeing some screenshots soon :)

peterwoodward-court commented 5 years ago

(sorry accidental close...I know my way around github...)

njons commented 5 years ago

Hi @peterwoodward-court, Here are some screenshots of what we will be aiming towards today after taking in your comments.

Please note that:

Overview of all pages: screen shot 2018-10-12 at 11 02 19

Closer detail of the green section: figma_oscebosskey_detail

peterwoodward-court commented 5 years ago

Super stuff, thanks @njons

A few thoughts:

Thanks all!

sima-qian commented 5 years ago

Was there any consensus on changing the font from Nova Round to Roboto?

I think it's generally nice to have two fonts -- one for titles and one for body text. We have Roboto for body text, so would you be happy to stick with Nova Round for the titles? We could change the stations names on the screen below from titles to body text, to stick with the usage on other pages.

image

peterwoodward-court commented 5 years ago

@sima-qian that sounds like a good idea. I'm happy to have two fonts too - but maybe a different one to Nova Round to avoid the vomming issue?!