Elixir website redesign

[hichemfantar]

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! 😊

[josevalim]

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.

[hichemfantar]

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