bill92005

1
(No Transcript)
2
AGENDA
What is UI/UX ? UI/UX Relationship ? The
Difference Between UI/UX ? Styles of Icon Design
3
UI/UX
What is UI/UX ?
UI/UX are not the same! UI stands for User
Interface. UX stands for User Experience.
UI
UX
4
(No Transcript)
5
(No Transcript)
6
Wireframes Wireframes are the web design
equivalents of architecture blueprints. They are
a visual representation of layout, structure,
navigation, organization, and other important
elements of a web page. Mockups A mockup is a
static wireframe with much more UI and visual
details. If a wireframe is considered as the
blueprint of a building, a mockup is similar to a
real-life building model. It gives viewers a more
realistic impression of how the final website/app
will look like, So, it is good for communicating,
discussing, collaborating and iterating projects
with your team members at a later design
stage.  Prototypes a prototype is a fully
interactive, functional mockup with high-fidelity
UIs, rich interactions and animations. It behaves
and acts just like the final website/app product,
So, it is ideal to be used to test for potential
app problems before moving into the development
stage. 
7
(No Transcript)
8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
Visual Design
Visual design aims to shape and improve the user
experience through considering the effects of
illustrations, photography, typography, space,
layouts, and color on the usability of products
and on their aesthetic appeal. To help designers
achieve this, visual design considers a variety
of principles, including unity, Gestalt
properties, space, hierarchy, balance, contrast,
scale, dominance, and similarity.
12
Colors
Choosing the right colors for project is very
important because of the mental associations
with emotions and meanings. Its Also Important to
follow the brand colors And use them wisely
depending on the design you want to create and
the message you want to share
13
Graphic Designer
Graphic design is responsible for combining
images, typography or motion graphics together to
impress Your customers. Graphics Design aims to
pursue pixel perfection. This is to ensure that
texts have perfect kerning(Space Between Letters
In text) and colors conform(standards) to brand
guidelines.
14
Mockups
A mockup is a static wireframe with much more UI
and visual details. If a wireframe is considered
as the blueprint of a building, a mockup is
similar to a real-life building model. It gives
viewers a more realistic impression of how the
final website/app will look like, So, it is good
for communicating, discussing, collaborating and
iterating projects with your team members at a
later design stage. 
15
Typography
Typography is 95 of design its a driving
force in all forms of communication art. Can you
imagine reading a magazine, checking out a
website, playing with an app or watching TV
without text?
16
(No Transcript)
17
(No Transcript)
18
Pixel Art Icons
Pixel art is a form of digital art wherein images
are created and edited at the pixel level using a
graphics editing software. What defines pixel art
is its unique visual style, where individual
pixels serve as the building blocks that make up
the image.
19
Isometric Icons
Quite simply, isometric design is a method of
drawing/creating a three-dimensional object in
two dimensions. Isometric icons are an extension
of this design technique and the place where this
trend seems to be picking up the most traction.
20
Skeuomorphism is a term most often used in
graphical user interface design to describe
interface objects that mimic their real-world
counterparts in how they appear and/or how the
user can interact with them. A well-known example
is the recycle bin icon used for discarding files.
21
Glyph Icons
It is used to define a graphic symbol that
provides the appearance or form for a character
it can be an alphabetic or numeric font as well
as a symbol picturing an encoded character.
22
Flat Icons
Well, for definition, flat design is a
minimalistic design approach that put emphasis on
usability. ... The icons on a flat web design or
rather flat icons are clean and have crisp
edges again with a flat two- dimensional graphic
layout.
23
Material icons are delightful, beautifully
crafted symbols for common actions and items.
Download on desktop to use them in your digital
products for Android, iOS, and web.
24
Animated Icons
icon, motion. Animation reflects the action
an icon performs in a way that adds polish and
delight. The animation of each icon is aligned
with both the visual design and action they
perform.
25
Hand-Drawn Icons
Dimensional Icons
26
(No Transcript)