Job Board Redesign

[elioqoshi]

Hey folks,

I sat down today with @bnvk and worked on redesigning the job board. This is what we have right now:

• added Tags depending on the type of job listed
• changed the header color to the blue we use on the website to see how that would look like without black everywhere
• added PAID and GRATIS filters
• added status tags
• added post a job button

What do you think of the changes?

P.S: Source file here: https://github.com/opensourcedesign/organization/blob/master/specifications/Job%20Board%20Redesign%20v5.svg

You need the Montserrat Fonts.

[HeikoTietze]

Great design, requires now means to filter the list by status tags and paid/gratis flag. Visually the black button is quite conspicuous for its irrelevant status. Perhaps it's better to just grey this button out.

[Xaviju]

I ❤️ the colorful approach. Viva el blue! helps me a lot focusing on the important things 👍 Feedback: First thing I felt is that in a single job posting there are too many things around with similar weight and it could be a bit confusing. Also buttons and tags have very similar shapes. Hope it helps, thanks for your work!

[bnvk]

Great job @elioqoshi 👍

requires now means to filter the list by status tags and paid/gratis flag.

Yes @HeikoTietze this is well known and tracked in #70 it's a different development challenge than simply styling the data we already have.

[elioqoshi]

Thanks for the feedback, I updated a few things, hope that improves some of the things addressed.

[jancborchardt]

Nice work! :) Some feedback:

• The grey divider bar is a bit bold and dark, so takes too much attention. Let’s make it lighter?
• The »Searching«, »Negotiating« etc status has a very different style than the rest and also floats far from the other content. How about we instead put those as big headers, and group the jobs under it? First of course would be Searching, then Negotiating, then Started, and Completed all the way down.
• It’s very text-heavy, and as a design job board I think some kind of visual would be nice. @bnvk I know I mentioned it to you and you weren’t really fond of it – but I’d say anything like current logo, or favicon, or whatever to the left of the entry would be great.
• And just a tiny thing: We went to not-uppercasing the headers, right? So »Job board« ;)

[jancborchardt]

Also cc @evalica @victoria-bondarchuk @belenbarrospena @Incabell @jdittrich @simonv3 check it out! :)

[bnvk]

It’s very text-heavy, and as a design job board I think some kind of visual would be nice. @bnvk I know I mentioned it to you and you weren’t really fond of it – but I’d say anything like current logo, or favicon, or whatever to the left of the entry would be great.

@jancborchardt I don't recall saying I wasn't fond of that. I'd love to see icons for a project submitting. However, a lot of projects might not have a logo yet (as why they're coming to OSD job board).

From a practical / implemenation angle- we need to get something like #102 implemented first, otherwise there where does the project icon come from?

[simonv3]

This is beautiful. Thanks @elioqoshi!

I second Jan's suggestion of ordering by status.

[jancborchardt]

From a practical / implemenation angle- we need to get something like #102 implemented first, otherwise there where does the project icon come from?

Could be just the favicon from the »Project website« we ask for. Might lead to strange results (like a wordpress favicon if the website is just a non-customized Wordpress blog etc) but might be a good catch-all also to fill up icons for already existing posts.

[bnvk]

Useing a favicon has the following requirements / limitations:

1. That they list a website, otherwise we end up with Github or such
2. We create some parser to find the URL, as not all do domain/favicon.ico
3. Usually 32x32 px, but often 16 or 64. The later is only large enough for an avatar

I think we'd be better suited having a range of icons for a given "project type" that we (e.g. @elioqoshi maybe designs ;) ) that then can be mapped to value that the job creator chooses such as:

• Mobile App
• Website
• Hardware
• ...

[m1guelpf]

Looks very cool! Just a suggestion, I think the tags stand out too much, maybe make them lighter?

[evalica]

Looks good on a rapid view. We can improve later if you already have the code :)

[eupiteco]

On the icon matter, I think a muted gray OSD logo could be a nice solution for default fallback. Then we can set options for the person who is submitting the job to upload a logo or to use their github project logo.

[jancborchardt]

@eupiteco good call! Are you interested in working on implementing the proposed design too? :)

[eupiteco]

@jancborchardt yes I am! I think this is a two steps task:

• Setting all the styles and general positioning with some fake/lipsum data
• Connecting it to the forms response through liquid layout

If we all agree, I can work on both tasks and submit one PR for each.

Questions that comes to mind

• Is there a styleguide/css template/mockup file for the new OSD layout? If not, I think a css template is a task previous to the jobs board one.
• Who in the team i can report to for PR reviewing and general help with the tasks?

[RDIL]

I do PR review and help out @eupiteco :]

[jancborchardt]

@eupiteco there’s no specific template or mockup file yet actually, only what’s in the CSS as of now. @elioqoshi’s mockup can be seen as an evolution of the current design.

Just like @RDIL I’m also happy to do pull request reviewing, and you can @-mention the whole team of @opensourcedesign/website :)

[Erioldoesdesign]

Reviving this thread with a comment that's been on our Discourse recently.

It'd be good to see what date this job was submitted by the requester and possibly if it was filled on a date. The status labels help with this but not 'placing them' at a point in time.