1) A designer provides visual solutions to problems by applying design principles like hierarchy, clarity, consistency and proximity. 2) The basics of design include establishing a concept, organizing information in a clear hierarchy, using alignment and spacing principles, implementing contrast to guide users, and incorporating consistent use of icons and color. 3) Effective communication between designers and developers is important to ensure the design vision is properly translated into the final product.

1. Being a Designer.
Aditi Agarwal

2. WHAT IS DESIGN?
WHAT IS A DEFINITION OF
A DESIGNER?
Are you really a
designer?

3. Design is a simple solution to a problem. It is not something you have
to decorate.
Designer is a person who provides a visual solution to a problem.
Designer must not create a problem within his design.
Now ask again “are you really a designer? Are you really providing a
solution to a problem or creating new problems for users, clients and
your co-developers?”

4. JUST IMAGINE.
A doctor giving cough and cold medicines
to a patient suffering from bone fracture or a
tailor stitching a night wear for a groom
instead of a suit for his marriage out of
same material.
Obviously these things will create a lot more
trouble for the user without solving a single
problem which he has before

5. Be sure what you do.
Provide a solution for the users.
Don’t do exactly what other designers
have done for some other problem.
Like a cough syrup wont work for a
broken leg, similarly a wrong solution
what others have already done will not
solve a problem.
Take inspiration. Don’t copy. Always
create something new.

6. Graphic Designers
vs
DEVELOPERS

7. #1
Developer: “The designer didn’t accommodate for real-world content.”
Solutions:
Design comps are static, but real-world web pages have to be fluid and
dynamic. Designers should recognize this and cover all possible sce-
narios.
Please dont use Lorem Ipsum. Try to fill real content.

8. #2
Developer: “I don’t need no designer telling me how to program! ”
Solutions:
Listen to what the designer has to say about technical alternatives; you
may not have thought of all of them.
Remember that you and the designer (hopefully!) share the same goal
of creating the best product possible.

9. #3
Developer: “The designer expects me to guess what styles he has
used. ”
There is always a breakdown between the team related to spacing, line
height, etc.
Solution:
Communicate is the only solution.

10. SO WHAT?
Deploying graphic design principles will enhance your ability and skills.
Deploying graphic design principles will enable you to create more
user-friendly interfaces.
Help you to enhance the knowledge.
Make base of HCI strong, which is increasingly necessary with millions
of users.

11. FOR ALL.
Please follow the User Interface guidelines.
Dont randomly add or subtract elements without thinking from the
design perspective.
Remember client is neither a designer nor a developer. Don’t blindly do
what he asks. If you think he is wrong, explain him politely. Especially
developers, if client asks you to do some changes, please take the right
decision after consulting with the designer.
Do for users. Not for clients.

12. Basics of Design.
Basics. Contrast. Allignment.
Spacing. Icons. Colours.

13. Basic #1: Concept.
It is the base where idea is related to.
To build a design you need to be an actor!
If you are buildig an app for a grocery chop, act a sif you are a
customer and then come out with the design.

14. It is a music related app for teenagers, hence playful, fun and is
drenched in colour.

15. Basic #2: Hierarchy.
What are the levels of importance?
What should the user see first? Second? Third?

16. Basic #3: CLARITY.
Every element in an interface should have a reason.
Remember less is more.
White space is important.

17. Basic #4: Consistency.
Be consistent.
In layout, color, images, icons, typography, text
Within screen, across screens
Stay within metaphor everywhere
Platform may have a style guide -- follow it!

18. Basic #5: PROXIMITY.
Items close together appear to have a relationship.
Blue
Large distance implies -- no relationship
Blue

19. CONTRAST. VISIBILITY.
Pulls you in.
Guides your eyes around the interface.
Take advantage of contrast to guide user through hierarchy of
information; add focus; or to energize an interface.
Can be used to distinguish active control.

20. CONTRAST. VISIBILITY.
Can be used to set off most important item.
Allow it to dominate.
Ask yourself what is the most important item in the interface, highlight it.

21. Find R...
V
F
C
T
Q
A
M
R
D
W
G
P
Z

22. Find t...
V
F
C
T
Q
A
J
M
R
D
W
G
P
Z

25. Alignment. IMPORTANT.
Grids are horizontal and vertical lines to help locate window
components.
Align related things. Group items logically.
Minimize number of controls, reduce clutter.

27. Alignment. RULES.
Choose one out of: left, center, right or justified.
Choose one, use it everywhere
Twinkle Twinkle Twinkle Twinkle Twinkle Twinkle
little star, little star, little star,
How I wonder How I wonder How I wonder
What you are? What you are? What you are?
Novices often center things!
Hard to read. No definition, calm, very formal.
Use only in small quantities
Also avoid right alignment.
Twinkle Twin-
kle little star,
How I wonder
What you are?

28. SPACING. FEEL GOOD.
All the spacing across the website/app/print media should be
same or in multiples of it.
Spacing is the only reason that makes a website/app
perfect and wisely designed.
It removes chaos and clutter.
Makes design neat and legible.

30. ICONS. CREATIVE.
Represent object or action in a familiar and recognizable manner.
Relies on drawing ability. Please don’t copy!
Avoid meaningless use of icons.
Too many icons quickly become illegible.
Limit number of different icons.
Make icon stand out from background.

31. ICONS. SAME.
Most important part of design is family. All icons used should be
of same family.
+ =
+ =
RIGHT
WRONG

32. COLOURS. ESSENCE.
Colours are the most important part of any design.
It shows emotion and mood.

54. Thank you.
Be creative.