Lecture 1

Introduction to UI/UX

Educational year 2022-2023

Ossama Nasser, PhD.

 Abstract
In this lecture you will be introduced to the concept of user interface (UI) and user experience (UX),
what they mean and why are important, then we will start talking about various frameworks on various
platforms that are used to create user interfaces, and control the user experience, and at the end you
will get to know what to learn from this course. This is considered a small introductory lecture, but an
important non the less.

I
Contents

1 Introduction 1
1 - 1 What Is UI? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1 - 2 What Is UX? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1 - 3 UI vs UX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1 - 4 What Makes A Good UI/UX? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 UI Frameworks 2
2 - 1 Desktop Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 - 1 - 1 QT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 - 1 - 2 GTK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 - 1 - 3 Windows Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 - 1 - 4 WPF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 - 1 - 5 JavaFX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 - 2 Mobile Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 - 2 - 1 Cordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 - 2 - 2 Ionic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 - 3 Web Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 - 3 - 1 Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 - 3 - 2 Tailwind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2 - 3 - 3 Web Assembly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2 - 3 - 4 Blazor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2 - 4 Other . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2 - 4 - 1 Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

II
1 - Introduction
1 - 1 - What Is UI?
When press on icon, a folder opens in side in application, you got your title bar containing the name of
the application and the opened folder, as well as the close, max/restore and minimize buttons, below it you
get the location bar, a simple clickable interface indicating your current location in the file system with the
ability to change it. and finally below it you get to see the content of the folder.
These various items are components used in the interface to tasks allowing the user to interact with the
device in ways other than the good old command line.
Combining these components and interfaces create the user interface, a set of tools, windows, reactive
and proactive components that allows the user to operate the machine.
It is not limited to computers/ mobile devices, some embedded system have a UI like you ADSL
Modem/Router, or machines build to perform a certain set of limited tasks like an ATM, they all have
user interfaces to interact with them.

1 - 2 - What Is UX?
The experience the product creates for the people who use it in the real world. When a product is being
developed, people pay a great deal of attention to what it does. User experience is the other, often overlooked,
side of the equation, how it works, that can often make the difference between a successful product and a
failure.
User experience is not about the inner workings of a product or service. User experience is about how it
works on the outside, where a person comes into contact with it. When someone asks you what its like to
use a product or service, theyre asking about the user experience. Is it hard to do simple things? Is it easy
to figure out? How does it feel to interact with the product?
That interaction often involves pushing a lot of buttons, as in the case of technology products such as
alarm clocks, coffeemakers, or cash registers. Sometimes, its just a matter of a simple physical mechanism,
such as the gas cap on your car. However, every product that is used by someone creates a user experience:
books, ketchup bottles, reclining armchairs, cardigan sweaters.
For any kind of product or service, its the little things that count. Having a button click when you push
it down doesnt seem like much, but when that click makes the difference between getting coffee and not
getting coffee, it matters a great deal. Even if you never realized that the design of that button was causing
you trouble, how would you feel about a coffeemaker that you were able to use successfully only part of the
time? How would you feel about the manufacturer? Would you buy another product from that company in
the future? Probably not. Thus, for the want of a button that clicks, a customer is lost.
To sum things app, User experience is about the interaction between the user and the product, does it
do the intended job in the least amount of effort and interaction from the user? and does it provide the
correct results ?
User experience is a multi faceted field, we will focus on integrating it with user interfaces in developing
software and applications.

1 - 3 - UI vs UX
UI is about the looks and the feels of the application, is to look at, does the color hurt my eyes?
UX on the other is about the interaction with the product, is good, is it bad, did it provided me the
correct and expected result, did it just throw an error ? In simple terms, the application (or product) is like
a sports car (Ferrari for example), the UI is the cool look it has, and the input components (steering wheel,
gear shift) and the output (turning, changing speed) and the visual feed back (the meters), while the user
experience is about how easy, smooth and clear was the interaction with product, was the gear shift stiff
when it shouldn’t, is the steering smooth and responsive?
I know, this looks simple, but it is, UI is all about the looks and placement of the elements, while UX is
about the interaction and performing the requested task correctly and as efficiently as possible.

1
1 - 4 - What Makes A Good UI/UX?
This simple question is actually hard to answer, therefore, it will be left to you answer when we finish the
course

