Enhancing Footer for better interface and User Experience💻

hedyorg / hedy

Hedy is a gradual programming language to teach children programming. Gradual languages use different language levels, where each level adds new concepts and syntactic complexity. At the end of the Hedy level sequence, kids master a subset of syntactically valid Python.

https://www.hedy.org

European Union Public License 1.2

1.27k stars 282 forks source link

Enhancing Footer for better interface and User Experience💻 #5381

Open El-Houssein-bedoui opened 2 months ago

El-Houssein-bedoui commented 2 months ago

Idea incl level Upon reviewing the current state of Hedy's website footer, I've noticed a lack of essential icons such as Discord, info, GitHub... To address this issue, I propose designing playful and child-friendly icons that align with the atmosphere of hedy platform.

Additionally, I suggest reorganizing the footer to enhance clarity and user experience. The left part will feature external links, while the right part will contain sections for Newsletter and Information.

BEFORE: AFTER (A mockup using Photoshop to demonstrate the proposed changes):

Feedback and suggestions for improvement are welcome(Colors suggestions , organization ...). If the team agrees with these enhancements, I am prepared to submit a merge request to implement them promptly. Thank you for considering this proposal.

Felienne commented 2 months ago

Thanks for the suggestions @El-Houssein-bedoui! I actually like this a lot! I can draw the little icons so they are "Hedy style". What do you think @Annelein/@gisellandrade?

Annelein commented 2 months ago

Thanks for the suggestions @El-Houssein-bedoui! I actually like this a lot! I can draw the little icons so they are "Hedy style". What do you think @Annelein/@gisellandrade?

I also like this a lot! Sounds good.

El-Houssein-bedoui commented 2 months ago

I stumbled upon some icons that appear to be "Hedy style". Take a look and let me know what you think. If you didn't like them, would you like to create and send some alternatives? Thank you ! discord1 email1 email2 github info 1 newsletter1-icon1 newsletter2-icon priacacy-term2 privcy-term1 sponsor1-icon sponsor2-icon teaching1-icon translation-icon

gisellandrade commented 2 months ago

The only thing that I don't really like it is the violet/burgundy color, I think it doesn't match with Hedy style. Maybe using yellow or blue would make it look better, what do you all think? @Felienne @Annelein

El-Houssein-bedoui commented 2 months ago

Hey, this is the latest version with a fresh look! I've switched the color scheme to A blue tone and updated the icons to align perfectly with Hedy's signature style. What's your take on it? Additionally, could you please assign this task to me? Appreciate your feedback! @gisellandrade @Felienne @Annelein Attached are two images for comparison: one with the original pink color and the other showcasing the new blue:

Annelein commented 2 months ago

Looks good to me!

El-Houssein-bedoui commented 2 months ago

@Annelein @Felienne the blue or the pink one ?

Annelein commented 2 months ago

Oh sorry, as Gisel suggested, the blue one!

El-Houssein-bedoui commented 2 months ago

Okey i will try to make a pull request as soon as possible . thank you for your help.

hasan-sh commented 2 months ago

I love this idea @El-Houssein-bedoui. I think @Felienne meant to hand-crafted icons, that's the Hedy style probably?! Either way, perhaps the background and text colors should be the same as what we have in the same page: