Posts

Interactive Design:Building CV

Image
 Links To My CV: https://raymondchin-exercise3.netlify.app/ Crafting My CV – A Journey in Web Design Creating a compelling CV is a crucial step in presenting your skills and experiences, and for me, this project was more than just building a resume—it was a chance to showcase my design skills, creativity, and attention to detail. Here’s how I embarked on this journey of crafting my CV as a web-based design. Starting with the Basics I began by brainstorming the structure and key elements my CV should include. I wanted it to be visually appealing yet professional, reflecting my expertise as a Spatial Designer. The foundational sections included: Profile Information: A concise summary of who I am and what I do. Experience: Highlighting my participation in projects like AR Fest KL and XR Jam. Education: Tracing my academic journey, from Chung Hua High School to my degree at Taylor’s University. Skills and Software Proficiency: Showcasing my familiarity with tools like Adobe Creativ...
Post a Comment
Read more

Interactive Design:Week 07

   Week 07 Blog: Deep Dive into CSS Selectors and Styling Techniques In Week 07, we explored essential CSS concepts that enhance the look and functionality of our web pages. CSS (Cascading Style Sheets) is key to controlling the presentation of HTML elements, and understanding its selectors and properties is crucial for creating visually appealing websites. Here’s an overview of what we learned: CSS Selectors We started with various types of selectors: Universal Selector  ( * ) - This applies a style to all elements on a page, useful for setting general styling. Element Selector  - Targets specific HTML tags (like  <p>  or  <div> ) and applies styles to all instances of that tag. ID Selector  ( #id ) - Targets elements by their unique  id , used for specific styling on one particular element. Class Selector  ( .class ) - Applies styles to multiple elements sharing the same class, great for repeated styling. Descendant Selecto...
Post a Comment
Read more

Interactive Design : Week 04

Image
 Website Analysis of Craigslist.org In Week 4 of our Interactive Design course, we focused on conducting a detailed analysis of the Craigslist website. As a platform that has been around since 1995, Craigslist serves as a popular classified ads site where users can buy, sell, trade, and find various services. While it has a loyal user base, its design leaves much to be desired in terms of modern web standards. Current Design Evaluation My analysis began with a critique of Craigslist's layout, color scheme, typography, and imagery. The website's layout is extremely basic, featuring a long list of links and text without a clear hierarchy or visual differentiation. This can overwhelm users and make it challenging to find relevant information quickly. The color scheme consists mainly of blue and white, which, while functional, fails to create an engaging experience. In terms of typography, the site employs a generic font style that lacks character and consistency. This lack of visu...
Post a Comment
Read more

Interactive Design : Week 05

Week 05 Blog: Advancements in Web Design Techniques In Week 05 of our Interactive Design course, we explored some essential web design techniques that enhance the styling and functionality of our websites. This week’s focus was on learning how to customize headings, integrate Google Fonts, and understand the use of IDs and classes in HTML and CSS. We also began using Adobe Dreamweaver, a user-friendly software that simplifies the web development process. Customizing Headings One of the key skills we learned was how to apply distinct styles to various heading levels (h1, h2, h3, etc.). By utilizing CSS, we can now customize each heading to improve visual hierarchy and readability. This skill is crucial for creating a structured layout that guides users through our content effectively. Using Google Fonts We also delved into the process of downloading fonts from Google Fonts. This involves copying the provided code and pasting it into the <head> element of our HTML documents. By se...
Post a Comment
Read more

Interactive Design:Task 03

Learning the Basics of Web Development with HTML and Notepad In one of our recent classes, we explored how to build a basic website from scratch using only Notepad and HTML code . It's amazing how much you can create with just a simple text editor! We started by writing out the structure of an HTML document. We included important elements like the doctype declaration , a head section for metadata, and a body where all the visible content goes. I created my own website with a title, headings, paragraphs, and even lists. One of the key features we learned was how to insert images into our webpage. For instance, I added a profile picture and a pet photo using the <img> tag, complete with attributes like alt text , size specifications, and hover text to make it interactive. This was done by including the file path of the images on my computer and setting parameters like width and height. Another interesting part of the lesson was adding a hyperlink that, when clicked, opens...
Post a Comment
Read more

Interactive Design:Exercise 02

Image
  Exercise 2: Homepage Recreation in Figma For this exercise, we were asked to choose two websites from the list provided by our lecturer and completely recreate their homepages. The goal was not to redesign the pages but to faithfully replicate the original layout, using Figma to mirror every detail. I chose Figma as the tool for this task because it’s intuitive and highly effective for duplicating web designs. The first step in the process was learning how to take full-page screenshots of the websites and then extract the images used. I downloaded all the images where possible, but for some logos and graphics that weren’t easily accessible, I took screenshots and removed their backgrounds using an online background removal tool. Once I had all the images, I made sure to download the exact fonts used on the websites from Google Fonts . This was an important step because the typography needed to match perfectly to replicate the original design accurately. After gathering all the n...
Post a Comment
Read more

Interactive Design:Exercise 1

Image
  Website Review Exercise:  First Website:Resn - Loop ( https://resn.co.nz/#!/work/loop/ ) Resn’s “Loop” website is a visually striking, interactive showcase of their work. The site’s main goal is to immerse users in an engaging experience, which is effectively communicated through its bold design and smooth transitions. With a sleek dark color palette accented by blues and purples, the layout is simple yet modern, allowing the focus to remain on the stunning imagery and professional content. One of the site’s greatest strengths is its unique interaction design. The transitions and animations, combined with carefully integrated sound, create a cohesive and immersive experience. However, the navigation can be confusing. There are no traditional menus or navigation bars, which makes it difficult for first-time users to find their way around. While the content is clear and well-organized, the initial load time is a bit long, though the site runs smoothly once fully loaded. The mu...
Post a Comment
Read more