Date: 2023-12-11
This is a collective project between CCT250 and CCT360, the CCT250 assignment focuses on the interactive prototype and branding design and the CCT360 assignment focuses on coding the responsive website using HTML, CSS, Javascript and Bootstrap. This project will be used as one of a portfolio project for a startup, my brother and another partner split our work into UI/UX design, website development, photography, videography, logo design and graphic design respectively. The decision to make a portfolio website for my brother was before he pulled me into his partnership with the Startup. I suggested afterwards treating this assignment as one of the portfolio projects that we can show to our potential clients. Anyway, my brother was just entering university and does not have a portfolio website yet. He does already in fact have an online presence on social media for his work. After my 4 years at CCIT, I have not only heard once from professors and professionals that building an art portfolio is important for someone like him. This was my rationale for creating this website initially.
The contact to CCT250 professor Kylie Caraway's contact is kylie.caraway@utoronto.ca
Link to Adobe XD PrototypeHaving the prototype ready in Adobe XD, what I really have to do is simply to replicate using Bootstrap 5. The first challenge I encountered is the fonts. I cannot use the fonts used in Adobe XD as they are all imported from Adobe Fonts. Therefore, I have to go back to my client, Max, to pick another font for essentially everything. To explore more potential fonts on the internet and being able to apply them into the website, I have learned using @fontface to import a font that is downloaded into the folders.
Because this is a art porfolio website, it is extremely content heavy. The assets management for this website is the largest I have seen. Renaming all of the images from client to keep assets organized is tedious but necessary. Having the website to load many images onto one page also become a challenge to accessiblity. I had to split up the art page into two, sketches and portfolio, just so less images have to be loaded at once.
On the home page, I do not like how many white space there is between each session. I propose to add a background image or video that spans across. This image/video will be at a fixed position and act as a divider between sessions. The two cards on the right can overlay onto the image/video so the white space can be filled.