opensourcedesign.github.io
opensourcedesign.github.io copied to clipboard
opensourcedesign
Landing Page Redesign
At Open Source Design Summit 2018 we discussed that a website redesign is long overdue. While @AnXh3L0 and me took the lead on this, I just had recently the time to start this effort.
Our collective is not the same it was 4 years ago, so this should also reflect on the website. We now have a manifesto, a forum and a bigger focus on events and the job board. We are receiving more attention than before yet a lot of information is a bit over the place.
So I started designing the new landing page with a bit of input from @jancborchardt. A draft of the landing page is ready and this is a good time to open up feedback to more people.
The design is on Figma (sorry, folks) and you can see it here: https://www.figma.com/file/EZ1CrOeqKhwuAuW8oFnFqKrL/Open-Source-Design?node-id=0%3A1
Alternatively, here is an exported image of the landing page design:
Please note:
- This is not pixel perfect. Not all spacing and grid aligns perfectly.
- Copy is partly a placeholder and not at all what I'd suggest.
Feedback is welcome!
@elioqoshi
Some questions:
- Am I correct in assuming that the primary target group are fellow collaborators? (What are secondary target groups?)
- From "We now have a manifesto, a forum and a bigger focus on events and the job board. We are receiving more attention than before yet a lot of information is a bit over the place." I infer the following problems the redesign wants to address:
- focus on the manifesto as a core representation of OSD
- present as core parts of OSD "services"/"activities": events and jobs (what are things we would focus less on in return?)
- more tidy information architecture in general, since the old one is messy.
To my understanding:
Am I correct in assuming that the primary target group are fellow collaborators? (What are secondary target groups?)
Yes. I'd say that helping open source with design is a primary target but also teaching designers about open source is a close 2nd (or the same relevancy, though we don't do that as much).
focus on the manifesto as a core representation of OSD
I don't have a strong opinion on this. @jancborchardt and me thought it might be a better fit to include the manifesto rather than go on describing what we do. These are things we have to talk about.
present as core parts of OSD "services"/"activities": events and jobs (what are things we would focus less on in return?)
True. I don't think Resources and Articles have been a big focus (which we should either represent on the website or change).
more tidy information architecture in general, since the old one is messy.
Exactly. I'd be a fan of doing even less than on the old one.
So I really like the mockup! :)
My only big point about it is – since you also mentioned the manifesto – that I would directly show the manifesto on the main page, not only the headings. It’s only 7 points, so 4 columns 2 rows works, the layout like the "Get involved" section. And we can have an icon for each principle.
Otherwise super nice!
So not much changed with this one @jancborchardt. The landing page specs are ready more or less for someone to implement.
Hello, Sorry for chipping in late. I recently posted a job, then went to the GitHub issues, and saw this just now :) As all your work I saw, this looks again great @elioqoshi. Three thoughts:
- first show what you can offer me, then ask me to join. In practice: move 'get involved' below job board (& maybe events)
- show me it's an active community, with humans having interesting discussions. In practice: the job board is shown already, I would add something from the forum (most popular threads, latest posts...) to show there's humans. To make space for this, I can imagine the job board is cut to three entries
- show me it's worth visiting the job board. In practice: present the number of open (paid) jobs (to impress).
Totally agree, the Figma file is open so anyone can grab and modify it. Not exactly open source but the closest we can have for prototyping right now?
I won't have the chance to do much more on it these days unfortunately.
I was thinking whether to take a spin at implementing the changes I proposed to the mock-up myself, incorporating also the idea from the OSD forum thread linked below. However I saw in the that @kartik918 was going to propose something specifically for a 'monthly showcase' so I'll hold off until (or at all, because) there's some progress there :)
Hey @keunes, glad to see you're going to be working on the redesign!
I've made the mockups and have sent them to be reviewed by @Erioldoesdesign , will put them up on the forum soon to be discussed upon.
Thanks!
Waltzing in here unfashionable late.
Re. original LP designs for Elio they are awesome and I have zero big suggestions and one small suggestion which is:
The black filtered photo header, does it need to be that high/tall/big? I like a nice splash header like the rest of us but I do sometimes think they take up a lot of space. Totally get the need for the balance of image/'white space' and content though so just a minor point really.
I'd love to see the monthly showcase work that @kartik918 has been working on in this design. I wonder if someone can add that into the Figma file and re-post a link/still screenshot for reference. There are a few other suggestions re. moving things around (job board before getting involved, some discourse forum threads being pulled in etc.) so I might try and make this part happen if folks are happy with that? mostly @elioqoshi are you cool with me tinkering around in the Figma?
I'm by no means a skilled FE coder but I can certainly help try to make this happen in code too.
-
I merged @kartikcho's idea for the showcase to the landing page(thoughts: how many projects do we want to showcase/month? do we design a different page where all the designs can be seen? if it's going to be more than 3 or 6..)
-
Reshuffled the positioning of the sections (Manifesto -> Events -> Job board -> Showcase -> Supporters & Partners -> Get Involved -> footer) Actually I was thinking if the showcase should come before the job board 🤔?
One way I was also thinking of getting more people to contribute, would be creating some issues for the icons that will be used on the manifesto section??
Hard to say if Showcase should come before job board @perriefidelis 🤔 I think each person, either new visitor or returning will likely find value enough in both sections that it's probably negligible what goes above what...
OH here's an idea that's a developer question: I wonder if a section of the webpage (e.g. jobs and showcase) if one is more up to date than the other then that goes on top? So like some logic that will prioritise the most recently up to date section.
Idk It's a fun idea though eh?!
Yes, that is possible @Erioldoesdesign. You can compare last updated dates and change positions.
how many projects do we want to showcase/month? do we design a different page where all the designs can be seen? if it's going to be more than 3 or 6..
@perriefidelis love the design! To answer your question, #291 should provide you with context and the deliverables from the showcase.
Oh shoot yes! I'm not sure how I missed that ... thank you @kartikcho. I'll add a design for the archive page(that's going to be a separate page), where all the showcased designs will be displayed
It's all good! You tagged someone else though @perriefidelis, haha.
Also, if you haven't already, add a fallback or a default placeholder to something like "An OSD member" in place of the contributor's name, if none is provided.
Guess we can start working on this. I feel like the mockups and latest improvements are enough to begin the changes.
@AnXh3L0 wouldn't you need like other screens sizes? or you can scale it down properly without?
I can help with that
No need for the other screen sizes, I started to work on it but I'm afraid this is going to be a huge project and will require a re-write from ground-up. The current Bootstrap version is too old and doesn't support quite a lot of things, which makes the code hacky and hard to maintain.
@AnXh3L0 what do you think about creating a PR that we could keep stacking commits on top of until it's complete and then merge the gigantic PR to finish the redesign. Incremental changes through multiple PRs seems highly unlikely because the website is directly deployed from GH pages I think. The other option is building it on a personal fork that everyone could contribute to until it's ready and we can open it's master branch to this repo.
https://github.com/ourforks is perfect for this sort of thing I think.
edit: another branch in this repo also works
@kartikcho I think a new branch in this repo should be fine so we don't need to fork it anywhere outside of it. This way, we can work on it and maybe have previews if possible.
@AnXh3L0 are you planning to work in a new branch towards the implementation of the UI? I and @amitlzkpa are happy to collaborate with you.
@SaptakS Yes, I will create a new branch and work on it from scratch. Thanks for offering to help.
Hey @SaptakS, unfortunately I haven't had time to have a look into it. Last time I started to work on it I was having a lot of issues with a gem that I never managed to fix (probably related to ghpages).
I will also look into it and see if I can make a basic first commit in a separate branch, so you can probably work on top of that branch.