Interactive Design | Exercises
29/03/2021 - 19/04/2021 (Week 1 - Week 4)
Naim Zuki, (0346615)
| Bachelor of Design (Hons) in Creative Media
Interactive Design
Exercises
LECTURES
Lecture 1 | Introduction
Lecture 2 | What is a Website?
A website is a web document on the
internet published by a single person or an organisation with an intended
purpose. There are many different types of websites on the internet, namely
Informational Websites, Corporate Websites,
Portfolio Websites, Entertainment Websites, and the list goes on. But what
distinguishes a good website from a bad website? There are a number of
criteria that must be fulfilled in order to develop an effective website, but
it ultimately comes down to
how well information is delivered to the audience. If the user doesn't
understand the website, then the website has no use to them. Before going into
UX and UI design in the next lecture, below is are some starting points to
consider when developing a website.
|
| Fig. 1.0, Things to Consider While Designing a Website, (Image courtesy of Codingkart) |
_
Lecture 3 | UI, UX, & Website Anatomy
To put it simply, User Interface (UI) is the interaction between
humans and machines that allow users to complete a task or achieve a specific
goal. UI brings together interaction design, visual design, and information
architecture to structure a layout that is efficient and visually satisfying
to the user. Therefore the functionality towers above all else.
Some
essential properties
of well-designed UI are clarity,
familiarity, consistency,
forgiveness, and efficiency.
User Experience (UX) is the experience
that a person has as they interact with a product, which encompasses all
aspects of the end-uisers interaction with the company, its services, and its
products. Since UX designers focus on crafting products as a whole, the
concept of user-centred design takes a central stage i.e— understanding the
target audience, what is the product for, creating user personas, and helping
users see goals, desires, and limitations of target users.
So how are UI and UX related design principles yet are they very different in
nature? Generally, UX designers conceptualises, UI designers execute. The role
of UX designers are understanding users,
creating a design strategy, analysing the design of interactions, and creating wireframes and prototypes. The role of UI designers is more relevant to the visual representation of
information, so they take the user flow and wireframes for individual
screens/pages created by UX designers and turn them into something
aesthetically pleasing (in other words, dressing-up the skeleton). Though it
should be noted that UX designers are also involved in the execution process
to ensure that the product design is moving in the right direction.
|
| Fig. 1.01, UI vs UX |
A basic Website's Anatomy consists of a container, a header,
logo, navigations, main content, a sidebar, footer, and whitespace. A
Container is the element that
encapsulates all the other elements of the webpage, its purpose is to, you
guessed it, contain the page elements. The
Header is the top section of a web
page, where (usually) the logo, navigation, tagline, and so on are located.
The Logo is the identity and the
branding of the product, without it, a product loses its integrity. The
Navigation is an important element that
guides the user to the different sections of the web page, better navigation
means better communication of information. The
Main Content is the
primary element of a website, it should be where most of the
important information exist and it must communicate the purpose of the website
extremely well. The Sidebar is a
secondary content element that contains additional information or assets of
the website (eg a search bar, navigation, etc). The
Footer is the closing element of a
website, it indicates the end point of a page. Finally, the
Whitespace of a website helps build
focal points and direct the user's attention to specific parts of the layout;
it's a strategic planning to give priority to specific elements or contents
within a website.
|
| Fig. 1.02, Sample Website Wireframe; (Image Courtesy of JUSTINMIND) |
_
Lecture 4 | The Web
Web Standards is the core sets of rules for developing websites. It's set by a
central organisation who is responsible for maintaining the web standards,
that is World Wide Web Consortium (W3C). The W3C has defined
dozens of standards, including the standard markuip language used to build
websites. It's possible to not comply to these standards, but it increases the
likelihood of inaccessibility. By complying with this standard, the developing
process becomes easy to understand for both developers and the browser/server,
making the processing time much more efficient. Thus, this course will cover
two standard markup language in building a website, namely HTML and
CSS.
In any visually plain text (eg news paper and articles), it's always presented
in simple visual hierarchy, i.e.—Header, Main Body, Footer. Thus for today's
lecture, we'll be reviewing how HTML describes the structure of pages. The
following are slides for coding this structure in HTML (sl. 20 - 46)
Fig. 1.03, Week 4 Lecture Notes, (Slides Courtesy of Mr Shamsul)
_
Lecture 6 | Adding Image in HTML
Fig. 1.04, Adding Image in HTML, (Slides Courtesy of Mr. Shamsul)
_
Lecture 7 | Introduction to CSS
Cascading Style Sheet (CSS) is a style sheet language USD for
describing the presentation of a document written in a markup language like
HTML. It allows the script to create rules that specify how the content of an
element would appear. For example, setting the background a specific colour,
assigning a specific font on a specific paragraph, or applying colours to
different headings. A CSS rule contains two parts: a selector and
a declaration.
Selectors indicates which element the
rule applies to and it can be applied to multiple elements.
Declarations indicate how the elements
referred to in the selector should be styled. The slides below contains more
information and examples on how to use CSS in a HTML script.
Fig. 1.05, Employing CSS in HTML, (Slides courtesy of Mr Shamsul)
_
INSTRUCTIONS
Module Information Booklet: Interactive Design
<iframe src="https://drive.google.com/file/d/12tPPhxEcSYiWJjzhxDohbGozVowy081P/preview" width="640" height="480"></iframe>
Exercise 1 | Clip Editing
_
FEEDBACKS
_
REFLECTIONS
Week 1
_
FURTHER READINGS
Comments
Post a Comment