Class Project

Gather - Web Design & Development

Typography study placeholder image

Class

Web Design and Development

Role

Designer & Front end Dev

Tools

VS code, Github, Figma

Timeline

3 weeks

Year

2026

Project Story

Gather was designed as part of a Web Design & Development course, where the objective was to design and build a fully functional multi-page website entirely with HTML and CSS. Rather than creating a simple informational website, I wanted to develop a concept that solved a real problem—helping people discover communities and build meaningful connections through shared interests.

The idea for Gather came from the observation that meeting new people has become increasingly difficult despite being more digitally connected than ever. The platform encourages users to explore local groups, discover upcoming events, and connect with others based on hobbies such as photography, fitness, gaming, music, art, and more.

From the beginning, my goal was to create an experience that felt approachable, modern, and community-driven. Every design decision focused on making navigation intuitive while encouraging exploration and engagement through clear visual hierarchy, inviting imagery, and thoughtful interactions.

The project was built completely from scratch without using website builders or templates. I designed the interface, planned the information architecture, developed responsive page layouts, and hand-coded the entire experience using semantic HTML5 and CSS. Throughout development, I refined the layout, improved usability, optimized navigation, and ensured consistency across multiple pages including Home, Discover, Events, Community, and Join.

Although the project began as a class assignment, it evolved into a comprehensive exercise in both user experience design and front-end development. It allowed me to bridge the gap between visual design and implementation while reinforcing best practices for responsive web design, accessibility, and clean code organization.

My Role

UI/UX Designer
Visual Designer
Front-End Developer

Responsibilities

  • User experience planning

  • Information architecture

  • Wireframing

  • Visual interface design

  • Responsive web design

  • HTML5 development

  • CSS3 development

  • Component styling

  • Navigation design

  • Content organization

  • User testing and iteration

  • GitHub Pages deployment

Tools

  • HTML5

  • CSS3

  • VS Code

  • Draw.io (Wireframes)

  • GitHub

  • GitHub Pages

Outcome

Gather successfully demonstrates my ability to take a concept from initial planning through final implementation. Beyond designing the interface, I developed the complete front-end experience by hand, creating a responsive website that combines thoughtful visual design with clean, maintainable code. The project strengthened my understanding of the relationship between design and development and showcases my ability to create digital products from concept to launch.




Back to school projects