Interactive Design - Lecture and Exercise

on

Interactive Design - Lecture and Exercise

22.4.2024 - 00.7.2024 (Week 1 - Week 14)

Aidi Rafiq | 0353422 | Bachelor of Design (Honours) in Creative Media 

INTERACTIVE DESIGN
INSTRUCTIONS

LECTURER

Week 1 - Getting to know the briefing and our exercise/ projects. Knowing which software to download for our classes. Sharing what features does every website has.

Week 2 - On week 2 , we had a class exercise on producing a mock up of an anatomy of a web page, app etc. We were given a paper create our mock up but then our table group decide to use adobe xd to create for this exercise.

Week 3 - Week 3 we were given the task to replicate 2 website using adobe illustrator. In the website, we have this feature called "Inspect Elements" which allow us to see the coding and the process behind the working website. This would helps us to know the size, color of the fonts and the shapes were being used.

Week 4 - This week we learned how to create our own website with HTML using notepad. We learned the basic feature like the title, list, headings, paragraphs and images.

EXERCISE 1 

WEB ANALYSIS

We were given the task to pick 2 website and analyze the feature and give our opinion on each website. The good side and the down side of the websites.

SITE 01



fig 1.0 awwwards sites

The purpose of this website is to display few coaches or freelances that teaches anyone on how to start with coding. The goal for this is to allowed everyone to have the accessed to learn coding clear and easy. This website is very interesting with its design. They stick to a simple theme color which is white and black. The search bar and is big enough and clear to see. This website is free for anyone to enter, means they don't force anyone to login when they start up the website. This could mean that the owner of the website that made this wants the "artist" project to be the main part to attract the audience. The title state "SITE OF THE DAY" really brings out the attention to the audience of what this page is about.  The function or the visibility is very straightforward and easy to understand. 



fig 1.1 awwwards sites

fig 1.2 awwwards sites

The layout is very simple and easy to read but the fonts may be too small that there are a lot of empty space. Small fonts could also means "not really important", which this website has a lot of them. There are not a lot of colors to attract the audience towards this webpage. There are a lot of text mixed with big and smalls fonts which could be very busy and clutter for audiences eyes. The responsive for this website when click the interface, required a amount of ram to run, means it is slow for a low end pc but would be fast for the high end.


SITE 02


fig 2.0 csswinner sites

The purpose of this website is allowing people to access to the winner of the best e-portfolio. The goal for website is to display the winners of the e-portfolio with few screenshot and scores. The visibility is very straightforward. This website has a lot of colors compare to the previous website. It is very simple and the pictures are big which is eye catching. Whenever you click one of the site (image) it leads to a score board and few screenshot of their e-portfolio and it's easy to navigate. The fonts/text size are big enough for us to understand. When you take a look each of their e-portfolio, the page states the score and screenshots really clearly and simple. 

This is compatible for low end pc because it dose not required heavy animations when opening the score or certain interface. But It will won't anymore if they enter their portfolio.


fig 2.1 csswinner sites

The downside of this website is that the title is missing. Even though it stated on the top left, but it would be better if its in the center of the page. This website only include images without a description. If the title is "The Winners of the Best E-portfolio", it acknowledging the audience what is this page is about. Compare to To me the twitter and facebook logo is a distraction and unnecessary to put it on the top right, it's best to place it at the end of the page or in the hamburger button.  



EXERCISE 2 

The 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.


SITE 01



fig 3.0 banditrunning website
fig 3.1 my extraction


fig 3.2 final

My process thought of this is how complex how this website is when it comes to extracting it but it look simple by looking it. Extracting each features helps me to realize the small detail of this website and the way they structure it.





SITE 02


fig 3.3 oceanhealthindex website


fig 3.4 my extraction


fig 3.5 final



Exercise 3 - Web and Language

We were task to learn how to begin our first coding by learning the standards.


fig 3.6 my process of html code


fig 3.7 my process of html code using Dreamweaver

fig 3.7.1 my process of html code using Dreamweaver

We learn how to produce a timetable with our class timetable.



Exercise 4 - Recipe exercise

In this exercise, we have 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. 

Our lecturer, gave us the recipe link in the website and we have to replicate the page using HTML n CSS

fig 4.0 website that I will be replicating

https://www.101cookbooks.com/yellow-cake/

fig 4.1 progress

fig 4.2 my coding for posting comments at the end of the page.

fig 4.3 my css with the font chosen

https://aidi-rafiq-recipe-work.netlify.app (link to my recipe card exercise)

This exercise was tough to work on because there are certain features in the website is different to when we learn in class. I had to search on google how to put a vertical line behind a text. Putting an image inside box, side by side with the paragraph was a rough one too.

However some of the basic thoughts for css and html can be copy n paste from my previous exercise (about me work). My recipes card turns out pleasantly and easy to read, especially my first time creating a website using code. 



Comments

Post a Comment