Interactive Design | Final Project : Creating a Single-Page Website
04.07.2024 - 03.08.2024 Week 11 - Week 15
Tracy Angeline Tio / 0362222 / Bachelor of Design ( Honors ) in Creative Media
Interactive Design / Taylor's University
FINAL PROJECT : CREATING A SINGLE PAGE WEBSITE
After that, I began to finding a references and combine it to become the mood board and do some sketches for the logo and wireframes.
As I want to pursue the aesthetics and cozy website theme, I plan to use warm color like beige, chocolate, dark green etc and my font choices was serif (DM Serif) for the header and sans-serif (Nunito) for the body because combination of both stylized serif and clean sans-serif font create a balanced proportion typefaces.
Finished the HTML, I moved to CSS for styling the elements. Firstly, I put on basic CSS which is scroll padding and scroll behavior : smooth.
On fig 3.14, there were a difference after I styled it. Since the background images looks like it cutted, I adjust the hover opacity on the website to 70%. The title font also adjusted to be more thin by code the line spacing and font-weight.
The problem is that the button control only would moved to one way only, like to the left and to the right. The control could not be combined because when I tried it, the control were messed up.
- Services
I adjusted the font size first and some height and width in interactive element for every section. As for the tablet and laptop size, I repeated the same progress by just copy and adjust the number of the size.
Interactive Design / Taylor's University
FINAL PROJECT : CREATING A SINGLE PAGE WEBSITE
TABLE OF CONTENTS
LECTURES
All Lectures are on Interactive Design | Exercises
INSTRUCTIONS
MIB BOOKLET :
FINAL PROJECT
Creating a Single-Page Website
On this project, we need to create a single-page website dedicated to our favorite topic. This project will help us to develop our web design and development skills while allowing us to showcase our passion for the topic of our choice.
Choose your favorite topic as the subject of your website. Ensure you are genuinely interested in the topic, as this will help you create a more engaging website. Decide the site's goal to ensure that the site has clear content.
Requirements :
- Content: Content should have at least 5 sections that explain the topic of interest. It should engaging and significant to the topic. You should also include one CTA button that reflects the content.
- Design Elements: Choose a color scheme and fonts that reflect the artist's style or your taste. Ensure a visually appealing layout with a balanced use of text and multimedia. Create a responsive design that adapts to different screen sizes (mobile-friendly).
- Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.
- Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.
Brainstorming :
The first thing I do to start this project was searching an interested topic to present it on my website. We were free to choose any of the topic ( does not have to be artist ) , so I want my topic became interesting by relating to nowadays problem.
My Choice for the topic was "Healthy Habits to Exit Lazy Era". I observed that many university students having hard time to manage their time and doing their work on time ( including me (: ). As a results, if these kept happens, it will create a bad habit called "Procrastination" and it is hard to quit the laziness until a long time.
The goals I want to pursue when creating these web is I want my website became an inspiration for people who read it by make it looks clean, structured and comfortable to read. From the website, hopefully, people changed their mind and making an improvement for their own problem.
---
After my object is clear, I moved on to create the content and structure. I decided to fixed on the title first and I was think about these title : "Transform Your Life, From Laziness to Productivity".
I divided my content about 5-7 class which is :
- Home section : Navi bar, Logo, Title, and Image
- About : 1 paragraph about the problems and why it is not good?
- Reason & Sign : State the reason and sign (are you had one of these symptom?)
- Solution : Strategies to boost productivity
- Inspiration : Heard the story from YouTube video
- Services & Support : Contact and Community
- Footer : Logo, Social Media links and Contact information.
Here are the notes I made include the wireframe idea I want to create in consultation class :
 |
| Fig 3.1 Content & Structure Brainstorming Week 11 03/07/2024 |
 |
| Fig 3.2 Mood Board Week 11 04/07/2024 |
Continue to the logo and wireframe sketches, I tried to made it looks simple and clean so it is easy to understand. Below are the ideas I made.
From these logo, I also got a comment by Mr. Shamsul to named on the company first and he suggest to just create a typography logo despite than illustration because it could be looked as an application rather than website.
To add favicon, create an artboard that maximum had 200px x 200px and export it in JPG/PNG, then use this link :
 |
| Fig 3.3 Prototype 1 and 2 Week 11 04/07/2024 |
 |
| Fig 3.4 Prototype 3,4 and 5 Week 11 04/07/2024 |
Mr. Shamsul likes all the prototype style especially the fifth one and at the end, I decided on which wireframe I would like to go. I decided to follow Mr. Shamsul feedback but I might do a slight change as an attempts for it.
I also do some attempts for "logo" part as I want to roleplay as a company website on this projects. The purpose to made this logo is to showed that it is a community focuses on productivity field.
 |
| Fig 3.5 Logo Attempts Week 11 04/07/2024 |
Developing Prototype :
I named my logo "One Steps" and I would like to add some ladder Illustration by using line on it. After things already setup, I moved to Figma to finalize my prototype design and started to find images assets to be placed on my wireframes.
I used Pexels.com, Google and Pinterest as my sources to finding an images. Pictures below shows some of my references I got from pinterest.
 |
| Fig 3.6 Visual References Week 12 11/07/2024 |
Next, I setup my figma and do some improved on wireframes and began to places the assets on the wireframes. I experienced the title to be placed on the left but Mr. Shamsul like the middle placement for the title. Moreover, I got some feedback for about part and reason and sign so I changed it to made it more interesting.
I created docs file to put on the content I'm gonna used in my website. Below are the content used :
Fig 3.7 Website Content Week 13 18/07/2024
At last, I got approvement on the next week for the prototype on the third page. I then saved all of the images and moved to Dreamweaver to start the HTML first. View this figma file for the prototype progress.
Fig 3.8 Prototype Attempts (Final on the Third one) Week 13 18/07/2024
HTML Coding :
First thing I started is to type all the information and insert on the images I saved on earlier. Based on Mr. Shamsul suggestion, I could add some favicon logo for the website, so I putted it first because it took a long time to made favicon appears.
 |
| Fig 3.9 Favicon Code Week 15 02/08/2024 |
<link rel="icon" type="image/png" href="/images/yourimagesname.png">
After that, I coded the information started from navigation bar until the footer part. This part is not really difficult since we just type and add a class on each elements if we are not sure want to style it or not. Below are some HTML progress :
 |
| Fig 3.10 HTML View Week 15 02/08/2024 |
Styling HTML With CSS :
After I coded the basic, I moved to google font to get embed font link and started to divide every header and p parts into various size and colors.
 |
| Fig 3.11 Some Code for Font Style Week 15 02/08/2024 |
- Home Parts
There were 2 parts of my home section which is Navigation bar and main page of title and images. I divided to three section which is for logo, navigation bar and header. As I want to create fade animation when the web appear, I used fade up and adjust the keyframe on new section. By this tutorials, I got to learned on how to code it.
Vid 3.12 Slick Fade- In CSS Tutorials Week 15 02/08/2024
The navigation bar were quite difficult for me since I want to had a transition or animation effects in the hover. I searched on tutorial again to gave me some inspiration.Vid 3.13 Navigation Bar using HTML & CSS Tutorials Week 15 02/08/2024
 |
| Fig 3.14 Home Part Progress Week 15 03/08/2024 |
At last, I added button effect with hover to make it more interesting by adding second color and transition to make it smooth.
 |
| Fig 3.15 Button Hover Week 15 03/08/2024 |
- Problem
On this part, I might changed a bit from my prototype style because the prototype style would not be suited when tested the responsiveness. I had an idea to make it looks like a gallery that could be interacted. I started to flex the images and following this tutorial to create the expanded gallery.
Fig 3.16 Animated Image Gallery from Hover Effect Week 15 03/08/2024
I encountered another issue while making this because the images I'm used had portrait shape while this animation is going to be widen. To fix this, I changed on my pictures to landscape so it would not be to blurry. I also changed the width and height of the appearance so it looks more wider. |
| Fig 3.17 Problem Part Progress Week 15 03/08/2024 |
- Reason & Sign
On this part, I repeated on what I learn and code on previous task, which is by creating display flex and adjusting the margin top, bottom on the title or the information. I added hover effects : transform scale for the images.
 |
| Fig 3.18 Reason and Sign Week 15 03/08/2024 |
- Solutions
This section was the most difficult one and it took me a long times to figure but ended up with failing result :"). At first, like usual, I began with finding on tutorials to gain some idea how to create it. I'm using this tutorials for the slider (link) and changed up the content part.
Fig 3.19 Slider Tutorials Week 15 03/08/2024
First Issue I encountered are the page 1 and 5 were united and I tried to fix it by changed on the width to 500% (5 slides) on #slide inner part. After that, It was fixed and I just need to add arrow button until I ended up with error again.
 |
| Fig 3.20 Slider Attempt Week 15 03/08/2024 |
I looked back the tutorials again and the tutorial had a little error to in the slider part. I looked on the comment part and it need to be done in Javascript or arranging the child. It was hard for me since I did not understand well how to code in Javascript. As a result, I removed on the button arrow and it would only move by clicking the radio button on the bottom.
I could use bootstraps instead but it was difficult to changed to the style I want like my prototype. It is not really bad without the button too and I realized it looks like my prototype sketches design on Fig 3.4 Image 5 probably (what a coincidence). As a result, I kept the design and I could revised if it needed.
 |
| Fig 3.21 Slider Code Week 15 03/08/2024 |
- Story
This part is same progress like a reason and sign section where I used flex and adjusted the spacing (margin and padding of the information). For the youtube video, I opened the video and click share - embed the link and copy it to the HTML part.
 |
| Fig 3.22 Story Part Progress Week 15 03/08/2024 |
- Services
On this section, I also applied on what have I learned on previous materials to create the contact form. I also looked from senior inspiration through how they code the contact button.
 |
| Fig 3.23 Services Part Progress Week 15 03/08/2024 |
- Footer
At the last section, I used flex also like before to made the content besides. I adjusted the width, height, and link color to make it look matched with the websites. Here are the codes and trial attempts for footer section.
 |
| Fig 3.24 Footer Progress Week 15 03/08/2024 |
Dimension Responsive :
Finished the styling part, lastly I add media queries to make the website could adapted in every dimension. I added around 3 type of dimension which is :
- Phone size : max-width 480px
- Tablet size : max-width 768px
- Laptop size : max-width 1000px
I tested before and the website looks fine in width 1200px +. Therefore, I adjust the smaller size on this website.
At first, I'm not really familiar when adjusting this responsive things. Thanks to many tutorials on internet, I finally got the key to made this part is just by looked at the style that had size (font), width, height and flex (add flex direction : column).
 |
| Fig 3.25 Responsive on Phone Size (480px) Week 15 03/08/2024 |
 |
| Fig 3.26 Responsive on Tablet (768px) Week 15 03/08/2024 |
 |
| Fig 3.27 Responsive on Laptop (1000px) Week 15 03/08/2024 |
FINAL OUTCOME
Netlify Link : https://finalprojectbytrac.netlify.app/
 |
| Fig 3.28 Final Outcome Single Page Website (PNG) Week 15 03/08/2024 |
FEEDBACK
Week 11
After consulting the topic to Mr Shamsul, He said that the title is too long and need to be reduced until 3-5 words only. Add the text for my logo because it looks like an application logo without the text. The contents is clear and easy to understand. All of the wireframes is good and I could start choose the one and carried out all for the next step.
Week 12
For "About" section, tried to made it more better by improving the layout and images style and avoid using border to much especially for the reason and sign part. Remove the border and just showed the images and description.
Week 13
Prototype is approved and I need to work faster because the deadline is near. Use bootstrap as a references if you want to made something interactive for example Carousel. Make sure to adjust all the code in a good manner.
REFLECTIONS
This project had taught me a lot about coding knowledge that I previously don't know. At first, I found that coding is really hard because there's always trial error happened when working on it and I had no idea when I firstly got introduced to it. Through the progress of every week, I observed that I had improved a little in every task like from project 2 until now, I got to know about code the animation, transition and test the responsiveness.
I realized that I'm still far from professional web designer and what I had to do now is to improving my skills by keep learning and tried every style. After this project, I might want to learned JavaScript and bootstrap to be prepared on my specialization, UI UX.
Comments
Post a Comment