1

UI AND UX
DESIGN
UNIT-III
 2
Syllabus

 An Eye for UI/UX Design: Navbars, Headers, Features, Cards,

Content, Teams, Logo Areas, Stats, Charts, Tables, Maps,

Widgets, Frequently Asked Questions (FAQ), Contact Us, Footers,

Sidebars, Wizards, Timelines, Reviews

 3
NavBars

 The navigation bar could be a top Navbar or Side Navbar most

often for dash boards.
 While you designing the navbars remember few things
 The boarder radius should be grater than 6 px.
 Don’t forget the consistency for example button inside the
navbars has to be same radius as the navbars.
 The Navbar contains icons or not depending on how minial you
want to design.
 If you choose icons never use the same color as text.Add
opacity to 60 percent for visual hormany.
 4
NavBars

Margins smaller than the 12 px can confuse the users.

 5
Navbars Styles
 6
Headers

 Header is the strategic part of the page can convince the

user to spend more time on website.
 The Essential element in the header is Typography.
 User who visit the website for the first time do not inspect all
the content they attract for the header .
 7
Header

 The title cannot contain more than 10 words and appropriate

Typography styles.
 Under the title their could be description in h5 or h6.
 The header should not contain all the elements and sections
that we used in the web site.
 The overloaded information in the header section must be
avoided.
 Each page should have a header providing specific
information.
 8
Header

Button in the header aims to redirect the user to main elements

of the website.
 9
Header

 If the website contains several categories ,options and products

then provide search section integrated in the header.
 This section is very suitable for Travel and booking websites.
 By integrating the subscribe section you can enlarge the
database and send updates to the user.
 If the website is active on social media platforms like Facebook,
twitter, Instagram, LinkedIn place the icons at the bottom part of
the Website.
 Social buttons can help users to find these account easily.
 Integration of download buttons will help users to perform the
downloading the app easily.
 10
Header Styles

 One Style is using full background image of the header ,it is

always good practice to apply black filter with opacity.
 Another Style is to using images which should be displayed on
half portion of the total page.
 Another style is to using blur images in the header.
 11
Features

 This section is dedicated to features of the product,service or

applications, What is present on the website
 12
Features

 When you have a short description that is only two lines set the
alignment to center.
 If you have text description longer than two lines use left
alignment only.
 Consistency is the key if you have a description too long re write
the idea.
 13
Features

 If you have feature section contains less than five avoid

traditional bullets and use some check books.You may use
icons.
 Feature Style :
 1.Simple Style that is icons with small description.
 2.Improved style which replaces icons with logos.
 3. Using links in the features ,if the we use links it should be
proper contrast.
 14
Cards
 Cards have a significant impact on the website or mobile app
 If they design suitably they can improve the user Experience
Considerably.
 Cards may contain images ,descriptions ,files, charts much
more.
 Place the main Content at the top
of the Card and use the Typography
Style to highlight.
 The card should include only necessary
information.
Avoid too much content to the card
Because It looks too lengthy.
 15
Cards

 If you need to add the content makes sure to fit in correct

frame.
 Integration of several links in the card may effect user
experience.
 16
Cards

 The Presence of the buttons must be expected .

 17
Cards
 The booking card has simple style just content.
 The Profile Card should Include only the necessary
information.
 18
Content

 Good content will increase the user Experience.

 19
Content

 The content should guide the design at the same time The
design should guide the content for meaningful content.
 The content should be created first and it should be
considered start,during,beyond the project.
 Make content easy to understand by users by choosing
correct Typography.
 The information should place properly through visual
hierarchy.
 Choose clear words according to context.
 Try to limit the content only important so that it can be easily
read on small screen devices.
 Content Should help the users to quickly grasp the brand
voice.
 20
Content

 We need to precise the content while using lot of images in the

content.
 Use Equal distance between the images while creating the
album like content.
 21
Teams

 In general in all webpages there is section or page dedicated

to the team of persons who are key to the company or Who
build the current web or user interface.
 In this Section we need to display the persons name,
images ,contact and social buttons belongs to him lastly a
favorite quote.
 For this section avoid artistic images.
 The purpose of this section is to members or leaders of the
company there fore the photos used here has to very clear in
their face.
 You need to follow the consistency while displaying images.
 22
Teams
 23
Choose a Style from Below
 24
Logo Areas

 Logo areas are used to show case the company you work with
or used your services.
 Colored logos are logos exactly as they presented by brands.
 Before using the brand logo make sure you use it correctly as
the brand requires.
 25
Logo Areas

 The Logos in small sizes are difficult to notice.

 The logo should be scalable and it has to fit for the context.
 Most often the logos are in header section. The Header
Section is the first section that the user visit so the presence
of the logo offers Credibility and Professionalism.
 The logos also may appear in Pre footer area to inspire
confidence.
 Specifically for a section using job opportunities avoid using
Grey logos this is a situation where you need to use colored
logos.
 This is because people looking for a job will better recognize
companies with a logos .
 26
Logo Areas
 27
Logo Area

 The Presence of logos in review section will establish credibility.

 28
Stats

 The Stats section is section that Creates Positive User

experience by incorporating the numbers in a pleasing way.
 Here you can integrate number of projects,products,customers
and working houres,sales or others.
 Some times this information will influence the user in decision
making to buy products.
 Inorder to design a good stat section the following are the key
steps.
 1.As this info is crucial avoid small size text.
 2. For numbers you can use h1,h2,h3 in typography scale.
 3.Use the White Space between Numbers in stats.
 29
