styling overhaul discussion and tasks

[AllanOcelot]

Here are a list of simple design tweaks that could make UFG look more modern, with minimal effort, this discussion is on the back of #1163 PR .

Please feel free to discuss my points below, or, to take a point and make a PR out of it, with the aim of getting the change merged into UFG. Each point has been given more description below.

Tasks

• Redesign Header / Banner
• Redesign the introduction section
• Redesign / Minimise project filters
• Popular tags and Project tags should be consistent, rounded labels. So we visually identify to the user it is a tag, site wide.
• Projects require a redesign, maybe a non-table based layout

---

Redesign header / banner

The header / banner is the first thing our users see when landing on the site. At current we have a very large logo, with a somewhat outdated 'Ribbon' banner.

I just feel like this is grabbing too much attention. I'd much prefer we loose the Ribbon and reduce the / re position the logo.

---

Redesign introduction section

The introduction section on the current live build takes up too much space. Users who are coming to our site are often doing so after being directed to the site. 90% of our users will know what 'Up For Grabs' is and it's goal.

Instead, we should use this space to educate our users on HOW to contribute to projects. In #1163 I've added a notice banner, telling the user how to contribute to projects. We could very easily add some pages with more information on - or some simple buttons with links to existing tutorials.

---

Redesign / Minimise the filters

There have been alot of feature requests around the filters, but not much discussion on making them more compact. We don't require the filters to take up so much room - and should make them smaller.

I'd also recommend placing the filters into a 'sticky' div that follows the user down the screen, once they scroll past the filters. Meaning our users won't need to scroll all the way back up to the top of the page to reset their searches etc.

---

Keep tags consistent

The tags we use should be consistent in size and design. It's bad form to tell the user tags will look like 'popular tags' and then display tags smaller and in itallic, as we do at the moment.

We should move over to more unified design, I'd say rounded rectangles, with padding and a light background colour. Again, as in #1163 .

---

Projects require a redesign

At the moment the projects don't look visually pleasing. We should aim to incorporate more design elements. If we move away from a table based structure this will allow us to experiment with the design more.

[nobodys-ghost]

Is this something that's still open for contributions? If so, I'd be happy to tackle the "Keep Tags Consistent" part of this issue.

Is something like this what you're thinking? I threw this together in the DOM editor in firefox

(If I haven't heard back in a few days, I'll go ahead and implement this and make a PR. Just wanted to make sure you guys still want this fixed first.)