SRI RAMAKRISHNA ENGINEERING COLLEGE

[Educational Service: SNR Sons Charitable Trust]

[Autonomous Institution, Reaccredited by NAAC with ‘A+’ Grade]
[Approved by AICTE and Permanently Affiliated to Anna University, Chennai]
[ISO 9001: 2015 Certified and all eligible programmes Accredited by NBA]
VATTAMALAIPALAYAM, N.G.G.O. COLONY POST, COIMBATORE – 641 022.

Department of Computer Science and Engineering

SUBJECT CODE & TITLE : 20CS2E45 – UI/UX

YEAR & BRANCH : III BE – CSE

COURSE Co-ORDINATOR : Dr. R. MADHUMATHI, AP/CSE

07/12/24 UI/UX 1
 Course Description
COURSE OUTCOMES
On successful completion of the course, students will be able
to

CO1 : Summarize all stages of the UI/UX development process.

CO2 : Experiment with various visual design aspects.

CO3 : Theme the visual look and feel of the user experiences.
CO4: Create effective and compelling screen based experiences.

07/12/24 UI/UX 2
 Module I
FOUNDATIONAL ELEMENTS OF UI/UX

User Interface - The Relationship Between UI and UX - Roles

in UI/UX - A Brief Historical Overview of Interface. Formal
Elements of Interface Design - Design Before Design - Look
and Feel - Language as a design tool – Active Elements of
Interface Design - Static to Active - Functionality - Speed and
Style - Composition and Structure - Composing the Elements of
Interface Design.

07/12/24 UI/UX 3
 Module - II
USER EXPERIENCE DESIGN FOUNDATIONS

Ideation, Articulation, Development - Planning, Testing,

Researching, Mapping - Mapping Content –Mapping
Interaction -Non-Visual Paper Prototyping - Non-Visual User
Testing -Look and Feel/Visual Research. What Goes Where:
Getting real: Wireframes and Interfaces - Nielsen's Usability
Heuristics - Consistency and Details - Wireframe Map - Visual
Direction - Developing UI - Refining UI.

07/12/24 UI/UX 4
 Module - III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

The User Experience Process - User-centric design - The

UX Phases - Waterfall vs. Agile - Web vs. App.
Determining Strategy: User Research - Inspiration -
Analytics - User Needs and Client Needs - Target Audience
- What is in and What is Out: Outlining Scope - Content and
Functionality. The Sitemap: Introduction to Sitemaps -
Information Architecture - Sitemap Concerns - annotated
process - Elements - Treejack Introduction – Treejack
Analysis.

07/12/24 UI/UX 5
 Module - IV
WEB DESIGNS: WIRE FRAMES TO PROTOTYPES

Introduction to Wireframes - Responsive Design:

Introduction and Primary navigation - Secondary and utility
navigation - Related content, inline links, indexes, and
search - Wayfinding - Common Form Elements – Homepage
Content Strategies - Examples of Homepage Content
Strategies - Wireframing Tools. The Mockup Phase: Visual
Mockups - Design Principles - Using whitespace to style a
form - Web Fonts - Web Typography: Creating Visual
Mockups. Putting it all Together: Clickable Prototypes -
Invision - Exporting Assets - Importing Assets and Creating
Hotspots - Hotspot Templates.

07/12/24 UI/UX 6
 LABORATORY EXPERIMENTS

1. Analyze an existing app and defining your app's functions step-by-

step
2. Experiments with Non-Visual Prototyping & User Testing
3. Create a generic prototype of any application both in Web vs. App
4. Test your sitemap using Treejack
5. Exploring Navigation Systems, Common Design Patterns, Design
Principles/Whitespace, Web Typography.

07/12/24 UI/UX 7
 Books
TEXT BOOKS
1. Buxton, B., Sketching User Experiences: Getting the Design Right and the Right
Design. Morgan Kaufmann, (2007).
2. Jesse James Garrett, The Elements of User Experience: User-centered Design for the
Web, New Riders; 2nd edition2010.

REFERENCES
1. Russ Unger, Carolyn Chandler, A Project Guide to UX Design: For User Experience
Designers in the Field Or in the Making, New Riders; 2nd edition, 2012.
2. Don Norman, The Design of Everyday Things, Basic Books; 2nd edition, 2013.
3. Everett N. McKay, UI is Communication: How to Design Intuitive, User Centered
Interfaces by Focusing on Effective Communication, Morgan Kaufmann; Illustrated
edition, 2013.
4. Dr. Erich Gamma, Ralph Johnson, Richard Helm and John Vlissides, Design Patterns:
Elements of Reusable Object - Oriented Software, Pearson, 2008.

07/12/24 UI/UX 8
 Reference Links
WEB REFERENCES
1. https://www.coursera.org/specializations/ui-ux-design
2. https://learnux.io/
3. https://www.sketch.com/

07/12/24 UI/UX 9
 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
Introduction to Wireframes
A wireframe is a two-dimensional illustration of a page's interface
that specifically focuses on space allocation and prioritization of
content, functionalities available, and intended behaviors.

For these reasons, wireframes typically do not include any styling,

color, or graphics.

The Three Main Types of Wireframes

•Low-fidelity wireframes.
•Mid-fidelity wireframes.
•High-fidelity wireframes.

07/12/24 User Experience Design 10

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
What is a Wireframe?
A wireframe is the first step in the UX design workflow of a website or
mobile application.
The concept of creating a wireframe is similar to how architects start with
blueprint drawings and engineers sketch mechanical diagrams.

The literal meaning behind the term ‘wireframe’ is of a wire construction,

much like the ones used by sculptors, ceramicists and engineers to build over
with a finishing material.

In a house or building, the walls and columns have wireframes inside
them, large sculptures have wireframes as a base structure and complex
ceramic designs are often built on wireframes too.

07/12/24 User Experience Design 11

WEB DESIGNS: WIRE FRAMES TO PROTOTYPES

07/12/24 User Experience Design 12

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
 A mobile or website wireframe is the bare bones of the overall information architecture.
It helps pilot the development process from early stages to the final product.
 A wireframe visualizes an interface and is used widely as a tool in interface design, also
called UI design.
 In a visual sense, wireframes are 2D visualizations of what a website or app will look
like when it’s finished.
 They are the first draft of the user interface, with grayscale shapes and minimal design
elements.
 Here are some examples of elements typically used in wireframes:
• Squares or rectangles represent images and icons with an X inside them or just a dark
gray filler.
• Text is visualized with 'lorem ipsum' or lines inside a box.
• Buttons are either rounded or a darker gray.
• Icons are either small symbols or squares with an x.
• There are no backgrounds apart from a subtle gray color.
• Everything is static.

07/12/24 User Experience Design 13

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES

 A wireframe’s overall layout is like a bird’s eye view of all the pages in a website or app. The
pages are laid out in a grid side-by-side in columns and rows with enough space between
them to add interaction instructions.


07/12/24 User Experience Design 14

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
What is the purpose of a wireframe?
Wireframes are an essential part of UX/UI design. They improve the
creation process by simplifying the initial user interface testing stage. Using
wireframes, UX and UI designers test out their initial ideas without spending
too much time designing the details.
According to the Web Style Guide by Patrick J. Lynchand Sarah Horton,
“Wireframes force teams to stay focused on the information architecture and
structural design without getting sidetracked by the distraction of the visual
layer.”

X/UI designers also use wireframes to show clients and stakeholders a

quick representation of how their final design will look.
Wireframes serve as a common language for all team members; the
clients, the project managers, the designers, and the developers.

07/12/24 User Experience Design 15

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
Difference between a wireframe and a prototype:

•Prototypes are navigable mid- or high-fidelity wireframe pages with

working buttons, interactions and animations. They also have a color
scheme, detailed design elements and micro-interaction, and a simple user
flow to test the functionality of the design.

•Wireframes aren’t navigable. The pages are laid out in a large composition,
with navigation and interactions detailed with lines and annotations or string
and pins.

07/12/24 User Experience Design 16

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
How do you wireframe a project?
6 Steps to make a wireframe
1.Do your research.
2.Prepare your research for reference.
3.Make sure you have your user flow mapped out.
4.Draft, don't draw. Sketch, don't illustrate.
5.Add some detail and get testing.
6.Start turning your wireframes into prototypes.

07/12/24 User Experience Design 17

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
Wireframing Tools
The best tools for wireframing
There are heaps of free wireframe tools out there, experiment with as
many and to find the ones that suit the best.
Don’t forget that you can also just use pen and paper!
The examples below all have free trials
UXPin: UXPin has a wide range of functionalities, but one of the best
ones is how it facilitates building responsive, clickable prototypes directly in
your browser.
InVision: InVision allows to get feedback straight from the team and users
through clickable mock-ups of the site design. It’s completely free too!
Wireframe.cc: Wireframe.cc provides the with the technology to create
wireframes really quickly within the browser, the online version of pen and
paper.

07/12/24 User Experience Design 18

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
 Invision Best for cross-collaborative teams needing infinite whiteboard
spaces
 Justinmind Best for turning clickable wireframes to functional simulations,
fast
 Mockplus Best for turning low-fidelity designs into interactive wireframes

07/12/24 User Experience Design 19

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
 Type #1: Low-fidelity wireframes.

07/12/24 User Experience Design 20

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
 The first and simplest type is the low-fidelity wireframe. These are created either
by hand, or with a digital tool.

 Low-fidelity wireframes are meant to be created fast and loose, without any design
elements at all. Think of it as the skeleton of a website or app. The choice to create
these by hand or with a tool depends solely on the work style of each person.

 There are printable templates for sketching wireframes on paper, and there are
plenty of low-fidelity templates and kits to create these online.

 The main idea in a low-fidelity wireframe is to be as minimal as possible. Use

only grayscale, one generic font, and no images or design effects like shadows.

07/12/24 User Experience Design 21

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
 Types #2: Mid-fidelity wireframes.


07/12/24 User Experience Design 22

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
 A mid-fidelity wireframe is more elaborate than a low-fidelity wireframe and
closer to the intended final UI design.

 The wireframe might show images, more detailed visualizations of what’s

intended for the layout, and interactions between pages are clearer and more
elaborate than in a low-fi wireframe.

 A mid-fidelity wireframe can either be a continuation and improvement of a low-

fidelity wireframe or the first step.

 For example, if this is the second or third wireframe for the same brand, it might
not be necessary to start at low-fidelity.

07/12/24 User Experience Design 23

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
Types #3: High-fidelity wireframes.


07/12/24 User Experience Design 24

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
 The third type of wireframe is high-fidelity.

 to how the UI design will look in the finished project. The UI components, images,
icons, colors, fonts, button

 This is the wireframe type closest s and backgrounds are in place and ready to be
turned into a working prototype.

 A high-fidelity wireframe is not always the best place to start with a UX/UI
project.

 If you don’t have a good base with a low-fidelity wireframe that has been tested
for usability and with a few iterations, you’ll have to do these things in a high-
fidelity wireframe. This takes up too much time.


07/12/24 User Experience Design 25

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
The Benefits of Using Wireframes for the Business
It gets a project started faster.
It saves you money.
It's easier to conduct UX testing before the final UI is designed.
It's faster and easier to create iterations before the final design.
It helps determine the overall development requirements.
Wireframes help create and use design systems.

07/12/24 User Experience Design 26

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
How to make your wireframe good: Three key principles
1. Clarity - Your wireframe needs to answer the questions of what that site page is,
what the user can do there, and if it satisfies their needs.
2. Confidence - ease of navigation through your site and clear calls-to-action
increase user confidence in your brand
3. Simplicity is key - Too much information, copy, or links, can be distracting to
the user and will have a detrimental affect on your users’ ability to achieve their
goals.

07/12/24 User Experience Design 27

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
https://visme.co/blog/what-is-a-wireframe/

https://careerfoundry.com/en/blog/ux-design/how-to-create-
your-first-wireframe/#the-best-tools-for-wireframing

07/12/24 User Experience Design 28

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
Responsive Design: Introduction and Primary navigation - Secondary and
utility navigation
What is primary navigation?
Primary navigation is the principal navigation interface on a website. It links
to the most important website pages and appears prominently at the top of the
homepage and other pages.
Primary navigation helps users to quickly find what they’re most likely to
want, with minimal searching and clicks.

What is secondary navigation?

Secondary navigation appears in conjunction with primary navigation, often
on larger, more complex websites.
Secondary navigation comprises the links to content that is less important than
primary pages, but should still be easily accessible from any location on the site.

07/12/24 User Experience Design 29

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
Apply Primary vs. Secondary Navigation
•Page traffic: Review the page analytics for each of your pages to segment popular
from unpopular.
•Interviews: Speak with both customers about how they tend to use your site and
what navigational aspects could be improved.
•Card sorting: This is a simple activity to divide and visualize your pages by primary
and secondary levels. See our guide to card sorting for instructions.

To implement primary and secondary navigation in website’s front end,

◦ use

◦ combined or separated menu approach.

07/12/24 User Experience Design 30

 WEB DESIGNS: WIRE FRAMES TO PROTOTYPES
Combined Menu
In a combined menu, users access the secondary navigation through the primary
navigation, in a single dynamic menu display.
On page load, only primary navigation is visible within the menu. When a user
interacts with a primary menu — through a mouse hover-over or button click/press —
secondary links appear in a vertical drop-down or horizontal pop-out display.

Separate Menus
In this approach, the primary navigation menu is arranged horizontally at the top of
the page or vertically on one side. Secondary navigation has its own menu, with
placement and layout up to you.
Separated primary and secondary navigation menus should be visually distinct from
each other, the primary menu sized larger and placed more prominently on the page.
This Canadian golf retailer implements the dual-menu approach nicely, and combines it
with a vertical menu layout:

07/12/24 User Experience Design 31

 Using whitespace to style a form - Web Fonts
https

https://uxdesign.cc/whitespace-in-ui-design-44e332c8e4a

07/12/24 User Experience Design 32