loolabs / waterpark

Waterloo's social park
http://waterpark.loo-labs.vercel.app
ISC License
4 stars 0 forks source link

Polish v2 frontend design #216

Open evtyz opened 3 years ago

evtyz commented 3 years ago

https://www.figma.com/file/AIeklk8qTC6t4rI71QtioP/Waterpark-(Wiki)-Designs?node-id=46%3A53

Address design review from @CarolinaLi

  1. Switch from full black text to a dark grey, it’ll be easier on the eyes (#222222)
  2. UW logo looks squished, also what picture will we eventually have here? Does housing have logos? Are we thinking something like this? ->
  3. Ideally everything on the page should have the same width — I think we should make the comments & top section narrower, and increase Gallery width to match that
  4. We should try to limit the number of text styles, maybe “200-300 students” and “What are your thoughts on...” could have the same style? And all buttons (add review, top nav) could also have the same styling
  5. Does “200-300 students” mean the number of students living here? Where do we get this info? Was this originally from club size / should we still keep this?
  6. Thoughts on removing capitalization on the year and “student”? We might want to do sentence case everywhere, like on buttons as well
  7. Something like “4h ago” also feels a bit more natural than “today at 3:11 PM”
  8. Would love to do rounded corners on all images, I think our icons already do this
  9. For indicating the current image, having something like an underline (in brand colours) rather than an outline would make it look sleeker.
  10. Nice to have: Made a different review card design to use space more efficiently. Thoughts on asking students to enter a brief comment title/summary that we can use as a card title? Would make the review card look nicer

https://www.figma.com/file/AIeklk8qTC6t4rI71QtioP/Waterpark-(Wiki)-Designs?node-id=101%3A26

  1. Change rating to bars. Thoughts on using colours? Could help with at-a-glance glancing but less accessible
  2. Move “sort by” into the bubble, add some padding to the right so the dropdown arrow isn’t right next to the edge
  3. We should decide on either title case or sentence case everywhere, leaning towards sentence
  4. “reviews” could have its own button style — could link directly to the reviews section. Should have a reaction on hover, like changing the colour to this (#4623A0)