Interactive Design | Exercises
23 Apr 2024 - 2024 | (Week 1 - Week 8 )
Chan Xiang Lam | 0358400
Interactive Design | Bachelor of Design (Honours) in Creative Media
Exercises |
Lectures
Week 1 | Usability
Week 2 | Anatomy of a
Website
Week 3 | Understanding
Website Structure
Week 4 | The Web and
Language
Week 5 | The Web and
Language
Week 7 | CSS Selector
Instructions
Exercises
Exercise 1 | Web
Analysis
In this exercise, we are required to choose two websites from the provided
link and thoroughly review the one we have selected, paying close attention
to its design, layout, content, and functionality. We need to identify the
strengths and weaknesses of the website and consider how they affect the
user experience. Then, we should write a brief report summarising our
findings and recommendations.
Website 1.0 | Tony's Chocolonely [link]
Fig.1.1 "Tony's Chocolonely" Main Page
1.1 Purpose and Goals Communication:
The Tony's
Chocolonely website is a vital platform for showcasing products, attracting
customers, and driving sales. Its primary goals are to effectively
communicate product features, increase sales, and enhance brand awareness
and trust. Additionally, the website provides essential product information,
fosters customer interaction, and ensures a seamless user experience.
Through search engine optimization and continuous performance monitoring,
the website aims to attract targeted traffic and achieve long-term business
objectives.
1.2 Visual Design and Layout:
The website's
visual design and layout utilize vibrant and colorful hues, establishing a
lively and cheerful atmosphere. The bright colors evoke a feeling of energy
and vitality, effectively drawing users' attention. Typography is clear and
easy to read, with consistent font sizes and styles across the site.
Fig.1.1.1 Visual Design and Layout
High-quality
and attractive imagery are effectively employed to showcase products,
bolstering user interest and potentially boosting purchasing desire.
Fig.1.2.2 Imagery
1.3 Functionality and Usability:
Navigation
is straightforward, with a fixed header menu providing easy access to
different sections of the website. Additionally, a detailed menu is
available at the bottom of the page.
Fig.1.1.3 Menu bar
The website
also includes interactive elements, such as the ability to visually create
custom packaging, which adds an engaging touch.
Fig.1.1.4 interactive elements
However,
there is room for improvement in terms of usability. For example, if the
search function is available, it should be prominently displayed to help
users quickly find products.
1.4 Content Quality and Relevance:
The content
is well-organized and easy to navigate, with clear headings and subheadings
that help users quickly find the information they are looking for. There is
no confusion or ambiguity during browsing. Each piece of content is
carefully structured into appropriate sections, making navigation and
accessing relevant information straightforward. This organizational
structure greatly enhances the user experience by allowing visitors to
easily find what they are looking for.
The product
page provides detailed information about the chocolates, enabling customers
to better understand their characteristics, taste, and ingredients, thus
assisting them in making more accurate choices. By offering sufficient
information, the product page can enhance customer trust, elevate brand
loyalty, and facilitate the completion of purchase decisions.
Fig.1.1.5 Product Information
Additionally, the website can include
customer reviews to bolster credibility and aid users in making informed
purchasing decisions.
1.5 Performance:
The website
performs well in terms of load times, responsiveness, and compatibility with
different devices and browsers. Pages load quickly, even on slower internet
connections, and the site is fully responsive, adapting seamlessly to
various screen sizes. Compatibility with different browsers appears to be
excellent, with no noticeable issues or errors.
Website 2.0 | Don't Board
Me [link]
Fig.1.2 "Don't Board Me" Main Page
2.1 Purpose and Goals Communication:
The "Don't Board Me" website specializes in providing reliable,
considerate, and personalized in-home pet care services. They offer a
range of services including dog walking, pet visits, and overnight care.
Their aim is to establish long-lasting relationships with pet owners,
earning their trust and confidence by attending to each dog's individual
needs. This focus on building enduring relationships is intended to
ensure the happiness and well-being of dogs.
2.2 Visual Design and Layout:
This website utilizes a light color scheme to foster a refreshing and
enjoyable ambiance, instilling a sense of ease. Soft hues like subtle
pink, blue, or green are carefully chosen, complementing the adorable and
gentle image associated with pets.
Fig.1.2.1 Visual Design and Layout
Clear
navigation menus and intuitive design elements have been strategically
incorporated to enhance user experience and facilitate easy access to
service information. This ensures that visitors can effortlessly
navigate the website and find the information they are seeking.
Moreover, the typography is clean and straightforward, guaranteeing
readability for users across different devices and screen sizes.
Fig.1.2.2 Menu bar
Displaying pet photos alongside shared
blog content creates a warm and trustworthy atmosphere. These images not
only enhance visual appeal but also reinforce the reliability and
credibility of the website.
Fig.1.2.3 Imagery
2.3 Functionality and Usability:
The
website prioritizes functionality and usability to provide a seamless
experience for visitors. Navigation menus are logically organized,
allowing users to easily explore different sections of the site and access
relevant information with minimal effort.
Forms for
booking pet care services are straightforward and user-friendly, guiding
clients through the process step by step. Clear instructions and tooltips
help to alleviate any confusion and ensure that users provide all
necessary information accurately.
Fig.1.2.4 Service page
Interactive elements, such as sliders or
galleries showcasing available pet care packages, allow users to compare
options visually and make informed decisions. These elements enhance user
engagement and facilitate the booking process, ultimately leading to
increased conversions.
Fig.1.2.5 Information
2.4 Content Quality and Relevance:
The
website's content has been meticulously curated to provide valuable
information to pet owners while showcasing the professional expertise of
pet care providers. Detailed service descriptions, including pricing and
availability, help users understand the expected services and make
informed choices.
Fig.1.2.6 Pricing
Additionally, the rich content of blog
articles offers tips and advice on pet care, further enhancing the
website's appeal and utility. These blog articles not only demonstrate the
website's dedication to pet health and happiness but also prove the
professionalism and commitment of the pet care providers. Through this
valuable content, the website not only attracts more visitors but also
earns the trust and loyalty of pet owners, thereby enhancing the
sustainability and success of the business.
Fig.1.2.7 Blog
2.5 Performance:
The website performs well in terms of load times,
responsiveness, and compatibility with different devices and browsers.
Pages load quickly, even on mobile devices, ensuring a smooth user
experience. The site is also responsive, adapting seamlessly to
different screen sizes and resolutions.
Exercise 2 | Replicate a website
For this task we are to choose two (2) websites from the links given
below and take full-page screenshots. Then, analyze the layout, paying
attention to dimensions and alignment, and identify fonts and colors
used. Gather similar resources such as fonts and images. Recreate the
layout in design software, adding placeholder text and images. Finally,
apply the identified styles consistently across the design.
I'm replicating the main pages of Morgan Stanley and Ocean Health Index
websites. After capturing full-page screenshots, I've opened them in
Adobe Illustrator to begin replication. For image replacements, I'm
using Pexels, and for consistent typography, I'm downloading similar
fonts from Google Fonts.
Morgan Stanley:
Fig.2.1.1 progress
Fig.2.1.2 Final Outcome
In this exercise, you will create a recipe card webpage using HTML and
CSS. The task involves designing a simple yet visually appealing webpage
that displays a chosen recipe's title, image, ingredients, and
step-by-step cooking instructions.
First, I visited the website and looked at different baking recipes.
I decided on the cranberry cake because it looks delicious. I
wrote down all the ingredients and instructions needed to make the
cranberry cake, making sure to include cooking time, baking temperature,
and step-by-step directions.
Fig.3.1 Cranberry Cake recipes
Next, I started designing the webpage by creating the basic HTML
structure, including sections for the title, ingredients list, and
instructions.
Fig.3.2 Ingredient-list
Fig.3.3 Instruction-list
Then, I added some basic CSS to improve the page's appearance and
readability. I kept adjusting the CSS styles, such as fonts, colors, and
spacing, to enhance the visual appeal.
Fig.3.4 CSS progress
Later, I added a feedback form to the webpage. This form allows users
to share their thoughts and suggestions about the recipe. This addition
makes the webpage more interactive and provides an opportunity for
continuous improvement based on user feedback.
Outcome:
Fig. 3.5 Outcome before Adding CSS
Fig. 3.6 Outcome after Adding CSS
Final Outcome:
.jpg)
Comments
Post a Comment