This is a short presentation providing an introduction to different aspects of design and UI/UX.

1. A talk on .....

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

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

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

5. LET THE DESIGN FLOW!!!!

6. • 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....

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

11. Parthajeet D. Sarmah

12. DESIGN
principles
of
DESIGN
Parthajeet D. Sarmah

13. • 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....

17. 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.....

18. Symmetrical balance

19. Asymmetrical balance

20. Radial balance

21. 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....

22. 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

23. Contrast itself can be in different forms.....
• 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.

24. Contrast itself can be in different forms.....
• Contrast in typography
• Different types of fonts
invoke different feelings
• Combination of different
types of fonts provides
contrast to the design

25. 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

26. EnvatoElements website

27. Youtube

29. 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!

33. 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.....

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

35. 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.

36. Appealing and consistent visual design
Steam - Home page

37. Appealing and consistent visual design
Steam - Library

38. Appealing and consistent visual design
Epic Games Store

39. Appealing and consistent visual design
CS2 (left) and Valorant (right)

40. 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.

41. Layout

42. 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

43. 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....

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

47. Hello,
There
serif

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

50. 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

52. 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....

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

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

55. Key components of UX design
• 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?

56. Robin - the navigation bar

57. Key components of UX design
• 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?

58. Key components of UX design
• Usability
K - Keep
I - It
S -
Simple,
S - Stupid

59. Key components of UX design
• User testing / Gathering user feedback

62. Figma

63. 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.

64. Adobe XD

65. 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

66. Adobe Illustrator Canva InVision
Axure RP Proto.io