INTERACTIVE DESIGN / WEEKLY JOURNAL

Naura / 0356798 / Interactive Spatial Design
GCD60904 / Interactive Design
Weekly Journal

__________________________________________________________

Week 2

On the first day of this module (October 2nd), our instructor provided an overview of what we could expect from the assignments and encouraged us to start considering potential websites or topics for our final project. He also showed us a video about Norman doors, which are poorly designed doors that are confusing or difficult to use. From this video, I learned that good design prioritizes usability and that if instructions are necessary for use, the design's usability is flawed.

We then participated in a class activity where we applied the five principles of usability by creating a kiosk design to improve the wayfinding system at Taylor’s University. Our target audience was individuals with speech or language barriers, as Taylor’s has a large number of international students, making effective communication and understanding essential.

Overall, I believe our group performed well. We designed a simple, consistent wayfinding kiosk and incorporated a clear hierarchy with font sizes and categorization to ensure users would not feel overwhelmed.

__________________________________________________________

Week 3

In class today, we focused on understanding the importance of website structure and how it contributes to an effective user experience. A website structure acts as a blueprint for creating a user-friendly and accessible site, organizing content in a logical and intuitive way. This ensures that users can easily navigate through the pages and find the information they need without confusion or frustration.

A well-structured website provides numerous benefits. It improves user engagement by presenting content in a clear and consistent manner, helping users stay focused and interested. Additionally, an effective structure supports search engine optimization (SEO), allowing search engines to better index the content, which can result in improved rankings and visibility.

We also discussed best practices for website structure, such as using a clear hierarchy with main headings, subheadings, and body content. This helps guide users through the information seamlessly. Additionally, implementing a logical navigation system, with clear menu labels and internal linking, contributes to better user interactions and higher satisfaction.

Overall, today’s lesson emphasized that a well-organized structure is essential for ensuring that users have a positive experience, which ultimately leads to longer site visits and increased interaction. 

After the lecture, we began Exercise 2, which required us to replicate two websites as accurately as possible using Figma or Adobe Photoshop/Illustrator (I chose Figma btw). You can find the outcome of my work in this link here

__________________________________________________________

Week 5

The lecture covered the basics of HTML and related concepts. We learned that the World Wide Web (WWB) was initially developed for military purposes. Additionally, we explored the history of the first browser war between Internet Explorer and Netscape Navigator (which I hadn’t heard of before). This conflict led to the creation of CSS, establishing a standard for website styling since different browsers previously used different coding for design.

During the tutorial and practical session, we created our own web pages using Notepad on our laptops. We applied what we learned in the lecture, such as structuring the page with titles, headings, and body content, and using HTML tags to create lists and source images. Without the addition of CSS, the web page looked quite basic.

Unfortunately, I didn’t take a screenshot of this stage before continuing where we left off in Week 5 during Week 6 (oops!).

__________________________________________________________

Week 6

Continuing from where we left off last week, this week we used Adobe Dreamweaver to edit our code and learned how to add colors to both text and the background. We also explored different font styles and the use of classes and IDs—understanding that IDs are unique and meant for single use, while classes can be assigned to multiple elements. Additionally, we learned how to add tables through code.

Sir introduced us to the Properties tab, which simplifies tasks like inserting links and adjusting element properties without manually coding them, making the process more efficient. We were also shown that images can be added through the Design View, eliminating the need to manually code the <img src> tag. Lastly, we learned how to remove the default underlines from hyperlinks, enhancing the overall visual appeal. This week was all about refining the aesthetics and making our design more visually engaging.

For homework, we need to create a form positioned below all existing content. This form should include both a return button and a submit button. I referred to the HTML guide on forms available at W3Schools for assistance during this task.

The code below is the code I used to create it:

<form action="submit_form.php" method="post"> <label for="name">Name:</label><br> <input type="text" id="name" name="name" placeholder="Your Name" required><br><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email" placeholder="mail@example.com" required><br><br> <label for="lastName">Last Name:</label><br> <input type="text" id="lastName" name="lastName" placeholder="Your Last Name" required><br><br> <label for="comments">Comments:</label><br> <textarea id="comments" name="comments" placeholder="Say Hi!" rows="4"></textarea><br><br> <button type="reset">Reset</button> <button type="submit">Submit</button> </form>

However, my form didn't match the example shown, particularly in terms of color and form. So, I created a custom CSS class to adjust the color slightly and added rounded corners to the box, similar to the example. This helped ensure it aligned with my pastel-y themed design:

.reset-button { background-color: lavenderblush; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; } .submit-button { background-color: mistyrose; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; } .reset-button:hover, .submit-button:hover { opacity: 0.7; }

YUR