UI/UX Design

Faculty of Information Technologies, INFT-4244

18:00 – 20:00, Online (MS Teams)
Spring-2022

Zhasdauren Duisebekov
Email: [email protected]
Office: online

Preferred mode of contact: MS Teams chat, Email. During business hours, if possible.
Teaching assistants: TBA

Course Description
User Experience and User Interface design course enables students to learn about how to run research and do
need finding. First goes UX and UI. UX answers a question: why we are building this system/product, and UI
answers a question: how we are going to build it. In this course you will learn basics of User Experience design
and learn tools, techniques of UI design. Overall goal is to make sure that in the end you will be able to build a
prototype based on user needs and be able to effectively communicate your solutions.

Course Learning Outcomes

How this learning
What will be
Active Verb outcome will be
done/produced
achieved
the tools of the building by knowing the main
1 to use web principles and components
sites and apps of UI/UX design
by knowing the
2 to apply current best practices conventions
in UX design
new trends of web and
by reading papers and
3 to imagine apps
articles in UI/UX design
design
by using the skills and
4 to develop high usability prototypes knowledge in UI/UX
design
by using tools for
creating of web and apps
5 to be competent in wireframes and mockups
design
development

Assessed Components
Description Number of Points (60/100)
1 class activity 15
2 midterm project 15
3 Home tasks 14
4 final project 16

1
Reading List
Required Reading List

Publisher/W
Type Author Year / ISBN Title
eb site

https://www
Visual .c
Elements of oursera.org/
Michael
1 Online 2018 User sp
Worthington
Interface ecializations/
Design ui
-ux-design

https://www
.c
oursera.org/l
UX Design
Michael ea
2 Online 2018 Fundamenta
Worthington rn/ux
ls
designfunda
me
ntals

https://www
.c
Web Design:
oursera.org/l
Roman Strategy and
3 Online 2018 ea
Jaster Information
rn/web
Architecture
designstrate
gy

https://www
.c
Web Design: oursera.org/l
Roman Wireframes ea
4 Online 2018
Jaster to rn/web
Prototypes designwirefr
am
esprototypes

2
 User
Interface
Soren Design. A
5 Published 2012 Pearson
Lauesen Software
Engineering
Perspectives

3
Course Content - Curriculum Plan
TOPICS / Activity
Visual Elements of User Interface
Design . What IS a user interface
anyway? The Relationship Between
UI
Introduction to the User Interface
1 and UX.
course
Roles in UI/UX. Interface
Conventions.
Template vs Content. Aesthetics &
Functionality
Design Before Design. Language as
a
2 Formal Elements of Interface Design design tool. Color and Shape.
Imagery.
Typography. Icons.
Static to Active. Functionality. Speed
and Style. Composition and
3 Active Elements of Interface Design Structure.
Buttons and not buttons. States and
Changes
Invisible Complexity: Making a
Whole
from Many Parts. Hierarchy of
Composing the Elements of Interface Content.
4
Design Conventions and Expectations.
Structure and Grids. Platforms and
Screen Sizes. Putting it All Together:
Slice 'n' Dice.
Ideation, Articulation, Development.
Ideas and Goals. Research and
Development. Aud ience and
5 UX Design Fundamentals Rationale.
Goals and Outcomes (for the
Client/Designer). Naming and
Mission
Mapping, Testing, Envisioning. Non
Planning, Testing, Researching,
6 Visual Paper Prototyping. Non-Visual
Mapping
User Testing. Sitemap
Nielsen's Usability Heuristics.
Consistency and Details. Wireframe
7 Wireframes and Interfaces
Map. Visual Direction. Developing
UI.Refining UI
Linking Up. Branching Out. Making
8 Generic prototype
Pathways. Publish Prototype
The User Experience Process.
Web Design: Strategy and
Usercentric design. The UX Phases.
9 Information
Waterfall vs. Agile. Web vs. App.
Architecture
Project Ideas.
User Research. Inspiration. Analytics.
10 Determining Strategy User Needs and Client Needs . Target
Audience.
Content and Functionality. The
Sitemap. Information Architecture.
Sitemap Concerns. Sitemapping: an
11 Outlining Scope annotated process. Sitemap
Elements.
Treejack Introduction. Treejack
Analysis.

4
 Wireframes. Primary navigation.
Secondary and utility navigation..
Related content, inline links, indexes,
Web Design: Wireframes to
12 and search. Wayfinding. Header.
Prototypes
Footer. Sidebar. Content. Common
Form Elements. Homepage Content
Strategies. Wireframing Tools.
Visual Mockups. Design Principles.
13 The Mockup Phase
Using whitespace to style a form. A

visual comparison. Web Fonts. Web

Typography: A few tips.
Survey of Web Technologies. HTML
vs.
14 Elements of Coding CSS vs. Javascript: A metaphorical
adventure. HTML Basics. CSS Basics.
Web Inspector
Clickable Prototypes. Exporting
Assets.
15 Final Presentation
Importing Assets and Creating
Hotspots. Hotspot Templates.