Frontend redesign

[mbrandau]

As mentioned in #1070, this will cover a complete redesign of the frontend.
The current frontend is rather useful than good looking. The goal is to make it both easy to use and giving it a modern look on both desktop and mobile devices.

TODOs:

• Designs
  • style form elements (input, select, button)
  • create visual designs for mobile and desktop viewports
• Adopt styled-components
  • Container
  • form elements
• UX errors
  • categories links aren't displayed on example pages
  • emphasize search box
  • "donate" link is nearly invisible
  • consistent naming of the left side of the badge (label -> subject)

I also thought about adding an about section to the index page with some information about the project.

[mbrandau]

This would be a perfect opportunity to address #843 too!

[paulmelnikow]

This sounds great! Thanks for picking this up!

On the technical side, something I've been thinking about is adopting styled-components which means we wouldn't need to ship any CSS files. It works by creating classes so it's performant, and plays really nicely with React.

I have a bit of design input. We could set up a phone call or I could try to put it into writing. What would be best, do you think?

cc @rozaxe

[chris48s]

Big 👍 on this and thanks for picking it up again. As I've noted elsewhere, I'd love to see us adopt a more mobile-friendly style.

TODO list looks great but I think the best way to work on this would be to split this into more than 1 PR and work on a subset of functionality as a first step. I'd prioritise the the layout changes, but leave out stuff like an 'about' section, #843, maybe even initially the menu. That will make it easier to review and make progress.

[mbrandau]

@paulmelnikow I think it would be better if we maintain a list of design ideas in this issue. I don't know too much about styled-components, but I'm ready to take a quick dive into that topic.

@chris48s I would definitely not do it in just one PR. I agree with you on leaving out the 'about' section, but the missing menu is a real UX problem. #843 doesn't seem too hard to implement, especially with React, so I would like to give this a shot too.

[chris48s]

I'll leave it with you to divide into sensible chunks :)

[rozaxe]

I would be happy to help you integrate the tool from #843 into the new interface if I can get some guidance about React because I never used it.

[paulmelnikow]

Cool, I'll work on writing up my thoughts on the UX.

@mbrandau It sounds like you're down to work on both design and implementation, which is great! Would you like to work with @rozaxe on #843? I'd suggest starting the implementation work by breaking out the "Your Badge" section – with the static + dynamic badge builders – onto their own page. Does that jive with your thoughts about the design?

[mbrandau]

@paulmelnikow Splitting the page up sounds good! I'm gonna get the basics set up so @rozaxe can work with it.

[mbrandau]

@paulmelnikow I started using styled-components at https://github.com/mbrandau/shields/blob/master/frontend/components/static-badge-maker.js for my work on #843. Is that the way you want to go?

[PyvesB]

I'm not familiar with styled-components, but it does seem like a good idea. 😉

[paulmelnikow]

I haven’t forgotten about this! I made some notes about the UX but haven’t had time to write them up yet. I’ll be offline for a few days but I’ll pick this up when I’m back online.

[paulmelnikow]

I've got some functionality-focused work going on in #2496.

Are you guys interested in picking this back up? I'll take the time to write up my notes. Perhaps we could also schedule a call. Bandwidth is higher that way. We could also decide on a good design process :)

[mbrandau]

I'm definitely interested. I just need to get back into the code and check out what changed.
I'm also gonna write down some ideas for the design. I'll let you know when I'm ready :)

[mathcodes]

I'm interested in tackling this with or without others to help. Let me know! Ready when you are, though I can probably only commit to 2-3 of hours a week, but it will be steady!

[chris48s]

@mathcodes - we are tantalisingly close to deploying a new frontend (PR: #9014 )
Watch this space..

[chris48s]

We have just launched a completely redesigned frontend https://shields.io/