Interactive Design: Exercises

INTERACTIVE DESIGN - PROJECT 1

 27/08/20 -  / Week 1 - Week 14

Ibrahim Fazal Ahmad / 0337423

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylors University /

Exercises

WEEK 1: This week we were quickly introduced to the subject and were given a rough overview of our assignments and module information. We were then given a few new terms used in web design.  

• Call to Action: A prompt on a website that draws the user to click the button. Example: The subscribe button on YouTube.
• Burger menu: The three lines indicating a hidden navigation menu that can be accessed by clicking on it. 

We then had a small group work in which we had to look through websites and give our opinions on why we think they are either good or bad.  I will list a few that we had assessed.

Good: 

• https://oksocial.co.uk/  - Vibrant colours, but balanced by the simplistic font choice as to not overwhelm users. Consistent design across the website. Immediate link to their showreel displaying their work conveniently. Eye-catching animations to keep the user engaged.

Figure 1: OK Social

• https://bells-whistles.co.uk/ - A really nice design, pleasing to the eye. Simple and tells you exactly what they are. However, it isn't user friendly and lacks some information. There is minimal flow since you need to constantly click on the menu interfaces to find information.

Figure 1.01: Bells & Whistles

Bad: 

• https://4elbows.com/: Outdated layout, very basic. Colours are not pleasing to the eye and not harmonious. Choppy animations. Not user-friendly

Figure 1.02: 4elbows

• https://tnaqua.org/: Lackluster images, no clear target audience. Odd layout, overlapping images not done very well. Interactive moving parts when you hover over them. Poor choice of pictures.

Figure 1.03: Tennessee Aquarium

WEEK 2: For this weeks exercise, we have to create a self-introduction website through HTML with 3 sections. Our requirements are: 

• Introduction about yourself
• Experience with Interactive Design
• Expectations for Interactive Design
• At least 2 paragraphs for each section, including hyperlinks and either ordered or unordered lists.
• Images can be included but they are not compulsory. 

Firstly, we had to begin with our blank notepad of just the basic codes. I named my website "Introduction" in the title, which means it will show up as the browsers name 

    

Figure 1.04: Coding Base

After this, we had to deposit some simple information into the notepad document, we had to create a simple hierarchy of information, using the different tags we learned. Such as: 

• <h1> for titles 
• <p> for body information
• <li> <ul> <ol> for lists, ul being unordered and ol being ordered.

Figure 1.05: Coding details

After adding the information we could customise the page to our liking, using "style=colourname". This allowed us to change the colour of our body text. For background colour we used "background color=colourname". 

Figure 1.06: Finished Exercise 1

After doing this, we had to complete each section of the website and deploy it on Netlify. Here is the link to my website: Week 2 Exercise

WEEK 4: For this weeks exercise, we had to create a website using the information given to us by Mr Shamsul. We were allowed to organise it and change the colours to anything we wanted to. We had to include links at the top of the page, that would scroll us towards the needed section when we clicked on it. For that, we needed the code below:

Figure 1.07: Nav Codes 

To be able to go to a certain part of the page, we needed to give something in the section an id. For example, I gave the text at the very bottom an id, being section1. In the navi, you can see a piece of text that will display and bring the users to that section, in this case it's "About". 

Figure 1.08: Navi codes with sections 

We then just had to organise the information to our own abilities and however we wanted. Here is the link to my Week 4 Exercise: Exercise!!

WEEK 6: For this week, we have to a much more difficult exercise. We need to complete a webpage following the layout that was sent to us by Mr Shamsul. Honestly, it looks really hard especially because I feel like I am slacking a little bit in this subject. It is one of the harder modules from this semester. Here is the website Mr Shamsul wants us to recreate: 

Figure 1.09: Week 6 Exercise we need to recreate

Now, it is our job to recreate this as best as we can on Dreamweaver. I struggled a lot with this exercise if I'm being honest. I don't have a very specific way to explain my process, as it was mostly just trial and error until I felt like it resembled Mr Shamsuls website. So here is the finished product for this exercise: Week 6 Exercise!!

FEEDBACK:

-

REFLECTIONS:

WEEK 1: Back to campus! It's always nice to come back to Taylors. Today was our first class with Mr Shamsul, we had him as an assisting lecturer during Typography. Going into it, Interactive Design seemed like IGCSE ICT but a lot more complex for me. I had taken IGCSE ICT and we did HTML and CSS, however not to the level we are planning on doing during this semester. But it is nice having a relatively stable foundation, though I don't remember everything hopefully some of the knowledge will come in handy. One observation I made was that most websites have a Call-To-Action button. One finding I made was that a lot of good websites nowadays are usually rather simple. 

WEEK 2: For this weeks class, we had to create a simple website. This was really reminding me of IGCSEs and just school in general. As we had to create something just like this, even being an introduction. It was rather simple for me to do as I still remembered the rough basics of my classes from school. One observation I made was that HTML is very accessible to anyone who puts the effort into learning it. One finding I made was that you can create order and unordered lists.