Interactive Design-EXERCISE 1
INTERACTIVE DESIGN - EXERCISE 1/WEB ANALYSIS
23/4/2023- 2023（week1-week ）
Yang Jiayi/0369288
Interactive Design / Bachelor of Design (Honours) in Creative
Media
Exercise 1 - Web Analysis
TABLE OF CONTENTS
1. Instructions
2. Lectures
3. Exercises
4. Feedback
5. Reflection
INSTRUCTIONS
Lectures
Week1
The teacher asked us to choose two websites we want to analyze among
the given links.
- Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
- Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
- Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
- Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Week2
We learned web design, which includes 14 important elements. We used the 14 elements we learned to design the scenes set by the teacher for us.
The 14 elements include
- Header
- CTA Button
- Hero Section
- Footer
- Slider
- Search
- Menu
- Breadcrumbs
- Form
- Cards,
- Video,
- Progress Indicator
- Favicon
- Tags
Week3
Websites are typically divided into three key elements:
- Header
- Body
- Footer
Header
The header is the top section of a webpage.It usually contains the website's logo, navigation menu, and contact information.The header provides users with quick access to essential information and navigation.
Body
The body is the main content area of a webpage.It contains text, images, videos, and other multimedia elements.Proper organization of content within the body is crucial for readability.
Footer
The footer is located at the bottom of a webpage. It typically includes copyright information, links to important pages, and contact details.The footer provides closure to the webpage and additional navigation options.
Week4
We learned the basics of HTMl, introduced ourselves and included our own photos, learned how to put photos, how to set the main title and bold it, forming a simple self-introduction.
week4
HTML Exercise: Profile Page
Exercises
Website1:https://convexseascapesurvey.com/
Purpose and Goals
Through the central title of the website and the fish that catch the
eye, we can know that the purpose of the website is about how a healthy
ocean can have a beneficial effect on climate change. In the upper right
corner of the homepage, there are effective words such as team and
education center, for This website provides a strong backing foundation
and effectively delivers effective information to our users.
|
| fig1.1 Homepage |
Visual design and Layout
I think the visual effect of this website on users is very strong. By
scrolling the mouse, we feel as if we are in the ocean. Through the spread
of fish schools, we are about to get to the point. The website mainly
features blue ocean, blue There will be a calm and quiet feeling for the
user. When combined with the music that comes with the website, the sound
will switch according to different scenes. There are different music in the
sea and on the sea. The user will be immersed in it. The website also uses
the scrolling effect. Enhance the aesthetics, text will be transmitted
through the scrolling effect, the layout is clear and tidy, there will not
be too much text, making users feel like they don’t want to read anymore,
the text and images are just right.
|
| fig1.2 findings |
|
| fig1.3 Immersive experience |
Functionality and Usability
This website has a special functional design that will give users an AR
experience and make them more immersed in viewing. The navigation
options are not very clear and users cannot quickly jump to the
interface they want to browse. They can only follow the system step by
step. The website also Lacking a form, users cannot clearly find the
place where they can enter comments or subscribe to emails, but the
combination of images and audio will allow us users to interact with
these contents.
|
| fig1.4 Website special features |
Quality and Relevance
The website has a relatively clear design and a good user experience.
The survey is a five-year global research plan with a strong team, so
the accuracy and reliability of the website are trustworthy.
|
| fig1.5 Reliable team |
Performance
The loading speed is faster, but the response time will be slower, and
it often takes a while to get the request the user wants.
|
| fig1.6 loading speed |
|
| fig1.7 Response time |
Website 2：https://dontboardme.com/
Purpose and Goals
Through the huge puppy on the home page and the text next to it, it can
clearly let users know that the website is about pet care services. At
the top of the website, there is the directory of the website, which can
clearly let users know what content they want to know, and effectively
convey give us information
|
| fig1.8 Homepage |
Visual design and Layout
By scrolling down the mouse, users can understand how the services
provided by the website operate. The website is about pet care. The
color is also a warm and healthy pink, which brings the website closer
to the user. The images are also It is clear and easy to understand,
there is no complicated content, and the typesetting adopts a very
regular layout.
|
| fig1.9 Website operation |
|
| fig2.1 Steps |
Functionality and Usability
The website lacks interactive elements. Users do not have a strong
sense of participation. They are just viewing the website. The website
has a place for users to enter information and submit comments, which is
clearly visible to users.
|
| fig2.2 Comment area |
Quality and Relevance
The accuracy, trust and quality of the website are high. The website writes about the level of the team and specific services, which can meet user expectations.
|
| fig2.3 Specific services a |
|
| fig2.4 Specific services b |
Performance
The web page loads slowly and requires a little waiting time. The
browser compatibility of the website will respond slower on Google and
faster on Microsoft Edge.
|
| fig2.5 Browser compatibility |
Week2
During this week, we were divided into five groups in class. We were asked to use paintbrushes to make mobile interfaces to meet the specific needs of customers. We had to draw a basic model based on the requirements given by the teacher.One person from each group should act as a customer to experience his group’s website simulation.
Scenario 1: A local clothing store wants you to be responsible for a new e-commerce application.
User Needs: Consumers expect a straightforward checkout experience with clear product descriptions and photos and an easy way to browse and buy clothes online.
First let’s do some visual reference,We looked at shopping software like Taobao, Shopping.
 |
| Fig2.6Final result Week 2 (30/04/2024) |
The purchase search bar we designed should be more detailed rather than limiting the user experience. And there should be more display interfaces inside the page instead of just a restrictive search interface. We lack too much detailed content. The page layout design should be uniform and concise. When users use the app, they should be relaxed and comfortable. When designing the app layout, pay great attention to the user experience.
Week3
Our task is to select two websites among the three websites given by the teacher and conduct web design simulations. This can give us a better understanding of the website and follow the existing dimensions and dimensions of the website.
Free image:
Google Fonts link:
The first website I chose washttps://www.oceanhealthindex.org/?authuser=0
First open the website interface, right-click and select Inspect, capture the full size, and then open it with AI to set the template.
 |
| fig2.7 Website process diagram |
 |
| fig2.8 Final version of website |
The second website I chose ishttps://banditrunning.com/
I chose the futura std font as my reference. I used a metallic texture for the text in AI to make it look shiny.
 |
| fig2.9 Website process diagram |
 |
| fig3.0 Final version of website |
Week4
 |
| fig3.1 HTML |
Use HTML to introduce yourself and design your own web page
week 7
In this exercise, you 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. Choose ONE Recipe from the link below
Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
Use your creativity to make the page look appealing and interesting
Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
Use your creativity to make the page look appealing and interesting
 |
| fig3.2 |
 |
| fig3.3 process |
 |
| fig3.4 process |
 |
| fig3.5 process |
HTML:
CSS:
Feedback
week1
The homework we completed was not unified. There was no correlation between the content that everyone worked on. Users would feel confused when experiencing it. We lacked detailed content. Our website interface should have more display interfaces instead of simply search terms, so we will focus on this issue in the next assignment of making a website.
评论
发表评论