INTERACTIVE DESIGN / EXERCISES
28/08/2023 - 12/09/2023 (Week 01 - Week 3)
Agnes Fadhyllah / 0360503
Interactive Design / Bachelor of Design (Hons) in Creative Media
INTERACTIVE DESIGN / EXERCISES
Lectures
Website Structure
What is a Website Structure?
- For the creation of a user-friendly and accessible online platform, a well-structured website is essential. It significantly affects the user experience, search engine optimisation (SEO), and overall performance of a website. A website's overall efficacy and appeal are increased when it is well-organized and user-friendly, making it easier for visitors to access content and keeping them interested.
Three Key Elements
Websites are divided into three key elements such as :
Header
- A webpage's header is the top part, which often contains the site's logo, menu, and contact details. Its main objective is to provide consumers with easy access to crucial data and navigation options, boosting their entire website experience.
Body
- The primary content part of a webpage, or the body, is where text, photos, videos, and other multimedia components are shown. For readability and a good user experience on the website, the body's content must be organised properly.
Footer
- A webpage's footer, which is located at the bottom, frequently includes contact information, copyright information, and vital links. It accomplishes two goals: it wraps up the webpage and gives users more navigation possibilities.
Organizing a content
- The organization of the website's content is essential to its overall structure. A hierarchical structure is created using headings like H1, H2, H3, etc., making it simpler for readers to explore and comprehend the material. The entire user experience on the website is much improved by the logical organisation of the material and the clear section labeling
Navigation Menu
- A website's navigation menus are crucial for easing user movement. Menu item labels must be concise and unambiguous in order to maximise use. Dropdown menus can be a useful tool for organising and presenting a variety of options on complicated websites in a user-friendly fashion.
Usability
What is Usability?
-
Usability focuses on how successfully, effectively, and
efficiently users may use a product or design in particular
contexts, is an important component of user experience (UX)
design.
The efficiency of the second level of UX design depends on how
effectively a design's features fit the needs and situations of
users.
- When a user first encounters an interface, it should be highly usable so that users, even those without technical expertise, can quickly navigate and complete their tasks. An intuitive user interface directs consumers to the most efficient route for achieving their objectives.
Principle of Usability
Key Principle of Usability
-
Consistency: In web design, consistency is essential
for both the visual and functional aspects. It ensures that all
of a website's components have a unified appearance and seamless
functionality. User recognition and happiness depend on
consistent navigation, layout, fonts, and branding. Users may
become irritated when patterns are broken. Websites with
effective design consistency include Apple.com
-
Simplicity: The necessity of making interfaces
user-friendly by minimising processes, utilising simple symbols
and vocabulary, and lowering the possibility of errors is
emphasised by the idea of simplicity in user interfaces. User
experience is improved by simplicity, which enables users to
accomplish their objectives effectively and with pleasure.
-
Visibility: To ensure that users can intuitively grasp
their options and access them for a better experience, user
interface designers emphasise the importance of visibility. More
visible features are easier to notice and use.
-
Feedback: User interface feedback conveys
interaction results, indicating success or failure. For
instance, desktop navigation items' colour changes or submenus
offer feedback when hovered over.
- Error Prevention: In order to make it simple for a user to do their task without error, it entails warning them when they are making a mistake. Because humans are fallible and will inevitably make mistakes, this error prevention theory is crucial.
[Fig.1.0 Mailchimp demonstrates error prevention by asking users to type DELETE to confirm their actions.]
Common Usability Pitfalls and How to Avoid Them
- Complex interfaces
- Confusing navigation
- Poor feedback
- Inadequate error handling
Instructions
Module Information Booklet
<iframe
src="https://drive.google.com/file/d/1hlUEX_nNsOn4sYQiivWQV-oOAILD6cWQ/preview"
width="640" height="480" allow="autoplay"></iframe>
Exercise 1 : Web Analysis
Instructions
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, including its load times,
responsiveness, and compatibility with different devices and
browsers.
- Deliverables
Exercise 2 : Web Replication
Instructions
Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.Screengrab of Webpage
[Fig.2.0 Screengrab of Morgan Stanley Website]
[Fig.2.1 Screengrab of Bandit Website]
Replication of Webpage
[Fig.2.2 Replication of Morgan Stanley Website]
Outline and Layers
[Fig.2.4 Outline of Morgan Stanley Website]
[Fig.2.5 Outline of Bandit Website]
Comparison Of Replication and Real Web
1. Morgan Stanley
[Fig.2.6 Real Web (left) Replication (right)]
[Fig.2.7 Real Web (left) Replication (right)]
[Fig.2.8 Real Web (left) Replication (right)]
[Fig.2.9 Real Web (left) Replication (right)]
[Fig.2.10 Real Web (left) Replication (right)]
[Fig.2.11 Real Web (left) Replication (right)]
2. Bandit
[Fig.2.12 Real Web (left) Replication (right)]
[Fig.2.13 Real Web (left) Replication (right)]
[Fig.2.14 Real Web (left) Replication (right)]
[Fig.2.15 Real Web (left) Replication (right)]
Exercise 3 : Creating Recipe Card
Instructions
Create an HTML file named "index.html."Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
Research
After getting the instructions i started on choosing the recipe that i wanted to put in my website, and came across this Malaysia Mango Salad from https://insanelygoodrecipes.com/malaysian-recipes/.
Progress
i started on making the structure first and started adding contents.
[Fig.3.0 Making the Structure]
I started on choosing which color palette i wanted to use for the web that gives mango vibes, and i found this.
[Fig 3.1 Color Palette]
After finding color palette, i started choosing the font too (i chose the font called Gabarito) and start adding adjustments to the styles
[Fig 3.2 Fixed styles]
there were a few adjustments and changes, but overall i am very happy with the result, i didnt wanna prolong and keep on adding or changing stuff again so i stopped before my indecisiveness started wanting to do something.
Final Outcome
HTML :
CSS :
Feedback
- None are given.
Reflection
- The assignment for this module is pretty fun so far, especially the web replication. i found myself taking my time as I replicate the web. by replicating i learn about how website layout works and how important it is to make a web not just for the aesthetics but also to make it easy for people to access and use, hope to see how the module goes well in the future.
.png)
Comments
Post a Comment