2 - UI Frameworks
2 - 1 - Desktop Frameworks
2 - 1 - 1 - QT
Qt is a cross-platform application development framework for desktop, embedded and mobile. Supported
Platforms include Linux, OS X, Windows, Android, iOS and many others. Development of Qt was started
in 1990 by the Norwegian programmers Eirik Chambe-Eng and Haavard Nord. Their company, Trolltech,
that sold Qt licenses and provided support, went through several acquisitions over the years.
Today former Trolltech is named The Qt Company and is a wholly owned subsidiary of Digia Plc., Finland,
at one point Nokia owned Qt. QT is licensed under flexible license system, in which you can develop software
for free using QT and keep the earnings to yourself, and with extended support and features for a fee. Qt
is mainly written as a framework (more than one library) in C++ with language binding for Python, Rust,
Go , Java and more. It is made up of 2 types of UI libraries:
• QT Widgets which is used to develop traditional desktop applications with standard components.
• QT Quick which is used to develop modern multi-platform application with responsive designs, by
using a JSON like language called QT Markup Language (QML) to create the interface and simple
functions, while calling the complex function from the back end (mostly Python and C++)
Examples of QT applications:
• VLC
• Google Earth

• KDE (plasma) desktop environemnt

• 3D Max
• Telegram

• VirtualBox

2 - 1 - 2 - GTK
Developed originally for creating the Gnu Image Manipulation Program (GIMP), that’s why It is called the
"The GIMP ToolKit" so that the origins of the project are remembered and later got used to create the
GNOME, XFCE Pantheon, Cinnamon and many other desktop environments for the Linux family of OSes.
It is mainly used in GNOME desktop environment, which is supported by companies like RedHat,
Canonical (Ubuntu parent company) and Google among others.
It is mainly written in C programming language, it has bindings for many languages including C++,
Rust and Python as well as Vala, a programming language built to resample C# but around GTK library
and its components.
The people behind GTK are hardcore free software believers, therefore the library is completely open
source, however applications built using it can be profitable.
GTK does support creating the interface in XML and loading it in the in application, more on this in
section (2 - 1 - 4 ) GTK applications can run on Windows, Linux, OSX, Android (recently using libhandy)
Application written using GTK:

• Firefox

2
 • GIMP
• Inkscape
• Darktable

2 - 1 - 3 - Windows Forms
A free and open-source graphical (GUI) class library included as a part of Microsoft .NET, .NET Framework
or Mono Framework to creates rich desktop client apps for Windows. The Windows Forms development
platform supports a broad set of app development features, including controls, graphics, data binding, and
user input. Windows Forms features a drag-and-drop visual designer in Visual Studio to easily create
Windows Forms apps.
It is a UI framework for building Windows desktop apps, but with extra caring and consideration, you can
run these apps on Linux using Wine compatibility layer and Mono just like NaviCat, a database development
platform that is built using Windows Forms and works on Windows and Linux.
With Windows Forms, you develop graphically rich apps that are easy to deploy, update, and work while
offline or while connected to the internet. Windows Forms apps can access the local hardware and file system
of the computer where the app is running.

2 - 1 - 4 - WPF
Windows Presentation Foundation (WPF), a UI framework that is resolution-independent and uses a vector-
based rendering engine, built to take advantage of modern graphics hardware (In other words, it uses the
graphics card to render the UI instead of the CPU, traditionally using DirectX API). WPF provides a
comprehensive set of application-development features that include Extensible Application Markup Language
(XAML) which is used to describe the UI, by describing the elements it contains as well as the positions
and other properties removing it from the coding process simplifying the other parts of the application,
controls, data binding, layout, 2D and 3D graphics, animation, styles, templates, documents, media, text,
and typography. WPF is part of .NET, so you can build applications that incorporate other elements of the
.NET API.
An open-source implementation of WPF hosted on GitHub, which runs on .NET 5 or higher (including
.NET Core 3.1). The XAML designer requires, at a minimum, Visual Studio 2019 version 16.8. Even though
.NET is a cross-platform technology, WPF isn’t and only runs on Windows.
WPF lets you develop an application using both markup and code-behind, an experience with which
ASP.NET developers should be familiar. You generally use XAML markup to implement the appearance of
an application while using managed programming languages (code-behind) to implement its behavior. This
separation of appearance and behavior has the following benefits:
• Develop a better UI by separating the UI and the logic a designer can work on the interface, while a
programmer works on the logic protecting both from the complex task of the other.
• Development and maintenance costs are reduced because appearance-specific markup isn’t tightly
coupled with behavior-specific code.
• Development is more efficient because designers can implement an application’s appearance simultaneously
with developers who are implementing the application’s behavior.
• Globalization and localization for WPF applications is simplified.

