INTERACTIVE DESIGN ✦ EXERCISE ✦
INTERACTIVE DESIGN ✦ EXERCISE ✦
24/4/2024 - 25/5/2024
Week 1 - Week 5
Bachelor of Design (Sons) in Creative Media
✦ LECTURE ✦
Week 2
The design process is typically a systematic approach used to
develop creative projects, products, or solutions to problems. In
this phase, the emphasis is on understanding the needs and emotions
of users, clients, or target audiences. Designers need to actively
listen and observe to build a deep understanding of them. This often
involves interviews, surveys, and observations.
In this stage, designers organize and analyze the collected
information to define problem statements or project objectives. This
helps ensure that design work focuses on addressing key issues.
The ideation stage is the core of creativity, where designers
generate various possible solutions, freely presenting various ideas
and concepts. This often involves brainstorming, sketching, and
model making.
These steps and principles help designers ensure that their work is
purposeful, user-oriented, and ultimately meets user needs. The
design process is typically iterative, with designers revisiting
previous steps multiple times for improvement and optimization.
Week 3
Header:
The header is the first part of the page that users see when they
enter the website.
The purpose of the header is to provide users with quick access to
important information and navigation on the website, allowing them
to easily find the content or perform the desired actions.
A well-designed header can help improve brand awareness and enhance
the overall user experience of the website.
Footer:
The footer is the bottom part of the webpage that users see after
browsing the page content.
It contains important information such as copyright details, privacy
policy link, contact information, social media links, etc.
The footer may also contain navigation links that allow users to
quickly access other important pages of the website, such as the
"Contact Us" or "FAQ" pages.
The footer is the end of the webpage and provides users with
additional information and navigation options.
Headers and footers are two important components of website design
and play a vital role in providing information, navigation, and
enhancing the user experience. Designers usually strive to ensure
that these elements are consistent with the overall design of the
website in layout and appearance to provide a unified user
experience.
Week 4
Basic coding knowledge and some class exercises
HTML is the foundation of web development and is used to create web
page structure and content.
Class exercises may involve creating HTML tags (such as
<html>, <head>, <body>, <p>, <a>,
etc.) to build web pages.
Week 5
This week we were taught what CSS is, a method used in HTML
documents. It separates content from design, allowing developers to
define styles such as fonts, colors, spacing, and web page layout.
It facilitates responsive design, animation, and the creation of
visually appealing and user-friendly websites. CSS uses selectors to
target specific HTML elements and supports the concept of cascading,
where rules can be added to each other based on specificity and
order.
✦ INTRUCTION ✦
Figure 1.1 MIB
✦ EXERCISES ✦
Exercise 1: Web Analysis
Instructions:
Choose two (2) websites from the links provided by your teacher. Carefully
examine the websites you selected, noting their design, layout, content, and
functionality. Identify the website's strengths and weaknesses and consider
how they affect the user experience. Write a short report summarizing your
findings and recommendations.
What to include in your analysis:
Consider the website's purpose and objectives and evaluate whether they are
communicated effectively to users.
Evaluate the website's visual design and layout, including its use of color,
typography, and images.
Evaluate the website's functionality and usability, including navigation,
forms, and interactive elements.
Evaluate the quality and relevance of the website's content, including
accuracy, clarity, and organization.
Consider the website's performance, including load time, responsiveness, and
compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing in no more than 500 words. You can include
a screen capture of each section or page of the website for illustration.
Ensure that the report's formatting is clear, including headings and
subheadings.
This is my report on site views:
Figure 2.1 This is the cover of this website that I just clicked on
During this observation, I took an in-depth look at all aspects of the
research website, analyzing its effectiveness in achieving its goals,
visual design, functionality, content quality and performance.
Goals and goal communication
The main goal of the website's name seems to be to foster creativity and
innovation by giving inventors a platform to showcase their work and
connect with like-minded people. This goal is effectively communicated
through the clear organization of the website and prominent sections such
as the homepage, personal files and award nominees. However, communication
about the site's stance on sexual content appears to be lacking. While
establishing guidelines is important, this can be communicated more
clearly to users to avoid any confusion or discomfort.
Visual design and layout
The visual design of Website Name is engaging and engaging, with colors,
typography, and images harmoniously blended together. The use of bright
colors adds vibrancy to the platform while ensuring readability and
accessibility. The typography has been carefully chosen to strike a
balance between aesthetics and legibility. The use of images is thoughtful
and complements the content without overpowering it. The layout is
intuitive and guides users seamlessly through various sections and
features.
Figure 2.2 Example in Internet
Features and usability
From navigation to interactive elements, website names excel in both
functionality and usability. Navigation is very simple, with clear menu
options and intuitive paths to different sections. Forms are easy to fill
out, enhancing the user experience, while interactive elements like
sliders or galleries add depth to the browsing experience. However, there
may be room for improvement in terms of accessibility to ensure
inclusivity for all users.
Quality and relevance of content
The content on the site's name is rich, diverse, and clearly organized,
catering to the interests and needs of inventors and creators. Information
is accurate and clearly presented to facilitate understanding and
engagement. However, improvements could be made in providing a more
comprehensive description or insight into the design work displayed on the
platform. Additionally, incorporating user-generated feedback or
recommendations can add credibility and relevance to your content.
Performance
In terms of performance, Website Name exhibits commendable loading times,
responsiveness, and compatibility with different devices and browsers.
Pages load quickly, ensuring a seamless browsing experience, and the site
adapts well to various screen sizes, enhancing accessibility.
Compatibility across different browsers further extends the reach of the
platform, maximizing user engagement and satisfaction.
In Conclusion
The website name becomes a vibrant and user-friendly platform for
inventors and creators, effectively achieving the goal of fostering
creativity and innovation. With its visually appealing design, seamless
functionality, high-quality content and impressive performance, [name of
website] has set commendable standards in the world of online creative
platforms. However, there are still some areas for improvement,
particularly in terms of communication about the guidance and the depth of
content provided. Overall, [site name] has huge potential to become a
premier destination for individuals with a passion for inventing and
creating.
Exercise 2: Web Replication
In Exercise 2, our assignment is to accurately replicate two main pages of a
website as specified by Mr. Shamsul. The goal is to recreate these pages as
closely as possible to the originals. While we are expected to maintain the
overall design, layout, and content of the pages, we have some flexibility
when it comes to the images used. If necessary, we can replace the original
images with similar ones that fit the context and aesthetic of the website.
This task requires attention to detail to ensure that the replicated pages
are visually and functionally indistinguishable from the originals.
Figure 3.1 Website JPG
Figure 3.2 Website PDF
Figure 3.3 Website JPG
Figure 3.4 Website PDF
Exercise 3: Create a Proposal Profile Webpage
Task Description
In this task, I will create a personal profile webpage using HTML skills. The
webpage will include:
1. **Page Title**: "My Profile".
2. **Header Section**: An `<h1>` tag for my name and an `<h2>` tag
for a brief tagline.
3. **About Me Section**: An `<h3>` heading with a brief paragraph about
myself.
4. **My Interests Section**: A paragraph (`<p>`) introducing my
interests, followed by a list (`<ol>` or `<ul>`).
5. **Contact Information**: My contact details in a suitable HTML structure.
6. **Testing and Validation**: Ensuring the HTML code is correct and
standards-compliant.
7. **Publish My Webpage**: Publishing the page on a web server or platform of
my choice.
This exercise will help me practice creating a structured HTML document and
ensure it is ready for publication.
Figure 4.1 Final Outcome
Please refer to the link
Exercise 4: Creating a Recipe Card
In this exercise, I will create a recipe card using HTML and CSS. The goal
is to design a basic webpage that displays a recipe's ingredients and
instructions in a visually appealing format. I will choose one recipe from
the link below.
Create an HTML file: I will name the file "index.html."
Recipe Section: I will display the following information:
Recipe Title
Images: I will include necessary images for the page.
Ingredients: List of ingredients.
Instructions: Step-by-step cooking instructions.
This exercise will help me practice structuring a webpage using HTML and
styling it with CSS to create a visually appealing design.
Figure 5.1 Final Outcome
Please refer to the link
✦ REFLECTION ✦
Working through these exercises has been an enriching and insightful
experience, significantly deepening my understanding and proficiency in web
development. Replicating existing main pages highlighted the importance of
precision and adaptability, as I had to find creative solutions when exact
resources weren't available. Creating a personal profile webpage reinforced
the importance of structured HTML and effective CSS styling, demonstrating
how web development can be used for personal branding. Designing a recipe
card integrated HTML and CSS skills, emphasizing the creation of visually
appealing and user-friendly content. Each task enhanced my technical skills,
problem-solving abilities, and understanding of responsive design. These
exercises also encouraged creative thinking and attention to user
experience, boosting my confidence and preparing me for more complex web
development projects.
评论
发表评论