Feature: UX - Design Landing page

[Abott1222]

As a user I would like to see a clean landing page when arriving to the site

User Story:

[ ] Logo
[ ] Decide on color palette
[ ] Spike - Think about potential accessibility issues
[ ] Wireframe

[boniattirodrigo]

I had created a similar project for my last semester at my university. Here some mockups that could inspire us:

Home page: https://www.dropbox.com/s/ct9ug8ghg4nmd0a/Home.pdf?dl=0
Event list: https://www.dropbox.com/s/1p8yq93huwl9kwb/My%20next%20events.pdf?dl=0
Event page: https://www.dropbox.com/s/fox538ijo6e69m1/Static%20page.pdf?dl=0

I have the .sketch files if you guys needed too.

[Abott1222]

Looks very good!

[Canopix]

Looks very good!!

Edit: Maybe that design can be the baseline for the app.

[ryandudek]

Very nice! Do you have the Stark plugin for sketch to test your colors? The purple and white is good, but I haven't grabbed the other colors yet. Would be useful if you don't use it.

https://github.com/stark-contrast/stark-sketch-plugin

[ryandudek]

Looks like the blue and the orange need just some slight tweaks:

https://toolness.github.io/accessible-color-matrix/?n=white&n=blue&n=orange&n=purple&n=grey&n=black&v=FFFFFF&v=2C8AB6&v=D96B32&v=5C2D7E&v=423D3D&v=000000

[boniattirodrigo]

Nice @ryandudek I didn't know about it. I'll take a look. I've just uploaded the Sketch file. Feel free to make any changes you want: https://www.dropbox.com/s/dilsvf9wpbvkv2g/Together.sketch

[ryandudek]

I don't have sketch on this machine 😭

Here is an updated palette that passes AA contrast for the blue and the orange on white. The changes are very minimal.
Blue = #007FAC
Orange = #C25600

https://toolness.github.io/accessible-color-matrix/?n=white&n=blue&n=orange&n=purple&n=grey&n=black&v=FFFFFF&v=007FAC&v=C25600&v=5C2D7E&v=423D3D&v=000000

[MateusAndrade]

@gabriellamas, @viniarruda guys give a look at this 💯

[chaotic-stump]

I’m digging that palette, especially the dark mode options.

[grantglidewell]

That palette is super nice.

[viniarruda]

The palette is nice, but what do you think about use the shades of green or light green to combine with fcc?

[allella]

If someone is looking to attract more of the UX folks with the related skills for this feature then we've been logging the various skills from people in the Discord channel. Also, folks are posting directly on the Github thread.

So, see the list of volunteers and skills at search for "UX" or related terms. The page is long so you may need to un-collapse some parts of the thread.

#11 (comment)
and try to connect with them as needed.

[ryandudek]

The palette is nice, but what do you think about use the shades of green or light green to combine with fcc?

I'm not against this, but there was talk about this being a completely separate entity from FCC, so I'd say that we may not need to follow the same palette. I'm open to whatever - actually think that maybe this should be more of a decision for @QuincyLarson to be involved in...

[QuincyLarson]

@boniattirodrigo Your mock-ups look great.

We would probably want that kind of look for a "product landing page" type website that organizations look at when they're trying to decide whether to create their own instance of Chapter.

@ryandudek Eventually organizations will be able to customize this. Think of a university system using their school colors, for example.

How about we use the freeCodeCamp Design Style Guide as a starting point, then go from there?

[adrian3d]

I'm not very enthusiastic about a landing page without possibility to search for events without to be logged.
A landing page adds a step up to start using the app. So, this can limit the number of users (and the number of organizers) because we don't give the possibility to view how is the app before a sign-up. Moreover, if a new user signs up without having any idea of the events they can find out, it increases the risk to make him inactive.

If we do a landing page, we should provide the possibility to search and see events on it.

[tomiiide]

@boniattirodrigo I'd like to help with the design, how do we collaborate?

[boniattirodrigo]

Right, @QuincyLarson. Agreed about the different layouts based on different scenarios. Events on universities are different than tech events for instance.

@tomiiide You can keep an eye on the issues of this project and on the Discord channel: https://discordapp.com/invite/vbRUYWS

I'm not a designer, I'm a developer :P. But I have some insights about this project.

[kognise]

Adding on to what @QuincyLarson said earlier, Chapter is going to be decentralized so we might want to have a different landing/marketing page setup than a lot of other meetup solutions.

Each deployment should have its own landing page that focuses on a UI that makes it easy search for events. This page should clearly communicate the specific deployment's name and possibly link to API documentation and other things.

Then Chapter should have a marketing-style domain with a landing page that explains what Chapter is, has links to some instances, and has instructions on how to setup your own instance.

Thoughts on this?

On a side note, last night I explored various UI design paths (which aren't very well made and are pretty incomplete) and just wanted to get some feedback on them - this might help us come up with some landing page and UI/UX design ideas for Chapter. Here's a Figma link.

[QuincyLarson]

@kognise @boniattirodrigo @Abott1222 In the interest of focusing, I propose that for our initial release, we just use our GitHub repo as our landing page. This is what we've done with https://github.com/freeCodeCamp/mail-for-good

Then, once we've used Chapter internally and a few other organizations have used it and given us feedback, we could create a formal product landing page.

So I'm going to close this issue for now. I encourage you all to focus on the UI of the tool itself in the meantime.