CSI - TSEC Website
Website developed for a student chapter of a national technical committee Computer Society of India - Thadomal Shahani Engineering College chapter, in undergraduate college, in my role as Assistant Technical Head (Software) in the committee.
Used Web Technologies like HTML, CSS, JavaScript, PHP, along with SQL and website hosting technologies like cPanel to develop and publish the website.
The website aims at providing a descriptive overview of the technical committee and committee activities. Since the website is mainly informational, it was developed as a one-page website, with additional components showing information based on user scrolls, hover, and clicks.
A colour scheme of blue and white was implemented, as the committee logo is in blue, as well as to send out the subliminal message of it being a technical committee (as blue is commonly associated with tech, e.g. Facebook, Twitter, LinkedIn, Tumblr). The colour also represents wisdom and intelligence, qualities we wished to portray. Contrasting shades of blue, black and white were used for textual content. A font pair of basic fonts, Georgia and Verdana, was used throughout.
The About Us section provides information about the college, committee, the student chapter, as well as a message from the student chapter branch counsellor. A slider element was used to display information, compartmentalized according to the topics. Each topic is addressed by one slide containing textual content on the slider, ensuring limited but specific content is provided intermittently, making information easier to read and understand.
A Parallax effect was used throughout the website, which ensures the foreground and background move at different speeds when scrolling. Background images were software and hardware related, keeping in mind the theme of the website. The images also served as dividers between different sections of the website, making it easier for visitors to compartmentalize information being read.
The Junior Committee section provided information about the junior team in the committee. Departmentalized according to teams, like Publicity, Hardware, Software and so on, group photos of the teams were displayed on a constantly moving carousel. Team member names were clickable, and led to respective social media pages. On hovering over an image, the carousel would pause, allowing viewers to focus on one image at a time.
The Senior Committee provided information about the senior and managerial members of the committee. Instead of using another carousel or slider to integrate information, buttons were used to display photos of each of the members. On hovering over an image, the member's name, and position would be displayed. Clicking on the name here as well would redirect to respective social media pages. This allowed us to display relevant information in less space, and in a new way.
To showcase various committee activities held in the past, we had two sections, Fests and Industrial Visits, both displayed in a similar accordion manner. The accordion allowed us to display only event names and allow viewers to view additional details only for the events they wished to. This limited the information being showed to only vital information, saved space, and gave viewers a sense of control and allowed them to make decisions. On clicking on any event name, the accordion would expand to show information related to the event.
The website was developed over a period of one month, including all steps from conceptualization to design to development to testing to hosting. Work was mainly done by the junior technical software team, taking entire junior committee perspectives and opinions into account for design, under the supervision and guidance of the senior committee.
