Name: Liong Xenyi (0383125)
Module: Interactive Design GCD60904
Date: 23/9/2025 - 9/10/2025 (Week 1 - Week 3)
Degree: Bachelor of Design (Honors) in Creative Media
University: Taylor's University
Module: Interactive Design GCD60904
Date: 23/9/2025 - 9/10/2025 (Week 1 - Week 3)
Degree: Bachelor of Design (Honors) in Creative Media
University: Taylor's University
Choose FIVE (5) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.
What To Have in The Analysis:
- 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, load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing each Web Analysis in not less than 200 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (headings/subheadings)
Exercise 1 - Web Analysis
Websites Content Table:
Website 1: Philosophical Foxes (Art category)
1. Purpose and Goals
The purpose of this website is to introduce what they sell - NFT pixelated foxes, with their own thoughts about philosophy and have their own personality. This website successfully attracts viewers and customers as the art-style is attractive in a minimalistic and cute way. This website specifically introduces what their foxes are in a storytelling manner, as the user scrolls through and read about what they do and what they are like. There is a link that takes the user directly to the shop.
Fig 1.1 Philosophical Foxes cover
The visual design uses a plain background to allow the foxes with a variety of colours and shapes be contrasted and stand out. The foxes are stunning and mystical, while also adding a serene atmosphere to demonstrate the philosopher's thinking mind. The pixelated art makes the website feels more virtual and adds style for any user to feel more welcomed.
The layout is simple, where the user has to only scroll downwards, as the elements move along with the scrolling. The main paragraphs of texts were accompanied with a picture, as they were placed side by side to form symmetry and balance.
Fig 1.2 PF visual design and layout
i. Colour and Typography
The colour used is a darker shade of white and a lighter shade of black - Merino and Cod Gray. Instead of using pure black and white, this softer blend of contrasted colours create a more homey feeling for the website, as the foxes already possess a variety of strong colours.
Fig 1.3 PF contrasting colours
The typography is easy to read and visually pleasing to see. The typeface colours are contrasted with the colours mentioned above. The main heading uses a pixelated font to suit their art aesthetic, followed by a subheading that is capitalised with a bullet point. This highlights the main points in each section, followed by a left-aligned paragraph. There is a single line at the top to show where the text starts while keeping it aligned and organised.
Fig 1.4 PF typography
However, for some of the headers with the pixelated font, it is hard to read those without a fill, as the outline strokes aren't thick enough to be seen clearly. It is more difficult to read it when stretched on a larger surface, which might annoy some users.
Fig 1.5 PF hard readability typography
ii. Imagery
The imagery throughout shows the different examples of the pixelated foxes, with their names labeled on top of them. The first section of the website shows multiple foxes changing to different foxes when the user scrolls. The imageries can be clearly seen without difficulty, balanced by a paragraph of texts on the other side. The pictures also alternate as user scrolls, creating a sense of movement and excitement, instead of being mundane.
Fig 1.6 PF imagery
Fig 1.7 PF imagery of different foxes
3. Functionality and Usability
The functionality is good as the website is able to execute all the elements and display the information they wanted to show. However, it might be slightly more difficult for some to use as it does not follow a standard website and does not show direct information. I, for instance, took some time to click around the first cover page before realising I had to scroll down.
i. Navigation
There is a menu bar that remains at the top of the website. It highlights which section you are in or you can easily click on one to go to. However, it disappears when you scroll down, appearing only when you scroll up. This might be annoying to navigate instead of having a reliable menu bar that stays, however, it maximises the user's peripheral vision to see more of the website.
Fig 1.8 PF menu bar
ii. Interactive Elements
There a pretty cool elements here. Instead of clicking, the user needs to scroll downwards, as the elements will reveal information with small animations. This feels more interactive rather than just passively reading information on the website, which engages any user. The small of animation of the signboard swinging adds a homey, shop ambience with the calmness it brings.
Fig 1.9 PF interactive sliding elements
Fig 1.10 PF small animation
However, sometimes it looks cool the first time, but if I want to constantly find information, it might be frustrating having to keep scrolling and being stuck on the same page as the elements play on screen again. I have to remember and find the section I specifically wanted so I could skip the scrolling of the repeated elements.
Fig 1.11 PF interactive element issue
4. Quality and Relevance
i. Accuracy
The accuracy of the information is straight to the point and helps me understand quickly. Without it, going to the shop directly will leave the user more confused. There a is a direct link to the shop website. Even told as a story, what the user wants to know about the foxes are answered and stated clearly.
Fig 1.12 PF link to the shop
Fig 1.13 PF shop website
ii. Clarity and Organisation
The introduction was clear in what they are selling and describes with an engaging vocabulary, treating their art as something alive and known, which can create a connection. The texts are organised well and aligned using the grid system. The information are balanced well with simplicity.
Fig 1.14 PF Organised layout
5. Performance
i. Load Times and Responsiveness
The file size of the website is small, resulting in lesser time for the website to load. It has a good performance rate, as all the elements loaded and worked on the website.
Fig 1.15 PF loading time
ii. Compatibility
The website is working on most devices. The website is also made for many devices to see in portrait or landscape. However, some squared-screens are hard to to see everything nicely and clearly. Some parts of the imagery are cut off, or there consists of too much white space at times.
Fig 1.16 PF on phones
Fig 1.17 PH on iPad minis
6. Conclusion
i. Strengths
The art-style and interactive elements are the selling point. I was never interested in any NFTs, but I found this by accident because it looked attractive to me. It uses simple colours for backgrounds that showcases the foxes' beauty in art. making each of them look unique. The storytelling method draws users in as a sort of entertainment or something special is about to be revealed. An introduction page for their shop is easier to navigate the wanted information first before going head empty into their online stores and getting overwhelmed.
ii. Weaknesses
Navigating through the text again will prove a little difficulty, as the elements are constantly there and the bar disappears, which might cause some frustration among users. Some might feel tricked if the user are not familiar with NFTs, or not understand the main purpose of the website, as it looks more like just a normal story.
iii. Impact of the Website
Even though many users don't buy NFTs. the impact of this website is good, as it allows people to enjoy and appreciate the art, as well as exploring the different interactive elements. As for me, I did check out their story, which looks more intimidating from where to start. However, I still continued to love the design and layout used, which left a satisfactory feeling from the website.
Website 2: LVMH Prize (Fashion category)
1. Purpose and Goals
The purpose of this website is to showcase their yearly winners from their competition to help fashion students and graduates gain experience, money and a portfolio to demonstrate their work. This website shows all their winners, judges, and people working with LVMH, along with a short summary of them and a link to their website and socials. LVMH Prize has a variety of fashion designers with great portfolios all in one place, allowing people to easily be in contact with them.
Fig 2.1 LVHM front page
2. Visual Design and Layout
The visual design is eye-catching and uses interactive elements to enhance the user experience, and not solely focus on pictures of the clothes. The design of the website is simple, using contrast and imagery to show their information. The layout is simple and well organised.
Upon clicking on a winner's page, or hovering over it, the video of their work will play on repeat in the background, constantly showing the model and the clothes. The elements are strategically placed on the sides in an alternating manner, as if creating a runway for the model to be in the center.
Fig 2.2 LVMH winner page
As for the other parts of the website, it is more simple in comparison, with people's profiles being aligned side by side, or with their information, using symmetry to create balance. The white space is well used too.
i. Colour and Typography
The colour used are simple, with white as the background and Woodsmoke as the typography. This creates a simple contrast and allows the profile and clothes pictures to be the main focus. Their logo is a red star in the middle of the other sections of information that stays at the center, creating a focal point while splitting the pages apart to become symmetrical. The red is also used for the highlighting the words on the menu bar.
Fig 2.4 LVMH colours
The typography has interactive elements on the winners' main pages. The website uses several different typefaces to show what information it is, successfully separating the header, sub-header and paragraph texts. For the winner's product name, the typeface will contrast against whatever is being played on the video, to stay readable despite the constant video behind it.
Fig 2.6 LVMH winner's product name
The word element of the winner's name also has a dragging, multiplying effect when scrolling down to see their work, creating repetition for the eyes to follow and to be focused on. This shows the importance of the name.
The description for the other winners and judges are left-aligned and uses white spacing effectively, making it comfortable to read.
However, for the 'about' page, the website uses centered aligning, which disrupts the consistency. This also creates a problem as the paragraphs are split into a sentence each, creating too many white spaces in between. This makes the eye harder to focus on reading as the flow is continuously disrupted. The words seemed too squeezed on one side of the page, not using the white space effectively.
Fig 2.8 LVMH centered alignment text
ii. Imagery
The imagery used are good, using mostly the pictures instead of other special elements. The front page effectively uses photography in a special way, taking pictures of each winner looking at each direction, with a 45 degree angle tilt each, so that movement can be made. The winners will look in the direction of where the cursor is, creating a small animation with just photography. This was the first thing that captured my attention.
Fig 2.9 LVMH winners' pictures
Upon clicking a winner, a video of their work will play on repeat in the background. Scrolling down, a video can be clicked that showcase the winner's products in full display. Further down, pictures of the winner's collections are shown in an organised stack, using the entire screen to showcase four sets of clothes at a time in either a descending or ascending order.
Fig 2.11 LVMH winner collection
Fig 2.12 LVMH winner's collection stacked
3. Functionality and Usability
The website is functionable and easy to use. There aren't too many information listed, focused on the main topic of showcasing fashion designer's portfolio.
i. Navigation
It is easy to navigate the website with a drop-down menu bar at the top left. They labelled each section clearly, as users could check out previous winners pages too. The socials and news are at the top bar, for users to navigate easily.
Fig 2.13 LVMH navigation
ii. Interactive Elements
Like stated earlier, minimal interactive elements were used, allowing photography and videography to do the work. The front page has the winners looking at the cursor, as explained under imagery.
Fig 2.14 LVMH front page interactive element
The collection pictures are stacked on white boxes that also has a smooth, dragging effect, similar to the typography for the name. When click, the boxes seem to gracefully spread out with a quick and aesthetic motion, creating more dynamic and movement for engagement.
Fig 2.15 LVMH interactive elements
4. Quality and Relevance
i. Accuracy
The website is clear in their introduction, stating their purpose and vision. The 'about' page provides sufficient information, along with the other fashion designers' information. The website stayed relevant with only promoting fashion designers.
Fig 2.16 LVMH introduction
ii. Clarity and Organisation
The information is clear and concise, without too much words flooding the paragraphs. The elements and information are well organised in a grid layout, using white space effectively.
Fig 2.17 LVMH grid layout
The winner's display page uses a 3 column layout that creates an imaginary runway, as the elements leading line direct the user's eye, placed at the sides in an alternative manner. This creates a focal point on the model in the background.
Fig 2.18 LVMH 3 columns
5. Performance
i. Load Times and Responsiveness
The load time is slow, as I have to wait for the pictures to upload when viewing all winners. The page size is high because of the amount of photos and videos in the website, having a medium performance rating.
Fig 2.19 LVMH loading time
ii. Compatibility
The website works on most devices. However, it works well on a more horizontal screen to portray the runway effect with the video playing in the background. If the screen is too small and narrow, the information and elements looks squashed, not achieving the same as on a bigger screen.
Fig 2.20 LVMH on an iPad
Fig 2.21 LVMH on a smartphone
6. Conclusion
i. Strengths
The use of creative photography and videography, placing minimal elements at the right alignment and place attracts users to this website. Even though they could have just showed their winners' collection and works, they decide to make the website more engaging and have a freedom in creating aesthetic. This draws in more users to check the fashion designers out, earning them an extra potential client.
ii. Weaknesses
However, some parts of the website do not follow a consistent format, which might disrupt the flow of the user. There are too many high quality pictures that slows down the website's performance. The website design is mainly established with those who have a computer or a wider screen.
iii. Impact of the Website
The impact of the website is great as people who usually don't see fashion blogs will have a higher chance of viewing this website as it looks aesthetically pleasing and creative. It is easy to navigate information and find the fashion designer of interest.
Website 3 - Liberator Film Services (Entertainment category)
1. Purpose and Goals
The goal of this website is to provide information of the theatre films Liberator Film Services releases. It gives a list of their films with the trailer, synopsis, details and cast members shown. They provided their socials for contact, and it is a rather simple and direct website.
Fig 3.1 Liberator front page
2. Visual Design and Layout
The visual design is simple, with a black background that allows the colourful theatre pictures to become the center of attention. There are not too many elements, just the necessary information and imagery needed to show each theatre film's details. The layout is neat and organised. The top half of the page for 'our films' is a slideshow of the pictures from each film.
Fig 3.2 Liberator film page
i. Colour and Typography
The colour uses is a simple contrast of white and black. The white typography is contrasted on the black background. The colour is standard and plain, allowing users to focus on the main pictures of each film instead.
Fig 3.3 LFS colours
The website uses different typefaces to show the hierarchy of information. The logo uses two main typefaces, with the main name being bolded to show its importance.
Fig 3.4 LFS logo
The headings are capitalised with a bigger typeface to show its section. The characters names are italicised below each performer's name, separating the information with italics. The typeface aren't coloured or underlined, but uses capitalisation and italics to emphasis the difference.
Fig 3.5 LFS typeface
An issue I faced though, is that their links are not underlined in the theatre film pages. Users have a harder time trying to decipher whether it is a link by hovering over each word, which could lead in left out information or frustration.
ii. Imagery
The imagery is simple, showing a gallery of each theatre's pictures and artwork, as it expands and allows users to click and view next. The top banner that is half the page showcases pictures in a slideshow.
Fig 3.6 LFS theatre film's images
Fig 3.7 LFS picture banner
3. Functionality and Usability
The website is a standard website, showing the information directly with simplicity and no special elements.
i. Navigation
The menu bar remains at the top of the page constantly, with bolded labelling of each section. It is easy to find the necessary information, while navigating through the theatre films section. Because the films aren't that many, there is no search bar or filter to sort them out.
Fig 3.8 LFS menu bar
ii. Interactive Elements
There are no special or over-the-top elements displayed, as only the buttons, videos and photos being the elements in this website. There is a trailer for each film - when hovering the theatre choice, there is a button to click, or when in the page of said theatre. There are photos displayed to give a feeling of how each piece looks and is like.
Fig 3.9 LFS trailer of Next to Normal
Fig 3.10 LFS interactive element of Titanic the Musical
4. Quality and Relevance
i. Accuracy
The information for each theatre film is to the point with the synopsis and cast members details. The 'about us' page is short and to the point. This website only fills in the necessary information and stays relevant.
However, there is not date of when the films were released, and any recommendation of where to watch them. Those are important to note as not everyone (like me) will know these important details. It is inconvenient to search it again on the internet.
Fig 3.11 LFS theatre film details
ii. Clarity and Organisation
The information is organised well with a grid system. The banner is placed at the top, with the information below placed at a 3:1 quarter ratio. The information is balanced well with the long list of cast members in a list. When placing the theatre films side by side, it is organised symmetrically, easy for the eyes to flow from one piece to another.
Fig 3.12 LFS grid system
5. Performance
i. Load Times and Responsiveness
The load time is slightly slower than the first website, but still fast nevertheless. During loading time, the screen is black with the website's logo placed in the middle. The page size is small, as it is not overloaded with pictures or elements.
Fig 3.13 LFS response time
ii. Compatibility
As the website is simple, the layout will change and adapt to the devices being used. However the landscape pictures used in the banners and main page can't be viewed properly, as they are cut off.
Fig 3.14 LFS on a smart phone
Fig 3.15 LFS on a narrow phone
Fig 3.16 LFS on an iPad
6. Conclusion
i. Strengths
The website is simple and direct, as the standard website only focuses on the information provided to all users. It is also aesthetically pleasing with the chosen typefaces against a black background, along with the colourful, artistic pictures showing its lively performances. The focus is good and users can quickly gain information. It is also good that they used less interactive elements as that might be too overwhelming with the variety of photos with action in them.
ii. Weaknesses
There are some information that wasn't clearly stated. The landscape pictures will look bad on narrow or square smart phones as there aren't much space. The website might be too simple and plain to attract users.
iii. Impact of the Website
Overall, the website is good, as the information is well-directed and to the point, using simplicity as its main tool and casting the pictures as the main elements of attraction. Many users can navigate easily on this website with efficiency.
Website 4: Northlandscapes (Photography category)
1. Purpose and Goals
Northlandscapes is a photography website that promotes the hidden beauty of nature's landscapes, specialising in abstract landscapes of northern latitudes. The website displays the numerous artistic photographs while also selling the photos in various forms. There are also services provided and commissions can be taken. The photographs are focused more on unique and extraordinary in mundane nature pictures, making a masterpiece out of this.
Fig 4.1 Northlandscapes front page
2. Visual Design and Layout
The visual design is fairly simple, with a white background and black text. The main attraction are the photographs on display, with the details next to the photos, taking only a quarter on the side. The layout is simple and organised, where the pictures are arranged neatly where it is easy to scroll and see them.
Fig 4.2 NLS Photographs
i. Colour and Typography
The primary colours are white and black, standard colours that don't draw too much attention, so that it can be reverted to the photographs itself. The colours of the photographs have a big range, mostly looking mystical and surreal in nature.
The typography is simple too, with the heading or names of the photographs are big, the sub-heading smaller, capitalised and bolded, and the paragraph a standard, left-aligned text. It doesn't draw too much attention but is direct with a summary and important information. Links are also coloured and underlined to indicate as such.
ii. Imagery
The imagery of photography and videography are well organised columns when looking for the collections or a specific place. Both varieties are well shot, beautiful and clear to the user, as they both provide different views of a specific place.
Fig 4.3 NLS photography
Fig 4.3 NLS videography
When clicking the specific place. it will show the pictures in a column, where the user has to scroll down to see all the pictures. It is good that is big and it ensures that the user will see all the pictures. However, the downside is that some pictures are too big which does not fit the screen size, and thus cannot see the whole picture at once. It is also tedious to continue scrolling, when generally, an easier option is to allow the user to click onto the next picture - a gallery.
Fig 4.4 NLS imagery
3. Functionality and Usability
The website has clear navigation and labelling, ensuring the usability is good and easy. Every link and clicks work in the website and has a good functionality overall.
i. Navigation
The navigation menu bar stays at the top constantly. The contents are labelled neatly, with a dash separating the section, along with the size and colour of the typeface. Clicking the logo of the website will lead the user to the home page.
Fig 4.5 NLS navigation
ii. Interactive Elements
The interactive elements are limited, only featuring videos and photographs mostly, with easy to click buttons. A cool interactive element is displayed on the past works page, where clicking on the item that has the photography design will do a small animation before bringing the user to the design page for that product.
Fig 4.6 NLS interactive elements
Fig 4.7 NLS past works
4. Quality and Relevance
i. Accuracy
The information is accurate and well organised. However, there are 3 different websites altogether, which might be confusing. But it does separate the different products people would like to see such as viewing the photographs on display, purchasing the artwork or viewing the different collections. It is a big production, and looking through each website and page is time consuming.
The designer, however, provided his information, vision and business of taking these photographs. It is clear and concise, without long body of texts. Many references and links are provided for extra information, citing websites and articles.
Fig 4.8 NLS information
ii. Clarity and Organisation
The information and elements are organised neatly. As stated in imagery, they are placed into different columns and rows depending on the page and number of photographs. They align with the grid layout and is easy for the eye to flow from one photography to the other.
Fig 4.9 NLS grid layout
5. Performance
i. Load Times and Responsiveness
The load time is quite fast for a website that is massive compared to the others. It makes sense as this website's purpose is to display its finest high quality photos. With the website not being able to fully show the best quality of the numerous pictures, the performance rating is medium.
Fig 4.10 NLS performance
ii. Compatibility
The pictures reduced to fit to the screen size of the device, with the layout such as the photos' description being moved to the bottom for narrower smart phone screens. This is good for all viewers to be able to view the beautiful photographs on all devices.
Fig 4.11 NLS on smart phones
Fig 4.12 on iPad
Fig 4.13 on foldable smart phone
6. Conclusion
i. Strengths
The website focuses solely on its photographs, videos and products with simplicity, not adding overwhelming or unnecessary elements. The website is divided into many sections with good organisation, allowing the user to view more of its work produced. It has a good description for each place of photos. There are many external links provided for more services or for extra information, with clear labelling. Because of its simple layout and design, it can be viewed in all devices, as the photos will adapt to the screen size.
ii. Weaknesses
There might be too many websites which makes it a little overwhelming with too much information for new users. The photos sometimes might not be able to see the full thing on a laptop screen as it needs to be scrolled down. Scrolling a lot can be easy to loose reference as to which is what picture.
iii. Impact of the Website
It is a good and easy to navigate website that sticks to the main point of showing photography and videography. The quality and story behind these pictures are the main attraction for users. There are many that can be viewed, and it provides different services for users, which is versatile.
Website 5: Ulysses Syndrome (Mental Issue Awareness category)
1. Purpose and Goals
The purpose of this website is to creatively inform people about Ulysses Syndrome or Immigrant syndrome, a reaction to the stress of moving away to another country and facing its consequences of homesickness and adapting to another culture. Instead of a standard website, this person communicated the information with visuals and interactive elements.
Fig 5.1 Ulysses syndrome front page
2. Visual Design and Layout
The website has a good blend of photoshopping imagery together, using colours of red and blue as a filter that layouts the website creatively. There is a combination of pictures in the background, moving elements when the page is scrolled down, with information highlighted of black texts highlighted in white. The layout is divided into three columns, the sides having a wider width compared to the middle, creating an imaginary path with the leading lines. The information accompanied with the imagery are fairly organised.
Fig 5.2 US visual design
i. Colour and Typography
The website is filled with different images and dull colours, but the two prominent colours used are red and blue, as a sort of filter that blends with the background images. The colours also act as a boxes to separate that section of information so that the website has stylistic organisation. The type of red and blue isn't the most accurate because they act as filters, but I tried to get to the most concentrated brightest part of the image.
This choice of colours can be interpreted differently: acting like police sirens that feels like they are constantly in danger, a futuristic dystopian accompanied with the maps and texts as elements in the background, or just a stylistic choice to choose contrasting colours that pops out, like some sort of 3D aesthetic.
Fig 5.3 US filter colours
The typography is consistent and uses mainly two typefaces. The colour used are black bean texts on a mercury white highlight for the paragraphs, and tamarillo red highlight with mercury white text as a subheading. The tamarillo red is also used to highlight keywords in the headings. The words on the menu bar or on elements are capitalised but remain smaller than headings or sub-headings. The words are clear for reading. Some parts like the 'Ulysses syndrome' below uses a fading effect on the typography to add style.
Fig 5.4 US typography
This typography cuts out the space on the red filter and uses the background as a fill for the heading.
Fig 5.5 US typography heading
Fig 5.5 US typography colours
The choice to highlight the paragraph of texts is cool, as it suits a scrapbook design, feeding into the context of missing home and having a memory book. However, in my opinion, some of the texts are not kerned well, leaving large amount of ragging on the right side of the paragraph, making it look messy and not as aesthetically pleasing to see. It would be better if it was kerned better, or use a standardised white box to use as a background to hold the text.
Fig 5.6 US white highlighted words
This is my opinion too, but I do not like the typeface chosen for the body paragraphs. The heading typeface is a good and bolded choice, however, the body paragraph does not match the aesthetic as a more normal typeface. It looks like the person who designed it didn't really care much about choosing a more aesthetic and proper typeface for it.
Fig 5.7 US typefaces
ii. Imagery
The designer has stated that this is not for commercial purpose but a creative one, and has listed a resource page for the pictures she used. I checked the picture resources, and some were not listed, confirming that it is AI generated. The uncanny lighting and some parts (hands) were wrong gave it away. I do not support the use of AI to make a final product, but since this is a not for commercialisation, I can look excuse it for this exercise. Finding the exact picture with the right lighting can be difficult.
The pictures are composed in an artful way, using the rule of thirds to compose the elements to balance each other out. The background has elements such as coordinates or a bunch of texts with highlighted keywords, blending with the red or blue filters. Using all these elements together creates an interesting imagery with a cooler vibe that attracts the user to read it through. Even though it is to inform people about Ulysses syndrome, the creator took the liberty to explore the in artistic different ways.
Fig 5.8 US imagery
Fig 5.9 US moving imagery
3. Functionality and Usability
The website has a small amount of content, which makes it direct to navigate and go through. It stays on one page where the user has to scroll down. The elements loaded and could work well. However, as the website explores on creativity, some users might find it uncomfortable to read as it does not follow a straightforward layout.
i. Navigation
There is a menu bar that stays on the left side constantly, labelling each section that could bring the user there immediately. There is no other pages, so it is easier to navigate all information on one page. However, the words are sideways, which might be hard for some users to turn their heads constantly to see.
Fig 5.10 US navigation
ii. Interactive Elements
There are interactive elements such as the suitcase or shelf. The suitcase opens when the user scrolls down, using short animations to move the pictures inside to outside, revealing the other items inside. The movement is constant when scrolling.
Fig 5.11 US interactive elements
The last section has a shelf where the user can drag the items and rearrange it on the shelf. This is a small fun activity for the user at the end.
Fig 5.12 US interactive shelf
4. Quality and Relevance
i. Accuracy
The information is direct towards the topic of Ulysses syndrome, explaining what it is and why it happens. It also gives a short summary, along with examples here and there. For a mental health issue, the information given is rather short and not enough. However, the person was focused on exploring creative areas rather than providing more information.
ii. Clarity and Organisation
The information is clearly organised with headings, and summarises the points rather than dump a large amount of text. The short points fit the atmosphere of the website, as the it was not made for reading large texts.
The website is separated to three columns, with the side columns' width slightly larger than the middle column. This is indicated with the red and blue filters, some alternating or joint together from another section.
Fig 5.13 US organisation
5. Performance
i. Load Times and Responsiveness
The load time is pretty fast, even though the file size is huge because of the many elements added. It has a good performance rating. All the elements presented were responsive.
Fig 5.14 US performance
ii. Compatibility
This website adapts to any devices' screen, as the elements all fit into the screen. However, the background landscape pictures are cut off, also removing the coloured layout as there isn't much space. This works best on a landscape screen.
Fig 5.15 US on tablets
Fig 5.16 US on smart phones
6. Conclusion
i. Strengths
This website has experimented well with using photoshop, imagery and interactive elements to create this artistic piece. It draws users in as it is attractive and interesting, straying far from a typical website. This allows more users to click and read through the information as they are engaged with the elements.
ii. Weaknesses
The good imagery is paired with a not so strong typography, as it might look unattractive. As some images are made from AI, the website should have stated as a disclaimer. The information on bringing awareness to a syndrome might not be enough, and should cite or provide a link to an article for users to read more. Not all would appreciate this aesthetic, as some might find it difficult to read with too much elements and flashy colours.
iii. Impact of the Website
Overall, the website is good for a creative website while at the same time providing awareness for a Ulysses syndrome. It draws users in with the artistic choices and interactive elements. It is simple and easy to remember with the clear headings and bulleted points.
Comments
Post a Comment