Graphic Designer, UX Designer & UI Designer

1. Specialization for Web & Graphic
Designer
(Graphic Designer, UX Designer & UI
Designer)
AHMAD NAUFAL BIN ZUHAIRI 1629935
MOHAMMAD HILMI BIN HALID 1611309
MD AKRAM HOSSAIN SAJIB 1523193
SAYED MUHSIN UDDIN 1413693
ATTIULLAH ATTAIE 1326703

2. Areas of Specialization for Graphic
Designers
1. Mobile App UI
● Google’s Android and Apple’s iOS both command a tremendous segment
of the market.
● Developers who build apps typically need to learn either Java(Android)
or Objective-C(iOS).
● as a designer you just need to learn how to design.
● The two OS’ have different interface requirements – but the designs are
created in the exact same software

3. 2. Advertising Design
● design is just a means to an end. With advertising that end is to sell
people on a product or service.
● Advertising design can range from digital banners & landing pages to the
print world of posters and billboards.
● can combine a unique skillset like animation to make commercials for TV
or YouTube.
● The design skillset is very important but you also need to have great
ideas.

4. 3. Targeted Website Projects
● Nowadays everyone needs a website and clients never know where to
turn.
● As an example consider popular bands and musicians. A stellar website in
the music industry is vital to good branding – yet there’s such a gap
between amazing websites and horrid attempts at amazing.
● A professional designer who specializes in music websites can get a lot of
high-quality clients and referrals for new clients too.
● You could specialize in entertainment, banking, restaurants, hotels, etc
● General web designers are always in demand but if you have a passion
for one particular area try to carve out a niche for yourself and specialize
in those clients.

5. 4. Icon Design/Iconography
● Icon design usually takes an idea from real life and virtualizes it with a
unique style.
● Although it is possible to design icons with only digital skills, you’ll
improve dramatically by learning to sketch out detailed concepts first.
● Icon design can include website icons, branded iconsets, or even mobile
app icons.

6. 5. Typography & Calligraphy
● Most typophiles get hired to do custom work on a company brand or
logo. But there’s also room to earn money by doing work for signs, cards,
menus, and other small print projects.
● Masterful calligraphers even earn money by selling premium fonts.
Online shops like MyFonts can provide income for freelance designers
and type foundries alike.
● When pursuing calligraphy just keep in mind that it’s a very specific
medium without a means to an end. More clients will pay for a custom
website than a custom font, so the demand is smaller and it might be
wise to combine your calligraphic skills with other areas of design.

7. 6. Digital Illustration
● Great illustration work can be used on every type of design project.
● Illustrators might specialize in children’s books, CD covers, vector
characters or even concept art.
● Digital illustration can be done on the computer but it mostly requires
artistic talent.

8. 7. Interface Animation
● Some designers prefer the phrase “user experience design” which
encompasses the whole interface.
● Animation and visual effects tend to be sub-sections of UI/UX design.
● Websites are the most popular projects but great animators can be used
on mobile apps and even desktop programs.
● Many UI animators do not practice regular animation but instead focus
on digital interfaces.
● There is no right or wrong area to specialize for animation or motion
graphics.

9. 8. Print Projects
● Print designers can follow the same track as specialized web designers by
focusing on particular types of clients.
● General print designers can still earn a lot of money either freelancing or
working at a design agency. But print specialization is also great if you can
find clients paying for a particular service like business cards or style
guides.
● Print design comes with a huge variety of applications, from print
advertisements and marketing campaigns to magazine and newspaper
layouts.

10. UX Designer

22. UI (User Interface ) Design
Introduction of UI
❖ Consists of all the hardware, software, screens,
menus, functions, outputs, and features that affect
two-way communications between the user and the
computer

23. Objectives
❖ Introduction of several fundamental user design
principles
❖ Overview of the user interface design process
❖ Overview of the navigation, input, and output
components that are used in interface design
❖ Focus on Web-based interfaces and graphical user
interfaces (GUI)

24. Types of Interfaces
❖ User Interfaces - how the system will interact with
external entities.
❖ System Interfaces - how systems exchange information
with other systems.

25. Fundamental parts of a User Interface
❖ Navigation mechanism - provides the way for users to
tell the system what to do.
❖ Input mechanism - defines the way the system
captures information.
❖ Output mechanism - defines the way the system
provides information to users or other systems.

