INTERACTIVE DESIGN - EXERCISE
22/4/25 (Week 1 )
SUN YUTONG (0377440)
Interactive Design / Bachelor of Design (Honours) in Creative Media
Exercises 1&2
JUMP LINK
INSTRUCTIONS
EXERCISE 1 - WEBSITE ANALYSIS
I selected 5 websites for analysis:
Website 1: Sgrappa
Purpose and objectives of the website:
The homepage of the website shows the brand and signature drinks they want
to promote through a picture of a cup of coffee. Through a very artistic
visual experience, the uniqueness of their brand is reflected, giving people
an artistic and Italian feeling.
Visual design and layout:
Visual design: In terms of visual design, the color scheme is mostly
black and white, giving people a simple and atmospheric visual
experience.
The website theme is mostly composed of elements such as plaster sculptures,
marble, coffee beans, etc., combining Italian retro and modern, giving
people a strong sense of art.
The fonts used on the website are mostly black and bold, which better emphasizes and promotes the brand and related drinks.
Layout: The website is mostly combined with exquisite pictures, giving people a strong visual impact. As the mouse drops down, different drinks will be presented for promotion. In the page, there are different floating elements that can interact with users, and the details are smooth and natural.
The fonts used on the website are mostly black and bold, which better emphasizes and promotes the brand and related drinks.
Layout: The website is mostly combined with exquisite pictures, giving people a strong visual impact. As the mouse drops down, different drinks will be presented for promotion. In the page, there are different floating elements that can interact with users, and the details are smooth and natural.
The navigation bar of the website is in the upper right corner of the
website, and the icons are small and simple, which is in line with the style
of this website.
Functionality and usability：
Navigation: The navigation bar in the upper right corner has the
function of switching languages, which is convenient for users to read the
website. In the navigation bar, there is also SHOP, which is more convenient
for users to understand the products on the website.
Different photos on different pages of the homepage correspond to their
respective products. As the mouse is pulled down, there is a button at the
bottom to jump the web page, showing all the products on the website, which
is convenient for users to choose and buy the products they are interested
in.
Interactive elements: The interactive elements in the website are
smooth and clear, without lag, which can enhance the fun of users when using
the website.
Content quality and relevance:
In terms of content, the website has relatively few words, mostly
descriptions of products, including the price, name, weight, etc. of the
products, which are very relevant to the content that the website wants to
promote.
Purchase page:
Website performance:
Performance: The page responds smoothly when used, and the animation
interaction will not be stuck.
Device compatibility: The website can be adapted to desktop and
mobile devices.
Improvements/Suggestions:
In the product introduction content, you can further introduce the promoted
products to attract users to buy, and strengthen the information conveyed on
the homepage.
Website 2: L'Atelier BNP Paribas
Purpose and objectives of the website:
The purpose of the website is to explore topics such as virtual economy,
digital identity, and social mobility through a research article. The target
users of the website are people who are interested in the new digital
economy and the future society.
Visual design and layout:
Visual design: The website uses Generative Dots in visual design to
convey a sense of the future and echo the content of the website. As the
mouse is pulled down, the dynamic particles show different scenes, which
increases the user's visual immersion. Under different content, the
corresponding particle scene will also be related to the content, which is
convenient for users to understand the content of the article.
The color matching of the website is advanced and futuristic.
The website font has dynamic effects and uses sans serif fonts, which is
suitable for the overall website style.
Layout: Use large font titles and paragraph-style text, and there are
links in related content for further reading and understanding.
Functionality and usability:
Navigation: Articles are classified by content to facilitate reading.
The website is compatible with desktop and mobile devices, and scrolls
smoothly.
Interactive elements: The website has mouse hover, and the switching of
the entire dynamic particles is smooth. The user's visual experience is very
immersive, very three-dimensional and futuristic.
Content quality and relevance:
Content quality: The content quality is highly researched, and the content
of the article is carefully expressed and research-based. The supplementary
content is also very comprehensive. The article content has a timeline, etc.
to facilitate the understanding of the article.
Website performance:
The website loads quickly, the page changes clearly, and the pictures are
clear. Adaptable to desktop and mobile terminals.
Improvement suggestions:
The website can enhance the interactivity with users and make it more
interesting.
Website 3: Teletech.events
Website link: https://www.teletech.events/
Purpose and objectives of the website:
The purpose of the website is to promote the brand image of Teletech,
including Techno music activities and peripheral clothing.
The target users are those who love music festivals and like Teletech.
Visual design and layout:
Visual design: The style of the website is mostly dark, and the
elements used are very cool and pixelated, which is very suitable for the
overall website style, and it is also matched with flashing lights.
Different pages of the website can interact with the mouse. The colors are
mostly black and white, and neon colors are also added to the background,
which is in line with the atmosphere of the entire music festival.
The website font is a pixelated font, and the font will keep flashing. The
dynamic sans serif font emphasizes power and rhythm.
Layout: The upper right corner is the navigation bar of the website,
which includes indexes, activities, clothing, archives, members, music and
small games on the website.
Activity page:
Game page:
Functionality and usability:
Navigation: The top menu in the upper right corner has sections:
Events / Apparel / Archive / About / Label, etc. It is a good classification
website and helps users understand the website. The website also includes a
game interaction section to attract user participation and increase the
interaction and fun of the website. It also includes an email/SMS
subscription module.
Content quality and relevance:
The copy is clear and well conveys the content that needs to be expressed.
The website also contains many pictures in different modules to better
understand the activities, clothing, people, music, etc.
Website performance:
The website loads quickly, the pictures are clear and the gaming experience
is also very good.
Improvements/Suggestions:
I think it lacks detailed introduction of the performers and relevant
performance schedule. The ticket purchase area could be more obvious and you
need to find it when you want to buy tickets when you use it for the first
time.
Website 4：Saisei
Purpose and objectives of the website:
Purpose: Saisei shows how architecture can have a positive impact on
the environment, integrating Japanese philosophy with sustainable
development concepts.
Target audience: Design-related people interested in designing
sustainable buildings, Japanese aesthetics, and modern design.
Visual design and layout:
Visual design: The overall style of the website is simple and
elegant, and the elements used are mostly pictures of flowers and plants,
creating a peaceful and harmonious atmosphere, which can enhance the visual
appeal of the page and the information conveyed.
The color is light brown as the background, and the overall tone is
relatively elegant and very suitable for the overall website style, which
can also highlight the text content well.
Layout: In terms of typesetting and layout, each theme is separated,
which looks clear and concise.
Functionality and usability:
Navigation: The navigation in the upper right corner can help users
select the part they want to know. In terms of interaction, scrolling the
page is very smooth, and the user experience is very good.
Content Quality and Relevance:
Content Structure: The page is organized around four core sustainable
themes:
- Water Conservation (Mizu no Setsuyaku): Emphasis on rainwater collection and greywater recycling systems, reflecting respect for water resources.
- Energy Efficiency (Mottainai): Advocate not wasting resources, adopt smart systems such as solar and geothermal energy.
- Sustainable Materials (Shizen Sozai no Bi): Promote the natural beauty and reuse of materials, reflecting the wabi-sabi aesthetic.
- Biophilic Design (Shizen to no Chōwa): Incorporating natural elements such as greenery, natural light and air circulation to promote harmonious coexistence between people and nature.
Relevance: The overall content of the article is related to design
and sustainability, and is highly relevant to the website theme.
Website Performance:
The page scrolls smoothly and the website-related images are clear.
Both desktop and mobile devices are compatible.
Improvements/Suggestions:
I think the website font can be a serif font, which is more suitable for the
overall style.
On the introduction page, the numbers on pages 1 and 2 are wrong and need to
be modified.
Website 5：Marseille by La Phase 5
Website link: https://marseille.laphase5.com/en
Purpose and objectives of the website:
Purpose: The purpose of the website is to showcase the culture and
landscape of the city of Marseille
Target user: People who are interested in the city of Marseille.
Visual design and layout:
Visual design: 3D modeling is used on the webpage to better show the
overall picture of Marseille and the landscapes that need to be displayed.
The overall style is simple and easy to understand, and users can quickly
understand the information they need.
Layout: The anchor points on the homepage map can be selected on the
layout, and then they will jump to the relevant page, where users can
further understand the information.
Functionality and usability:
Navigation: Users can click on the punctuation points on the homepage
map to make a selection
Interaction: The height of the view displayed can be different as the
mouse is scrolled, and different map locations can be displayed as the mouse
is dragged. The user interaction is very high. After selecting a location, a
360-degree panoramic view of the location will be displayed.
Content quality and relevance:
The content is a number of landmarks and featured locations in Marseille,
each with a brief description and panoramic images.
Website performance:
There are 3D modeling and panoramic images, but the website is still very
smooth to use.
Both desktop and mobile are compatible.
Improvements/Suggestions:
The website has some lags when used on a mobile phone, and the visual clarity
of the entire website is not that clear. The visual presentation effect on the
mobile terminal can be better improved.
EXERCISE 2 - Web Replication
PROCESS:
Website 1 : Saisei
Website copy Google Drive: Website 1
Step 1: Set up your artboard
I started by opening Adobe Illustrator and creating a new document. I made
sure it was the same size as my screenshot of the website.
Step 2: Create your title
I went to Google Fonts and chose a font that was similar to the original
title. I then used T to type the text.
Fig 2.1 Title font selection
Fig 2.2 Text font selection
Step 3: Design your homepage
I drew a large rectangle for the main banner area, matching the background
color, and inserted the background image I picked from the website.
Fig 2.3 Picture collection process
Step 4: Create your content
Using the Type Tool, I added text boxes for the paragraphs and headings,
using guides to symmetric the boxes to match the original website.
Fig 2.4 Process diagram
Step 5: Final adjustments
I used the Eyedropper Tool to adjust the colors to match the original
website. I checked the details of the webpage to ensure consistency.
Step 6: Export your work
Finally, I exported my design by going to File > Export > Export As
and selecting the desired file format.
FINAL WEB REPLICATION 1
Website 2 : Teletech.events
Website copy Google Drive: Website 2
Step 1: Set up your artboard
I started by opening Adobe Illustrator and creating a new document. I made
sure it was the same size as my screenshot of the website.
Step 2: Create a title
I went to Google Fonts and chose a font that was similar to the original
title. I then used T to type the text.
Fig 3.1 Text font selection
Fig 3.2 Title font selection
Step 3: Design the homepage
I created the website logo for the main banner area, used 3D effects on the
selection effect, and inserted the background image selected from the
website.
Step 4: Create the content
Using the Type tool, I added text boxes for the paragraphs and titles. To
make the text boxes the same as the original website, I used guides to make
them symmetrical and inserted the background image selected from the
website.
Step 5: Final adjustments
I used the Eyedropper Tool to adjust the colors to match the original
website. I checked the details of the web page to ensure consistency.
Step 6: Export my work
Finally, I exported my design by going to File > Export > Export As
and selecting the desired file format.
FINAL WEB REPLICATION 2
FEEDBACK
WEEK 1: In the first week, the gentleman introduced us to what we
need to do in this module, then he showed us different websites in the
website, told us how to analyze the website, and let us choose 5 websites that
we like.
WEEK 2: This week, Sir introduced the complete features to us and
asked us to work in groups to improve the Taylor's app and give comments.
WEEK 3: This week, Sir analyzed the shortcomings of two websites
and asked us to choose a poor website.
REFLECTION
When I finished this exercise, I learned how to analyze a website. This was my
first time analyzing a website, and it was a little difficult for me to
analyze it, but I learned a lot of advantages of the website when I finished
this exercise. When I finished copying the website, I thought this exercise
was very interesting and I could experience how to make a website.
Comments
Post a Comment