Сулейман Демирель Университет имени

атындағы Университет Сулеймана Демиреля

040900, Қазақстан Республикасы, 040900, Республика Казахстан,
Қаскелен қаласы, Абылай хан даңғылы, 1/1 Город Каскелен, проспект Абылай хана, 1/1
www.sdu.edu.kz www.sdu.edu.kz

User interface (UI) design

fundamentals
PED242 – User Interface Design

Spring 2023 1
 Overview
 UX/UI?
 Design: UI Design
 Graphic Designer
 Visual Design
 Colors
 Layouts
 Typography

Spring 2023 2
 What is UX/UI?

UX User experience UI User interface

UX is about analyzing UI is about visualizing the process
requirement, functionality and in a user-friendly and attractive
usability. manner

Spring 2023 3
Spring 2023 4
 Graphic Designer
A graphic designer
is a professional
within the graphic
design and graphic
arts industry who
assembles
together images,
typography, or
motion graphics to
create a piece of
design.
Spring 2023 5
 Visual Design
 Visual design aims to improve a design’s/product’s aesthetic appeal
and usability with suitable images, typography, space, layout and
color. Visual design is about more than aesthetics. Designers place
elements carefully to create interfaces that optimize user
experience and drive conversion.

Spring 2023 6
 Visual Design is Aesthetic, Strategic Design
Users’ first impressions typically form in 50 milliseconds. This fact
reflects the visceral level of emotional design—in other words, the
user’s first impression of or gut reaction to a design. If they don’t like
what you show them in those critical moments, they will leave. So,
visual design is a vital part of your work as a designer. Many people
mistake it to mean that designers include attractive elements just to
maximize an item’s appeal. Actually, you use visual design to create and
organize elements to
 A) lead the user’s eye to an item’s functionality
 B) make the aesthetics consistent.

Spring 2023 7
 Visual Design, Analyzed
These are some of the most common—and fundamental of visual
design:
 Elements
 Principles

Spring 2023 8
 Elements of visual design
 Lines (straight/curved/geometric/organic) – use these to create divisions,
textures and shapes.
 Shapes – use lines, different colors, etc. to create enclosed/self-contained areas.
 Negative space/whitespace – use the blank area around a “positive” shape to
create a figure/ground effect or calm the design overall.
 Volume – use this to show the rich fullness of all three dimensions of elements
on two-dimensional screens.
 Value – use this to set the relationship between lightness and darkness,
typically through a light source to create shadows and highlights.
 Color – use this to set the theme/tone and attract attention.
 Texture – use this to define an object’s surface.

Spring 2023 9
 Principles of visual design
 Unity – use this to establish harmony between page elements, so they
appear to belong together and users aren’t distracted by chaotic (e.g.,
misaligned) layouts.
 Gestalt– use these principles of how people perceive objects to guide
how users interpret your design.
 Hierarchy – use placement, font, etc. to show importance.
 Balance – use this to distribute elements evenly.
 Contrast – use differences in color, etc. to accentuate elements.
 Scale – use this to emphasize elements to establish importance or depth.
 Dominance – use an object’s size, color, etc. to make it stand out.
Spring 2023 10
 Colors
Color (American English) or
colour (Commonwealth English)
is the visual perception based
on the electromagnetic
spectrum.

Spring 2023 11
 Layouts
In graphic design, page layout is
the arrangement of visual
elements on a page. It generally
involves organizational principles
of composition to achieve
specific communication
objectives.

Spring 2023 12
 Typography
 Typography is the art and technique of arranging type to make
written language legible, readable and appealing when displayed.
The arrangement of type involves selecting typefaces, point sizes,
line lengths, line-spacing, and letter-spacing, as well as adjusting the
space between pairs of letters.

Spring 2023 13
 Who Is a Front-End Developer?
A front-end developer architects and develops websites and
applications using web technologies (i.e., HTML, CSS, DOM, and
JavaScript), which run on the Open Web Platform or act as compilation
input for non-web platform environments.

Spring 2023 14