Interactive Design - Project 2: Working Web Page

19/7/2024 - 29/7/2024 / Week 6 - Week 8
Cindy Clarissa Leslie / 0367677
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2: Working Web Page 


INSTRUCTIONS

 


Coding/Process

Figure 1.1 Design prototype

Using the prototype as a reference, I had to be able to adapt the design onto a website and make sure that it is usable. Therefore, small changes will be made and such to improve efficiency.

Figure 1.2 coding the HTML of the website

First and foremost, as usual I prioritized on creating the HTML and all the textual elements along with the contents. I was able to divide each sections into containers using <div> and such in order to make styling easier later on.

Figure 1.3 Changing fonts using CSS

Next, using CSS, I had to manually insert certain fonts that I have on my computer in order to match the design in the prototype, I then switched the headers as desired.

Figure 1.4 Designing using CSS

Next, I try to replicate the CV without much changes first to see how I can improve it as a site later on. I focused on the graphical elements in this and struggled a bit with placing the borders which is why I altered it a bit. I figured out by using position: absolute or relative I was able to get the star borders in place in a way. 

I also decided, for more engagement and making the site more fun, I found about animation in CSS. Using the Hello World text, I animated it sliding in from the left using transform and keyframes.

For the rest of the sections, it was simple as I used flexboxes and such.

Figure 1.5 Adding interactive elements in the site

However, I decided that I wanted to add more interactions and such which is why I added in a navigation bar and a contact me section, crucial for hiring. For the nav bar, I kept the design as simple as possible however altered a lot for my form section to match the whole aesthetic. I also coded in commands that would help the site adapt better to mobile screens.


Final Project 2: Working Web Page


Figure 2.1 Final jpg of CV design

 
Figure 2.2 Final pdf of CV design


REFLECTION

In this project, I learned a lot on the different things I can do in CSS in order to stylize my HTML in different ways. I thought adding in animation involves a different language and upon finding it that I can do it in CSS I got pretty excited and learned it off of the internet. Since I was unfamiliar, I had to rely on different kinds of forum and such in order to get the look that I want, especially for troubleshooting which especially took a lot of time in the process of completing this. Though I really wished that I could replicate the whole look from the prototype as accurate as possible, I had to unfortunately face alteration especially for my level of coding. This project had convinced me to further explore and learn more about CSS, where I hope to make a highly interactive website one day.

Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Task 3: Type Exploration and Application

Image
16/6/2024 - 22 /7/2024  / Week 9 - Week 14 Cindy Clarissa Leslie / 0367677 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 3: Type Exploration and Application LECTURES Link to  lectures 1 to 4 Link to lecture 5 INSTRUCTIONS In this task, we were required to propose specific problems and how we could design a font in order to solve them. These proposals were collected in slides format and proposed to the lecturer in order to decide which ones were good enough to do. Research Figure 1.1 Slides for proposal. Week 9, 16/6/2024 In the end, I chose to create an extension based on my old font and go with the final idea of creating a font for a band, I wanted to be able to present their metalcore music that showcases how different songs in the album is able to be loud and sharp, while some of their songs are on the softer side. Figure 1.2 Original logo/typeface for the band. Week 9, 16/6/2024 Setting the original typeface as a reference itself, I wanted to be ab...
Read more

Application Design - Final Project: High Fidelity App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Final Project: High Fidelity App Design Prototype LECTURES   PROJECT 1: MOBILE APP PROPOSAL PROJECT 2: UI/UX DESIGN DOCUMENT PROJECT 3: LOW FIDELITY APP DESIGN PROTOTYPE INSTRUCTIONS Project 3: Lo-Fi App Design Prototype Design process Figure 1.1 Deciding on the final colour scheme At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a ...
Read more

Application Design - Project 3: Lo-Fi App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Project 3: Lo-Fi App Design Prototype LECTURES Week 11: Lecture 11 Usability testing Evaluate a product or service with representative users The aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction. Create scenarios for the participants, observe how they use it and gain insights. (3 different scenarios for 3 different users) Create a low fidelity wireframe first (does not contain graphics nor colours, just the main idea of the whole layout) UI Kit Should include aspects of the design: typography colour palette iconography INSTRUCTIONS Project 3: Lo-Fi App Design Prototype UI Kit As stated in the lecture, the UI kit should be created first to predetermine the design's typography, colour palette and iconography in order to ensure that it stays as consistent as possible. The kit will then be used as a f...
Read more