Interactive Design / Bachelor of Design in Creative Media
Task (Exercises / Task)
Table of Contents
1. Instructions
2. Lectures
3. Exercises
4. Feedbacks
5. Reflections
.png)
2. Lectures
3. Exercises
4. Feedbacks
.png)
Interactive Design ExerciseS
Instructions
Module Information Booklet
Figure 1.1 Module Information Booklet. (Week 1 22.04.2025)
Lectures
Lecture Notes
Mr Shamsul brief us about the module, exercises, projects and
software that we need to download.
Week 1 Task
Complete Exercise 1 Web Analysis
Sign Up for Figma and Netify
Download Dreamweaver
Exercises
Mr Shamsul brief us about the module, exercises, projects and
software that we need to download.
Mr Shamsul brief us about the module, exercises, projects and software that we need to download.
Week 1 Task
Complete Exercise 1 Web Analysis
Sign Up for Figma and Netify
Download Dreamweaver
Exercises
Website Analysis
Website 1: bacibacimatera
Figure 2.1 Web Analysis #Website bacibacimatera (Week 2 29/04/25).
Website Link: https://bacibacimatera.com/en/
Purpose and Goals
Bacibacimatera.com is a brand's official
website. This website represent its purpose and goals
while displaying its product with a clear introduction,
product prices, and usage instructions.
Visual Design / Layout
The colour scheme is complementary colours, with each page
featuring different complementary colour. The typography combines
sans-serif and cursive fonts.The imagery is playful and
vibrant.
Effectively Communicate with the viewer
Too many hues caused visual chaos, distracting viewers from
the core message. However, it has clear branding with the
donkey mascot and the product is well-focused with clear
language and imagery.
Functionality and Usability
The website's navigation is clean and logical, allowing users
to easily locate what they're looking for. There are UI
buttons that allow users to add things to their cart, and the
interactive elements perform well. However, certain content
feels slightly obstructed by the preceding area, which might
be enhanced for a more seamless experience.
Content Quality and Revelance
The content organisation is excellent, giving information in a
logical and coherent manner.
Website Performance
Website performance is excellent. It loads quickly and responds
nicely. It is compatible with various devices and browsers.
Conclusion
Overall, bacibacimatera.com's sharp visuals and easy
navigation create a well-organised and captivating user
experience. The site's effectiveness and clarity could be
further improved with small changes to the layout flow and
visual consistency.
(200 words)
Website 2: archi-malinstudio
Figure 2.2 Web Analysis #Website archi-malinstudio (Week 2 29/04/25).
Website Link: https://www.archi-malinstudio.com/
Purpose and Goals
This website is about architectural visualisation services. It expressed their purpose with both text and graphics. For example, the descriptions and compelling visual illustration in homepage.
Visual Design / Layout
The visual design is minimalist and classy. The colour scheme is soft and neural, resulting in a clean and refined look. The typography is modern, with serif fonts and there are high quality renderings and images showcase the studio's abilities.
Effectively Communicate with the viewer
The website communicates effectively. There are text, high-quality images and 3D models, allowing users to easily understand their work.
Functionality and Usability
Navigation appears to be straight forward and easy to use. There are interactive elements including scrollbar allowed viewers to browse and links to other page.
Content Quality and Relevance
The content organisation is relevant and well-structured. It included services, benefits, and visual examples. It is informative and easy to
explore.
Website Performance
Website performance is very well. It loads quickly, runs smoothly
and responds nicely. It is compatible with various devices and
browsers.
Improvements
It may be improved by including a navigation button informing viewers about the next stages and a language switches as some of the content is in French.
Conclusion
Overall, this website provides a clean and refined
presentation of architectural visualisation services. It has simple look but with powerful images and professional tone.
(198 words)
Website 3: axreality
Figure 2.3 Web Analysis #Website axreality (Week 2 29/04/25).
Website Link: http://axreality.com/
Purpose and Goals
axreality.com deliver its purpose which is immersive experiences using bold text, videos and their award-winning work.
Visual Design / Layout
The website uses a sleek black background with neon
gradients and white text for high contrast. The typography is
bold and clean. The layout is structured and clearly
divided with sections. It portrays as immersive, professional, and visually appealing.
Effectively Communicate with the viewer
The website communicates well. There are many videos about immersive experience allowing users to easily understand their work. Besides that, there are buttons like "Get in Touch" and "Find more" which are direct and visible.
Functionality and Usability
The website's navigation is simple and user-friendly, with a fixed top menu
and clear page sections. It allows viewers to quickly
access the studio and work with the buttons and links.
Content Quality and Relevance
The content is concise and relevant. It is compact, but once separated into several sections, it is simple to understand.
Website Performance
The website's performance is good. It loads quickly, but the interactive parts are not smooth. It is compatible with various devices and browsers.
Conclusion
axreality.com with bold visuals, clear messaging, and easy
navigation create an impressive and engaging site. Small
enhancements like more interactive previews of their work could
make it even more immersive.
(194 words)
Website 4: flower-of-the-universe
Figure 2.4 Web Analysis #Website flower-of-the-universe (Week 2 29/04/25).
Website Link: https://flower-of-the-universe.jp/
Purpose and Goals
https://flower-of-the-universe.jp/ purpose is to share the beauty and usage of flowers. Clear sections lead viewers through many varieties of flowers, making the text simple to interpret and visually soothing.
Visual Design / Layout
The website has a universe-themed background with dazzling stars, which creates an attractive and dreamlike environment. White cursive lettering is utilised consistently throughout the design, bringing elegance. The layout is well-organised and guide viewers smoothly.
Effectively Communicate with the viewer
The website communicates efficiently. There includes text and separate sections that are nicely arranged, allowing viewers to easily understand the content.
Functionality and Usability
The navigation is simple, allow users to easily browse the site. The arrangement enables for easy access to content without complication. Furthermore, there are "Read More" buttons to go to external website, giving viewers more information.
Content Quality and Relevance
The content is quite minimal and not very informative. It focuses more on giving a brief introduction and not providing detailed information.
Website Performance
The website performance is good. It loads quickly, runs smoothly and responds nicely. It is compatible with various devices and browsers.
Improvements
The website could add more written content or images that related to the content to help viewers gain better understand and there is some spelling errors.
Conclusion
Overall, The Flower of the Universe website creates a visually engaging experience with its universe-themed background, constant cursive type, structured layout and sound. The website is visually appealing and attractive.
(200 words)
Website 5: organimo
Figure 2.5 Web Analysis #Website organimo (Week 2 29/04/25).
Website Link: https://organimo.com/
Purpose and Goals
organimo.com is a brand's official website. It allows viewers to explore and interact with the products in a more dynamic way, like through an immersive experience with interactive elements and sound.
Visual Design / Layout
The visual design is stunning. The colour scheme is similar, with each page showing purple, violet, and pink. The typography uses both serif and sans-serif fonts.The images are colourful and appealing.
Effectively Communicate with the viewer
The website communicates effectively. There are text, high-quality images and immersive experience with interactive elements, allowing users to easily understand the product.
Functionality and Usability
Navigation is smooth and straight forward, with clearly labeled menus and responsive transitions that enhance user interaction. Key elements such as product categories, call-to-action buttons, and links are easily accessible.
Content Quality and Relevance
The website’s content is clear and concise. Product descriptions are informative, highlighting benefits and usage. The tone is consistent, professional, and supportive.
Website Performance
Website performance is excellent. It loads quickly, runs smoothly and responds nicely. It is compatible with various devices and browsers.
Improvements
The website could improve user experience by speeding up the scrolling process, particularly during transitions between sections.
Conclusion
Overall, the website presents a clean, visually appealing design with strong usability and relevant content. Its balanced typography, effective layout, and smooth navigation create a positive user experience.(200 words)
Website 1: bacibacimatera
Figure 2.1 Web Analysis #Website bacibacimatera (Week 2 29/04/25).
Website Link: https://bacibacimatera.com/en/
Purpose and Goals
Bacibacimatera.com is a brand's official
website. This website represent its purpose and goals
while displaying its product with a clear introduction,
product prices, and usage instructions.
Visual Design / Layout
The colour scheme is complementary colours, with each page
featuring different complementary colour. The typography combines
sans-serif and cursive fonts.The imagery is playful and
vibrant.
Effectively Communicate with the viewer
Too many hues caused visual chaos, distracting viewers from
the core message. However, it has clear branding with the
donkey mascot and the product is well-focused with clear
language and imagery.
Functionality and Usability
The website's navigation is clean and logical, allowing users
to easily locate what they're looking for. There are UI
buttons that allow users to add things to their cart, and the
interactive elements perform well. However, certain content
feels slightly obstructed by the preceding area, which might
be enhanced for a more seamless experience.
Content Quality and Revelance
The content organisation is excellent, giving information in a
logical and coherent manner.
Website Performance
Website performance is excellent. It loads quickly and responds
nicely. It is compatible with various devices and browsers.
Conclusion
Overall, bacibacimatera.com's sharp visuals and easy
navigation create a well-organised and captivating user
experience. The site's effectiveness and clarity could be
further improved with small changes to the layout flow and
visual consistency.
(200 words)
Website 2: archi-malinstudio
Figure 2.2 Web Analysis #Website archi-malinstudio (Week 2 29/04/25).
Website Link: https://www.archi-malinstudio.com/
Purpose and Goals
This website is about architectural visualisation services. It expressed their purpose with both text and graphics. For example, the descriptions and compelling visual illustration in homepage.
Visual Design / Layout
The visual design is minimalist and classy. The colour scheme is soft and neural, resulting in a clean and refined look. The typography is modern, with serif fonts and there are high quality renderings and images showcase the studio's abilities.
Effectively Communicate with the viewer
The website communicates effectively. There are text, high-quality images and 3D models, allowing users to easily understand their work.
Functionality and Usability
Navigation appears to be straight forward and easy to use. There are interactive elements including scrollbar allowed viewers to browse and links to other page.
Content Quality and Relevance
The content organisation is relevant and well-structured. It included services, benefits, and visual examples. It is informative and easy to
explore.
Website Performance
Website performance is very well. It loads quickly, runs smoothly
and responds nicely. It is compatible with various devices and
browsers.
Improvements
It may be improved by including a navigation button informing viewers about the next stages and a language switches as some of the content is in French.
Conclusion
Overall, this website provides a clean and refined
presentation of architectural visualisation services. It has simple look but with powerful images and professional tone.
(198 words)
Website 3: axreality
Figure 2.3 Web Analysis #Website axreality (Week 2 29/04/25).
Website Link: http://axreality.com/
Purpose and Goals
axreality.com deliver its purpose which is immersive experiences using bold text, videos and their award-winning work.
Visual Design / Layout
The website uses a sleek black background with neon
gradients and white text for high contrast. The typography is
bold and clean. The layout is structured and clearly
divided with sections. It portrays as immersive, professional, and visually appealing.
Effectively Communicate with the viewer
The website communicates well. There are many videos about immersive experience allowing users to easily understand their work. Besides that, there are buttons like "Get in Touch" and "Find more" which are direct and visible.
Functionality and Usability
The website's navigation is simple and user-friendly, with a fixed top menu
and clear page sections. It allows viewers to quickly
access the studio and work with the buttons and links.
Content Quality and Relevance
The content is concise and relevant. It is compact, but once separated into several sections, it is simple to understand.
Website Performance
The website's performance is good. It loads quickly, but the interactive parts are not smooth. It is compatible with various devices and browsers.
Conclusion
axreality.com with bold visuals, clear messaging, and easy
navigation create an impressive and engaging site. Small
enhancements like more interactive previews of their work could
make it even more immersive.
(194 words)
Website 4: flower-of-the-universe
Figure 2.4 Web Analysis #Website flower-of-the-universe (Week 2 29/04/25).
Website Link: https://flower-of-the-universe.jp/
Purpose and Goals
https://flower-of-the-universe.jp/ purpose is to share the beauty and usage of flowers. Clear sections lead viewers through many varieties of flowers, making the text simple to interpret and visually soothing.
Visual Design / Layout
The website has a universe-themed background with dazzling stars, which creates an attractive and dreamlike environment. White cursive lettering is utilised consistently throughout the design, bringing elegance. The layout is well-organised and guide viewers smoothly.
Effectively Communicate with the viewer
The website communicates efficiently. There includes text and separate sections that are nicely arranged, allowing viewers to easily understand the content.
Functionality and Usability
The navigation is simple, allow users to easily browse the site. The arrangement enables for easy access to content without complication. Furthermore, there are "Read More" buttons to go to external website, giving viewers more information.
Content Quality and Relevance
The content is quite minimal and not very informative. It focuses more on giving a brief introduction and not providing detailed information.
Website Performance
The website performance is good. It loads quickly, runs smoothly and responds nicely. It is compatible with various devices and browsers.
Improvements
The website could add more written content or images that related to the content to help viewers gain better understand and there is some spelling errors.
Conclusion
Overall, The Flower of the Universe website creates a visually engaging experience with its universe-themed background, constant cursive type, structured layout and sound. The website is visually appealing and attractive.
(200 words)
Website 5: organimo
Figure 2.5 Web Analysis #Website organimo (Week 2 29/04/25).
Website Link: https://organimo.com/
Purpose and Goals
organimo.com is a brand's official website. It allows viewers to explore and interact with the products in a more dynamic way, like through an immersive experience with interactive elements and sound.
Visual Design / Layout
The visual design is stunning. The colour scheme is similar, with each page showing purple, violet, and pink. The typography uses both serif and sans-serif fonts.The images are colourful and appealing.
Effectively Communicate with the viewer
The website communicates effectively. There are text, high-quality images and immersive experience with interactive elements, allowing users to easily understand the product.
Functionality and Usability
Navigation is smooth and straight forward, with clearly labeled menus and responsive transitions that enhance user interaction. Key elements such as product categories, call-to-action buttons, and links are easily accessible.
Content Quality and Relevance
The website’s content is clear and concise. Product descriptions are informative, highlighting benefits and usage. The tone is consistent, professional, and supportive.
Website Performance
Website performance is excellent. It loads quickly, runs smoothly and responds nicely. It is compatible with various devices and browsers.
Improvements
The website could improve user experience by speeding up the scrolling process, particularly during transitions between sections.
Conclusion
Overall, the website presents a clean, visually appealing design with strong usability and relevant content. Its balanced typography, effective layout, and smooth navigation create a positive user experience.(200 words)
Website 1: bacibacimatera
Figure 2.1 Web Analysis #Website bacibacimatera (Week 2 29/04/25).
Figure 2.1 Web Analysis #Website bacibacimatera (Week 2 29/04/25).
Figure 2.1 Web Analysis #Website bacibacimatera (Week 2 29/04/25).
Website Link: https://bacibacimatera.com/en/
Purpose and Goals
Bacibacimatera.com is a brand's official
website. This website represent its purpose and goals
while displaying its product with a clear introduction,
product prices, and usage instructions.
Purpose and Goals
Bacibacimatera.com is a brand's official website. This website represent its purpose and goals while displaying its product with a clear introduction, product prices, and usage instructions.
Visual Design / Layout
The colour scheme is complementary colours, with each page
featuring different complementary colour. The typography combines
sans-serif and cursive fonts.The imagery is playful and
vibrant.
The colour scheme is complementary colours, with each page featuring different complementary colour. The typography combines sans-serif and cursive fonts.The imagery is playful and vibrant.
Effectively Communicate with the viewer
Too many hues caused visual chaos, distracting viewers from
the core message. However, it has clear branding with the
donkey mascot and the product is well-focused with clear
language and imagery.
Too many hues caused visual chaos, distracting viewers from the core message. However, it has clear branding with the donkey mascot and the product is well-focused with clear language and imagery.
Functionality and Usability
The website's navigation is clean and logical, allowing users
to easily locate what they're looking for. There are UI
buttons that allow users to add things to their cart, and the
interactive elements perform well. However, certain content
feels slightly obstructed by the preceding area, which might
be enhanced for a more seamless experience.
The website's navigation is clean and logical, allowing users to easily locate what they're looking for. There are UI buttons that allow users to add things to their cart, and the interactive elements perform well. However, certain content feels slightly obstructed by the preceding area, which might be enhanced for a more seamless experience.
Content Quality and Revelance
The content organisation is excellent, giving information in a
logical and coherent manner.
The content organisation is excellent, giving information in a logical and coherent manner.
Website Performance
Website performance is excellent. It loads quickly and responds
nicely. It is compatible with various devices and browsers.
Website performance is excellent. It loads quickly and responds nicely. It is compatible with various devices and browsers.
Conclusion
Overall, bacibacimatera.com's sharp visuals and easy
navigation create a well-organised and captivating user
experience. The site's effectiveness and clarity could be
further improved with small changes to the layout flow and
visual consistency.
(200 words)
Overall, bacibacimatera.com's sharp visuals and easy navigation create a well-organised and captivating user experience. The site's effectiveness and clarity could be further improved with small changes to the layout flow and visual consistency.
(200 words)
Website 2: archi-malinstudio
Figure 2.2 Web Analysis #Website archi-malinstudio (Week 2 29/04/25).
Website Link: https://www.archi-malinstudio.com/
Purpose and Goals
This website is about architectural visualisation services. It expressed their purpose with both text and graphics. For example, the descriptions and compelling visual illustration in homepage.
This website is about architectural visualisation services. It expressed their purpose with both text and graphics. For example, the descriptions and compelling visual illustration in homepage.
Visual Design / Layout
The visual design is minimalist and classy. The colour scheme is soft and neural, resulting in a clean and refined look. The typography is modern, with serif fonts and there are high quality renderings and images showcase the studio's abilities.
The visual design is minimalist and classy. The colour scheme is soft and neural, resulting in a clean and refined look. The typography is modern, with serif fonts and there are high quality renderings and images showcase the studio's abilities.
Effectively Communicate with the viewer
The website communicates effectively. There are text, high-quality images and 3D models, allowing users to easily understand their work.
The website communicates effectively. There are text, high-quality images and 3D models, allowing users to easily understand their work.
Functionality and Usability
Navigation appears to be straight forward and easy to use. There are interactive elements including scrollbar allowed viewers to browse and links to other page.
Navigation appears to be straight forward and easy to use. There are interactive elements including scrollbar allowed viewers to browse and links to other page.
Content Quality and Relevance
The content organisation is relevant and well-structured. It included services, benefits, and visual examples. It is informative and easy to
explore.
The content organisation is relevant and well-structured. It included services, benefits, and visual examples. It is informative and easy to explore.
Website Performance
Website performance is very well. It loads quickly, runs smoothly
and responds nicely. It is compatible with various devices and
browsers.
Website performance is very well. It loads quickly, runs smoothly and responds nicely. It is compatible with various devices and browsers.
Improvements
It may be improved by including a navigation button informing viewers about the next stages and a language switches as some of the content is in French.
Conclusion
Overall, this website provides a clean and refined
presentation of architectural visualisation services. It has simple look but with powerful images and professional tone.
(198 words)
Overall, this website provides a clean and refined presentation of architectural visualisation services. It has simple look but with powerful images and professional tone.
(198 words)
Website 3: axreality
Figure 2.3 Web Analysis #Website axreality (Week 2 29/04/25).
Website Link: http://axreality.com/
Purpose and Goals
axreality.com deliver its purpose which is immersive experiences using bold text, videos and their award-winning work.
axreality.com deliver its purpose which is immersive experiences using bold text, videos and their award-winning work.
Visual Design / Layout
The website uses a sleek black background with neon
gradients and white text for high contrast. The typography is
bold and clean. The layout is structured and clearly
divided with sections. It portrays as immersive, professional, and visually appealing.
The website uses a sleek black background with neon gradients and white text for high contrast. The typography is bold and clean. The layout is structured and clearly divided with sections. It portrays as immersive, professional, and visually appealing.
Effectively Communicate with the viewer
The website communicates well. There are many videos about immersive experience allowing users to easily understand their work. Besides that, there are buttons like "Get in Touch" and "Find more" which are direct and visible.
The website communicates well. There are many videos about immersive experience allowing users to easily understand their work. Besides that, there are buttons like "Get in Touch" and "Find more" which are direct and visible.
Functionality and Usability
The website's navigation is simple and user-friendly, with a fixed top menu
and clear page sections. It allows viewers to quickly
access the studio and work with the buttons and links.
The website's navigation is simple and user-friendly, with a fixed top menu and clear page sections. It allows viewers to quickly access the studio and work with the buttons and links.
Content Quality and Relevance
The content is concise and relevant. It is compact, but once separated into several sections, it is simple to understand.
The content is concise and relevant. It is compact, but once separated into several sections, it is simple to understand.
Website Performance
The website's performance is good. It loads quickly, but the interactive parts are not smooth. It is compatible with various devices and browsers.
The website's performance is good. It loads quickly, but the interactive parts are not smooth. It is compatible with various devices and browsers.
Conclusion
axreality.com with bold visuals, clear messaging, and easy
navigation create an impressive and engaging site. Small
enhancements like more interactive previews of their work could
make it even more immersive.
(194 words)
Website 4: flower-of-the-universe
axreality.com with bold visuals, clear messaging, and easy navigation create an impressive and engaging site. Small enhancements like more interactive previews of their work could make it even more immersive.
(194 words)
Website 4: flower-of-the-universe
Website Link: https://flower-of-the-universe.jp/
Purpose and Goals
https://flower-of-the-universe.jp/ purpose is to share the beauty and usage of flowers. Clear sections lead viewers through many varieties of flowers, making the text simple to interpret and visually soothing.
https://flower-of-the-universe.jp/ purpose is to share the beauty and usage of flowers. Clear sections lead viewers through many varieties of flowers, making the text simple to interpret and visually soothing.
Visual Design / Layout
The website has a universe-themed background with dazzling stars, which creates an attractive and dreamlike environment. White cursive lettering is utilised consistently throughout the design, bringing elegance. The layout is well-organised and guide viewers smoothly.
The website has a universe-themed background with dazzling stars, which creates an attractive and dreamlike environment. White cursive lettering is utilised consistently throughout the design, bringing elegance. The layout is well-organised and guide viewers smoothly.
Effectively Communicate with the viewer
The website communicates efficiently. There includes text and separate sections that are nicely arranged, allowing viewers to easily understand the content.
The website communicates efficiently. There includes text and separate sections that are nicely arranged, allowing viewers to easily understand the content.
Functionality and Usability
The navigation is simple, allow users to easily browse the site. The arrangement enables for easy access to content without complication. Furthermore, there are "Read More" buttons to go to external website, giving viewers more information.
The navigation is simple, allow users to easily browse the site. The arrangement enables for easy access to content without complication. Furthermore, there are "Read More" buttons to go to external website, giving viewers more information.
Content Quality and Relevance
The content is quite minimal and not very informative. It focuses more on giving a brief introduction and not providing detailed information.
The content is quite minimal and not very informative. It focuses more on giving a brief introduction and not providing detailed information.
Website Performance
The website performance is good. It loads quickly, runs smoothly and responds nicely. It is compatible with various devices and browsers.
The website performance is good. It loads quickly, runs smoothly and responds nicely. It is compatible with various devices and browsers.
Improvements
Conclusion
Overall, The Flower of the Universe website creates a visually engaging experience with its universe-themed background, constant cursive type, structured layout and sound. The website is visually appealing and attractive.
(200 words)
Overall, The Flower of the Universe website creates a visually engaging experience with its universe-themed background, constant cursive type, structured layout and sound. The website is visually appealing and attractive.
(200 words)
Website 5: organimo
Figure 2.5 Web Analysis #Website organimo (Week 2 29/04/25).
Website Link: https://organimo.com/
Purpose and Goals
organimo.com is a brand's official website. It allows viewers to explore and interact with the products in a more dynamic way, like through an immersive experience with interactive elements and sound.
organimo.com is a brand's official website. It allows viewers to explore and interact with the products in a more dynamic way, like through an immersive experience with interactive elements and sound.
Visual Design / Layout
The visual design is stunning. The colour scheme is similar, with each page showing purple, violet, and pink. The typography uses both serif and sans-serif fonts.The images are colourful and appealing.
The visual design is stunning. The colour scheme is similar, with each page showing purple, violet, and pink. The typography uses both serif and sans-serif fonts.The images are colourful and appealing.
Effectively Communicate with the viewer
The website communicates effectively. There are text, high-quality images and immersive experience with interactive elements, allowing users to easily understand the product.
The website communicates effectively. There are text, high-quality images and immersive experience with interactive elements, allowing users to easily understand the product.
Functionality and Usability
Navigation is smooth and straight forward, with clearly labeled menus and responsive transitions that enhance user interaction. Key elements such as product categories, call-to-action buttons, and links are easily accessible.
Navigation is smooth and straight forward, with clearly labeled menus and responsive transitions that enhance user interaction. Key elements such as product categories, call-to-action buttons, and links are easily accessible.
Content Quality and Relevance
The website’s content is clear and concise. Product descriptions are informative, highlighting benefits and usage. The tone is consistent, professional, and supportive.
The website’s content is clear and concise. Product descriptions are informative, highlighting benefits and usage. The tone is consistent, professional, and supportive.
Website Performance
Website performance is excellent. It loads quickly, runs smoothly and responds nicely. It is compatible with various devices and browsers.
Website performance is excellent. It loads quickly, runs smoothly and responds nicely. It is compatible with various devices and browsers.
Improvements
The website could improve user experience by speeding up the scrolling process, particularly during transitions between sections.
Conclusion
(200 words)
Website Replication
Website 1: bacibacimatera
Figure 3.1 Website Replication #Website bacibacimatera (Week 3 06/05/25).1. Capture Image of Website
Website > Right click > Inspect > Run Command > Capture Full Size
2. Setting Up Artboard
Adobe Illustrator > Create new file > Web > File > Place full capture website image > Artboard size fit to artwork > Add a references layer for the image
3. Creating Content Sections (Visual elements)
Shapes
- Use pen tool and shape tool to trace out the following shapes and logo in different section
- Use eyedropper tool to colour the shapes
Website 1: bacibacimatera
Figure 3.1 Website Replication #Website bacibacimatera (Week 3 06/05/25).1. Capture Image of Website
Website > Right click > Inspect > Run Command > Capture Full Size
2. Setting Up Artboard
Adobe Illustrator > Create new file > Web > File > Place full capture website image > Artboard size fit to artwork > Add a references layer for the image
3. Creating Content Sections (Visual elements)
Shapes
- Use pen tool and shape tool to trace out the following shapes and logo in different section
- Use eyedropper tool to colour the shapes
Website 1: bacibacimatera
1. Capture Image of Website
Website > Right click > Inspect > Run Command > Capture Full Size
Adobe Illustrator > Create new file > Web > File > Place full capture website image > Artboard size fit to artwork > Add a references layer for the image
3. Creating Content Sections (Visual elements)
Shapes
- Use pen tool and shape tool to trace out the following shapes and logo in different section
- Use eyedropper tool to colour the shapes
Figure 3.2 Trace Shape with Pen Tool #Website bacibacimatera (Week 3 06/05/25).
Image
- Insert image search from browser / free image link provided by Mr Shamsul
- Adjust the colour balance / hues / brightness / saturation in Photoshop
- Adjust the gradient in Illustrator
- Use clipping mask to place the image within the shape
Figure 3.3 Clipping Mask of image and Shape #Website bacibacimatera (Week 3 06/05/25).
4. Creating Content Sections (Typography)
Type font
- Use https://www.myfonts.com/ to search similar fonts
- Adjust the leading, kerning, and placement of the text
.png)
Figure 3.5 Fonts #Website bacibacimatera (Week 3 06/05/25).
5. Export My Work
- With Reference Image: Export > Export for Screens
- Without Reference Image: Export As... > Adobe PDF / JPEG
Outcome
Figure 3.6 Outcome - JPEG #Website bacibacimatera (Week 3 06/05/25).
Website 2: archi-malinstudio
Figure 3.7 Web Replication #Website archi-malinstudio (Week 3 06/05/25).
1. Capture Image of Website
Website > Right click > Inspect > Run Command > Capture Full Size
2. Setting Up Artboard
Adobe Illustrator > Create new file > Web > File > Place full capture website image > Artboard size fit to artwork > Add a references layer for the image
3. Creating Content Sections (Visual elements)
ImageInsert image search from browser Adjust the colour balance / hues / brightness / saturation in Photoshop Adjust the gradient in Illustrator Use clipping mask to place the image within the shape
4. Creating Content Sections (Typography)
Type font
-
Use myfonts.com to search similar fonts
-
Adjust the leading, kerning, and placement of the text
.png)
Type font
- Use myfonts.com to search similar fonts
- Adjust the leading, kerning, and placement of the text
.png)
Figure 3.8 Fonts #Website archi-malinstudio (Week 3 06/05/25).
5. Export My Work
With Reference Image: Export > Export for ScreensWithout Reference Image: Export As... > Adobe PDF / JPEG
Outcome
Figure 3.9 Outcome #Website archi-malinstudio (Week 3 06/05/25).
Reflections
Experience
I enjoyed experimenting with Illustrator and Photoshop to recreate the layouts and assets. This process gave me a deeper appreciation for the amount of detail and planning that goes into professional web design.
Comments
Post a Comment