A Presentation on UI/UX and Design

Introduction 👋 Understanding
DESIGN 💻
Intro to
UI/UX 📱
Tools and
Resources 🔧
DESIGN
Principles 🎨

Knowing about UI/UX design starts with
knowing about design!
So, let’s start with the basics of design!

• A regular guy
• Interested in DESIGN, so leading this
session
Parthajeet Deva Sarmah
Tech Lead, GDSC-JEC

• What do we mean when we say
“It’s a good/bad design?”
• IS good/bad subjective in
design?
• Heck....what even is design?
• “a plan or drawing produced to show the look and function
or workings of a building, garment, or other object before it is
made.”
• “to create, fashion, execute, or construct according to plan”
• “to make or draw plans for something”
• to make drawings, preliminary sketches, or plans.
Some definitions I found
online for design....

D E S I G
N
PARTHAJEET D. SARMAH
A study on the principles of design
Photo by tabitha turner on Unsplash

DESIGN
principles
of
DESIGN
Parthajeet D. Sarmah

• What’s good design?
• Are there “rules” which dictate
good design?
• How to know if you have made a
good or bad design?
CLARITY
Good design is generally
meant to have.....
COLOR
FORM
SPACE
ACCESSIBILITY
and a lot more....

Distribution of
visual weight
• Symmetrical - 50/50, safe
• Asymmetrical - not 50/50, more options
• Radial - around a central point
Balance in design is not
always 50/50.....

Make elements
stand out
• Usually to draw attention to a certain
element or object
• Creates a lot of visual interests
• Can be used to guide the viewer’s eye
Contrast can be useful for a
lot of reasons....

Contrast itself can be in different forms.....
• Contrast in color
• A still from the movie, La La
Land (2016)
• Notice the yellow dress and
white shirt, in comparison to
the blue-purplish
background

• Contrast in shape and size
• Kingpin, from Spider Man:
Into the Spider Verse (2018)
• Due to his blocky
rectangular shape and
enormous size, he catches
our attention fast.

• Contrast in typography
• Different types of fonts
invoke different feelings
• Combination of different
types of fonts provides
contrast to the design

Create focus for
one element
• Since, contrast is used to make elements
to stand out, it can also create elements
of focus and importance
Emphasis is very closely knit
to contrast.....
• Thus, contrast in various forms is used to
represent emphasis

Here are some resources to help you with
more of these design principles....
The Principles of Design by EnvatoTuts+
11 Principles of Design (& How to Use Them)
@ Dribbble.com
Or you can always ChatGPT it!

User
Interface
• Contains all the stuff that we can see like
buttons, icons, menus, colors, etc.
• Even the best UI is not enough on its own
to give a good user experience.
UI refers to the visual
elements.....

Key aspects of UI
• Appealing and consistent visual design
• Layout
• Typography
• Color schemes
• Icons and graphics

Appealing and consistent visual design
• Appealing to whom?
• Appealing to the audience you are targeting at with
your product or service for which you are designing.
• Consistency is a very important factor to not “weird
out” or confuse the user.

Steam - Home page

Steam - Library

Epic Games Store

CS2 (left) and Valorant (right)

Layout
• With an appealing design, a good layout of all the UI
elements is also essential.
• This contains placing different elements at different
parts of the screen, making some elements scrollable
while some are not, organization, grid systems.

Typography
• Arrangement of design of text
• One of the most crucial aspects of designing pretty
much anything!!
• Typography basically deals with fonts and every
characteristic of a font

Constituents of Typography
• Font
• Typeface Characteristics (weight, style, size)
• Kerning (spacing between particular characters)
• Leading (spacing between lines)
• Tracking (uniform space between all characters)
• And many more....

serif fonts
class of fonts used to show tradition, formality or give a classic or vintage view.

Class of fonts that are used to show a clean look and
modernity.

To learn more about the different types of
fonts....
Understanding the Nuances of Typeface Classification
Google Fonts
You can also explore different fonts on your own at....
Fontspace
dafont.com

User
eXperience
• UX aims to improve the experience for a
user, make it easy and satisfying to
navigate through the design.
• It also encompasses the ability to get
feedback (such as when a button is
clicked, the color may change)
UX refers to the interactions
with the UI....

To understand the difference between
UI and UX clearly, we can take an
example.....

Key components of UX design
• User research
A -
Audience
S - Stays
K - King

• Information architecture
• Where to position each element in your UI layout?
• Why do we put certain elements at certain places?
• Like, when designing a web page why is the
navigation bar always at the top or left?

• Interaction design
• What happens when I click a certain button?
• What animations take place?
• What effects, if any?
• What happens when I play a video in the site?
• Or, click on an image?

• Usability
K - Keep
I - It
S -
Simple,
S - Stupid

• User testing / Gathering user feedback

Figma
• Free to use (to an extent)
• Web based (no download/install required)
• Since building UI/UX is its primary objective, it
comes equipped with a lot of features directed
towards it, so it becomes much easier to use for
UI/UX designs.

Adobe XD
• Easy integration with the Adobe Creative Suite
• So switching between other Adobe apps like
Illustrator, Photoshop, After Effects etc. becomes
much easier
• Also, gives easy access to Adobe Creative Cloud’s
assets and design templates

Adobe Illustrator Canva InVision
Axure RP Proto.io

A Presentation on UI/UX and Design

More Related Content

What's hot (20)

Similar to A Presentation on UI/UX and Design (20)

Recently uploaded (20)

A Presentation on UI/UX and Design

Editor's Notes