Interactive Design - Exercise
1.4.21 - (Week 1 - Week )
Sajiya Mir (0340836)
Interactive Design
Bachelor of Design (Hons) in Creative Media
Exercise
Lecture
Week 1: Introduction
Thursday, April 1, 2020
The first day of class was a short one Mr. Shamsul discussed the MIB and gave an overview of what we would be learning this semester.
Week 2:
Thursday, April 8, 2020
Today's lecture was on websites, Mr. Shamsul did a short lecture on what websites are then we were separated into groups to do an exercise on websites. We had to find four good websites and four bad websites and explain the reasoning for our decision. Then each group got a chance to share their findings.
- Websites are web documents on the internet. It can be one or multiple pages with a different intended purpose. There are different types of websites such as information, corporate, entertainment, brochure, portfolio, etc.
Week 3:
Thursday, April 15, 2020
Today we had a lecture on UX & UI design also Web design
UX is user experience
- Ux designers focus on the structure and the layout of the content, navigation, and how users interact with them.
- The visual appearance does have an impact, but can be created as a separate layer that is applied over the top.
UI is the user interface
- UI design focuses on anticipating what users might need to do and ensures that the interface has elements that are easy to access.
- UI brings together concepts from interaction design, visual design, and information architecture.
- There are interface elements that should be included are:
- Input controls: buttons, text fields, checkboxes.
- Navigational Components: breadcrumb, slider, search field, icons.
- Informational Components: tooltips, icons, notifications, and message boxes.
- UI designers focus on the way the website functionality is displayed and the details of how users interact with the interface.
- When designing for users first identify the users (target audience). This will you determine if the design has to be broad or narrow to accommodate the users.
- You will never fully have a perfect design but what you can do is listen to your user's feedback and observer how they interact with your design.
- Golden Rules of interface design:
- Ease of learning
- Efficiency of Use
- Memorability
- Minimize Errors
- Satisfy the user
The next lecture was on Web design:
- The elements of a web page are like organs they are vital to the proper function and the aesthetic of the web page.
- All the web pages use a container and all for the same purpose to contain the page elements. A few types of containers are:
- Liquid: expands to fill the width of the browser window.
- Fixed: a specific width you choose which does not change regardless of the browser window size.
- Header has the logo of the page, the navigation, tagline, etc.
- Navigation is one of the most important elements of your website. It needs to be easy to find, easy to use which is why it is always located within the header of the page.
- There is horizontal navigation or vertical. It depends on how you display the series of links.
- Footer is what's at the end of a web page. this contains copyright, contact information, and links to other social media account.
Week 4:
Thursday, April 22, 2020
Today lecture was on Web standards:
The most important part of your website is its content and all the user should be able to access it. The only way to ensure that websites work across all devices and configurations is to develop in accordance with web standards.
How the web works:
- When you connect to the web you do so via an ISP. You type the domain or web address into your browser.
- Your computer contacts the network servers called DNS servers. The DNS will tell you the IP address of the website you are looking for.
- The IP number which is unique to its location and devices will return to your computer allowing you to contact visit the website.
HTML code is made up of characters that live inside angled brackets <>
These are called HTML elements. The elements are usually made up of two tags and opening tag < and a closing tag >
<elements> Information </elements>
Attributes provide additional information about the content of an element. All HTML must use lowercase only. They appear in opening tags and are made up of two parts a name and a value, separated by an equal sign.
Week 5:
Thursday, April 29, 2020
Today was a public holiday so no class.
Week 6:
Thursday, May 6, 2020
Today's lecture was on adding images and links in HTML:
The tag <img> is used to add image in HTML. the tag is a single-sided element that does not have a closing tag like other HTML elements. The tag is considered empty until an attribute is added. Alt attributes are added to describe the image.
<img src= "url">
<img src= "url" alt= "description of the image">
The width and height can also be added as attributes:
<img src= "url" alt= "description of the image" width="500" height="350">
ID attributes are used to uniquely identify the elements from other elements on the page. It also a link between two elements. It is important that no two elements have the same value for their ID or it loses its value.
Week 7:
Wednesday, May 12, 2020
Since Thursday was a public holiday we joined the Wednesday class. Today's lecture was on introduction to CSS:
Cascading style sheet (CSS) allows you to create rules that specify how the content of an element should appear. CSS works by associating rules with HTML elements. It contains two parts a selector and a declaration.
- The selector indicates which element the rule applies to. For example, the selector could be the paragraph <p>.
- The declaration indicates how the elements referred to in the selector should be styled. For example, the font family and font size.
- The declaration is split into two parts property and a value that is separated by a colon.
- The property indicates the aspects of the elements you want to change for example color or font.
- The value specifies the setting you want, for example, Arial, and the color yellow.
Using External CSS file and link element to the HTML documents. An HTML page can use more than one CSS style sheet.
Week 8:
Independent Learning week
Week 9:
Wednesday, May 27, 2020
Week 10:
Wednesday, 3rd June 2020
Today's class was on Bootstrap documents:
- Responsive web design is a method that makes web pages render well on different devices and screen sizes. A responsive website would adjust its content to fit on the screen based on screen size, platform, and orientation. It would not leave out information to fit smaller devices, but rather adapt its content to fit any device.
- Responsive design is achieved via the fluid grid concept. Page element sizing is in relative units like percentages, rather than absolute units like pixels or points.
Flexible images are sized in relative units to prevent them from displaying outside their containing element.
Media queries allow the page to use different CSS style rules based on the characteristics of the device the site is being displayed on.
Responsive layouts automatically adjust and adapt to any device screen size.
Instructions
Exercises
Exercise 1:
In exercise 1 we learned Html using notepad. We had to make three sections about ourselves and using the header, paragraph, nested list and unested list.
Fig.1.0 Exercise 1 HTML
Exercise 2:
In this exercise, using Dreamweaver we had to make a website using the content provided on Triathlons. We once again used the heading, paragraph, lists and this time we learned how to insert images.
Fig.1.1 Exercise 2 HTML code
Fig.1.2 Exercise 2 Website
Exercise 3:
In this exercise we learned how to use CSS and link it to our HTML file. With the CSS we stylised our fonts, background color and links to change color when hovering and when visited.
Fig.1.3 Exercise 3 HTML code
Fig.1.4 Exercise 3 Website
Exercise 4:
For exercise 4 we learned how to make a website layout. We were introduced how to make container, navbar, header, sections, and footer. Then using CSS we stylised each section by giving it background color.
Fig.1.5 Exercise 4 HTML code
Fig.1.6 Exercise 4 Layout
Exercise 5:
For this exercise we had to use all the knowledge we had gained from the past few exercises to create a website on photoshop. We were given all the content that was needed to be added.
Fig.1.7 Content
Fig.1.9 Header and navigation
Reflection
Experience: I had a lot more fun with this module than I anticipated. When classes began, I learned that most of my classmates had prior experience with HTML, but it was something completely foreign and intimidating to me. I was nervous going into this module, but Mr. Shamsul and Mr. Lun made it so much easier. We did have to learn certain things on our own, such as creating animations and carousels, but the lecturers were always available to assist us with anything we needed. All of the assignments in this module taught us the fundamentals of HTML and CSS and prepared us for future projects. Overall I was really happy with what I was able to learn and accomplish from this module.
Observations: Setting up a container and having a clear structure of all the columns is one of the most significant things I gained from these assignments. My webpages frequently failed to work because I had the incorrect number of columns in a row or because my container was not responsive. As a result, this is one of the most important things I need to remember for future projects.
Findings: I was under the impression that we needed to use javascript to develop a good website, but through my exercises and projects, I discovered that we could accomplish a lot with simple HTML and CSS.
Comments
Post a Comment