2 - 1 - 5 - JavaFX
A Java framework for UI development, JavaFX is an open source, next generation client application platform
for desktop, mobile and embedded systems built on Java.
It uses a similar structure to WPF, an XML file (called FXML) is used to describe the interface and the
positioning of elements, and behind the scene a standard Java (or compatible language) class for logic as a
controller.

3
 It supports 2D, 3D visualization, as well as a CSS styling system, instead of the old Class based system
for Swing
On desktops, JavaFX supports Windows Vista, Windows 7, Windows 8, Windows 10, macOS and Linux
operating systems. On mobile, JavaFX Mobile 1.x is capable of running on multiple mobile operating
systems, including Symbian OS, Windows Mobile, and proprietary real-time operating systems.
JavaFX was intended to replace Swing as the standard GUI library for Java SE, but it has been
dropped from new Standard Editions while Swing and AWT remain included, supposedly because JavaFX’s
marketshare has been "eroded by the rise of ’mobile first’ and ’web first applications." With the release of
JDK 11 in 2018, Oracle made JavaFX part of the OpenJDK under the OpenJFX project, in order to increase
the pace of its development.
Open-source JavaFXPorts works for iOS (iPhone and iPad) and Android and embedded (Raspberry Pi)
and the related commercial software created under the name "Gluon" supports the same mobile platforms
with additional features plus desktop. This allows a single source code base to create applications for the
desktop, iOS, and Android devices.

2 - 2 - Mobile Frameworks
2 - 2 - 1 - Cordova
Will it be nice if I built the UI once and created a website and mobile from it? that is the main idea behind
Apache Cordova, a library that provides a wrapper around an application written in HTML, Javascript and
CSS to integrate and work as native application, by providing an embedded server to serve the app, a similar
project is done the desktop environment using Electron which follows the same paradigm and one of its most
known application is VS Code.

2 - 2 - 2 - Ionic
Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry,
and Adam Bradley of Drifty Co. in 2013. The original version was released in 2013 and built on top of
AngularJS and Apache Cordova. However, the latest release was re-built as a set of Web Components,
allowing the user to choose any user interface framework, such as Angular, React or Vue.js. It also allows
the use of Ionic components with no user interface framework at all. Ionic provides tools and services for
developing hybrid mobile, desktop, and progressive web apps based on modern web development technologies
and practices, using Web technologies like CSS, HTML5, and Sass. In particular, mobile apps can be built
with these Web technologies and then distributed through native app stores to be installed on devices by
utilizing Cordova or Capacitor

2 - 3 - Web Frameworks
2 - 3 - 1 - Bootstrap
It is a CSS library developed to allow the creation of responsive websites which is displayed in the correct
way regardless of screen size.
Bootstrap was created at Twitter in mid-2010. Prior to being an open-sourced framework, Bootstrap
was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and
the project exploded as developers of all skill levels jumped in without any external guidance. It served as
the style guide for internal tools development at the company for over a year before its public release, and
continues to do so today.
Originally released on August 19, 2011, weve since had over twenty releases, including two major rewrites
with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional
stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by
default with a mobile first approach.
In general it divides the screen into a grid of infinite rows and max of 12 columns. the size of the each
column is determined using a cutoff value in CSS, defines 4 types of columns defined by the minimum width:

4
 • sm: small, this type works on screen of size 576 pixels and up, basically phone screens.
• md: medium, this type works on devices of size 768 pixels and up, basically tablets.
• xl: extra large, this type works on devices of size 1200 pixels and up, large desktops and laptops.
• lg: large, this type works on devices of size 992 pixels and up, normal desktops and laptops.

By using the cutoff values of column on various elements, bootstrap allows the creation of a flexible interface
which suits all size.
It also defines several type of items like containers, cards, badges, Popovers and many other, some with
built in size consideration like columns, others are purely complex visual component to standout based on a
required task or needed features not supported natively by HTML.

