Interactive Design / Exercises
28.08.23 - 18.09.23 / Week 01 - Week 04
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Interactive Design (GCD60904) / Section 1
Bachelor of Design (Hons) in Creative Media
Interactive Design (GCD60904) / Section 1
LECTURES
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
INSTRUCTIONS
PRACTICAL
Web Analysis
Week 1 | Exercise 1 - Web Analysis
For the first exercise of interactive design, we are to choose 2 websites from the link provided and review the website that we have selected carefully, taking note of its design, layout, content, and functionality. Then, we are to identify the strengths and weaknesses of the website, and consider how they impact the user experience- writing a brief report in not more than 500 words summarizing our findings and recommendations.
The deliverables are as follows:
- 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.
Detailed below, I have written a longer analysis for both websites while the
submission above encompasses a summarized version of my thoughts and findings.
Website 1 - Little Red Riding Hoods Quest
1. Website Performance:
Fig 1.0 Loading Screen
The first website I chose to take a look at was Little Red Riding Hoods Quest,
an interactive AI driven storytelling experience about Little Red Riding Hood
saving her grandmother through a series of challenges, puzzles, and games. The
first thing I noticed was the loading time of the site as although I was on an
ethernet connection, it still took a while to load- and that is most likely
due to the amount of content in the website such as the animations, graphics,
and audio. I have also tested it out on my phone and another browser (firefox)
with just normal wifi, and though it is compatible and able to run on other
devices and browsers, it seemed to take even longer just to get to the
starting screen. However, once the site does fully load, the responsiveness is
consistent and prompt and the loading time to navigate between elements are
instantaneous or take mere seconds which makes up for the long wait.
2. Visual Design & Layout:
Fig 1.1 Visual Design of Game + Layout of Inventory Bar
Fig 1.2 Visual Design of Cutscene
Visually, the website itself is designed beautifully. The art style is
cartoonish with a mix of digital/traditional painting styles and techniques,
the colours for each page are well thought out and complimentary, working
harmoniously with each other in contrast, and the background has been designed
in such a way that do little red, as her design is much more carefully
detailed when inspected more closely. Everything has been drawn expertly with
its own unique charm as though the artstyle itself not perfect, it adds to the
characterization of the design and story. Furthermore, the “inventory bar” has
been placed strategically, on the bottom left corner of the screen, where
items the user collects in the game can be clearly seen as the background
behind each item is a solid grey, while the items are vibrant in colour and
feature an outer glow, the inventory bar is also not too big as to hide the
artwork, but also not too small that the user is not able to make out the
items properly- thus enhancing the layout and overall visibility to the user.
In addition, the font used matches the theme and design of the story, it is
the proper size for reading, and the gold text colour it uses for dialogue
also helps with readability as it off-sets itself from the background and is
able to stand out on its own. From the typography to the graphics, each design
choice seems to have been made with purpose and intention, which impacts the
overall quality of the website design positively.
3. Functionality & Usability:
Fig 1.3 Functionality Instructions of Game
Fig 1.4 Usability of Painting Interactive Element
In terms of functionality and usability, the website is easy to navigate and
very straight forward to interact with. The way in which the user interacts
is also quite fun, hovering your mouse over the screen "paints" colour into
the current scene being shown so it feels as if the user is actually
painting in real time, and this effect is exemplified as there is animation
that reinforces this, having a ripple effect and making the colour bleed and
travel similar to how watercolour acts on paper, it is a very engaging
interactive experience. The only con regarding this would be that sometimes
when painting, some areas do not “register” as painted, so the user will
have to hover about on the unpainted area until colour shows up which takes
a bit of time and effects the experience, having a few areas unpainted does
not give the user the full picture, which is a shame as when the entire
scene is painted with colour, it is visually stunning. Other than this,
playing the game itself is relatively easy and an enjoyable experience as it
requires minimal effort from the user, using directional keys on the
keyboard to move around and some clicking with their mouse/trackpad. The
transitional elements between each scene or area the user explores is also
seamless and has a natural flow to it, one minute criticism that can be
pointed out however is perhaps the lack of text and clear-cut instruction
for the user when completing objectives in the game. It requires some
independent thinking in solving its challenges which can be easy to someone
who plays games as they are more familiar with how they work, but these
challenges may not be so clear and more difficult to understand to someone
who isn't all familiar with games- thus needing more guidance in order to
actually complete it.
4. Quality & Relevance:
Fig 1.5 Highlighted Objectives of Game
Fig 1.6 Ending Screen
As the website is more of an interactive visual novel game experience that
mostly takes you through it with its own unique story, there is not much to
comment on in terms of accuracy, it deviates from the original tale of
little red riding hood, but with its own twist that is creative and fun. The
elements are organized well, with each one being highlighted or spaced out
appropriately, such as the inventory bar and items you pick up throughout
the game. Additionally, the pacing of the story is just right, not too fast
too follow, and not to slow as to bore the user, the story is told clearly
as you are able to read the text below that describes each scene, or listen
to the narrator telling you it- thus the overall narrative is clear and easy
to follow. Most objectives in the challenges are made out to be quite clear
via user feedback such as sound and visual cues- like indicating whether an
item has been “picked up” by playing a short sound and making it vanish
after, or making an item the user requires appear more visible by
highlighting it distinctly from other elements to pull your eye. The only
criticism here is that although the experience itself was very fun and
engaging, it was much shorter than expected- which left wondering and
wanting more content. The length could be longer, especially because the
loading time is so long, one would expect more.
5. Purpose & Goals + Final Thoughts:
Overall the website does its job well in delivering the narrative in a
digestible way for the user as well as creating that interactive experience
that is engaging, user-friendly, and entertaining. Its biggest strength is
definitely the visual design and layout, it is very aesthetically beautiful.
While the website’s loading times are lengthy, and certain painting
interactions may be finicky, the website's design choices and content
organization are commendable. Clearer instructions for objectives and an
expansion of content to match the loading times would further enhance the
user experience.
Website 2 - Twinbru
1. Website Performance:
Fig 1.0 Landing Page
The next website I took a look at was "Twinbru". A website that showcases
digital fabrics with product-realistic renders, featuring an extensive and
comprehensive library of them. The website's performance is generally
satisfactory. Load times are swift despite there being many animated and
interactive elements, and this responsiveness transfers over to mobile
devices as well, although some call to action elements do experience a
slight delay when interacting with them.
2. Visual Design & Layout:
Fig 1.1 Visual Layout of Fabric Comparison
Fig 1.2 Visual Design of Goals and Results Demonstrating White Space
When it comes to the design and layout, it's quite consistent. It mostly
maintains the same colours throughout each page and adheres to the
minimalistic theme it has- there is a good use of white space which gives
each element room to “breathe” and stand out, so it is easy to read and look
at. The imagery used is quite simple yet effective as the complexity lies
within the interactive animation the user can deploy when scrolling,
hovering, or clicking on it. Furthermore the use of typography is smart,
important information that the website wants to emphasize is bolded,
highlighted, or made bigger, while sub text or less important information is
smaller or a lighter colour.
3. Functionality & Usability:
Fig 1.3 Navigation Menu 1
Fig 1.4 Navigation Menu 2
Fig 1.5 Interactive Fabric Showcase
It is very straightforward to navigate as titles are clear and the menu
for each section can be recognised and understood easily, the landing
page menu's feature drop downs that are neatly organised, while the 2nd
set of navigation menus under "Use Cases" bring you to a different page
which all make sense logically in regards to the order and content.
Furthermore, the usability is prompt. call to action elements are mostly
done by a single click, hover, or scroll, and there is visual
responsiveness that is triggered in animation when an action is done or
about to be- such as the circle that follows the mouse becoming bigger
on certain text on the website to indicate it leading to another page.
As it is a website focused on showcasing fabrics digitally, many
elements on the website are customizable which made for great
interaction and user experience.
September 5, 2023
4. Quality & Relevance:
Fig 1.6 Fabric Comparison/Showcase + Website Structure
Demonstration
Fig 1.7 Demonstration of Informational Hierarchy
Elements are organized neatly and logically; all relevant images and text
are contained in one area in an order of hierarchy or importance, such as
the furniture modelling page, where the biggest image is the furniture
itself, followed by model previews on the left, and fabric/colour
customization on the right. One example of the clarity and relevance this
website boasts is through straightforward, prominent headlines which
effectively highlight key information- further amplified by the text's
weight, which occupies more page space and stands out clearly, as seen in
the second image.
5. Purpose & Goals + Final Thoughts:
Fig 1.8 Comparison of Colours - Landing Page
Fig 1.9 Comparison of Colours - Other Pages
All in all, the website offers an pleasing user experience and definitely
fulfills what it sought out to do with its customizability, interactive
elements, straightforward navigation. The user does not need to think much
when it comes to using the website or its services due to how easily
understood the interface is, one critique that may be worth mentioning however
is the contrast between the landing page and the other pages- although the
theme of minimalism and typography was consistent, the colours in the landing
page were different to the other sub-pages, but other than this, the website
effectively communicates its purpose to the user.
Web Replication
For the second exercise of Interactive Design, we are to replicate 2 existing main pages of 3 provided websites to gain a better understanding of their structure and help in developing our design skills and gain insights into the best practices for web design. We are allowed to choose any two from the 3 links given, and we are allowed to use any image as it does not need to be an exact image from the original website and we may replace it with a similar image. To replicate the main pages faithfully, we are to focus on the layout, type style, and color style.
Process
I have chosen the two sites, Morgan Stanley and Ocean Health Index. As I wanted it to be an accurate recreation- I obtained the websites original images by going into inspect element > sources> images- containing all the images of the site which I then downloaded.
Fig 2.0 Retrieving Images from Site
Then, I created a new document in Photoshop and first started by importing a screenshot of the website to reference from and compare to as I replicated it. I have turned down the opacity of the screenshot and dragged it as the bottom layer to act as a guide similar to how people use sketches this way as a guide for finalizing their line-art, except in this case it would be adding the website design elements such as text and pictures which were also temporarily turned down in opacity for precision alignment. This ensured accurate placement and sizing in the Photoshop document and by strategically adjusting opacity, I maintained a clear view of both the reference screenshot and the design elements.
Fig 2.1 Screenshot of Original Website Ocean Health Index
First, I added in all the base pictures, such as the background and the biggest/main pictures following the website layout.
Fig 2.2 Adding Pictures
Fig 2.3 Adding Lines, Logos, & Boxes
This is then lastly followed by the addition of all text found on the website, ensuring to match the text formatting by capitalization/non capitalization/, font style, size, and positioning. I have used a mix of fonts using ones that looked similar to ones used on the site.
Fig 2.4 Adding Text + Formatting
Final Outcome
Fig 2.5 Final Web Replication Ocean Health Index PNG
Fig 2.6 Final Web Replication Ocean Health Index PDF
Morgan Stanley
For the replication of this site, I have went about it similarly, first, by inspecting the element of the site and grabbing the images from its image folder.
2.6 Retrieving Images from Site
Then, I created a new document in Photoshop and imported a screenshot of the website to reference from and compare to as I replicated it just like the first site, approaching it in the same manner of turning down the opacity and using it as a visual guide.
2.7 Screenshot of Original Website Morgan Stanley
I first added in all the pictures, following the reference for a visual guide then positioning them accordingly to the layout.
2.8 Adding Images
Then, I added in the lines and boxes, colour matching these elements as similarly as possible to the websites original elements- as ensuring the positioning is the same as well.
2.9 Adding Lines & Boxes
Finally, I then added in all the text found on the website along with the logos, again using a mix of fonts that matched closely to the websites original design, and paying attention to colour, capitalization, positioning, and size there as well to replicate this in my design
3.0 Adding Text
Final Outcome
3.1 Final Web Replication Morgan Stanley PNG
3.2 Final Web Replication Morgan Stanley PDF
Recipe Card
In the third exercise of Interactive Design, we are to create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. We are allowed to find and use any recipe from the internet.
The requirements are the following:
- Recipe title
- Include necessary images for the page
- List of ingredients
- Step-by-step cooking instructions
I have chosen to make my recipe card based on this recipe https://www.aheadofthyme.com/fresh-strawberry-pie/ for Strawberry Pie.
First, I the html and css and created the recipe title "Fresh Strawberry Pie" in the header, as well as added in a background colour for the website.
Fig 3.3 Code for Title & Background Colour
Next, I inserted an image of the pie after the title.
Fig 3.4 Inserting Image
Then, I went on to copy the description of the recipe from the website and coded it into a paragraph- this is followed by the coding of sub-headers for "Ingredients" and "Instructions", and then the creation of an ordered list for the ingredients, and an unordered list for the cooking instructions, where I have added the text content from the website into the html.
Fig 3.5 Coding Paragraph, Headers, Ordered Lists + Unordered Lists & Adding Context Text
Lastly, I then edited the CSS of each section in font size for better visual hierarchy and layout.
Fig 3.6 CSS Editing
Final Outcome
Fig 3.7 Strawberry Pie Recipe Card
Comments
Post a Comment