Foundation Sixty6
A website for an organization dedicated to dismantling barriers, cultivating understanding, & support for those battling conditions such as psychotic depression, bipolar disorder, & schizophrenia
Year
2024
Type
Client Project
Role
Mazz Febra (Project Manager)
Loui Hernandez (Motion Designer)
Patricia Martins (Back-End Developer)
Sumin Lee (Graphic Designer)
Valentina Perez (Front-End Developer)
Project goal
The goal was to design, develop, and pitch a professional marketing and advertising campaign and website for Foundation Sixty6, an organization dedicated to dismantling barriers, cultivating understanding, and support for those battling conditions such as psychotic depression, bipolar disorder, and schizophrenia.
As the front-end developer, my primary responsibility was to create a mobile-first responsive site adhering to all modern web standards and coding best practices such as using SASS modules, minifying CSS, and JS modules. Specifications also included using a front-end framework (Vue.js) or the template element, using dynamic data where required with the Fetch API, using modern web techniques to implement site enhancements for improved UX and UI, and using the GreenSock library to add visual enhancements and interactivity. In addition to this, I assisted the back-end developer in creating a reactive and single-page content management system (CMS) using Vue.
Technologies Used
I used HTML and SASS for the website structure and styling, JavaScript for the functionality, Vue.js framework for fetching/displaying data from the custom Lumen API created by the back-end developer, GreenSock for animations, Glide.js for the carousels on the website, and PHP for authentication and session initiation.
How it was created
Creating the website was a very collaborative process. I worked closely with the back-end developer, project manager, and graphic designer to achieve the final product. Upon receiving the brief from the client, I began doing a lot of research by checking out websites from foundations and non-profit organizations that share a similar mission to that of Foundation Sixty6 for inspiration and to see how they've structured their website and what type of content they have on there. After conducting research, I collaborated with my team members to plan out the site map for the website and decide which content should be dynamic or static. I also brainstormed features for the website with the back-end developer and collaborated with them on a developer document that explained in detail what we were planning for the website in terms of pages, content, functionality, and the database structure.
Through several discussions with the team, we finalized certain aspects of the website and the graphic designer began designing the wireframes based on feedback received. Once the initial wireframes were completed, the back-end developer and I began coding the structure of the website. Now being able to visualize the website layout, I was able to test out certain features and then communicated to the team where refinements were needed. Upon receiving the brand guidelines from the graphic designer and motion designer, I began styling the website with the brand colours and fonts, and collaborated with the project manager to refine the body copy of the website, consistency of colour choices, and component styling.
After receiving positive feedback of the website from our professors and the client, the back-end developer set up a custom API using Lumen so that I could fetch the dynamic content from the database and display it on the website. I used Vue.js to create components where the dynamic content would be displayed, and then used the Fetch API to retrieve the data. Now having the website structure and design completed along with the dynamic content in place, I added in hover animations to buttons, nav links, icons, etc. and content reveal animations as your scroll through the website using GreenSock's ScrollTrigger.
The final part of the process was creating a content management system (CMS) for the client to manage the content on the website. For the CMS, I made it a Vue single-page application (SPA) which allowed me to make it reactive and simple to navigate. I used the Lumen routes created by the back-end developer to not only fetch the content but also to make it possible to add, edit, and delete content. Lastly, I used PHP for authentication and to set up a session for accessing the CMS.