2 - 3 - 2 - Tailwind
Tailwind CSS was originally developed by Adam Wathan and was first released on November 1st, 2017. It
is a utility-first low-level framework in order to apply CSS. It means you won’t need to write a lot of CSS.
Instead, you will write numerous classes for your HTML elements.
The best thing about Tailwind CSS is that it is highly customizable. You can build custom designs and
excellent custom user interfaces. Interestingly, it won’t require extraordinary coding effort. You can easily
leverage the styling of every single component separately in the way your UI demands. In addition, you can
build unique micro-interactions that can be extended following the project requirements.
Tailwind CSS offers flexibility to transform the "look and feel" of the elements. You may think that it’s
not at all convenient to write a lot of classes. That’s where component extraction comes. You can bundle
these classes into one and name it as you want. It’s similar to creating a Bootstrap-like framework.
These are some of the reasons why Tailwind CSS is drawing a lot of attention. While unlikely to rival
Bootstrap, Tailwind CSS offers flexibility in exchange for time. However, it makes sense to build custom
components without residing on code conflicts.
The significant difference between Tailwind CSS and Bootstrap is that Tailwind offers predesigned widgets
to build a site from scratch with fast UI development, while Bootstrap comes with a set of pre-styled
responsive, mobile-first components that possess a definite UI kit.
The main issue with Bootstrap is that developers have to rely merely on specific abstracted patterns. It
compels to override the framework with custom CSS that utterly defeats the purpose of using a framework
in the first place.
Sites created using Bootstrap follow the generic pattern that makes them look alike. Undoubtedly,
it hampers the ability to incorporate creativity effectively. Also, Bootstrap requires a 308.25kb file size,
including the main file, Bootstrap JS, Popper.js, and jQuery (Bootstrap 5 drops jQuery) .
On the other hand, Tailwind CSS uses a set of utility classes to create a neat UI with more flexibility.
The predesigned widgets help to implement the design without worrying about one element affecting another
related element.

2 - 3 - 3 - Web Assembly
This is not a UI framework, but rather a technology that allows the creation of websites using languages like
C#, Rust and C++ among other, including everything, the interface and the code, then ship it in special
format that can run inside the browser in a similar manner to Java applets, but with a lot more focus on
security and protection. WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based
virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling
deployment on the web for client and server applications.
It is used by Flutter and Blazor in order to support web browsers.

2 - 3 - 4 - Blazor
Blazor is a free and open-source web framework that enables developers to create web apps using C# and
HTML. Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed

5
of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is
written in C#, allowing you to share code and libraries and runs directly on the client side using Web
Assembly. Alternatively, Blazor can run your client logic on the server. Client UI events are sent back to the
server using SignalR - a real-time messaging framework. Once execution completes, the required UI changes
are sent to the client and merged into the DOM.
Blazor is a feature of ASP.NET, the popular web development framework that extends the .NET developer
platform with tools and libraries for building web apps,.

2 - 4 - Other
2 - 4 - 1 - Flutter
Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform
applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web (using Web Assembly)
from a single codebase. The first version of Flutter was known as codename "Sky" and ran on the Android
operating system. It was unveiled at the 2015 Dart developer summit with the stated intent of being able to
render consistently at 120 frames per second. During the keynote of Google Developer Days in Shanghai in
September 2018, Google announced Flutter Release Preview 2, which is the last big release before Flutter 1.0.
On December 4th of that year, Flutter 1.0 was released at the Flutter Live event, denoting the first "stable"
version of the Framework. On December 11, 2019, Flutter 1.12 was released at the Flutter Interactive event.
On May 6, 2020, the Dart software development kit (SDK) in version 2.8 and the Flutter in version
1.17.0 were released, where support was added to the Metal API, improving performance on iOS devices
(approximately 50%), new Material widgets, and new network tracking.
On March 3, 2021, Google released Flutter 2 during an online Flutter Engage event. This major update
brought official support for web-based applications with new CanvasKit renderer and web specific widgets,
early-access desktop application support for Windows, macOS, and Linux and improved Add-to-App APIs.
This release included sound null-safety, which caused many breaking changes and issues with many external
packages, but the Flutter team included instructions to mitigate these changes as well.
On September 8th, 2021, the Dart SDK in version 2.14 and Flutter version 2.5 were released by Google.
The update brought improvements to the Android Full-Screen mode and the latest version of Google’s
Material Design called Material You. Dart received two new updates, the newest lint conditions have been
standardized and preset as the default conditions as well Dart for Apple Silicon is now stable.