search

CSI-280 / MusicGames

0 stars 0 forks source link

Create visual design language & style guide #8

Closed jbuzzell closed 4 years ago

jbuzzell commented 4 years ago

this includes

this will be highly interactive with #2. style guide will be a PDF/image infographic with all of the above--ideally at least two designs will go through a review process.

jbuzzell commented 4 years ago

i would like to have a heavy role in this as UI/UX programming for the web is my area of expertise.

jbuzzell commented 4 years ago

@CSI-280/web-people what do we think of this? such a document would make work like #2 a lot easier & simplify/reduce time spent on styling in the future.

A-Waters commented 4 years ago

While I think this is a good idea, I'm worried about catching all the, what I guess we could call "edge cases", and completing it in a reasonable amount of time. I think it could definitely be beneficial.

JakeCapra commented 4 years ago

If you're looking for color themes, you should definitely check out this site, its got a bunch of color themes to choose from, and you can creat your own.

A-Waters commented 4 years ago

I was using pylinter and pep8 to stylize the python code in the backside when I created it. So if we want to we can just use that. for the backside.

jbuzzell commented 4 years ago

@TAwc wrong type of styleguide. you're thinking code whereas the result of this task will be sample color schemes, component designs, fonts in a pdf for use when developing css

A-Waters commented 4 years ago

O I C

jbuzzell commented 4 years ago

CSI280 STYLE BIBLE LIGHT@2x

CSI280 STYLE BIBLE DARK@2x

CSI280 STYLE BIBLE PLAYER@2x

@CSI-280/web-people what do we think of these? i figure the gamers in the room will prefer the dark theme but lmk

jbuzzell commented 4 years ago

fyi the player is supposed to be the player shown in the wireframes displayed in #2 (i made it before the styleguides so it doesn't necessarily follow the laws to a tee)

jbuzzell commented 4 years ago

aileron is an adobe font that we should all be able to access for this project (and so cute!)

A-Waters commented 4 years ago

I like it. I dont how exactly its going to be exacuted in code yet, but thats for a different time.

NaomiHoniker commented 4 years ago

I think that looks great!

JakeCapra commented 4 years ago

@jbuzzell When you say "Headers" do you mean the navbar?

jbuzzell commented 4 years ago

@jbuzzell yeah, generally, but that can be a bit flexible

JakeCapra commented 4 years ago

@jbuzzell I think we need to rethink the font size. It takes up way to much space on the navbar. (using the headers and subheaders font size) Annotation 2020-03-27 141830

jbuzzell commented 4 years ago

hm, yeah. try 64px. worst case we can scale them all down to:

header: 48 subheader: 32 body: 18

this was mostly just me messing with things in XD, so i'm not married to font sizes.

JakeCapra commented 4 years ago

I ended up using 2vw and 1.5vw, which came out pretty nice imo. I think its best to use viewport since it changes based on screen size. image

NathanDiMauro commented 4 years ago

Is this done now can the issue be closed?

jbuzzell commented 4 years ago

i'd say it can be closed but it should probably remain pinned

On Wed, Apr 1, 2020, 10:23 PM Nathan DiMauro notifications@github.com wrote:

Is this done now can the issue be closed?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CSI-280/MusicGames/issues/8#issuecomment-607584454, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG6ILDDJIL3HKKZAR2VPJNLRKPZKZANCNFSM4LBSAERQ .