30/06/2023 - 06/12/2023Week 01 - Week 14
Adrianna Sofea Mohd Fauzi (0350661)
Bachelor of Design (Hons) in Creative Media
Interactive Design: Final Project
Contents:1. Lectures
2. Interactive Design: Final Project
3. Final Outcome
4. Reflection
Lectures and Notes:
Spacing and Indentations:
Borders:
Types: Border, Border-top, Border-bottom,Bottom-right/left.
Values: Thick,Thin, Solid,Dotted etc.
Example:
Asterisk:
Example:
Padding:
Same value for the left and right: ‘padding-left’, ‘padding-right’.
Different values for the top and bottom: ‘padding-top’, ‘padding-bottom’.
Example:
Margin:
Example:
Image in Border:
Example:
Example:
List (ul)
CSS Stages:
Box Sizing
CSS Styles
Example:
Positioning:
Static, Relative, Absolute,Fixed, Sticky
Always adjust the parent element (like container) as you add functional attributes.
Parent should be relative for child positioning.
Example:
.static {
position: static;
background-color: blue;
top: 200px;
}
.relative {
position: relative;
background-color: pink;
top: 50px;
left: 0;
}
.absolute {
position: absolute;
top: 0;
right: 0;
background-color: blue;
z-index: -1;
}
.fixed {
position: fixed;
top: 0;
z-index: 1000;
background-color: blue;
width: 1000;
left: 0;
}
Units and Height
‘Vh’ is Vertical Horizontal
Determine suitable height for viewpoint with ‘min-height’
Difference between ‘height’ and ‘min-height
Always include top,right,bottom left.
Styling H1:
Example CSS:
Interactive Design: Final Project
Project Overview:
In this web design project, you will create a single-page website dedicated to your favorite artist. This project will help you develop your web design and development skills while allowing you to showcase your passion for the artist of your choice.
Project Requirements:
Artist Selection: Choose your favorite artist as the subject of your website. It can be a musician, painter, actor, or any other creative individual or group. Ensure you have a genuine interest in the artist, as this will help you create a more engaging website.
Content:
Your single-page website should include the following sections:
Header with the artist's name and a brief tagline.
Introduction: Provide an overview of the artist's background and why you admire them.
Biography: Include a brief biography or description of the artist's life and career.
Gallery: Showcase images, videos, or other multimedia related to the artist's work.
Contact Information: If applicable, include contact details or links to the artist's social media profiles.
Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your personal 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.
Project Proposal
Figure 1.1 Visual References
Notes:
I went on Pinterest and looked for inspiration and ideas when it comes to websites for musicians,
there were a variety of them but having to know Mitski the artist that I chose to be a very
soulful person, I did not want to add too complicated feature or design elements that might
disrupt her overall aesthetics.
Content and Structure
Notes:
The second stage is content and structure. I researched and gathered some information that
were relevant to me and what should be included in the website and found interesting
facts about her. I decided not to include all her albums but chose the top five that I personally liked.
Layout and Design
Figure 1.2 Design layout: Frame 1 and 2
Figure 1.3 Design layout: Frame 3 and 4
Figure 1.4 Design layout: Frame 5 and 6
Notes:
In layout design, I used Figma to help me build wireframes and I had 5 wireframes initially. However, after attempting the first time creating the website with the guidance of Frame 1, it did not go the way I wanted it and I had a few ideas in the back of my mind. Therefore, the birth of Frame 6 happened.
Figure 2.1 First attempt using the Frame 1 design layout
Notes:
This was the first attempt of Frame 1, I went through quite a lot of obstacles with adjusting
the image in the homepage and navigating the gallery, looking at my HTML I got very confused and could not think of anything that could fix it (although there were solutions). One week and a half of working on it but due to the fact that I already had a few idea that I was confident to work with.
I started over:
Second Attempt Using the Frame 6 Design Layout
Figure 2.2 HTML Enabling Viewport and CSS styling into HTML
Figure 2.3 Navigation Content HTML in Navigation Section
Notes:
I took a week to restudy all the elements that I should be able to confidently use and
I also took the time to study a few JavaScripts, particularly Menu Button was interesting yet very complicated. Thanks to the help of https://www.w3schools.com/html/ I was able to incorporate this as the minimised viewport's navigation menu button.
Figure 2.4 Navigation Content CSS in Navigation Section
Figure 2.5 Home Content HTML + CSS in Homepage Section
Figure 2.6 About Content HTML + CSS in About Section
Figure 2.7 Gallery Content HTML + CSS in Gallery Section
Notes:
My lecturer had advised me to avoid using circular elements as it won't look consistent
with my design layout. Therefore, I did still use the rectangle/squared elements, and shapes. However, I wanted my gallery to be slightly curved and used the box-sizing>border-radius to help me create that. I included a hover effect to give a pop-out effect when the visitor hovers to the image, it will slightly enlarge the image.
Figure 2.8 Discography Content HTML + CSS + JAVASCRIPT
in Discography Section
Notes:
In the Discography section, I initially wanted to include a button for the music
for each album and specific songs. However, it took me a while to sort it out and amid that an idea came to me about scrolling. I wanted the music to play once the visitor reaches this specific section and as they scroll it will play but once they are out of the section it will pause.
Figure 2.9 Contact Content HTML + CSS in Contact Section
Notes:
Initially, the social icons were supposed to be directed to Mitski's social medias, but it took me an entire day to solve the issue of the connection. The error of connecting Instagram and facebook kept popping out the screen when I insert the links into my href's. Sadly, it is unclickable.
The contact form, however, is very much effective.
Figure 3.1 Footer Content HTML + CSS in Footer Section
Figure 3.2 Media Screen for Mobile Devices
Figure 4.1 Progression of Steps Taken 1
Figure 4.2 Progression of Steps Taken 2
Figure 4.3 Progression of Steps Taken 3
Figure 4.4 Conflicts in Mobile Device
Final Outcome
Mitski Official Website Link:
Screenshot of Site: Click this Image!
Desktop View
Mobile View
HTML and CSS Document
Reflection
Experience: My experience for this final project was a rollercoaster ride and it felt like the longest challenge I've ever gone through. I was excited about this assignment because I got to create a website for my favourite artist. On top of that, I really wanted to make it up to myself from the previous assignment. I knew I didn't do a good job for my previous website due to my health issues and limited time. I did not have time to study and try-and-error and I only managed to come out with something similar. This time, I am grateful to my lecturer for given us more time to collect ourselves and make use of the time given by researching and studying the flexibility of creating layouts and the amount of guidance and consultations he had given, he can interpret our ideas excellently when we struggle the most to come out with it. I struggled a lot in determining in margins but all it took was a lot of try-and-error depending on my design and how I like.
Observation: From my observation, practising is crucial. I feel that learning the curves of adjusting px,em, and percentages are all depending on what website you want to create and it's not something that comes to you firsthand once you start to create a website. I have over 6 files in total of HTML, I tried various codes over and over again and took pieace by piece, the ones that worked out into the official organised HTML file. I also noticed that you need a lot of patient and a very good eyesight because I missed out a lot of symbols like :" and curvy brackets. Sometimes Dreamweaver detects however sometimes we look pass it, which is why it needs to be carefully scanned. Although, I almost gave up on JavaScripts but the result really satisfied me and that motivated me to do more but I wanted to avoid cluttering too much.
.jpg)
Comments
Post a Comment