elixir-lang.github.com icon indicating copy to clipboard operation
elixir-lang.github.com copied to clipboard
verified publisher icon elixir-lang

Elixir website redesign

Open clicktodev opened this issue 1 year ago • 2 comments

Description

The current Elixir website, while functional, could benefit from a modern refresh to better represent the vibrant and evolving Elixir community. This proposal aims to rebuild the website using modern design principles with TailwindCSS for styling, ensuring a visually appealing, highly responsive, and developer-friendly experience.

Objectives

  1. Modern Design:
    • Clean, intuitive UI that resonates with both new and experienced developers.
    • Improved navigation and content hierarchy for easy access to learning resources, documentation, and community links.
  2. Built-in TailwindCSS:
    • Use TailwindCSS to streamline the design process and maintain consistency across components.
    • Facilitate rapid prototyping and customization.
  3. Content Accessibility:
    • Enhance accessibility features (e.g., ARIA roles, proper semantic HTML).
    • Ensure the website meets WCAG standards.
  4. Performance:
    • Optimize for fast load times and high Lighthouse scores.

Proposed Stack

  • Frameworks: Next.js
  • Styling: TailwindCSS
  • Deployment: Vercel (via Next Static site generation).

Inspiration

Here are some examples of modern and visually compelling developer websites:

  • React.js

    • Clean layout with a strong focus on interactivity and learning resources.
    • Great use of Tailwind for styling consistency

  • Vue.js

    • Consistent design with clear navigation and call-to-actions.
    • Developer-friendly tone and design.

  • Astro

    • Modern and approachable aesthetic with bold typography and animations.
    • Well-structured layout for documentation and blog content.

  • Vite.js

    • Minimalist design with vibrant color accents and straightforward navigation.
    • Lightweight and performant, reflecting its core philosophy.

Action Plan

  1. Research & Wireframes:
    • Collaborate with community members to identify core pain points and desired features.
    • Design wireframes/mockups for feedback.
  2. Implementation:
    • Build the website using Next.js.
    • Integrate TailwindCSS for consistent and reusable styles.
    • Ensure full responsiveness and accessibility.
  3. Content Migration:
    • Port existing blog posts, and community links to the new design.
  4. Testing & Feedback:
    • Conduct usability testing with community members.
    • Gather and incorporate feedback for iterations.

Community Involvement

This redesign is a collaborative effort. We encourage contributions from designers, developers, and accessibility experts to make the new website a proud representation of the Elixir community.

Expected Outcome

A sleek, modern, and accessible Elixir website that attracts new users, supports the community, and highlights the capabilities of the language and its ecosystem.

Feel free to suggest additional features or share feedback! 😊

clicktodev avatar Jan 18 '25 16:01 clicktodev

Hi @hichemfantar, thank you for this proposal. This is already on my plans for 2025 and we already have a company who is going to work with us on this and I plan to revise part of the content and the tagline as well. I will keep this open so I can drop updates in the future.

josevalim avatar Jan 18 '25 16:01 josevalim

That’s great! I’m glad to help in whatever way I can to make the new website a success.

clicktodev avatar Jan 18 '25 21:01 clicktodev