search

CascadingCoders / LandingPage

Let's create a landing page for Cascading Coders! Perfect for Hacktoberfest 2019!
2 stars 4 forks source link

Create a Landing Page Design with Figma #6

Open JavaScriptErika opened 5 years ago

JavaScriptErika commented 5 years ago

We need some structure!

We will have: 1) Cascading Coders Logo 2) About Text / links on how to join and get started 3) Past Projects (display images / links to past challenges) 4) anything more

SVGs are in the ./assets folder, color hexcodes are in the Readme, and we are using Bulma as our CSS framework. If you need additional assets in different formats, let me know!

To submit your PR to this, you can include your image inside of the README - and a link to the design with Figma!

Thank you!

clockwerkz commented 5 years ago

I'd like to take a stab at designing the landing page! I had replied on the facebook post. :)

JavaScriptErika commented 5 years ago

Sounds great @clockwerkz ! This is yours!

Thank you again for the GREAT questions on FB. This is a WALL of text 😅 but please take of it what you will as I really just laid out allll of my thoughts lol, you have creative control! Make it fun and tastefully colorful with the colors we have (with the logos and such)!!

- Target audience New and intermediate developers who are looking to build their portfolio and gain experience through creative code through creative challenges. Creative code is unconventional - meaning, we're looking at animations, and artistic expression while still learning and building awesome portfolios of work.

- Highlights Past work of developer's work (usually an embedded codepen or image) with their info, and the links to the past challenge guidelines. See issue #3 if you want to tackle that design wise, awesome! We need to think how to make this scalable - what would the page look like if I have 1 challenge vs 100?

Though it has been awhile since we've had a challenge, I want an area to feature our current challenge.

Here's an example of a past challenge guideline

- Page Used for This is more resources/info of what Cascading Coders is - so a landing page to say who we are, what we do, showcasing information, and how to get involved, would be great! So when we have a new challenge, I can point people to our site.

It would be great to potentially have a resources section to help people get started to point them to learning tutorials / articles. In the past challenge guideline linked above for example, I repeat those resources quite a bit, it would be great to have that on the page.

Here's a little bit of the backstory of Cascading Coders

- Sidenotes: We have a Facebook group, Facebook page, Twitter, Instragram, and Discord channel. Right now I want to focus on the Facebook group and page, and Twitter for now as the others I may close so it's not so spread out as it has been pretty quiet in general. I have what I'd like to be included in issue #1

Friendly reminder: Make sure you're logged in Hacktoberfest so when you include the design in the README as a PR, you get the credit.

clockwerkz commented 5 years ago

This is awesome! Thank you! A wall of text is exactly what I need. :D Seriously, the more info the better. Just reading through this I can already start formulating an idea for the layout. I'll read through it now but I will look at all of this with more time this afternoon and start sketching out a lo-fi blockout of the layout.

JavaScriptErika commented 5 years ago

Awesome @clockwerkz ! Feel free to reach out anytime if I can clarify anything. Excited to see what you come up with!!

clockwerkz commented 5 years ago

Here's my first version of the layout. I figured we could make the hero some sort of counter towards the current deadline, and feature maybe the last three winners or most popular entries below it. I included a section to explain what Cascade Coders is, and a section for links to articles covering css tricks and whatnot. :) After chatting with Erika, I'll start to pull from the Cascade Logo and style the countdown to feature a look that matches the logo. :) design01

JavaScriptErika commented 5 years ago

Thank you for your input @clockwerkz!

This looks wonderful - as you get the design ready, I am going to pass on this wireframe to members who are ready to contribute and can begin creating components and PRs before Hacktoberfest is over!

JavaScriptErika commented 5 years ago

Hi @clockwerkz ! What is your current status?

Thanks!