Com-muni [ty] [cate] [cation]
Created for SWE Hacks 2022, we wanted to create a website that encouraged community and connection. We were inspired by the craigslists thread "Missed Connections", and the anonymous instagram confession accounts from our respective colleges.
This hack contains of two parts, the functional website and the website design.
The website design can be found here: https://tinyurl.com/Com-muniWebDesign, and the functional website can be found here: https://www.com-muni.tech.
The functional website has a landing page, a login page, example posts, and an about page. The web design has the planned vision of all of those pages, as well as animations that show how someone would make a post.
We were inspired by the infamous Craigslist "missed connections" forum and the anonymous instagram confession accounts from our respective colleges. We didn't like the dated look of Craigslist, and felt like we could make something more user-friendly and visually appealing. We took inspiration from current social media sites like Twitter and Tumblr, as well as taking inspiration from existing web-pages in order to design our final product.
Com-muni's goal is to encourage connections. In order to do this, we conceptualized a website that exists in the form of posts. When you post, it posts to a database that allows views to see a title and the post contents, as well as your username at the bottom. When you click on the username of someone who posted, you will be able to send them a message. To view the messages you recieved, click the mail icon in the top right corner. There, you can open the mail and write a reply.
The web design was built using Figma, and branding and logos were done in Adobe Illustrator. The video was done in Adobe After Effects with screenrecordings from Figma and the website, and the website was built with HTML, CSS, and Javascript. We used GitHub to host the main website, and to share files (especially some of the graphics used in the website) across the country! We used our .tech domain from Domains.com, https://www.com-muni.tech to redirect to the main github pages release, so that we could share our work with our friends!
This was our designer's second time using Figma for interface design, so she had to learn how to use Figma at the same time as learning how to design a website. Prototyping was the hardest part, but she figured it out in the end!
Our web developer had very little experience with javascript, and with working with a designer. She had to learn javascript, and learn the skills to make the designer's vision a reality!
Going into this, we wanted to create both a figma prototype, and a live website. We managed to do both!
Our designer is very proud of her final figma prototype, as well as the video she edited to showcase the website!
Our web developer also is incredibly proud of some of the JavaScript that she managed to add into the document, as it allowed for more interactivity within the website itself. This was also her most intensive CSS project, and she learned a lot of CSS along the way.
Our graphic designer learned how to use Figma to design and conceptulize a website. Her favorite part was learning how prototyping worked, and she especially enjoyed seeing the animations it created! She also learned how to communicate her vision with her partner.
Our web developer learned more about JavaScript. She also discovered the nuances of CSS, and of course, learned about working with a designer.
As you can see from the figma prototype, we have big plans for Com-muni! In the future, we hope to successfully integrate the mail function, as well as the notifications onto the website, and of course, make the website actually functional.
