Open-event-frontend: Propose fonts and improved design

[mariobehling]

The front-end version also offers an opportunity to update the font, sizes and design.
There is also the question about a design framework.

The current open event server design has some issues at points, e.g. the font is often very small.

What are our options?

[niranjan94]

@mariobehling I'm already testing out an idea right now at https://github.com/niranjan94/open-event-frontend-theme . The _theme_ for the frontend would be an includable package where colors, fonts, size etc can be changed. It would also allow people to make _theme packages_ for open event

[niranjan94]

The font-sizes and other sizes have already been revised in the new frontend. I'll document them in the wiki.

[mariobehling]

Thanks, but please use the /docs folder and add a document "design-specs.md". Thank you.

[niranjan94]

Sure @mariobehling .will do it.

[heysadboy]

• I think we should use Roboto Lighter version for primary headings with darker background and lighter font color. https://fonts.google.com/specimen/Roboto
• The secondary text could be a regular version. I think the shade of gray of hashtags and dates should be darker.
• To emphasize buttons we can lift them up with background shadow to make them look more clickable.

It'd be great if we could have design wireframe/mockup first before main thing if we look for total re design. @mariobehling What are your views?

[niranjan94]

@heysadboy thanks a lot for your suggestions 😄

• In the previous UI we had Roboto btw. That's what I started with here too. But, after experimenting with Lato, I found it more readable and good looking than the Open Sans fonts (Robot & Open Sans). For primary, we cannot always have a dark background. This (http://nextgen.eventyay.com/e/5642d9a1) is one page where we can have a dark background and we have. Whereas here -> http://nextgen.eventyay.com/ we cannot have a dark background for the event names. Because we want the event names to be more prominent and clear. And we want the image visible too.
• As for secondary text, I agree. Needs to be made a little bit darker. (Dates are secondary and hashtags are tertiary btw)
• Lifting up buttons is good on mobile apps, but if you look at the website, we have input+button groups , button-group toolbars where lifting the buttons up makes it look weird along side a flat input. If we lift the other buttons up, and leave these flat, that creates an inconsistency in buttons across the site. I'd suggest we leave the buttons flat but provide feedback on hover & press (which is being done now)

Wireframe/mockups are a wonderful idea. But time is also of the essence here. We're not looking at complete redesign. The current UI (orga-server) borrows UI ideas from a lot of famous ticketing/event websites. I'd suggest we start with what we have, and refine the UI as we go forward. The issue in the current UI(orga-server) is, since the ideas have been borrowed from different websites, and worked on by a lot of contributors, there are inconsistencies between pages and UI elements in different pages. We're already mitigating that issue here by having re-usable UI components and properly organised stylesheets to ensure standard UI elements throughout the frontend. During GSoC this year, unlike last year, we mentors will also be looking at the UI aspects of every PR apart from code and functionality to ensure it goes well with the rest of the site too (and for that reason, any PRs made to this repo gets deployed instantly to a test server so that UI/UX aspects can also be reviewed)

[niranjan94]

Further focussed discussions regarding this can happen at https://github.com/fossasia/open-event-theme.

Our current font-sizes, colors, etc are available at https://github.com/fossasia/open-event-theme/blob/master/src/themes/default/globals/site.variables