Interactive design | Exercises

Week 1 | Week  4

Mohamed Hammam Chebel (0342483) BDE's. Creative media (Hons).

Interactive design

Exercises 

Instructions 

Week 1 

Briefing | Instructions | Lecture 

In this session we met Mr. Shamsul, He briefed us with the task and projects for this module.

after that we did a class task which is identifying bad and good websites.

I had a general Idea about this module, we will be using HTML and CSS languages.

The first project is to design the first page of a website in photoshop

The second project is to build that design using coding to a functioning web page

The final project is to deign and buikd a website of 5 pages, it has to be functional as well

Week 2

Lecture | Tutorial | Exercise

Today's session was on Zoom and Facebook live, Mr. Shamsul did a tutorial about basic HTML website coding on notepad, we learned basic HTML codes and know their function.

Exercise 1

Create html document with three sections

1. Introduction for yourself

2. Experience with interactive design

3. Expectations for interactive design 

At least 2 paragraphs each section. Include hyperlinks and lists and either ordered/unordered lists. 

Images can be included but it is not compulsory

For this exercise I did two variations, I was always curious about how are apps and websites are made so I did a little research and tried some HTML + CSS codes to make the second variation.

The process was fairly easy and straight forward, I opened a notepad plain text document under the name (index.html).

Then I entered the codes needed to build the web page, and at the same time i opened the page and refreshed it so I can preview the changes. 

I tried some CSS and it was more complicated then HTML

Here are the links for both websites 

My first website

My first website_2

Week 3 

Lecture | Tutorial 

In today's class Mr Lun did a brief tutorial on CSS in Adobe Dreamweaver, so we can have a general idea about CSS language, I understood so far that CSS is for adding style, layouts, color, fonts etc...

 

Fig 3.1

Week 3 Lecture

After we have done with the lecture we started working on our first project which is designing a web landing page in Photoshop.

The landing page can be about anything, it has to have a call on action button and contact information, products, footer, images, action bar.

The landing page must be 1280 PX in width.

Now that I have a general idea about this task, I went ahead and started designing a web page about my father's business.

I did some research and found some cool fonts for web design, I downloaded some of the google most famous fonts which are:

• Roboto
• Archivo
• Rubik
• Source Sans Pro 

I want my web page to be minimal and clean, easy to interact with and straight forward, so it's easy for the clients to surf the website. 

Here is what I've done so far 

Fig 3.0

Fig 3.1

First section

Exercise 2 

We learned how to insert an image in a website, how to give a background color and how to properly format text.

In this exercise we were given textual information and some images, these elements needs to be deployed as a webpage, I used HTML and CSS to do this task 

Fig 3.2

Exercise 2

Fig 3.3

Exercise 2

 Exercise 3 

In this exercise we were asked to replicate an existing design by coding it and deploying it on Netlify.

Fig 3.4

Exercise 3 Layout

I used vscode instead of Dreamweaver because I had issues with the software, I learned a lot while coding this layout.

 Fig 3.5

Exercise 3 Layout Vscode

Finally I deployed the website in Netlify here is the link for Layout exercise

Layout Exercise