Posts

Showing posts from October, 2024

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