29.06.2024 - 03.08.2024 (Week 10 - Week 15)
Gunn Joey / 0366122
Interactive Design / Bachelor of Design (Honours)
in Creative Media
Final Project: Creating a Single-Page Website
TABLE OF CONTENTS
1. Module Information Booklet (MIB)2.
Final Project: Creating a Single-Page Website
MODULE INFORMATION BOOKLET
Final Project: Creating a Single-Page Website
In this web design project, we will create a single-page website
about our favourite topic. This project will help us strengthen our
web design and development skills while also showing our passion for
the topic of our choice.
Project Requirements
1. Artist selection:
Choose your favourite 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.
2. 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.
3. Design Elements:
-
Choose a colour 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).
4. Navigation:
Implement smooth scrolling navigation or a simple menu that allows
users to jump to different sections of the page.
5. Interactivity:
Consider adding interactive elements such as image sliders, hover
effects, or lightboxes for multimedia content.
1. Research
I did some research about cars and discovered many interesting details
that I could incorporate into my webpage. This research helped me
gather valuable content and insights.
Figure 1:Research
Figure 2:Research
I chose to code a car webpage because I like cars. This topic
allowed me to combine my passion for cars with my web design
skills, making the project more enjoyable and
engaging.
Figure 3:Research
2. Figma
3. Process
Firstly, I study the layout of my prototype design.
Figure 4: Prototype design
The HTML of the navigation menu, header text and About were
first added in the source code. For the welcome page, I added
explore button to jump to the About section.
Figure 5: HTML code-navigation bar
The CSS style for the explore button and box. The CSS style helps
to place the position of the explore button.
Figure 6: CSS code-home button
The second section of the web page : About. I use column and row
to place the logo and text together.
Figure 7: HTML code-About
For the photos section, I added overlay zoom to show the car
models.
Figure 8: HTML code-photos overlay
Then, I embed the commercial video of each car model in YouTube
and paste it in HTML to introduce Lamborghini cars.
Figure 9: HTML code-videos
For the merchandise section, overlay title is used to show the
product's name.
Figure 10: HTML code-overlay title
I added a feedback form in the contact section. Users can fill in
the form with name, email and feedback.
Figure 11: HTML code-contact
The background-size of background image is applied as cover and no
repeat in the CSS style of the form. The background image is
placed under the contact form.
Figure 12: CSS code-form
After all the HTML and CSS coding are completed, I started coding
the CSS style of media screen size, max-width 996px. The coding
for media screen size is quite challenging and need a lot of
patience.
The iPhone 14 Pro Max screen view:
Figure 13: Media scrensize - iPhone 14 Pro Max
4. Final Outcome
HTML code:
CSS code:
Reflection
Creating a single-page website using HTML and CSS in the Interactive
Design course has been a deeply enriching and educational
experience. This project has not only enhanced my technical skills
but also provided me with a comprehensive understanding of web
design principles, user experience, and the importance of a clean
and functional interface. CSS has been crucial in making the HTML
structure look appealing. I learned styling techniques which helped
me control how the webpage looks. Using CSS variables and custom
properties made it easier to keep the design consistent. A key part
of modern web design is making sure websites work well on all
devices and screen sizes. I used media queries and flexible layouts
to ensure the single-page website looks great on desktops, tablets
and smartphones.
Comments
Post a Comment