Web UI Design of Hack Club, SIT

3 min readMar 10, 2021

I have recently joined college and I got to know about the clubs of our colleges, one of which is Hack Club, I joined it and also got selected as one of the core members of the club.

Our lead, Debajit Mallick proposed the idea of creating a website for the community so that all the events can be posted there and more like-minded people can join this community of developers, tech enthusiasts, designers etc.

I got really fascinated with this proposal and had a chat with our lead to understand what’s his thoughts with this project and started to work in this project.

The Process:

BrainStorming.
Design inspirations.
Colour and Font selection.
Wireframes.
Testing.
High Fiderlity designs.

Brainstorming: “The design must be simple and userfriendly”- This is what I had to keep in mind through out the process, I made a list of the things/pages required to put on the website and the type and format of information to be given in the website.

Design Inspirations: I looked upon some pre existing Hack Club websites of bother colleges, there I got a decent idea about the branding of Hackclub. I have also checked out for inspirations in Dribble and Behance.

Colour and Fonts:

Wireframes:

Testing: Tried and tested the designs with the lead and others and made the suggested changes on the website.

The Final Design:

1.HomeScreen:

Here is the design of the homescreen, where the social media links are provided in the left side of the website so that it is easier to reach the social media platforms and which will help the growth of social media of the commmunity.

The informations about the community will be provided in the about section of the page, below that the stats of the community will be provided such as the number of people in the comunity, the number of events hosted etc.

Below that the upcoming events will be listed. , after that the testimonial and contact section is provided.