Cairo University

Faculty of Graduate Studies for Statistical Research

Department of Computer and Information Sciences

SE104-The User Interface (UI) Design

Lec. 1 outline: You’ll find all the information you need here on
how this course is run, assessment details, resources

Dr. Mohamed Fakhry: Consultant in Advanced AI Engineering, Accounting Solutions,

and Software Development
E-mail: [email protected]; [email protected] Tel: 01201208623
Introduction:

Do you d'Jffltur~?

Golden Krishna is a leading UI designer, and author of design essay "The

11
best interface is no interface which has earned over 200,000 page views.
,

It describes how and why we can do something better than make a world of
zombies. How and why we can solve real problems in more prscreen
ofound, elegant, and brilliant ways.

2/112
The User Interface (UI) Design
Have you been in a meeting
like this before?
~0-..A. ~~d... Git_

~d-_~~ ~...8"--
f ' ~ ~ k '!

3/112
The User Interface (UI) Design
Theory to
Theory to Practice
Practice ,r
I(
---------------------
----------------------- ,118
/8
□□ If you
If you ownown a a car
car and
and it breaks down
it breaks because of
down because of
the failure of
the failure of aa particular component, there
particular component, there isis
likely
likely the
the same
same component
component lyinglying around
around
somewhere
somewhere that that you
you can
can easily buy and
easily buy and replace
replace
the broken one
the broken one with.
with.
□□ Modular Design
Modular Design has
has the
the same
same exact
exact effect
effect to
to the
the
success
success of of digital
digital products,
products, if if approached
approached in in the
the
correct
correct way way
□□ As
As a a digital
digital designer,
designer, howhow often
often has
has aa project
project youyou
worked
worked on on made
made it it into
into production 100% as
production 100% as you
you
had
had designed
designed it? it?
□□ It's for
It's for the
the designer
designer to to reshape
reshape thethe way
way they
they
approach
approach digital
digital design
design without
without needing
needing toto learn
learn aa
single
single line
line of
of code.
code .
□□ We
We will
will teach
teach you
you how
how to to connect
connect a a chassis,
chassis, anan
engine,
engine, tires,
tires, and
and a a steering
steering wheel
wheel toto make
make a a
basic functioning
basic functioning car car

4/112
The User Interface (UI) Design
Course Map & Grading

Essential - - Theoretical work

- - Practica I work

Lectures (Topics Project

and Practice Slides)

Midterm (20%) (20%)

Final Exam (40 %

--------- ------- ----------

Interactive Assignments (10%)
Quiz, critiques, & discussion Examples &Cases

5/112
The User Interface (UI) Design
Reference Texts

D Recommended Text (Free, in the lib rary!) 1

□ Modular Desig1n Frameworks: A Projects-bas ed

1 1

Guide for UI/UX Designers Ja11mes Ca1brera

Holl brook, New York, ILJSA ISBN-13 (pbk): 978-
1-4842-1687-3 ISBN-13 (electronic): '9 78-1-
4842·- 1688-0 DOI 10.1007/978-1·- 4842-1688-
01Library of Congress Control Number:
2017951445 Copyright© 2017 by James
c ,a brera

6/112
The User Interface (UI) Design
 a ~ -D-a 0
,;: . UI?
A Modular Future

□ Modular Design Fra1mework, they all already come designed fro1

ma
developer-centric point of view.

□ To put it simply, these systems are precoded librari,es that are

capable of completing common and generic tasks that facilitate
modern-day, ra pid software development

□ In this course, when we refer to Modular Design Frameworks, we are

simply talking about them as a logical system of reusable parts . This
also includes defining the interactions between those parts .

□ Bootstrap was developed for Twitter, React was made for Facebook,
and Polymer is used to facilitate Google's own Material Design .

7/112
The User Interface (UI) Design
 IJ , - - D-t 0
I just want to play hopscotch ·~-~ a

Retrofitting one game to play another is not always the best option

8/112
The User Interface (UI) Design
Design and Development: Let’s
Bridge the Gap

D Design and development should carry equal

weight in the process.
D Designers should establish the what ,and t he
why, while developers determine the can and
how.
□ Designer answers: What are w,e building and
why are we build

Should Designers Learn to Code? To that question

my answer is a resounding No.

Designers should be maximizing their focus

on the end users of the products they design

9/112
The User Interface (UI) Design
 a ~ -D-a 0
,;: . UI?
The Advantages of Reusability

Le.~ ~.. Cl. d ff<f"CI\

By reusing designs, she1.pc.. lm -t,red
it will be much of CU'c.l~s 1T ..
easier to gather
data and apply
updates across the
entire system.

G
If a design already works, there's no reason to change it solely for
aesthetic purposes

10/112
The User Interface (UI) Design
 ■ ~~D., 0
a
Assignment 0 ------- ~

Establishing a Font System for Facebook

Establishing a Colour System on Facebook

11/112
The User Interface (UI) Design
 Cairo University
Faculty of Graduate Studies for Statistical Research
Department of Computer and Information Sciences

SE104-The User Interface (UI) Design

Lec. 2 outline: You’ll find all the information you need here on Fonts,
Colors, and the Invisible UI, Defining Visual Hierarchy, Establishing a Font
System, Custom Fonts and System Fonts, Establishing a Colour System,
Typography,….. And so on

l=>ri~c::::is=>IE=-s- <>f

•■ ••..==- .-11f---- =
411a::= - -
4111:::~ «:::e
■ -c::::es:-ii« ■ ...

Dr. Mohamed Fakhry: Consultant in Advanced AI Engineering, Accounting Solutions,

and Software Development
E-mail: [email protected]; [email protected] Tel: 01201208623
 a ~~-~ 0
,, a
Agenda 0 ~

❑Fonts, Colors, and the Invisible UI

❑Defining Visual Hierarchy
❑Establishing a Font System
❑Custom Fonts and System Fonts
❑Establishing a Color System
❑Typography

3/112
The User Interface (UI) Design
Fonts, Colors, and the Invisible UI
Ag
- Ag
-
Ag Ag
- Ag

MA Ag Ag Ag
-: A

-
When the design and flow are so instinctive that they go unnoticed,
enabling users to focus solely on their tasks

4/112
The User Interface (UI) Design
 a ~ -D-a 0
,;: . UI?
The best UI is no UI

In the begiinning of this, we spoke

about moving away from the GUI -
' ..
th.is 1m eans progressively attempting i--=-.::--'1--+---,,----'......__,, ' '
' ',
to interact with our users ,,. ~;.;.;:.;.i..;..~
,
' I
''\
,,, I
via multimodal interfaces. Sounds, ~-::;;/:.:~;=;;;~:..;
speech synthesis, vibrations and
even text, as in the case of chatbots,
are ways with which we can convey
information in varying degrees of
granularity.

We also need a level ofintelligence in order to interpret users' physical and

gestural interactions with the device (e.g., did the user shake the device
with an intention to stop the current guidance, or was it an inadvertent
. .?).
actzon
5/112
The User Interface (UI) Design
 Your stuff isn’t good enough, and a
,;:
~ -D-a
. UI?
0
it never will be
D I always think, " I could've made this thing
better. But I'm proud about what I got
done given the situation and you should
take pride in your work so that you have
confidence to move onto your next project
and you're growing and developing and
that's important.
□ You should always be trying to push
yourself forward.

However it's still our job as humans to understand the information, invent
sequences ofcommands through which it can be transformed or processed
6/112
The User Interface (UI) Design
 a D 0
,;: . UI?
Defining Visual Hierarchy
□ Before doing any design whatsoever, the first thiing you need
to think about is how you want to priioritize the visual
hierarchy.
D What elements of visual design will you use to cue your users
as to what's most important? The elements we will be
focusing on for the purposes are size, color, and order.

D Size - The bigger something is, the more important it is.

□ Color - Using a primary color on the most important
elements.
D Natural ,Q rder - It could be top-down, left-right, outside-
inside, etc.

7/112
The User Interface (UI) Design
 What would you think is the most a ~ -D-S 0
UI? a
important part of the design? 0
---~
A busi ness card
• Your name
• James Cabrera
• Your current t itle

• Short description about yourself

Not sure if shower or air conditioner fluid.
#nycproblems Not sure if shower or air conditioner fluid.
• Links to your social networks
and email address
i!nycproblem~
I I
.t Jamucatinta
Not sure if shower or air conditioner fluid.
#nycproblems
• Size
• Color
• Natural Order • Natural Order Our font system:
• Size • Color • Title Font

• Color • Size • Subtitle Font

• Natural Order • Description Font

• Link Font
* We will be operating under: Size , Color, Natural Order

8/112
The User Interface (UI) Design
 a D 0
,;: . UI?
Establishing a Font System

□ A typeface is a design style that consists of multiple

characters, which vary in weight and size . It is Uke "a
family" of fonts which differ in weight, width, and stylle
D You might find yourself in one of two situations with
respect to fonts.
1. You are designing something brand new . You have a
clean slate with respect to choosing fonts.
2. You are designing an interface for a brand that
allready has well-defined brand guidelines. You need
to establish a system that accommodates set font
guidellines.

9/112
The User Interface (UI) Design
 a ~ -D-a 0
,;: . UI?
Custom Fonts and System Fonts
□ When do we need to use completely custom fonts
versus generic system fonts?
D We all know the advantage of using custom fonts is that it gives
our sites a unique identity. You want to be able to separate
yourself, identity-·wise, from the rest of the noise of the Internet.
That means longer load times since font fi les are typically not
small by web file size standards.
□ System Fonts, on the other hand, are generic fonts that are
allready installed on most computers by ,d efault , and don't need to
be downloaded to lbe seen . Examples of content distribution
platforms are Facebook Instant Articles, Apple News, Google AMP,
and Snapchat Discover.
□ Think About Function Before Form : When defin ing what
fonts we want to use where, we want to always make
sure we are defining them based on function over form .

10/112
The User Interface (UI) Design
 Name fonts under a system in the a
,;:
~ -D-a
. UI?
0
following way
$serif_ font: Georgia, serif;
$sans-serif_ font: Arial, sans-serif; nu Font

Or
$primary_ font: 'Helvetica Neue',
sans-serif;
- Hoadllno Font
$secondary_ font: Garamond,
serif; ..
·-
_.....
...
-- -
F
Body ont

Or
$title_font: 'Helvetica Neue', sans-
serif;
$subtitle_ font: Garamond, serif;
$body_font: Georgia, serif;

11/112
The User Interface (UI) Design
 a ~ -D-a 0
,;: . UI?
Establishing a Colour System
□ About 4.5% of the ·w orld population has some fonm of color blindness,
so we should be extra careful not to bias against or exclude t hose
potential users of our products.

□ Another important thing to always keep in mind is common color

associations. An example of th'is in UX design is applying color to
positive and negative actions, such as saving and delet ing. it may not
be t he best idea to apply a shade of red for actions like saving
progress or submitting data. These types of choices can cause
confusion for your users.

□ Consider utilizing a naming system like the following:

• Primary, Secondary, Backgro und, UI
□ Many peop~
l•e define their colors in their code by their names::
• $DarkBlue = # 0a62e5

12/112
The User Interface (UI) Design
A simple font system and casual a

hierarchy 0

@mixin title font{

font:family : Georgia, Garamond, serif;
letter-spacing: -o.04em;
}
@mixin subtitle_font{
font-family: A.rial, Verdana, sans-serif;
James Cabrera font-weight: bold;
Interface Designer
}
CIO'td •• W 111,(1111 IMllllllMO.,.._ ,1 1,..,vo,t<:ay WW.I
--~...,_torvw,.. _ _,._.....,,.~..,. @mixin description_font{
o.g,w-.1.l
_......._ .....sto-...ci ~ - . . . . . . , ....
,,.,..,... F<lcllodM,w_sey_
Oft.~
Ho•a.mnllJ'-......-~
lo,
font-family: Arial, Verdana, sans-serif;
1',wy21...,,_.,.,.. _ _,.. ... _.,....,.,.,... ... _ _ Mllna }
-UX"--
@mixin link_font{
• • ,. .... :a ....
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
text-transform: uppercase;
}

D Bb

13/112
The User Interface (UI) Design
 ■ ~ ---DIii! 0
,;: . UI?
Typography
.,
01 I Typography terminology
_,

Cap height Bar Closed counter Acender

X-helght
oorapby
Baseline Sleam Loop Decender Open counter

It is the art of utilizing typefaces and fonts to create content on a

website/app that is clear, readable, understandable, and pleasurable
to the user who is viewing it.

14/112
The User Interface (UI) Design
 ■ ~~D., 0
a
Assignment 0 ------- ~

Design A business card with your own schema

15/112
The User Interface (UI) Design
 Cairo University
Faculty of Graduate Studies for Statistical Research
Department of Computer and Information Sciences

SE104-The User Interface (UI) Design

Lec. 3 outline: You’ll find all the information you need here on Defining
Your Basic Unit, Understanding the Essence of Your Product, Theory in
Practice, Onward Inward, Inventory, Flow,….. And so on

l=>ri~c::::is=>IE=-s- <>f

•■ ••..==- .-11f---- =
411a::= - -
4111:::~ «:::e
■ -c::::es:-ii« ■ ...

Dr. Mohamed Fakhry: Consultant in Advanced AI Engineering, Accounting Solutions,

and Software Development
E-mail: [email protected]; [email protected] Tel: 01201208623
 a ~~-~ 0
,, a
Agenda 0 ~

❑ Defining Your Basic Unit

❑ Understanding the Essence of Your Product
❑ Theory in Practice
❑ Facebook
❑ Uber
❑ Amazon
❑ Onward Inward
❑ Inventory
❑ Flow
❑ Design: One for All
❑ Building Your Own with Example (A portfolio site)
3/112
The User Interface (UI) Design
 a ,-.--.~ 0
a
Defining Your Basic Unit 0 ~~~ ~

MEA§UflEMENT
l

ar
UNIT§
(;.;;~i:H~:.~,
inches g= ,,t:Ji ~ pint
tob lupoon cup

@ ou~cc pound
quort go I Ion

Understanding the essence of what a basic unit, or essentially

forming the basis of a Modular Design Framework.

4/112
The User Interface (UI) Design
Understanding the Essence of a
,;:
~ -D-a
. UI?
0
Your Product

D Are you selling a product?

□ Are you providing a service? People Buy
From Peopfe
□ Are you presenting information?
They Trust

We Need a Product to Sell

What resource does our service come from?
What is the actual piece of information that you want to present?
Whenever you start a design, it's easy to get caught up in the broad idea of
what you want to accomplish without thinking about the smallest pieces
that will be doing the heavy lifting to get you there.
Ex: increasing sales, acquiring users, or driving views

5/112
The User Interface (UI) Design
 a

Theory in Practice: Facebook 0

-
I
- " -- -

IIICII

------· -
-

6/112
The User Interface (UI) Design
 a ~ -D-a 0
,;: . UI?
Theory in Practice: Facebook Cont.
□ analyzing the designs of a few well-known and widely used products, and
under the lens of this app,roach identify what that product's basic unit can be.
□ It is all based on th,e ir basic unit of user posts. These units carry
through to Pa·g_es, Grouas, Events, News, and even Messages.
□ Facebook may seem like an extremely complicated system, but it can
really be boi lied down into a single .basic unit: the individual post
.□ All of the interactions around Facebook rely heavily on the
organization of individual posts, whether that is posts vou make,
your friends make, or a company makes. The Nlewsfeed is just an
11
aggregation of posts of alll the people you foUow. Your wa/J'' is just
an aggregation of all of the individual posts you made. Most of the
core functionality of the site happ,ens within each post (reactions,
comments, consumption), and also as different ways of aqgr,e,qating
groupings of individual posts.

7/112
The User Interface (UI) Design
 a
,;:
D 0
. UI? a
Theory in Practice: Uber 0 ~

□ Entireapp revolves around each -··

·- •

-
-
11,n

UBER
individual driver 2 re-e_resented as
cars on a map. Users interact
with this basic element of the car
representing each driver.
□ Uber'sinterface revolves around
cars, which represent drivers as a
basic unit
... --
- m ~

~
- 8/112
The User Interface (UI) Design
 a D 0
,;: . UI?
Theory in Practice: Amazon
-...... ~ •-·-----
~- - - ,....,_
'

--.........
-·-
----
~

. ...,.,._,._

--~----
--
--
□Amazon, like all retailers or _-_·-_..:;.........;;..;;....__,;,.______,;;;;;;.;;;....__,,;,..._~.;.._;__~..;..;
shopping-focused sites, has the
clear basic unit of a shoppable
product
□ Individual products are the basic
unit for Amazon
9/112
The User Interface (UI) Design
Onward Inward

D Once yo,u determine what your bas'ic

unit should be, the next task is to
start designing the unit itself.
□ Designing inward mean·s determining
what eJe,ments y,ou ne,ed ta contain
within your unit.
□ Designing ,outward means
determining how you would like to
aggregate your basic units across
pages.

10/112
The User Interface (UI) Design
 a D 0
,;: . UI?
Inventory
D The first part of designing the inner part of your basic unit is
determining what elements you should display. You don't have
to display everything, just enough to give the user relevant
context.
• Title of Content
• Short Description
• Image
• Timestamp
• Author
• Tags
• Category

Establish a threshold for yourself (I recommend 3-4 elements).

11/112
The User Interface (UI) Design
 a ~ -D-a 0
,;: . UI?
Flow
□ Thinlk about how you want your units to flow throughout your
pages. The most common patterns are the "Z" and "F" patterns
□ You shoulldn't need to feel obliged to stick to a singfe, pattern

-
-
"'Z"' Pattem "'F'' Pattem

12/112
The User Interface (UI) Design
 a D 0
,;: . UI?
Design: One for All
D Us,i ng your esta1blished font, color~ and
hierarchy _principles .
D You can take your chosen inventory of
elements and your idea of how you might
want your units to flow in order to design
your unit.

□ It's i1mport:ant to 1note that in the way of

buil ding this modular system, to start, is
1

by using a single unit and repeating it.

13/112
The User Interface (UI) Design
Building Your Own with a
,;:
~ -D-a
. UI?
0
Example (A portfolio site)
□ The Basic Unit for your portfolio sit e wi ll be each individual
project that we want to showcase.
□ The Basic Unit for our portfolio site wil l be ea1ch ind'i viduall proj ect
that we want to showcase.
□ What you declde to show and how.
■ I mage
■ Proj ect Title
■ Short Description
■ Proj ect Type (i. e., Website, Photography, Graph ic Design,
et c.)
■ Client
□ As for flow, let 's go with a Z pattern f or t his example

"Z" Pattern
14/112
The User Interface (UI) Design
Building Your Own with a
,;:
~ -D-a
. UI?
0
Example (A portfolio site) Cont.
□ let's start: designing a wireframe of your basic unit design . Let's
apply Fonts, Colors, and Visual Hierarchy.
D Here's how we'll estabUsh visual hierarchy:
■ Size
■Natural order (top-down)
■ Color
D Here is the font system we will be using based on our inventory:
■ Title Font
■ Description Font
■ Meta Info Font

A wireframe is a layout of a product that

demonstrates what interface elements will e19 -
on key pages. It is a critical part of the 8 ·=--= ·
interaction design process. .. ·
15/112
The User Interface (UI) Design
Building Your Own with a
,;:
~ -D-a
. UI?
0
Example (A portfolio site) Cont.
SITE NAME

.... ...
l'rc+KI Titla hofllct Tlki
D Putting them into our decided Z -----~·-
...
. . . . . .IJQIJ .....
·-.........,,...,_
..........
•• 'fl ...

pattern .
□ shows what a very basic
structure of our design created Projoct Tillo

from your single basic unit will .... .-,,, ..........,__,__..

,.._ ___ .__..........,...........
.........
_._
.. ..
-, ..
llook like.,
□ The important thing to note is Pro1toni.
that with very minimal effort .................... __ ,.... _.. ..
and design ......__ .......
~•••~•Iba
1a11 •

_..,_.,._
...,. .._....
•---"""-PIIP .. .._.
..... _...,_ ,..,,

Proto<t Titlo
---
Prafoet Titlo

......... .....................
, ...............
~

......_
...............
llilelN.,,,. . . . . . . . . .
..., ..... ...,.....
........... .-

16/112
The User Interface (UI) Design
 Building Your Own with a

Example (A portfolio site) Cont. 0

The same design with some

visual design applied to it ..

If we had chosen to go with

SITE NAM e
an F pattern
---
--------
Project Ti •
---------------
--.....:==':-- .. -

-- --.....----...-~
_____
--- ......._._
---~--
17/112
The User Interface (UI) Design
 a 0
·- ~
D
,;: . UI? a
Assignment

Defi ning Your Basic Unit of Your Idea

that Fol/o,ws MVP
Approach
Bring a scissors an a paper
a4 with yo,u next time

18/112
The User Interface (UI) Design