Interactive Design [Exercises]

-

23.04.2024 - ..2024  / week 1 - week 8

Sheryne Axellia Putri / 0367267 / Bachelor of Design (Honours) in Creative Media
Interactive Design
Exercises

TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Reflection


          LECTURES          

Week 1 23.04.2024


  • F2F Class:

- Download Adobe Dreamweaver.

- Sign in to Netlify.


- Netlify → Right-click, inspect and choose the device you want to view.

- Call To Action button → CTC (a button that is more different than the rest)

- Primary CTC, and secondary CTC (which one is more primary than the rest)

- Clickable texts: some texts come in different colors → to inform the user which texts the user can click through using various colors of the text.

-Websites stop using long lengths of websites so the viewer does not scroll.

- White space for a site is important.

- Text alignment → from top to bottom, left to right, if you have a short text it's okay to use center alignment. If it's long/two columns use left alignment. Right alignment is mostly not recommended.

Figure 1.1 Week 1 (04/24/2024) Amazon.

ex: Amazon (the ctc is sign an option)

- Terms and conditions: sign in for an account ex: amazon and Shopee (they have similar layouts → important buttons and the search bar is at the top) whatever is important is always placed on the top.

Key Principle of Usability

  1. Consistency

  2. Simplicity

  3. Visibility

  4. Feedback

  5. Error Prevention



1. Consistency

Consistency is a key factor in web design for visual elements and functionality. Consistency ensures that your website looks coherent and works harmoniously across all its components, such as headers, footers, sidebars, and navigation bars.


Consistent design is intuitive design.


It includes a consistent navigation system,  page layout and menu structure, fonts and typography, and branding in web design. Consistency is key for users to recognize and learn these patterns. If similar-looking things do not produce a similar output, the user is bound to become frustrated. 


For example, if a website’s buttons are protruding boxes with labels, all of its buttons should look like that. Similarly, if a backward arrow denotes the back button, then it​ should not be changed to something else because that would be inconsistent with what the user has learned.


2. Simplicity

The principle is that user interfaces should be “simple” for users.

Simplicity is used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes. Incorporating simplicity in a design will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.


3. Visibility

Visibility is the basic principle that the more visible an element is, the more likely users will know about it and how to use it. Equally important is the opposite: when something is out of sight, it’s difficult to know about and use. Users should know, just by looking at an interface, what their options are and how to access them.

4. Feedback

Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task. An example of feedback is when you’re on desktops or laptops when you hover over navigation items, you expect them to change color or load a submenu. 

5. Error Prevention

It involves alerting a user when they’re making an error, to make it easy for them to do whatever it is they are doing without making a mistake. The main reason this principle of error prevention is important is that we humans are prone to and will always make mistakes.


Common Usability Pitfalls and How to Avoid Them


  • Complex interfaces

  • Confusing navigation

  • Poor feedback

  • Inadequate error handling



Week 3 07.05.2024_Web Structure

Websites are typically divided into three key elements:
  1. Header → is the top section of a webpage. It usually contains the website's logo, navigation menu, and contact information. The header provides users with quick access to essential information and navigation.
  2. Body → is the main content area of a webpage. It contains text, images, videos, and other multimedia elements. Proper organization of content within the body is crucial for readability.
  3. Footer → is located at the bottom of a webpage. It typically includes copyright information, links to important pages, and contact details. The footer provides closure to the webpage and additional navigation options.
  • Organizing Content → is key to a well-structured website. Use headings (H1, H2, H3, etc.) to create a hierarchical structure. Logical grouping of content and clear labeling of sections improve user experience.
  • Navigation Menus → help users move around the website. Use clear and concise labels for menu items. Consider using dropdown menus for complex sites.
Figure 1.2 Week 3 (05/07/2024) Webpage structure.



          INSTRUCTIONS          



Figure 2.1 Week 1 (04/24/2024) Module Information Booklet.

Week 1 23.04.2024 Exercise 1 - Web Analysis

Choose TWO (2) 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, including its load times, responsiveness, and compatibility with different devices and browsers.



  • Web Analysis (Presentation)

Websites I have chosen:



Figure 2.2 Week 2 (04/30/2024) Web Analysis Presentation.




Week 3 07.05.2024 Exercise 2 - Web Replication

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. 

  • 1.1 Progress 
#1 Website: https://www.morganstanley.com/?authuser=0


Mrs. Shamsul gave us the instructions on how to take a full screenshot of the web fully, by:
inspect + adjust the width + run command + full screenshot

I opened Adobe Illustrator so I could begin my replication, and I made ruler guides to help me replicate the web more neatly.
Figure 2.3 Week 3 (04/30/2024) Progress #1.

Figure 2.4 Week 3 (04/30/2024) Progress #2.

This is the social media logo template I have chosen for my replication.

Figure 2.5 Week 3 (04/30/2024) Social media logo.


