Interactive Design - Project 1
22.4.2024 - 00.7.2024 (Week 1 - Week 14)
Aidi Rafiq | 0353422 | Bachelor of Design (Honours) in Creative Media
INTERACTIVE DESIGN
INSTRUCTIONS
FINAL PROJECT
Project Overview:
In this web design project, you will create a single-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the topic of your choice.
Project Requirements:
Artist Selection: 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.
Content:
Your 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.
1. Plannings
Objectives
- My plan is to produce a website for a cafe, whether to improve it or produce a new one for them.
- Research through few cafe that needed to be improved or has no website at all.
Plouf
Is a cafe/ bar located in Seoul, South Korea,
that sells coffee, non-coffee, wine and desserts.
They do not have that much information about their cafe/brand and this is
is my job to produce one for them.
Page Content
- Home page
- About us
- Menu
- Shop
- Contact Us
2. Visual Reference
link to the behance creator
this is the theme/ color I'm going for by in behance. Where the blue and white suits the vibe from the main logo/ title and the pink is what compliments the blue without overwhelming it.
Font Chosen
- Open Sans
- Felix Tilt
- Asgard
Color Theme
- Pink
- White
- Blue / Dark Blue
3. Wireframe - Adobe XD
To relate with the behance idea, I followed the color theme and the photos from them.
I want to make it minimal and more abstract in order to still attract the audience and make it simple in order for the audience's eyes.
4. Code
these are the fonts that will be using for the headings and the title.
I used photoshopped to cut out to produce for my abstract shop page.
4. FINAL
CODE TO MY FINAL PROJECT
REFLECTION
Experience
It was going as I wanted to go , by how the paragraph and title is structure. Same goes to the font that I wanted to add in and making sure it can be seen from other device that doesn't have a similar font from google font. But It was still stressful in order to not make a same mistake as I had during project 2.
Working with fitting with other devices or responsive site that adapts from different screen is still a hard part for me because of the lack of understanding. I tried research and watch couple of youtube but still don't understand how it works.
Observation
I observed that we will still need to remain research on how to make a certain code because of how difficult this module, especially that has zero experience in coding.
Findings
Managing time well because of the long process when making a webpage. Coding is a my stepping out of the comfort zone when it comes to designing.
Comments
Post a Comment