Interactive Design - Exercises
01.4.2021 - 29.5.2021 (Week 1 - Week 10)
Jocelin Agustia (0345436)
Interactive Design - Bachelor of Design (Hons) in Creative Media
Exercises
LECTURES
Week 1
Today we met our lecturer since semester 1, Sir Shamsul, and our co-lecturer Sir Lun. Since it's the first week we only had an introduction regarding what we're going to do for this module. Sir Shamsul first brief us on the exercises and projects we're going to have. Then, he showed us our senior work.
During this module, the app we're going to use for coding is Adobe Dreamweaver, there are also alternatives like apatana.com. We will also be using Netlify for our projects. While designing we can still use Adobe Illustrator or Photoshop.
File naming convention:
- Use Lowercases
- Not allowed characters: < >, /, ?, &, $, %, #, @, !, ) (, *
- Main page -> index.html
Next week, we will be divided into groups to evaluate websites.
Week 2
figure 1,1 Week 2 Lecture Slide
We were divided into groups and then we need to survey the possibilities of good and bad websites. But before that, Sir Shamsul briefed us about what a website is.
Week 3
UI vs UX
figure 1.2 Week 3 Lecture Slide - UX & UI
UX Designer (User Experience): focus on the structure and layout of content, navigation and how users interact with them. The types of deliverables they produce include sitemaps, user flows, prototypes and wireframes, which are more focused on the underlying structure and purpose of the software.
While
UI Designer (User Interface): Focus on the way the functionality is displayed and the fine detail of how users interact with the interface, UI designer works on the visual comps and functioning front-end code. UI Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture (IA).
Elements for interface includes (However they are not limiter to):
- Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
- Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
- Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
- Containers: accordion
Golden Rules of Interface Design
There are five usability attributes that UI designers should pay attention to:
- Ease of Learning
- Efficiency Use
- Memorability
- Minimize Errors
- Satisfy the User
Web Design
figure 1.2 Week 3 Lecture Slide - Web Design
Anatomy of Web Page
figure 1.3 Web Page Anatomy
All the elements in the image (figure 1.2) are the main elements of a web page, the way it was arranged may be the most common.
Container
Contain page elements. e.g: body tag and div
Types of Container:
- Liquid: Expands to fill the width of the browser window.
- Fixed: A specific width you choose which does not change regardless of browser window size.
Header
figure 1.4 Header
Refers to the top section of the web page where the logo, navigation, tagline, and etc. are located. The header is considered a container thus, it has 2 types: liquid and fixed.
Logo and Navigation
figure 1.5 Logo and Navigation
Navigation should be easy to find and use, which is why it is almost always located within the header or at least near the top of the page. Sometimes both types of navigation are used for high content websites.
2 types of navigation:
- Horizontal: A series of links displayed inline, usually referred to as “navigation”.
- Vertical: A series of links displayed as a vertical stack, usually referred to as “menu"
Main Content and Sidebar
figure 1.6 Main Content and Sidebar
Main Content is the main focal point of a web page so visitors find what they are looking for quickly. While sidebar is the secondary content such as advertising, site search, subscription links (RSS, Twitter, Email, etc), contact methods, etc. It is not necessarily needed on a webpage.
Footer
figure 1.7 Footer
Footer is located on the bottom of the web page, it is used to let visitors know they have reached the completion of the web page. Footer usually contains the copyrights, legal and contact information primarily, social media links, links to the important section: top of the page, home page, contact page, etc., or any other related materials.
Week 4 - The Web
figure 1.8 Week 4 Lecture Slide
Web Standards
There are a variety of ways to access the web, so there are web standards to help developers. The use of web standards are as follow:
- To make the web a better place for both the developer and visitor
- To make it easy for other developers to understand another's coding
- To ensure that all browsers will display the web site properly, without time-consuming rewrites.
How the Web Works
- Connect to the web via ISP, and the domain name or web address is typed in to visit the site. eg: www.google.com, www.bbc.co.uk
- The computer connects to the DNS servers.
- The unique number that the DNS server returns to your computer allows your browser to contact the webserver that hosts the website you requested.
- The web server then sends the page you requested back to your web browser.
HTML Describes the Structure of Pages
Week 5
(Public Holiday)
Week 6
figure 1.9 Week 6 Lecture Slide
This week we had a lecture regarding adding images along with image formats for websites and extra markups (ID attributes, class attributes, Inline elements, and block elements).
- Adding images: <img src="..." alt="..." width="..." height="...">...</img>
- ID attributes: Unique identity only for one element
- Class attributes: Similar identity for several elements
- Block elements: Appear on the start of a new line (e.g: <h1>, <p>, <ul>, <li>)
- Inline elements: Appears on the same line (e.g: <b>, <i>, <em>, <a>, <img>)
Image formats for website:
- JPG
- PNG
- GIF
Week 7
figure 2.1 Week 7 Lecture Slide
This week we were introduced to CSS (Cascading Style Sheet) which is used to govern how the content of specified elements should be displayed.
CSS contains 2 parts, the selector and declaration. Inside declaration sits property and value, property is used to indicate aspects of the elements that you want to be changed, while value is to specify the settings you want to use for the chosen properties.
figure 2.2 Selector and Declaration
figure 2.3 Property and Value
There are 2 methods to using CSS:
- Using external method: <link>
- Using Internat method: <style>
Week 8
(Public Holiday - Hari Raya Aidil Fitri)
Week 9
figure 2.4 Week 9 Lecture Slide
For this week, we had a lecture on CSS box models. There are lots that can be done, such as: giving effect, dimensions, borders, and show and hide boxes.
Week 10
figure 2.5 Week 10 Lecture Slide
Due to the massive use of mobile phones these days, everything is viewed on mobile. Thus, a responsive website is a must. This week, we were taught how to make a responsive website by using Bootstrap.
INSTRUCTIONS
Module Information Booklet
Week 1
(Introduction)
Week 2
This week, as mentioned last week we were divided into groups to survey what's a good and bad website. The websites we evaluate must be from these 2 websites: https://www.webbyawards.com/ and https://www.thebestdesigns.com/. Here are what we found:
figure 2.6 Surveying The Possibilities
Week 3
(Project 1)
Week 4
We started on our first HTML exercise on the notepad, because it was the first exercise it was still simple to make. Although we were not tasked to change the background color, text color, and images, I decided to use them to test out. Here is the result:
figure 2.7 Result
My coding can be viewed here
Week 5
(Public Holiday)
Week 6 - 7
Continuing on our first exercise, we need to apply what was taught during the tutorial session. Here is the result:
figure 2.8 Result
My coding can be viewed here
We also started with our next exercise based on the docs given. here is the result:
figure 2.9 Result
My coding can be viewed here
(Public Holiday)
Week 9
Since we learned about CSS boxes, we were taught to apply them. Here is the result:
figure 3.1 Result
My coding can be viewed here
Week 10
To create a responsive website, we were taught to use bootstrap and apply them to our upcoming projects too. To know how to use bootstrap, we had an exercise on bootstrap, here is the result:
figure 3.2 Result
Next is the layout exercise, we were provided a document for the contents, and here is the result:
figure 3.3 Result
The full website can be viewed here: https://layoutexerciseid.netlify.app/
While codings can be viewed here
FEEDBACKS
Week 6
- Don't add space between id and =, "
- add more space by using <br>
Week 9
- Nice color choice
REFLECTION
It is really exciting to learn how to make a website, during my senior high school we had a project to make websites too but we used a website builder like Wix. It'll be a different experience making a website from scratch. There are lots of studies needed to be done since there will be programming languages used. From the briefing on week 1, I realized that making a website is a lot harder than you think.
After 10 weeks have passed, I still have a lot more to learn as there are lots of things that I still don't quite understand. Although, most of the time I find making a web is quite fun!
Comments
Post a Comment