29.06.2024 - 03.08.2024 | Week 10 - Week 15
Maisarah binti Mohd Sufian | 0358458
Interactive Design | Bachelor of Design (Hons) in Creative Media
Final Project | Creating a Single-Page Website
___________________________________________________________________________________
LECTURES
Week 10
Today we learned more ways to code our website for our final project
Week 11
Progress check
Week 12
Progress check
Week 13
Progress check
Week 14
Progress check
___________________________________________________________________________________
FINAL PROJECT - Creating a Single-Page Website
Instructions
For this web design project, we need to create a single-page website about a topic we're passionate about. We must include at least five sections of engaging content and a call-to-action button. We need to choose a color scheme and fonts that reflects the style, ensure the design is visually appealing and responsive, and add smooth navigation and interactive elements like image sliders and hover effects.
1. Sketch
Initially, my sketches were a bit more ambitious as I took inspiration from this example from Pinterest:
For the visuals of my website, I referenced a poster of Pochacco for the colours, font, etc.
I then moved on to the sketches.
1. Prototype
Before moving on to the prototype, I actually tried testing coding the layout for my website and quickly realised that it was a bit difficult, and I did not have the skill nor time so I decided to alter my prototype just a little bit to be more simple.
3. HTML
I worked on the website in sections.
For my navigation bar, I added a Javascript so that I could make it responsive for mobile screens.
4. CSS
I continued to add the CSS. For reference I used the iPhone 11 size as my mobile media query, as well as 1200px for when the screen is resized.
For my navigation bar, I set it so that it would be responsive when hovered over, and when the screen is below 828px wide it will turn into a vertical dropdown menu upon the press of an icon.
For the hero section, I actually made the background an image that i designed and added the text on to it. I made a seperate background for a mobile version and when the screen is resized to below 1200px width. I added my CTA button here and created a responsive hover where the button expands when hovered over, and it takes you to Sanrio's TikTok page when clicked.
For the history section, I kept it simple again and added my own background image, excluding the div boxes. The introduction box has a feature where it will reveal text when hovered over, but as this feature does not quite work for mobile devices I disabled that for screens under 828px. I also added an image with a caption.
For the about section, again I inserted my own background image and added the text. For the Friends gallery however I added hover features that showed the character names when hovered over, and on mobile it will show when clicked.
For the Gallery, I created an image slider using a template and customised it a little. Each picture has a short caption. The Awards section is also a template that I customised, and added the media query to for mobile screens.
The footer section, I added the website logo that takes you back to the top of the page.
5. Final Website
 |
| Desktop website |
 |
| Mobile website |
website link: https://pochacco.netlify.app
___________________________________________________________________________________
FEEDBACK
Week 10
No feedback given
Week 11
My sketches were not quite clear, but I could still proceed with the prototype. The script fonts should just be kept to one, and it may be used for the website logo.
1. Website flow is clear, wireframe needs more work.
2. Navigation a bit complicated.
3. Can make hero sections more obvious with a large header.
4. Breadcumbs can get rid of, because the web is not that complicated.
5. Decorative fonts can be put aside, focus on the header and bodycopy font. (with the exception of logo)
6. Overall can start to work on the prototype
Week 12
No feedback given
Week 13
No feedback given
Week 14
No feedback given
___________________________________________________________________________________
REFLECTION
Experience
Completing the web design project was a rewarding experience. I created a website dedicated to my favorite cartoon character, Pochacco. Working on this project allowed me to dive deep into web design and development, and it was exciting to bring my vision to life, even though it came with its challenges.
Observation
While I was pleased with the overall outcome, I faced some difficulties executing the layout I had initially envisioned. My CSS skills weren't quite up to the task, and I had to make some modifications to the original design. This was a bit disheartening, as I had a clear picture in my mind of how I wanted the website to look. However, adapting and making these changes taught me a lot about flexibility and problem-solving in web design.
Findings
Despite the setbacks, I was happy with the final result because it allowed me to create a website about Pochacco, a character I adore. The project was a great learning experience, and I now feel more confident in my ability to design and develop websites. It was fulfilling to combine my passion for Pochacco with my growing web design skills, and I'm excited to apply what I've learned to future projects.
Comments
Post a Comment