INTERACTIVE DESIGN EXERCISES
Week 1- 5
Rhyanne Cyrene Lowe / 0347077 / Bachelor of Design (Honours) in Creative Media
Interactive Design Exercises
LECTURES
Week 1: The lecturer briefed us on the module and what to expect for the next coming weeks
Week 2: We were asked to review and analyze good or bad websites
Week 3: UX (User Experience) focuses on the structure and layout of content, navigation, and how users interact with them.
types of deliverables they produce:
• site-maps
• user flows
• prototypes
• wireframes,
○ focused on the underlying structure and the purpose of the software.
UI (User Interface) focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions.
Interface elements include but are not limited to:
• Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
• Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
• Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
• Containers: accordion
○ focused on the way the functionality is displayed and the fine detail of how users interact with the interface.
Golden Rules of Interface Design
Interface expert Nielsen identifies five usability attributes designers should put more attention to when creating a design interface, no matter what their medium:
• Ease of Learning
• Efficiency of Use
• Memorability
• Minimize Errors
• Satisfy the User
Week 4: For today's lecture, we learned about CSS and how it can be applied in our HTML script.
- CSS- Website appearance customization.
- Internal CSS - placing CSS rules in an HTML script.
-
Selector - Indication which element the rule applies to
- Declarations-
- Indication of how the elements referred to in the selector should be styled.
-
Property- Appearance settings like colour, font, width, height and border,
etc.
-
Value- Specification of property.
- External CSS- Use this type of CSS if you have more than one page for your website
INSTRUCTIONS
EXERCISE
Week 2: The lecturer asked us to practice HTML by coding a website explaining an introduction of ourselves using simple basic styles techniques.
 |
| fig 1.0 exercise 1 layout |
 |
| fig1.2 exercise 1 html progress |
Week 3: This week, using the knowledge from last week we had to create a sample website using information and images provided.
 |
| fig 2.0exercise 2 html progress |
 |
| fig 2.1 exercise 2 layout |
 |
| fig 3.0 exercise 3 html progress |
 |
| fig 3.1 exercise layout |
Here's the final website
Week 5: This week, after practicing layout design we were asked to code a website landing page for photoshop with the following information provided:
Below is my progress screencap of my html and css file;
 |
| fig 4.0 exercise 4 html progress |
 |
| fig 4.1 exercise 4 css progress |
Here's the final website
FEEDBACK
Week 1: No feedback
Week 2: No feedback
Week 3: No feedback
Week 4: No feedback
Week 5: No Feedback
REFLECTION
Week 1: This week was a good introduction to the class. I was scared at first on what to expect because coding is completely new to me.
Week 2- 3: This weeks exercise was easy to understand. It was kind of exciting to learn the basic of website design and code since i;ve never really wondered how it worked before.
Week4: The progress for my work went smoothly I'm glad i didn't stumble into many problems during this exercise.
Week 5: This exercise seemed hard first because we had to design a landing page. Im grateful fo rthe advice and tutorials provided online for me to refer to. This exercise made me better understand the works of CSS
FURTHER READINGS
WEEK 3: https://www.usability.gov/
WEEK5: https://medium.muz.li/ui-interactions-of-the-week-261-ae3424e5b3b8
Comments
Post a Comment