Stats Styles

 1.Gradient Stat Style

 30
Stat Style

 2.Iconic Stat Style

 31
Stat Style

 3.Growth Stat Style

 32
Charts

 Charts are the most common components for dash boards.

 They Provide complex data and Statistics so their design must
be easy to understand with out confusing the user.
 Charts contain several elements each parts has valuable role.
 Chat Styles :
1.Line Charts
2.Line Chart With Gradient
3.Column chart Vertical
4.Column chart horizontal
5.Pie Chart
6.Donut Chart
 33
Charts
 34
Charts
 35
Charts
 36
Charts

 The user must easily find the information present in the

chart with out looking for extra explanation.
 There fore avoid creating abstract with fancy design.
 The bar or column charts offer the data in either ascending
or descending order.
 Additional Information add value to the charts you can use
tool tips with expanded details.
 These details will appear on hover action
 Create charts suitable for real situations.
 Choose colors for reports so that they can easily
distinguish.
 37
Tables

 Tables are common components of dash boards they are used

to display the variety of data.
 There are 3 types of table styles
1.Simple form style
2.Zebra Stripes style
3.Grid Line Tables
 To have a table that contains easy to read data and easy to
understand and compare the data follow the below alignments.
 Align Textual data to left since users have natural vision from
left to right.
 Align right the numeric data. Thus information in the table
musch easier to read.
 38
Tables

 Align center for icons and badges because they are almost
similar in size.
 Avoid condense rows even if you have lot of data .
 It is not necessary to display all the table data in single page.
 You can use the pagination making every thing cleaner and
Spacious.
 For a positive user experience you can integrate the filter that
will allow the user to see only the specific information they
want.
 Another essential function is to integrate sort feature so that
user can sort they want.
 39
Tables
 40
Maps

 Maps are very important in now a days application.

 The purpose of maps are to help the user to find the location
and specifically directions or explore the area.
 There are two types of maps
 1.Google Maps 2.Vector Map
 In vector maps the main focus is only on the users interest.
 In designing maps use appropriate Typography style.
 In addition it must be easy to read without special effects.
 Avoid using too much information in the maps.
 Consinder Creating both light and dark variants of maps.
 41
Widgets

 Widgets are the elements that look like cards.

 42
Widgets

 Widgets must be easy to read and understand.

 Because they are small elements they must be easy to read
by the user and understand by the user.
 The information in the widget must be relevant to the user
who checks daily.
 Avoid Text that is too long or images that are too large.
 Widgets must be customizable .Users can able to see the
information what exactly they want.
 We need to add some settings to the widgets.
 There are 3 sizes of widgets small,medium ,large.
 43
Widgets
 44
Widget Styles

 Widget with icons

 Widget with calendar

 45
Widget Styles

 Widget with Time Line

 Widget with To do List

 46
FAQ’S

 A FAQ list if often used in websites and Articles and forums

 The purpose of FAQ is to provide general information provided to
user concerns.
 The format of FAQ is question and short answers in a list.
 The links for FAQ are commonly present in navigation bars ,body
and footers of the website.
 This section contains lot of line height so make sure of correct font
style and size .
 If the line height is too small the user doesn’t read full answer.
 Use the white space to create a clean section.
 47
FAQ

 Choosing the proper distance between the questions will help

the user to read the headings.
 48
Contact US

 The contact us is one of the important section or pages in any

website.
 It is typically one of the most visited pages in a company
wesite.
 It is the only one connection between the user and those
responsible for sites.
 This page has to contain basic information like address ,
telephone number and official mail id.
 The place holders in this situation will be really helpful for
user to send a mail to contact the site.
 49
Contact US
 50
Footer

 If a user scrolls to the entire home page and still cannot find
what he is looking for the last chance is footer.
 The purpose of footer is to help the visitors by adding
information and navigations options in footer.
 The simple footer basically have links to main pages of the
website.
 The space between the links should not be too small or too
large.
 Use Copy write symbol and the current year in the footer.
 It is recommended to have subscriber section in the footer.
 Integrating country specific settings create a positive .
 The footer is the great place to the furnish the company
mission.
 51
Side bars
 Sidebar is the central part of the navigation process.
 It appears in dash boards it can be shown either left or right
side of the screen.
 Since side bars consider as open menu it should display the
main pages and integrate into the secondary one.
 Multi level drop down depending on the complexity of the
website.
 Make sure you have to create hierarchy that don’t confuse
user.
 You can resize the side bar with out effecting the content.
 52
Side bars
 53
Side bars

 Insert the logo of the application on the starting section of the

side bar.
 By choosing the appropriate icons to the links make user feel
good.
 With the help of icons user easily find what they need.
 Avoid too much colour for the icons make it simple.
 The icons should be aligned to margins to create a consistent
space.
 Highlighting the active link helps the user where they are in
the website.
 54
Time line

 The time line is a component in web design to indicate user

history of activities.
 Based on the chronological access we can often provide stages of
user of the project ,product that he gone through.
 55
Reviews and Testimonials

 Regardless of the theme and design of the website user feed

back plays a major role of the next version.
 Inclusion of the review section provides veracity and improves
user experience.
 Star shaped icons often used to rate and review of product and
service.
 They are usually five and they are easy to understand.
 Avoid highlighting ratings and reviews in different colors.
 Testimonials are based on more complex user feed back.He or
she express their feed back in broader and more personalized
terms.
 Testimonials are preferably in quotation marks and italic styles.