26. Principles for User Interface Design
❖ Keep users in control: Humans are most
comfortable when they feel in control of
themselves and their environment.
❖ Layout: organizes areas of the screen or
document for different purposes.
❖ User Experience Designing the user interface
with the users’ level of computer experience in
mind.

27. ❖ Consistency: Enables users to predict what will
happen next.
❖ Minimize User Effort The: interface should be
simple and minimize the number of clicks or
keystrokes to move from one part of the system to
another.
❖ User familiarity: The interface should be based
on user-oriented terms and concepts rather than
computer concepts

28. User Interface Design Process
5 Steps of the UI process
❖ Use scenario development
❖ Structure design
❖ Standards design
❖ Design prototyping
❖ Evaluation

29. User Interface Design Process
❖ Interface Structure : Defines basic components of the
interface
❖ Interface Standards: Basic design elements that are common
across individual screens, forms, and reports
● Interface Objects
● Interface Actions
● Interface Icons.

30. User Interface Design Process
❖ Interface Design Prototyping: three approaches
● Storyboard
● HTML Prototype
● Language Prototype

31. User Interface Design Process
❖ Interface Evaluation :
● Evaluation should be performed before the system is
build
● Identifying design problem saves time and money

32. What is motion graphics?
Motion graphics is animation, but with text as a major component. Essentially,
it’s animated graphic design.Motion graphics are the crossboard between
animation and graphic design. Usually, these are purpose driven pieces with
the goal of presenting information to the viewer through the use of animation
text or graphics.They often have voice overs narrating what the text or grahics
are representing. LYric video is the perfect example of motion graphics, the
graphics echo what the singer is saying.

33. 5 Reasons To Choose a Motion Graphics Video
1. Motion graphics is known for being one of the most sophisticated and elegant styles among
marketing videos.
2. It’s also one of the most formal styles among the different explainer video styles.
3. It gets the most out of visual designs and animations and can be used with an educational
purpose, without losing its appeal.
4. It’s one of the best styles to pass out numbers, stats and specific facts that could be harder
to assimilate if you used any other style. This is due to its astonishing synthesis power.
5. It can turn the most boring and tedious information into the most appealing and enticing
content.

34. The Amazing Benefits Behind Motion Graphics
High visual power:Marketers generally resort to visuals to communicate their
messages and ideas.With this in mind, just imagine how effective video content
can be, and even more so if we mixed it with graphics in motion! Motion graphics fits
perfectly in this context and, as we’re all visual learners, it helps you approach your
target audience with persuasive, interesting and impressive content.
https://youtu.be/peVpXjb4bJ8

35. Stunning designs and animations
Motion graphics is not only about designs, but also about designs in motion. This
means that motion graphics make use of animation techniques to make designs
really come alive! With this type of video you can pass out any kind of idea by
making use of graphic elements in movement.This will be of great help to deliver
your message in just a couple of seconds, while you also make it understandable
and memorable.

36. Motion graphics with character animation
Motion graphics can lack that special human or personal touch that is typical of
other explainer videos styles. If you need that warmer approach, then consider
adding some charming and funny characters to your video. This way you will make
it more “emotional” than a plain / standard motion graphics video.
https://youtu.be/4n7PksCnNH8
https://youtu.be/4n7PksCnNH8

37. Motion graphics with whiteboard animation
The motion graphics technique is part of every high quality whiteboard video, as it’s
used for the camera movements, the graphics, the hand animations and other
elements. Most whiteboard videos are made digitally and motion graphics helps the
elements look just great. So remember that in any high quality whiteboard video,
there will be a motion graphics technique applied to it. Just like in this example:
https://youtu.be/AO8SWRSvu54

38. Explaining a concept
Motion Graphics are great for creating a powerful explainer video. ITFT uses
motion graphics to illustrate their points and show the blockchain in action. It’s
an effective way to support a concept because it can help the viewer visualise
it in a way a presentation can’t.
https://youtu.be/r43LhSUUGTQ

40. Architectural designers create: MOHAMMAD HILMI BIN
HALID
Topics
● Technical drawings
● Building architecture plans
● Documentation
● Renderings

41. TECHNICAL DRAWINGS
The act and discipline of composing drawings that visually
communicate how something functions or is constructed

42. BUILDING ARCHITECTURE PLANS
Architecture plan is a design and planning for a building,
and can contain architectural drawings, specifications of
the design, calculations, time planning of the building
process, and other documentation

43. DOCUMENTATION