#2 Website: https://www.oceanhealthindex.org/?authuser=0

Figure 2.6 Week 3 (04/30/2024) Progress #3.

In Photoshop, I made my version for the lower background using the image I found from pexels.com, which turned out like this.
Figure 2.7 Week 3 (04/30/2024) Progress #4.

Figure 2.8 Week 3 (04/30/2024) Progress #5.

  • 1.2 Outcomes (side by side) 

#1 Website 
Figure 2.9 & 2.10 Week 3 (04/30/2024) Original vs My Replication.


#2 Website 

Figure 2.11 & 2.12 Week 3 (04/30/2024) Original vs My Replication.





Week 7 04.06.2024_CSS Selector Exercise 3 - Creating a Recipe Card

In this exercise, you will 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. 

Choose ONE recipe from the link: https://www.101cookbooks.com/?authuser=0
  • 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.

Figure 2.13 Week 7 (06/04/2024) The selected recipe.

Figure 2.14 Week 7 (06/04/2024) Progress #1.

Figure 2.15 Week 7 (06/04/2024) Progress #2.

I decided to insert a link from the original site.

Figure 2.16 Week 7 (06/04/2024) Progress #2.





 PRACTICAL          


Week 4 14.05.2024_The web & Structure

We were given the chance to create an HTML file using the Note app from our laptop.


Figure 3.1 Week 4 (14/05/2024) Progress #1.

Figure 3.1 Week 4 (14/05/2024) Progress #2.



Figure 3.1 Week 4 (14/05/2024) Progress #3.

Figure 3.1 Week 4 (14/05/2024) Progress #4.





          REFLECTION          


Experience
As someone who has no knowledge of websites, I think that the first exercise has helped me to develop my thinking of what a compatible website means. 

Observation
When searching for the websites I want to analyze, I have found that most websites use the same layout, that is placing the important part on the top.

Findings
A Call To Action button doesn't have to be large or bright, it just needs to be clear and concise.







Comments

Post a Comment

Popular posts from this blog

Advanced Typography [Exercises: Typographic Systems & Type & Play]

-
Image
22 .04.2024 - 15.05.2024  / week 1 - week 4 Sheryne Axellia Putri / 0367267 / Bachelor of Design (Honours) in Creative Media Advanced Typography Exercises TABLE OF CONTENTS 1 . Lectures 2. Instructions     - Task 1     - Task 2 3. Feedback 4. Reflection 5. Further Reading Task 2→ Task 3 →            LECTURES           Week 1    22 .04.2024 Typographic Systems There are eight major variations with an infinite number of permutations: Axial Radial Dilatational Random Grid Modular Transitional Bilateral The typographic systems are akin to what architects term shape grammars. The typographic systems are similar in that the systems have a set of rules that is unique and provides a sense of purpose that focuses and directs the decision making." (Elam. 2007) A shape grammar is a set of shape rules that apply in a step-by-step way to generate a set or language, of designs.  While some may fee...
Read more

Design Principles [Task 3 : Design]

-
Image
 03 .07.2024 - 03.24.2024  / week 5 - week 7 Sheryne Axellia Putri / 0367267 / Bachelor of Design (Honours) in Creative Media Design Principles   Task 3 TABLE OF CONTENTS 1 . Instructions 2 . Feedback 3 . Reflection ←Task 1       ← Task 2  Final Compilation→            INSTRUCTIONS           Figure 2.1 Week 5 (03/07/2024) Module Information Booklet. Task 3 : Design After analyzing the design of your choice in Task 2, you will now produce a work of design, inspired/influenced by the one you had analyzed, or as a reaction to it. You should also apply your knowledge of design principles in your creation. You may use any medium and/or materials that are suitable to convey your visual message. Direct use of photographs is not permitted. Must include: 1. a recap of Task 3 brief. 2. some visual references (cite the sources) that inspire your own  ideas. 3. 3-5 sketches (manual/digital)...
Read more

Brand Corporate Identity [Task 1 : Breaking Brand]

-
Image
 23 .09.2024 - 07.10.2024  / week 1 - week 3 Sheryne Axellia Putri / 0367267 / Bachelor of Design (Honours) in Creative Media Brand Corporate Identity Task 1  TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Feedback 4.  Reflection Task 2 → Task 3 → Task 4 →            LECTURES           BCI 1 - INTRODUCTION  Brand corporate identity is an integral part of the graphic design discipline as it focuses on the visual integrity of a brand as such the module introduces students to the basics of identity design and the effective use of symbols in the area of visual communication.  "A symbol is a mark, sign, or word that indicates, signifies, or is understood as representing an idea, object, or relationship." Symbols Based on an article titled "Did Stone Age cavemen talk to each other in symbols?"   symbols found to recur among Palaeolithic cave paintings and other artifacts. Photographed by Gene...
Read more