21.04.25 - 26.05.25 (Week 1-6)
Celine Christabelle Patricia / 0374872
Interactive Design / Bachelors of Design (Hons) in Creative Media / The Design School
Exercises
Table Contents
- Lectures
- Instructions
- Task
- Feedback
- Reflection
Lectures
Week 1
Explanation and introduction towards the MIB.
Week 2
Design thinking
- Emphatize
- observe, can improve user experience
- Define
- Ideate
- Prototype
- Test
Usability
- Consistency
- graphic element, layout, color, typography
- avoid back arrows on design layout
- Simplicity
- minimize the number of tabs
- Back then Shoppee needs 15 steps for payment, after updates, it just needs 4 steps
- Visibility
- Subscribe button in Youtube is more red (highlighted)
- Call to action Button
- Feedback
- hover effects, loading time (tell user to wait)
- Gives validation to users
- Breadcrumbs**
- Secondary navigation that displays user's location in the site hierarchy
- Error prevention
- alerting a user when making error
- authentication,
- forget password (new password, confirm password)
Week 3
Website Structure
- Header
- top section
- logo, navigation, contact information
- Body
- main content area
- text, images, videos, multimedia elements
- Footer
- bottom section
- copyright information, link to pages, contact details
- provides closure
Instructions
Task
Exercise 1 - Web Analysis
Web Analysis on
Amanation
|
| Fig 1.1.1 - Desktop View of Amanation |
|
| Fig 1.1.2 - Smartphone View of Amanation |
Vid 1.1.3 - Smartphone Interaction with Amanation Website
About website
This website is made by Anamation, a Creator Management Company from
Tokyo, Japan. This website used for several creators to showcase their
arts using an interactive way. They believe that creators have
limitless potentials to show appeals through out the world. They
handle in management on sales activities, casting, creative, and also
events.
Visual Design
This website is purposed to showcase the art of several artists, they
have vibrant colors from the drawings, while using a clean and clear
layout as the website. The overall color of this website utilized
black and white color scheme. The typefaces used are Sans Serif, they
are bold and clear, which makes it clear to the audience. There are
plenty of negative spaces which makes the overall layout does not look
cramped. Overall, it creates a professional yet aesthetic look. The
layout of the icons, navigations and informations are also clear,
minding the reading directions, they placed the important informations
on the left, then balance it with drawings on the right side.
Moreover, the website is very interactive to users, where as it is
scrolled, there are a lot of visual effects and animations as it is
scrolled through.
Functionality and Usability
The navigation are concise and straightforward, where the menu
button is on the right and can be pressed anytime while enjoying the
other interactive elements. However, the website doesn't give proper
instructions on how to interact with the elements which may confuse
users when accessing it. It functions well as its purpose to
showcase several creators artworks, as well as including their
contacts. Overall, this website is has a lot of interactive elements
which makes it highly interactive towards users, however it might be
difficult to use.
Quality and Performance
It is really responsive in both desktop and smartphones. Although it
is still easy to access it through smartphone, there are some missing
animations when accessed with phone, but overall, smartphone users
still can enjoy the interactiveness of this website. It showcases high
quality pictures as well as high performed website which allow users
to enjoy the appeal of every visual details from the pictures of every
creators without lagging, also works well in both Chrome and Safari.
|
|
|
|
| Fig 1.2.2 - Desktop View of Quadplex 80 (2) |
|
| Fig 1.2.3 - Smartphone View of Quadplex 80 |
About Website
This website is made by StudioField. The purpose of this website is to
showcase and promote Quadplex 80, a luxurious penthouse located atop 111
West 57th Street in New York City. This website aims to attract high-end
buyers or investors by highlighting the exclusivity of the penthouse, its
exterior and interior, the architectural above the clouds, and premium
lifestyle offered by this rare residence.
Visual Design
The website adopts an elegant and minimalist style, with a sleek and
lightweight typeface that reflects elegance. On desktop, the logo is
placed in the centre, while it shifts to the left corner on
smartphones. The overall design is clean and intuitive, with
well-aligned text and icons that enhance user navigation. They use the
bilateral system as the layout. One of the features that standout the
most is the 3D visual representation of the entire building,
showcasing both its exterior and interior of the place. (refer to Fig 1.2.1, image 3; Fig 1.2.2, image 2) This feature lets users to see the detailed illustration of the suit.
It interacts with users not only visually, but also using sound
effects to bring users to feel the atmosphere. However, a light sky
blue background inhibits the readability of the text, especially when
it is paired with the thin typeface. It would be better to use a
contrasting color to make a better view and readability.
Functionality and Usability
The website is user-friendly since they give clear instructions guiding
users on how to navigate through the content. The navigation system
works seamlessly, with smooth redirection to other webpages, which
enhances the experience for users. However, there are some limitations
on mobile devices. Although it functions well in mobiles, but there were
no clear instructions to guide users. Furthermore, the website failed to
display the full image of the suite on mobile screens which restricts
the interaction towards users. (refer to Fig 1.2.3) Overall,
this websites functions really well especially in desktop, but it may
have some restrictions when interacting it in mobile.
Quality and Performance
The website performs well in terms of responsiveness. It loads
efficiently on both desktop and mobile platforms without any noticeable
lag. It is also highly interactive to mobile users as they still can
interact with the 3D visual of the building without lags, works well in
both Chrome and Safari. Despite some mobile limitations, the overall
quality of the website is succeed to maintain a smooth browsing
experience.
Web Analysis on DoThings
|
| Fig 1.3.1 - Desktop View of DoThings |
|
Fig 1.3.2 - Smartphone View of DoThings
|
Fig 1.3.3 - Modular system
About website
DoThings is a design agency based in New York with offices in Los Angeles
and Paris. They are a team of
creative thinkers with an interesting and unique point of view that stems
from their experience in beauty, luxury, real estate, and
hospitality. They expertise in creating and harnessing desire of several brands, from
buildings, lipstick, and other products. Over the years, they have become experts to create design with impact to
approach diverse industries for strategy, branding and digital
design. This website is their portfolio to showcase their works.
Visual Design
This website has a unique placement for their layout. Using one of the 8
systems existing in typographic systems, the modular system (refer to Fig 1.3.3). Similar to the grid system, modular system are units that can be placed
anywhere accordingly. This maintains the entire website's layout and gives a
unique branding. With also minding the system of human's eye, they place the
important informations according to the hierarchy of design. They give a
large headline in the middle of the page, then inserting their agency name
in the top left, continuing to other informations as users read to the right
(refer to Fig 1.3.1). Furthermore, the design is not
over-cramped since there are still negative spaces. However, it would be
preferable to use a sans serif typeface for this case to give a simple and
chic look. Some fonts are also unnecessarily large, for example "2025" at
the end which could hide the other important contacts.
Functionality and Usability
The website is user-friendly since they give clear instructions guiding
users (refer to Fig 1.3.1) on how to navigate through the
content. They give simple interactions on every hyperlinks that redirect
users to other site, e.g. contacts, studio, more services, etc. The
navigation system works seamlessly, with smooth redirection to other
webpages, which enhances the experience for users. It is convenient for
users to get back to the homepage after looking through other websites in
the webpage, which applies in an easy usage. Overall, the websites
functions well according to its purpose, allowing users to access
navigators easily.
Quality and Performance
They provide It loads seamlessly without lags when used in both desktop and
smart mobile phones, which means it is compatible in any kinds of devices.
Moreover, when browsing this website through mobile device, it has a
different layout (refer to Fig 1.3.2), which improves the quality of
this website, making it compatible in smartphones. It is also highly
responsive when redirecting to another webpage, works well in both Chrome
and Safari. Furthermore, they provide high quality videos and images on the
website, giving a clear photograph of the product they are showing.
Web Analysis on Hook
|
| Fig 1.4.1- Desktop View of Hook |
|
|
Fig 1.4.2- Smartphone View of Hook |
|
| Fig 1.4.3 - Grid System |
About website
Hook is a digital production company which organize ideas that are small,
diverse, and versatile in teams to create better work, formed from a mix of
artists, creatives, engineers, and producers. As a digital production
company, their aim is to combine and craft creatives and build
collaborations, to create brand campaign and contents, brand systems, media
for growth, and digital experiences. This website is their portfolio to
showcase their works.
Visual Design
It has an interesting layout. As users scroll the webpage, they will
experience different background colors as they scroll through different
subtopics, shifting from white to black and vice versa. As in design
hierarchy, they place the header in a bold and large size, placing the logo
on the left corner, then some other navigators on the right. According to
the typographic system, this website uses the grid system. As what is seen,
they are aligned in the same grid (refer to Fig 1.4.3). This grid
systems allows users to understand how the website works without and
instruction because it gives a proper flow. Furthermore, the typefaces used
are consistent in every page.
Functionality and Usability
This website's interacts with users by changing its background as users
scroll. The are a lot of navigators which allow users to explore more
about this agency, and they are easily accessible for both desktop and
mobile users. They give simple interactions on every hyperlinks that
redirect users to other site, e.g. their other works, about them, etc.
However, it was quite confusing to get back to the home page. Overall it
showcases its portfolio really well towards users and accessible through
any devices.
Quality and Performance
When hyperlinks were clicked, it is very responsive in both desktop and
smart mobile phones, which means it is compatible in any kinds of devices.
The images shown in the website are also high quality pictures, which allows
users to know the quality of their agency. It also loads really quickly and
works well in both Google Chrome and Safari.
Web Analysis on DonProd
|
| Fig 1.5.1 - Desktop view of DonProd |
|
| Fig 1.5.2 - Desktop view playing video |
|
|
Fig 1.5.3 - Smartphone view of DonProd |
About website
DonProd, known as Double or Nothing Productions, is a portfolio site for a
trio of London-based directors. A bold, punchy design that mirrors are their
distinct visual style and cinematic vision. They consist of two
brothers and a childhood friend who have taken the music scene in London.
This website aims to reflect their fresh bold visual and cinematic style.
With a clean glitchy aesthetic, they want to give a modern age look for the
new generation that are "always online".
Visual Design
The website is mainly black colored accompanied with white text with various
typefaces: a thin sans serif and a bold sans serif. They have an interesting
layout, mostly are center aligned and are made of many pictures and videos
about their portfolios. They have a grid system on their site, creating flow
onto users when scrolling through. The website is fun in an interactive way,
it gives extra elements to be played along while scrolling through their
portfolios. As shown in Fig 1.5.3, they use bold typeface to give emphasis.
However, the thin text as navigators were too small and barely seen since
there are thin. In addition to it, there were too much negative space in the
homepage which makes it bland.
Functionality and Usability
All the navigators works well in both mobile device and desktop. Users are
able to click and scroll on the portfolios. The play and pause button
works well as navigators, just with a simple click. However, it was quite
hard for users to fast forward the video, the button doesn't function
really well. It functions really well in both desktop and smartphones, but
there are less interactive elements in smartphones. Overall, the website
functions well with little limitations.
Quality and Performance
The site showcases their work on their music videos. They show high quality
images and videos to users. It performs well when loading images, but a long
load time when its processing the video, and also fast forwarding the video
to clips we wanted to see. Moreover, the homepage in the beginning (refer to Fig 1.5.1, image 1) is hard to scroll when using the Chrome browser, but it performs well when
using Safari.
Exercise 2 - Web Replication
Task Instruction
In exercise 2, we were instructed to replicate 2 main pages of existing
websites provided. We were to focus on the layout, type style, and
colour style of these websites when replicating them.
Below are the links to the websites that I have chosen to
replicate:
|
| Fig 2.1.2 - Layout and Clipping Mask |
|
| Fig 2.1.3 - The referenced website Dothings |
|
| Fig 2.1.4 - Replicated Website in Illustrator |
Explanation
- I used some images from the website and also took some free images from https://www.pexels.com/
- I screenshoted the website by inspecting it then screenshot in full screen
- Then I inserted the image and fit the art-board with the website
- Before inserting the other image elements, I noticed that every pictures in the website has a rounded edge. To do so, I create a slightly-rounded rectangular shape, then mask it together with the image I have gotten.
- There aren't any special icons in this website, though for the arrow in the "Visit Website", I use the line tool to create the arrow icon.
- For the typefaces, I used Microsoft Sans for the sans serif fonts, and ITC Baskerville for the serif fonts. I adjusted the kernings and leadings of the website, the font size as well, making sure the spacings are similar to the original.
Web Replication on Hook
|
| Fig 2.2.1 - Layouting for images placement |
 |
| Fig 2.2.2 - Fixing leading, kerning, paragraph spacing |
|
|
Fig 2.2.3 - Fixing spacing, kerning |
|
| Fig 2.2.4 - The referenced website ByHook |
|
| Fig 2.2.5 - Website Replication |
Explanation
- I screenshoted the website by inspecting it then screenshot in full screen
- Then I inserted the image and fit the art-board with the website
- I used some images from the website and also took some free images from https://www.pexels.com/
- I insert the images by putting rectangle shapes on the layout, then apply clipping mask together with the image.
- For the logos applied in this website, I downloaded the svg and insert it to the replicated website project.
- For the typefaces, I used Arial typeface with bold and italic, place it accordingly to the referenced website by adjusting the font size, thickness, kernings and leadings
- I created the "more" icon (the three stripe button on the corner right) using the ellipse tool and strokes.
- The "see more" button, and other buttons that are similar to it, I use the rectangle tool, making it more round and let only the outline be visible to viewers eyes.
Comments
Post a Comment