● Innovation is awesome and encouraged, but it shouldn’t

have to be at the expense of the user experience

● Many of these established design principles are grounded

in human perception.

● These are the best practices within the UI design space.

Lazy
registration
Pattern in
moqups
Pinterest uses
Cards for its
content
Autocomplete
suggestions at
google.com
 Visual
hierarchy
● The arrangement of elements in a way that implies
relative importance

● The way we perceive information is affected by several

factors that contribute to how we rank the hierarchy of
the content within the layout.

● Typography, White space and Colors are part of this visual

hierarchy
Visual hierarchy: Typography

● The two primary factors that makes a good

typography are: Legibility and Readability.

● Legibility depends on the typeface. It is how each

individual letterform is distinguishable from one
another.

● Readability is determined by how you manipulate a

particular typeface to make it easier to comprehend.
The
typeface
matters !
NEVER center
large Blocks of
copy.

The eye knows

exactly where the
next line begins.
 Visual hierarchy: White
space

● White space helps with readability and comprehension

immensely.

● Readers find it easier to focus on and process generously

spaced content.

● White space can be used to create strong hierarchy.

On the left side
negative
space is applied

on the right there isn’t

significant negative
space considered.
How line spacing
influences readability
and text
comprehension.
Visual hierarchy: Colors

● Colors have a key role in expressing the brand and intents.

● The more colors there are, the less impact each individual
color will have.

● Keeping decent contrast between colors keeps a design

accessible.
The great use of
brand colors in the
facebook app.
Choosing the right
colors for the
actions
Instagram
understands That
the less colors the
more impact they
have
 Programming in Web Development

when a web designer is given an end goal like "create a

webpage that has this header, this font, these colors,
these pictures, and an animated unicorn walking across
the screen when users click on this button," the web
designer's job is to take that big idea and break it apart
into tiny pieces, and then translate these pieces into
instructions that the computer can understand --
including putting all these instructions in the correct
order or syntax.
 Programming in Web Development

Every page on the web that you visit is built using a

sequence of separate instructions, one after another. Your
browser (Chrome, Firefox, Safari, Brave and so on) is a big
actor in translating code into something we can see on
our screens and even interact with. It can be easy to
forget that code without a browser is just a text file -- it's
when you put that text file into a browser that the magic
happens. When you open a web page, your browser
fetches the HTML and other programming languages
involved and interprets it.
 Programming in Web Development

HTML and CSS are actually not technically programming

languages; they're just page structure and style
information. But before moving on to JavaScript and
other true languages, you need to know the basics of
HTML and CSS, as they are on the front end of every web
page and application.
 Programming in Web Development

HTML and CSS are actually not technically programming

languages; they're just page structure and style
information. But before moving on to JavaScript and
other true languages, you need to know the basics of
HTML and CSS, as they are on the front end of every web
page and application.
• THML
• CSS
• Javascript
 What is HTML

HTML is an acronym which stands for Hyper Text Markup

Language which is used for creating web pages and web
applications. Let's see what is meant by Hypertext Markup
Language, and Web page.
• Hyper Text: HyperText simply means "Text within Text." A text
has a link within it, is a hypertext. Whenever you click on a link
which brings you to a new webpage, you have clicked on a
hypertext. HyperText is a way to link two or more web pages
(HTML documents) with each other.

• Markup language: A markup language is a computer language

that is used to apply layout and formatting conventions to a
text document. Markup language makes text more interactive
and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly
written in HTML and translated by a web browser. A web page
can be identified by entering an URL(Uniform Resource Locator).
A Web page can be of the static or dynamic type. With the help
of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating

attractive web pages with the help of styling, and which looks in
a nice format on a web browser. An HTML document is made of
many HTML tags and each HTML tag contains different content.
 What is CSS

• CSS stands for Cascading Style Sheets. It is a style sheet

language which is used to describe the look and formatting of
a document written in markup language. It provides an
additional feature to HTML. It is generally used with HTML to
change the style of web pages and user interfaces. It can also
be used with any kind of XML documents including plain XML,
SVG and XUL.
• CSS is used along with HTML and JavaScript in most websites
to create user interfaces for web applications and user
interfaces for many mobile applications.
 What does CSS do

• You can add new looks to your old HTML documents.

• You can completely change the look of your website with only
a few changes in CSS code.
 What is JavaScript

JavaScript (js) is a light-weight object-oriented programming

language which is used by several websites for scripting the
webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when
applied to an HTML document.
With JavaScript, users can build modern web applications to
interact directly without reloading the page every time. The
traditional website uses js to provide several forms of
interactivity and simplicity.
Important : Although, JavaScript has no connectivity with Java
programming language. The name was suggested and provided
in the times when Java was gaining popularity in the market. In
addition to web browsers, databases such as CouchDB and
MongoDB uses JavaScript as their scripting and query language.
 Features of JavaScript

• All popular web browsers support JavaScript as they provide

built-in execution environments.
• It is a light-weighted and interpreted language.
• It is a case-sensitive language.
• JavaScript is supportable in several operating systems
including, Windows, macOS, etc.
• It provides good control to the users over the web browsers.
 Difference in HTML, CSS, and JavaScript

• HTML provides the basic structure of sites, which is enhanced

and modified by other technologies like CSS and JavaScript.
• CSS is used to control presentation, formatting, and layout.
• JavaScript is used to control the behavior of different
elements.