Week 01 - Week 14
Ahmad Firas Bin Ahmad Fisal | 0345121
Interactive Design (GCD60904) | Bachelor of Design (Hons) in Creative Media
Lecture Notes
INFORMATION
Exercises
Project 01: Prototype Design
Project 02: Working Web Page
Final Project: Design, Exploration, and Application
LECTURES
WEEK 01 - Introduction
We had a group in-class activity that gives us an overview of Interaction Design (IxD) by trying to figure out the ways to do Paper Prototypes. The pictures attached are showing our finalised prototypes that we had to present to a selected group in the class.
Feedback: Our group received rather positive feedback that highlights our ability to create effective paper prototypes by grading them based on our lecturers' feedback during the trial session and also the responses from the other group that we presented to.
WEEK 02 - Usability
Usability in short is how intuitive an app gets for first-time users without having to learn as much to utilise the application or in real-life objects such as doors.
High usability in design can be graded through how well the product features accommodate users' needs and contexts.
Discoverability refers to the ease with which users can discover features within an application.
Usability is a measure of how well a specific user in a specific context uses a product/design to achieve a defined goal effectively, efficiently and satisfactorily
Key Principles:
- Consistency
- Simplicity
- Visibility
- Feedback
- Error Prevention
For Example:
Sound on the keyboard of an ATM machine, sound/beep can be heard when we enter our pin numbers. It provides the user with information that something has been done/pressed rather than it being silent, it creates doubts
Feedback is important because it confirms the task.
Consistency creates coherence and harmony in our design. Consistent design is intuitive design. Could also be an important aspect of product branding.
Accessibility in website design; eg, stopping a video from the background of the design to minimise the loading time of the site.
Visual hierarchy created from headings and subheadings with contrasting colours and font type.
Website example: Harvard University
Unconventional website design example: Curious.co
Question: How much are we willing to sacrifice usability for the sake of aesthetics?
Error prevention could be portrayed in getting an alert message when we are about to delete something to reconfirm, and Password alerts when it is not strong enough in the registration stage.
Addition Knowledge:
- Logo or Icon should have a label on it
- Established apps can remove labels on their icons; eg, Instagram
WEEK 03 - Colour Theory
- Help users understand and navigate the site, and improve online experiences, enabling them to find and respond to the Call to Action buttons throughout the site.
- Significant role in branding and product messaging (Brand Recognition)
- Colour plays a huge role in customers' decisions about purchasing a product.
Colour Relationship
- Monochrome
- Complementary
- Analogous
- Triadic
- Complementary and analogous colour schemes are the easiest to work with.
Colour Warmth
- Hues that contain higher amounts of yellow and red (Warm Colours)
- Often used in alert messages
- Usually associated with passion, happiness, and heat.
- Hues that contain higher amounts of blue and purple (Cool Colours)
- Often used to carry connotations of formality and sadness.
- Reminisce of the sky, and chilly climates, more soothing and relaxing than warm colours.
RGB - Web and Digital Design (Additive)
CMYK - Print Design (Subtractive)
HEX - A colour system that uses a six-digit, three-byte hexadecimal description of each colour. eg; #fffff
- every two characters represent a colour value.
Tints - add white to a colour
Shade - add black to a colour
Hue - describes the degree of similarity between colours.
Saturation - colour intensity
Lightness - defines how bright a colour is compared to pure white.
Take note of the CMYK percentage for offset printing.
Additional Information:
Adobe Illustrator
Colour Panel
- Only web colours
- Global colour settings
color.adoble.com/create/color-wheel
Palleton
Contrast
- Vital for readability but also the content hierarchy
Colour Psychology
-Red, Orange, Yellow, Green, Blue, Purple, Pink, Black, White
Adobe XD - Web 1366 size
Research
Key Issues of the Website
Adding drop shadow behind a box
- create a cut (box)
- control c, control b (it will auto-select the box behind
- change colour
- effect - blur - gaussian blur
- Drop shadow completed
- adjust with blending tool if needed (to overlay)
WEEK 05 - Information Architecture, Site Structure, and Wireframe
A key to successfully designing a large website is to organise the information, logically and make it easy for users to locate the required information.
Information architecture describes the overall conceptual models and general designs used to plan, structure, and assemble a site. It is important for large and complex sites.
Site structure is when users build mental models when confronted with new and complex information systems, they use these models to assess relations among topics and to guess where certain things are located. Successful predictions are determined by how well your site's information architecture matches your users' expectations.
Consistent methods of organising and displaying information enable users to expand their knowledge from familiar pages to unfamiliar ones.
Efficient Web Design:
- Balancing the relation of major menu/home pages with individual content pages.
- Build a hierarchy of menus and content pages that feels natural to users.
- Websites with too shallow of an information hierarchy depend on massive menu pages that can degenerate into a confusing list of unrelated information.
- Oversaturated menus decrease functionality because of buried information beneath too many layers of menus.
Too shallow or too deep is not ideal when creating menus.
- Balancing menus and content pages should be a constant moving target for designers especially when the web is growing exponentially.
- Feedbacks are key in helping the process of analysing and refining.
3 Essential Structures:
Sequences
- Simplest and most familiar way to organise information.
- Structure commonly used in books, magazines and other print matters.
- Chronological, logical series of topics, alphabetical as in indexed, encyclopedias and glossaries.
Hierarchies
- The best way to organise the most complex bodies of information.
- Single Home Page - Subtopic Menu Pages format
- Very familiar with corporate and institutional life, easy to understand.
- Imposes a useful discipline on your own analytical approach to your content.
- Simplest form eg; Star, hub-and-spoke
- Multitiered or tree architecture are most used form due to its familiar hierarchical organisations and can readily form mental models to its site structure.
WEEK 06: The Web
Web Standards:
- Access the Web through audible interfaces, speech output and input
for accessibility, and so on.
Hardware and Software issue:
- Variety of browsers
- Variety of operating systems
- Variety of screen resolutions
Include a disclaimer on the splash page to explain that this website is best used with this browser, resolution, etc.
- High probability that the website will look different to many visitors. However, the most important is the content.
- Developing in accordance with web standards could ensure that it will work well in different circumstances
- The likelihood for people to be unable to access your site increases when you do not comply with the standards.
- World Wide Web Consortium (W3C), sets the web standards.
- HTML and CSS are the two most standard markup languages in web designing.
- When we visit a website, the web server hosting that site could be anywhere. To find the location, the browser will first need to connect to a Domain Name System (DNS) server.
Steps: Web Address > DNS servers > IP address > DNS returns that allows your browser to contact the web server that hosts the website we requested. > Web server (a computer that is constantly connected to the web to send web pages to users) sends the page we requested back to our web browser.
Basic Structures:
- insert pictures of the template structure in editorial
- HTML is made up of characters that live inside angled brackets <> (HTML Elements)
- Elements usually made up of two tags: opening and closing tag
eg: <element>information</element>
(</__> This is the form of a closing tag)
- Attributes provide additional info about the contents of an element.
- Made up of two parts: name and value separated by an equal sign.
eg:
<p lang="eng-us">Paragraph in English</p>
HTML code except for the content needs to be in lowercase only. eng-us is the attribute value to the lang, attribute name. Value is the setting for the attribute and should be placed in double quotes.
<body> : everything inside this element is shown inside the main browser window
<head> : appears before <body> it contains info about the page.
<title> : contents of <title> element are either shown at the top of the browser (tab bar) and usually inside <head>
- HTML has six levels of headings: <h1> (main), <h2> (subheadings), etc.
eg: create a paragraph by surrounding the words with <p>...</p>
to add another paragraph is to repeat the initial step.
in-line elements:
<b>..</b> : bold
<i>..</i> : italic
List:
To open the parent element for a list
<ol>..</ol>
Ordered List: Numbered list
<ul>..</ul>
Unordered List: Bullet point list
To list the items in the parent element
<li>..</li>
Unordered List: Bullet point list
- We could put a second list inside an <li> element to create a sub-list or nested list (it will appear further indented than the list before// bullet style will change for a second list and so on)
Links:
One web to another:
One page to another on the same website:
Part of a web page to another part of the same page:
Opens in a new browser window/tab:
<a>..</a> (anchor)
- specify which page using the href (hyperlink reference) attribute
eg:
<a> href="http://....">IMDB</a>
- IMDB is what users with click on
- The URL provided is where they'll go.
the additional attribute in the same html element:
target="_blank"
- this is to make sure that the link we put will be opened to a new tab or window.
Images:
<img (a single-sided HTML tag)
eg:
<img src=" folder name and choose the image"
(add these additional attributes)
alt="Internet" title="Internet">
- we could also add these additional attributes to the link so that when we hover on the link, it will appear those alt texts to the link.
9
WEEK 07: HTML and CSS
The image format for web
- JPEG (Joint Photographic Expert Group)
- GIF ( Graphics Interchange Format)
- PNG (Portable Network Graphics) + supports transparency
Photoshop > Save for web
ID Attribute
- Every HTML element can carry the ID attribute.
- It is used to uniquely identify the element from other elements on the page.
- It is important that no two elements have the same value for their ID attributes.
- This allows us to style it differently from any other instance of the same element on the page.
eg: Giving an ID to maybe one of the headers that you have enables you to have one of it styled differently like h1 = centre-aligned, h2 = left-aligned.
*lowercase only for the id!
*do not use a space to separate two names (either _ or - only)
*there are codes for special characters
Class Attribute
- Every HTML element can also carry a class attribute
- It will change its appearance if there is a CSS rule to indicate that it will be present otherwise.
Block Elements
(Different from in-line elements)
These are in-line elements:
<img>,<b>,<i>,<a>
These are block elements: <h1>,<p>,<ul>,<li>
- Any stylisations that we accidentally missed to change in the HTML stage, we could do it with CSS later on.
CSS (Cascading Style Sheet)
CSS Symbols - { : ; }
External CSS:
In-Line CSS:
Global CSS:
System font: inside our computer
-when upload to server others can't see it because only the creator has the font on their computer
Link font: eg: sourced from Google fonts
- Display typeface > Download family > Click + icon and make use of the web link that appears (view selected families) > copy style link > paste it in the head section > Google fonts, copy CSS rule > paste it in the head section in selected part to change the font or just globally if it's for all of the words in the webpage.
WEEK 08: Display and Position
The display is an important property for controlling layout in CSS
- Every element has a default display value depending on the type of element; block or inline.
Block-level element
- eg: <div> (empty block)
- starts on a new line and stretches out to the left and right as far as it can.
- Other common block-level elements are p and form, header, footer, section, etc.
Inline element
- eg: <span>
- it can wrap some text inside a paragraph (eg: <span>...</span>) without disrupting the flow of that paragraph
- a is a common inline element.
Horizontal menus are a common example of making inline li elements.
Other display properties:
- Inline-block
- Flex
- Grid
Box Model in CSS
Each box elements are containers. They have three layers that surround their content (in order):
(Content)
- Padding
- Border
- Margin
*CSS enable each size of the layers in the box model to change according to our liking.
Eg: Applying CSS to the paragraph tag
div {
background-color: red;
padding: 0;
border: 1px solid black;
margin: 0;
}
In the HTML section; (example)
<div>
<p> This is a paragraph.</p>
</div>
The reason why to include a div tag is to create the layout. We can also include an ID attribute for a particular thing for an easier and more organised way to stylise
CSS position property
Defines the position of an element in a document. This property works with the left, right, top, bottom and z-index properties to determine the final position of an element on a page.
(Include definitions from lecture video to blog for better understanding)
- static
- relative
- absolute
- fixed
- sticky
WEEK 09:
Briefing of Project 02: Working Web Page and Final Project: Desing, Exploration, and Application. There is a feedback/consultation session with ur lecturer for all or certain of our past projects.
WEEK 11: Introduction to Bootstrap
I wasn't able to attend our final lecture session due to personal reasons.
WEEK 12 - 14:
No classes were conducted due to a Public Holiday and the unavailability of our lecturers.
Comments
Post a Comment