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 💯

[srprkr]

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?