GCD60904 / Interactive Design / Bachelor of Design ( Hons ) in Creative Media
/ Taylor's University
MIB BOOKLET:
EXERCISE 1
Web Analysis (Week 1-Week2)
In this exercise, we need to select five web pages from the four websites
given to me by the teacher for analysis. We should pay attention to the
design, layout, content and functions of the web pages. So as to determine
the advantages and disadvantages of the web page and consider how it affects
the user experience.
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.
We got some links to find the websites we needed：
Website 1
Website 2
Website 3
Website 4
After checking all the websites, I selected five websites for relevant
analysis：
Links to the Site 1
Links to the Site 2
Links to the Site 3
Links to the Site 4
Links to the Site 5
sites 1:The blue Desert
This website unfolds in the order of stories. I think it effectively conveys
the information that users need. The purpose is to tell us through stories
how to save water, electricity, etc., and also introduce relevant knowledge.
Make users aware of the importance of this aspect.
In terms of visual design, larger themes have a stronger recognition effect.
The effect of entering through the clouds was created, providing a sense of
mystery. The color changes from cool tones to warm tones, mainly blue and
red. The font is relatively uniform and has a strong sense of design. The
picture is mainly composed of the scenery and things encountered during the
unfolding of the story, which can express the theme very well.
Fig 1.1
- Functionality and usability：
This website has a relatively fast loading speed and a rather novel mouse
style. There is a corresponding progress bar on the right side of the web
page, which shows users the things they want to know in the form of dialog
boxes. When running different pages, there is a navigation next to them.
Fig 1.2
- Content quality and performance：
I think this webpage has a relatively high clarity and strong organization.
The content is not very rich, but the way it is presented is rather novel.
Browsing can be conducted using different devices.
site 2:Meet us at the edge
The opening design of this webpage is very attractive and can be changed
with the mouse. The title is rather broad, but the main content cannot be
accurately interpreted through it. The main purpose is to introduce their
team and the entire design process.
In terms of color, white and black are the main tones. The image enters in a
swirling manner, giving people a strong visual impact. The font used is
white and the image gives people a strong impact.
Fig 1.3
- Functionality and usability：
You can enter the page by swiping. It mainly describes the team and the
research project, but the color is black and there are no picture
descriptions. The content is relatively simple. The page loads very quickly
and there is a special effect when you slide the mouse. This page is
suitable for computers. There is a smaller navigation in the upper left
corner, which is not very conspicuous.
Fig 1.4
Fig 1.5
- Content quality and performance：
There will be relevant redirect links in the character introduction
section, and the speed is quite fast. I think this is very good. But the
problem is that the color is too monotonous and the content is not rich
enough. The website loads very quickly and can also be browsed using
different devices.
site 3:Your date runs the world
The content that the website wants us to understand should be fully
expressed in the title, effectively conveying the content to users. The
purpose is to talk about the process of data operation. Through my habits
and preferences, I can create a navigation that belongs to me.
In terms of visual design, the colors are relatively rich, the forms of
font changes are diverse, the layout structure is relatively comfortable,
the image is a dynamic effect of a person, and the movements are
relatively smooth.
Fig 1.6
- Functionality and usability：
The page loading speed is relatively fast, the navigation position is quite
obvious, and the jump speed is very fast. When scrolling the mouse on
different pages, the dynamic effect of the picture follows.
- The quality and relevance of the content：
The quality of this website is good, the content is relatively complete, the
analysis is relatively accurate, and there are many interesting designs
beside the page. The display progress and the accuracy of the text are
relatively high, and the picture is very clear.
Fig 1.7
The loading time is relatively short and it can be opened and browsed on
different devices. At the end of the page, there is also a place where
questions can be answered and more common questions are designed. I think
this design is still very necessary.
Site 4:cosmos studio
This page mainly introduces the elements from the universe. During the page
loading process, it is loaded in the shape of a dial, effectively conveying
relevant information to users. The purpose is to introduce the relevant
websites designed by the entire team and the production process.
Fig 1.9
The colors are mainly black and white, giving people a sense of technology.
The font styles are quite diverse and the images are also rich. However, I
feel that there are more dynamic effects. Although it feels very high-end,
it brings users a rather uncomfortable experience.
Fig 1.10
- unctionality and usability：
The navigation forms are quite diverse, showing the time, the current page
location, and the user's location. The form content is quite rich, and the
web page has relevant prompt boxes and pop-up Windows to display the more
important ones. There are also a variety of photos, and different ones can
be viewed by scrolling.
Fig1.11
- Content quality and performance：
The content of the web page is relatively accurate, the link jumps are
relatively fast, and there are no errors. The page clarity is very high, and
the photo clarity is also very high. The organization between the modules is
very strong. The website has strong performance and the page loading speed
is also very fast.
site 5: World of Volvo: Every Body
This page mainly introduces the new activity area in the center of
Gothenburg. "Every Body" is an interactive installation, serving as an
introduction experience of the Volvo exhibition on the mobile future. The
goal is very strong, but the title is not eye-catching enough.
Fig1.12
In terms of visual design and layout, the color background is mainly white,
which is a bit monotonous. However, the photo colors are quite rich, so it
feels okay. Regarding the font, I personally think it's used rather simply,
basically with only one font. In terms of images, photos are used more
frequently, and there's also a video, which enriches the web page content.
But one may also feel that the page is a bit chaotic.
Fig 1.13
- unctionality and usability：
In terms of functionality and usability, I still feel there are some
deficiencies. There is no obvious navigation design. There are relevant
dynamic effects when you first enter the page, but there are very few inside
the page. The video playback and pause are very good.
Fig 1.14
Fig 1.15
- Content quality and performance：
The quality of this website is still very good and the clarity is quite
good. However, it lacks jumps and related interactions, and the loading time
is still very short. This aspect has been handled very well. You can also
browse it by typing on a computer.
Fig 1.16
Exercise 2：
Copy the website
In this exercise, we need to select two websites that have been analyzed
before to copy the web pages, so as to better understand its structure.
The website I chose：
Requirement：
- The width and height should follow the size of the web page.
- It can be used Illustrator or Photoshop.
- Images and ICONS can be inconsistent.
- Attention should be paid to the layout, type and typesetting.
Select website 1：
In the practical class, the gentleman showed us how to extract the
complete page. First, right-click the mouse - Website - Check - Click the
three ICONS - Run the command - Enter the content -Screenshot.
After that, I opened the file with Adobe illustrator, adjusted the canvas
size and made a copy.
Figure 4.1 Webpage progress May 3, 2025
Select website 1：
Because the photos on the website are difficult to save, I searched for
relevant photos online and replaced them. I changed the white questions in
the questions to black to facilitate clear identification.
Figure 4.2 Webpage progress May 3, 2025
Comments
Post a Comment