CCS370 - UI - UX Design Lab Manual

Ex.No.
:1
Designing a responsive layout for a societal application
Understand the Target Audience: Identify the target audience and their needs.
Understanding the users' preferences, behavior, and device usage will help you make
informed design decisions.
Content Hierarchy: Organize content based on its importance and relevance. Consider
what information or features are most critical for users to access and ensure they are
readily available and visible on all screen sizes.
Mobile-First Approach: Start designing for mobile devices first, and then progressively
enhance the layout for larger screens. This ensures that the core functionalities and
content are prioritized for mobile users.
Grid System: Use a grid system to structure your layout. Grids help maintain consistency
and alignment, making it easier to adapt the design to different screen sizes.
Flexible Images and Media: Use images and media that can adapt to various screen
resolutions. Consider using CSS techniques like max-width: 100% to ensure images scale
proportionally on different devices.
Touch-Friendly Interface: Design touch-friendly elements for mobile users. Ensure that
buttons, links, and other interactive elements have sufficient spacing for easy tapping and
that they are large enough to be accurately selected.
Font Size and Readability: Optimize font size and readability for different devices. Avoid
using fonts that are too small on mobile devices, as they may become challenging to read.
Navigation: Implement an intuitive and easy-to-use navigation system. For smaller

screens, consider using a collapsible menu or a hamburger icon to save space.
Testing and Iteration: Regularly test your responsive layout on various devices and
screen sizes to identify and fix any issues. Make iterative improvements based on user
feedback and data.
Performance Optimization: Ensure your application loads quickly and efficiently on all
devices. Compress images, minimize HTTP requests, and utilize caching techniques to
improve performance.
Consistency across Devices: Strive to maintain a consistent user experience across all
devices. Users should be able to perform similar actions and access the same features
regardless of the device they are using.
A/B Testing: If possible, conduct A/B testing to compare different design variations and
determine which layout performs best with your target audience.
Remember that responsive design is an ongoing process. As new devices and screen sizes
emerge, you may need to make further adjustments to ensure your societal application
remains accessible and user-friendly to a wide range of users.
Coding:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Societal App</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
/* Header styles */
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
/* Navigation styles */
nav {
color: #fff;
display: flex;
justify-content: center;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
nav li {
padding: 10px;
/* Main content styles */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
/* Sidebar styles */
.sidebar {
flex: 1;
padding: 20px;
/* Main content area styles */
.main-content {
flex: 3;
padding: 20px;
/* Footer styles */
footer {
color: #fff;
text-align: center;
padding: 10px;
/* Media Queries for responsiveness */
@media screen and (max-width: 768px) {
nav {
flex-direction: column;
@media screen and (max-width: 600px) {
.sidebar, .main-content {
flex: 1;
</style>
</head>
<body>
<header>
<h1>Societal App</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<div class="sidebar">

<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor tortor vitae
justo consequat rhoncus.</p>
</div>
<div class="main-content">

<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum eros
nec urna pulvinar malesuada.</p>
</div>
</div>
<footer>
<p>© 2023 Societal App. All rights reserved.</p>
</footer>
</body>
</html>
Ex.No.:2
Exploring various UI Interaction Patterns
UI interaction patterns refer to the various ways users can interact with the user interface
of an application or website. These patterns are designed to provide a smooth and
intuitive user experience. Let's explore some common UI interaction patterns:
1. Lazy registration
This pattern is particularly common among ecommerce platforms out there. The idea is
that you don’t ask for the user to log in or to sign in until the actual checkout. It solves the
problem of people who want to experience the website without the formal registration
form.
This allows for new people to browse and add things to their cart, without ever worrying
about creating an account. Ultimately, people are already invested by the time they reach
the checkout. It makes more sense to ask for their log/sign in information at the point in
time, when they already know what they want and have invested time into the selection
of items.
2. Breadcrumbs
Most users have become so used to breadcrumbs. We all know what they represent, with
breadcrumbs becoming a classic in UI design. It solves the problem of letting the user
know where they are within the structure of the product at all times, while also providing
shortcuts to the higher levels of content.
Breadcrumb navigation is commonly found in websites that hold a lot of content and
information, like ecommerce platforms or editorial-style magazines and news journals.
It works really well in products that have a clear hierarchy of information, representing
an ill-suited option for websites that are small and only have a few pages.
3. Steps left
People can often get lost in long processes. Things like long forms or checkout processes
can stretch on, creating the issue of users becoming lost or losing interest or attention.
They need guidance, something that resembles a road map.
Many designers turn to the steps left pattern, which acts as a progress bar that lets
users know where they stand and how much further they have to go. It has plenty of
margin for designers to get creative, with the bars being made in the most ingenious
ways while still getting the job done. They offer context to users who need it as well as
acting as a light at the end of the tunnel for tired users.
4. Cards
UI cards are another design pattern that designers often rely on to display content. In
theory, it solves the issue of displaying content that varies in form and length. With that
said, having a cards system makes the most of the available space, both for web and
mobile designs.
A card grid system works best when users are browsing as opposed to searching for a
specific thing. It can be used to visually group digestible portions of information together,
making it organized but not overwhelming to users. Designers can add interaction to the
cards to elevate the design, as well as getting creative with the actual display in each card.
They are both intuitive and attractive, making for a type of design that pleases most users
and offers a clear visual hierarchy.
5. Tab navigation
Tabs are another design pattern that most of us have grown used to. There’s true
familiarity given that this pattern is used in most web browsers. Tab navigation solves
the problem of organizing content in a flat structure that shows the user where they are
at all times. Tabs are very practical when you want to categorize content in a way that
makes it easy for users to explore them one at a time, as well as quickly changing tabs
when need be.
A few guidelines for using tabs include using the entire width of the screen for the tabs to
maintain a visual balance. On top of that, be careful to use tabs only when there are many
different categories or types of content at hand – a tab system for one or two categories
doesn’t work well.
6. Pagination vs. continuous scrolling
Both these patterns deal with feeding users content. On the one hand, we have the issue
of content that can be exposed as a single continuous page which helps users to consume
it without effort. That’s when continuous scrolling comes in. A great example is Facebook
and its power to keep users scrolling down for long periods of time. It makes for a
seamless experience that just keeps the ball rolling.
On the other hand, we have the issue of content that needs to be broken down into
separate parts, making it easier to digest and comprehend. That’s when we turn to
pagination. Usually, it comes with full control to move back and forth, both to the previous
and next page as well as going directly to the very start or end of the content.
7. Fat footer
Another very commonly found design pattern: the fat footer. It mainly solves the problem
of users who want to bypass the main navigation system and go directly to specific pages
in the product.
This pattern is often used for websites featuring specific pages that are more frequently
visited than others, like a frequently asked questions page. It can be a useful way to add
shortcuts without worrying about the general hierarchy of the website.
8. Modal
Modal windows are very common to find in the UI design of websites. Be it an online store
or a blog, modals offer a great way to grab the user’s attention and get some reaction out
of the user. This is usually used by designers in order to draw attention to sales, important
newsletters and other things that require the user to either accept it or sign up for
something.
The thing about modals is that they’re a way of intentionally interrupting the user, right
in the middle of a task. While this could be seen as a bad thing, because it distracts or
takes away from the experience, many design teams stand by modals. They’re quick to go
away and don’t pose a serious impediment for the UI of the website as a whole.
9. Carousel
Much like other widely popular website design patterns, the carousel has its fans and
haters. Some say that carousels are a bit outdated and are likely to disappear entirely in
the near future, due to usability and performance issues. With that said, we can still see
carousels in many websites around the web – which makes it a very much relevant UI
pattern. The main problem that carousels solve is that they allow users to see many
options while focusing their full attention on only one of those options.
This means that carousels can be a rather persuasive way to approach the user, displaying
your options in their full glory in hope that the user will select one of them. It can be handy
because it takes up very little space while managing to show quite a few alternatives. It is
a highly visual approach, which makes it a terrible option if the content you need to
display isn’t visual in nature, like an Excel sheet or a written document.
10. Accordion Menu
Accordion menus are another design pattern we run into quite often when it comes to
website UI design. More often than not, we’ll find an accordion menu functioning as the
main navigation of a website, because it allows users to explore categories within the
website while also discovering the sub-categories and lower-level content. It’s highly
hierarchical and provides a very intuitive way of navigating websites that hold a lot of
content.
10 mobile app UI patterns
1. Hamburger menu
Ah, the hamburger menu. Particularly common in mobile apps, the hamburger menu has
gotten both a following and a group of fierce critics. The epic 3 little lines that conjure the
instantly recognizable icon are used to solve the problem of screen real estate on mobile
devices.
It’s undeniably practical. We can create a wholesome menu that can be stowed away so
users can only expose it when they need it. There’s a certain interaction cost that comes
with it, as well as some debate over the real usability that the hamburger menu brings to
the table. Regardless of where you stand, there’s no overlooking the fact that most users
will immediately know the icon, which is a massive benefit in its own right.
2. Forgiving format
The forgiving format is all about working with what users give you. As we mentioned
before, humans can be massively different from each other. This holds true to writing out
data input, with people writing data in many different ways even when referring to the
same item.
Things like ecommerce items or addresses and zones can have misspelled words,
abbreviations and missing words that are important. That’s the issue that the forgiving
format comes to solve, for all of our sakes. In short, the forgiving format takes what users
write out and works to interpret that, as opposed to correcting users or forcing them to
change what they wrote. In order for this format to work, it needs to cover a specific topic
– like an address search. That way, the system can connect the dots no matter how users
express themselves, without frustrating the user or increasing their cognitive load.
3. Progressive disclosure
Progressive disclosure is used very often in user onboarding as well as in complex

settings. Mainly, it solves the problem of users wanting to focus on a task at hand without
getting overwhelmed or distracted by other stuff.
Working in a similar way to lazy registration, progressive disclosure is a way for us to
allow users to become invested before they have to deal with things like registration or
forms. It works well for products that need to introduce themselves to users slowly,
focusing on the core features first. The result is a product that is much easier to use the
first time around, prioritizing the attention of the user and creating a more efficient
experience as a whole.
4. Splash Screen
The splash screen is the very first thing that users see when they open an app on their
mobile device. They can be easily overlooked or forgotten by users, since they only
appear for a brief moment before the actual app home screen loads.
The splash screens basically solves the problem of keeping users satisfied while
everything in the app loads, making that waiting time more entertaining. Some
companies keep it simple with the logo and little else. Others go big and invest in intricate
illustrations and beautiful visuals. Either way, this may be a small part of the UI design
for mobile apps, but it’s an important opportunity to set the tone for the experience to
come.
5. Product screen
Product screens are the bread and butter of ecommerce platforms, both in web and app
formats. The main issue that this pattern tackles is the simple fact that people need to
know more details about items before they can decide to buy them. This is the moment
for designers to showcase the product in all its glory, to make a true sales pitch using the
design. When it comes to the UI design of apps, the product screen is really about using
design to make the content shine. Both in terms of highlighting the best of the item with
visual pictures or videos, as well as making the description and CTA pop.
It’s worth mentioning that some of the most important factors at play here include visual
hierarchy and balance, as well as the efficiency and conversion of the screen. Ultimately,
product screens are meant to be persuasive and effective, which will all depend on how
well you understand your key users and their mental models.
6. Pull to refresh
This is one that most users with smartphones will instantly know. The pull to refresh UI
pattern solves the problem of users who want to see more information or wish to have a
more up-to-date version of the content.
It’s been widely used in all sorts of mobile apps, from Facebook to CNN. It’s very practical,
because it literally takes up no room in the UI at all, leaving that crucial screen real estate
for more important elements. It’s highly intuitive, easy to spot and very efficient.
7. Article list
Reading on the phone is no longer just for a select few users, but for the vast majority.
Having any sort of web app that offers a lot of reading content, be it Medium, The New
York Times or Justinmind’s UX blog – reading on the go has never been so easy. And that
is, in part, thanks to UI patterns like the Article List.
This pattern solves the problem of a reader who wants to find specific content that is of
interest – which can be nearly impossible to do with navigation alone. You want to offer
readers a little snippet so that they can get a sense of the content and decide if they’re
interested or not.
8. Notifications
Who wants to miss out on important developments? Notifications solve the problem of
keeping users in the loop, letting them know about anything that happens inside the apps
on their mobile device. Apps have their own notification designs, but they all follow
similar lines of this classic UI pattern.
The important thing to remember when it comes to notifications is that they’re never
meant to include information that is already being shown on the screen. Another scenario
is some sort of technical development that doesn’t need any user involvement – like a
small update or synchronizing with the network. Keep them relevant to users, especially
anything that is time-sensitive.
9. Need for closure
Need for closure is a UI Pattern that is commonly used in UI design when the idea of
gamification is at play. The pattern itself is a nod at our human psychology, which defends
that people want closure for their tasks – it motivates them.
This can be used in UI design to encourage users when it comes to small actions. The
recognition of the end of a task or cycle doesn’t have to be massive, it can be as simple as
a quick modal window with “congratulations” on it. Ultimately, this can be a nice way to
get users hyped for the user experience, especially if the entire product was made to
resemble a video game in any way.
10. Input feedback
This UI pattern is all about solving the issue of miscommunication in forms. Input
feedback is applicable to all kinds of forms, it’s true. With that said, it’s even more
important in mobile-based forms because it requires more cognitive and physical effort
for users to type their answers. This makes it even more important to help users get it
right, be it with accurate labels or with input feedback.
The input feedback itself is a widely used UI pattern. The feedback can be designed in a
wide range of ways, from a bright green check to a green underlining of the input field.
This is an opportunity to point out mistakes to users before they submit the information,
giving them the chance to get it right and avoiding the feeling of frustration.
1. UI-patterns
Perhaps the single most popular UI Pattern library today, UI-patterns is a wonderful
resource to have at hand. The website lists out all the most common UI patterns and
makes it easy to compare several different patterns.
One of the best things about this website is that it makes it easy to find the right pattern,
listing them all out in a comprehensive and intuitive way. Don’t expect long periods of
time spent searching for the right option here! We also like the brief but very practical
information listed in each pattern, which explain what the problem it solves is, along with
some general guidelines.
2. Patternfly
Patternfly makes for a more complete list of patterns, listing some of the most frequent
variations as well as the classic patterns. Navigation all around the patterns remains easy,
due to the vertical navigation bar that makes quick comparison a piece of cake.
The explanations in Patternfly are a bit more detailed than UI-patterns, which makes it a
better option for those that are just getting started with UI design. The website offers all
the theory as well as some real examples of the patterns in action, making it a good
learning resource.
3. Wellie
We know. This isn’t the best-looking website you’ve seen. There’s something old-
fashioned about the design of the website, which can perhaps distract from the wonderful
content it holds. Wellie has quite a useful list of UI patterns, which lead to pages with
practical examples and all the theory broken down – making for easy reading.
It’s a good resource to keep bookmarked, especially for those who are still trying to get a
better understanding of premade UI patterns. Altogether, Wellie can be a useful resource
due to its attention to detail when it comes to the content as well as its way of presenting
the patterns, which makes for easy navigation.
Ex.No.: 3
Developing an interface with proper UI Style Guides
UI Style Guides are a design and development tool that brings cohesion to a digital
product’s user interface and experience. At their core, they:
• Record all of the design elements and interactions that occur within a product
• List crucial UI components such as buttons, typography, color, navigation menus,
etc.
• Document important UX components like hover states, dropdown fills,
animations, etc.
• Contain live elements and code snippets for developers to reference and use
Typography Scheme
Typography is one of the most common interface design elements, so it’s not enough to
merely list the names of typefaces used in a product. Clear instructions should be given
for Titles, Subtitles, Headings (H1, H2, H3), Body Text, and Captions.
Typography when creating a UI style guide
Additionally, font sizes should be provided, weights indicated, and styles defined. Line
height and kerning are also needed, and it’s a good idea to single out a go-to font to be
used when special circumstances arise.
Responsive Layouts
When digital products are designed around responsive grid systems, UI Style Guides must
address interface layouts across screen sizes. This means including notes and examples
for spacing, padding, and placement. It’s also helpful to show overlays of the product’s
grid system in relation to different screen sizes.
The big goal here is providing enough context to prevent the need for one-off screen
designs. Over time, these add up and undermine a digital product’s cohesion.
Color Palette: One of the quickest ways to wreck an interface is inconsistent color use,
so color combinations need to be clearly defined. Listing colors and their values (HEX,
UIColor) is a good start, but specific pairings and use examples should also be given.
Branding document UX and UI style guide
If the UI Style Guide is referencing a set of brand identity guidelines, check to see if a
secondary scheme of lighter accent colors is available. If not, create your own and
document. A selection of gray values is also useful.
Buttons
Nearly every interface includes buttons, so take time to document their sizes, styles,
colors, placement, spacing, and typographic elements. If various buttons are used in
different contexts, make that clear as well.
Additional UI Components That May Be Needed
• Iconography
• Tooltips and popovers
• Modals
• Form elements
• Data Tables
• Navigation menus
• Charts and data visualizations
• Tabs
• On-off switches
• Dialogs
• Content grid lists
• Vertical lists
• Toolbars
• Date and time pickers
• Loading indicators
• Checkboxes
• Alerts
• Dropdown menus
• Sliders
• Steppers
• Pagination
• US-based full-time freelance UI designers wanted
Organize and Contextualize Design Instructions
In addition to must-have UI components, there are a number of practical features that

make UI Style Guides easier for businesses and design teams to reference, navigate, and
implement.
Table of Contents
A well organized and clearly marked table of contents is a simple way to help everyone
quickly find what’s inside the document.
Context Notes
It’s impossible to predict every problematic design decision that may arise over a
product’s lifespan, so articulating the design rationale behind often-used UI components
can make unforeseen scenarios easier to resolve.
For example:
“At its core, our product is about showcasing the best architecture images from around
the globe. For that reason, the layout of our interface prioritizes big, splashy images over
text. Whenever possible, make images the focal point of our product.”
Spacing and Positioning Instructions
Spacing and positioning are often covered in the ‘Responsive Layouts’ section. Depending
on the complexity of the digital product, instructions may consist of general “rules of
thumb” or be quite granular.
UI style guide spacing and positioning
Do’s and Don’ts
Oftentimes, it can be helpful to clearly outline design Do’s and Don’ts. For instance:
• “Do use the white wordmark version of our company logo in the interface footer.”
• “Don’t use alternate color versions of our company wordmark on black
backgrounds.”
User interface design principles to include when creating a ui style guide
Do’s and Don’ts prevent debate and save design and development time, but it’s always
best to provide a note of context like this:
“This list of Do’s and Don’ts covers a wide range of important design decisions, but it does
not take into account every possible misuse of our product’s design elements. With this
in mind, use best judgment when uncertainty arises, and make choices that accurately
reflect the overall look and feel of our product.”
Live Elements and Code Snippets
Brand identity guidelines are typically static documents, but UI Style Guides include live
elements that operate as they would in the final product—meaning buttons behave like
buttons, dropdown menus actually drop down, and animations are animated. Code
snippets allow developers to quickly copy and paste the code of live elements into a
product’s back-end.
Make UI Style Guides Easily Accessible for Design Teams: Now that we understand how
to create a style guide and the components and features included in a UI Style Guide, we
shift our attention to sharing and communication. More specifically, what are the options
for housing UI Style Guides?
Traditionally, UI Style Guides have existed as web pages. This provides designers and
developers with easy access and allows design elements to function as they would in-
product.
More recently, a handful of cloud-based platforms have emerged, allowing teams to

design, prototype, and test products collaboratively. These same platforms are also
capable of housing UI Style Guides and enabling team members to exchange ongoing
feedback and ideas.
Let’s see how a few of these platforms describe their approach to UI Style Guides.
Figma: “Create design systems with linked UI components the whole team can use. Get
updates when changes are made to shared components”
Phase: “Libraries how they always should have been: Colors, Properties, &
Elements…even transition timing — everything in a component now. Edit in place—
everything is a master. Override anything you don’t need, per-instance.”
UI pattern library-InVision: “All brand and UX components—including usage

documentation—are managed in a single place. Changes sync to the whole team, and
designers can switch to the latest version or roll back updates at any time.”
“Make your own Material theme and create a branded symbol library by applying style
changes to color, shape, and typography. Share, upload, and present design iterations in
Gallery. Then use Inspect Mode to access developer documentation.”
UI Style Guides Should Be Easy to Use
When assembling UI Style Guides, communication can’t be taken for granted. Product
teams are made up of people from different disciplines, cultural backgrounds, and
professional experiences. Use these principles to ensure clarity and ease of use.
Simple Layouts
UI Style Guides require clean, uncluttered screen layouts. Each screen should be well
organized, clearly labeled, and highly legible. There’s no benefit in overloading screens
with visual information, so aim for arrangements that are both minimal and spacious.
Informative Use Scenarios

Wondering when to use this style of slider over that one? ‘Use scenarios’ resolve this kind
of confusion. Again, visuals are stronger than words here, so provide examples that
clearly demonstrate both the scenario and the proper path forward.
UI Style Guides Are a Valuable Resource and Powerful Design Tool
Contemporary design and development teams value efficiency and multidisciplinary

collaboration—as evidenced by the design language systems being touted by big brands
like MailChimp, Google, and Salesforce.
Design language systems allow diverse teams working on sophisticated digital products
to communicate using a standardized visual language. UI Style Guides are woven into the
fabric of design language systems and serve as a tool that can be relied on for quick
iteration and consistent digital experiences.
Creating a UI style guide, one can use code snippets
At the same time, design is not a pursuit reserved only for large companies. A diverse
array of product teams and digital projects stand to benefit from well-constructed UI
Style Guides, but resources (financial, time, and talent) vary from business to business.
For this reason, UI Style Guides are most useful when they are tailored to the needs of
individual businesses and design teams. The highest aim of every UI Style Guide is a
balance of clarity and practicality that leads to consistently delightful user experiences.
Ex.No.: 4
Developing Wireflow diagram for application using open source software for any
societial application
"Pencil" is an open-source prototyping tool that allows you to create wireframes and
simple diagrams. While it's not specifically designed for creating Wireflow diagrams, you
can still use it to create a basic representation of the user flow in a societal application.
Here's a step-by-step guide using Pencil:
Step 1: Download and Install Pencil:
Visit the Pencil website (https://pencil.evolus.vn/) and download the appropriate

version for your operating system. Install the software on your computer.
Step 2: Open Pencil and Create a New Document:
Open Pencil on your computer. Create a new document and choose the appropriate
canvas size for your Wireflow diagram.
Step 3: Define User Flows and User Journey:
Just like in the previous steps, identify the main user flows in your societal application
and determine the entry and exit points.
Step 4: Create Wireframes:
Use the Pencil toolset to create wireframes for each screen in the user flow. You can drag
and drop UI elements from the built-in library or create your custom elements.
Step 5: Arrange Screens:
Arrange the wireframes in the order they appear in the user flow. Place them on the
canvas, leaving enough space for arrows and connectors.
Step 6: Add Interactions:
Use the Pencil connectors to show how users navigate between screens. For example, if a
button on the Home screen leads to the Create Post screen, draw an arrow from the
button to the Create Post screen.
Step 7: Add Annotations (Optional):
Add annotations or notes to clarify specific interactions or provide additional context for
each screen.
Step 8: Review and Iterate: Review the Wireflow diagram and ensure that all user flows
are accurately represented. Iterate and make necessary adjustments based on feedback.
Step 9: Save and Export:
Save your Wireflow diagram as a Pencil project file (".ep" extension) so you can edit it
later if needed. If you need to share the diagram, you can export it as an image or PDF file
from the "File" menu. Please note that Pencil is more suitable for creating static
wireframes rather than interactive Wireflow diagrams. If you need a more interactive
representation of your Wireflow diagram, consider using other dedicated prototyping
tools like Figma, Sketch, or Adobe XD, which offer more advanced features for creating
interactive prototypes.
Ex.No.: 5
Exploring various open source collaborative interface Platform
There were several open-source collaborative interface platforms available. These

platforms allow designers and developers to work together in real-time, collaborate on
projects, and streamline the design and development process. Keep in mind that new
platforms may have emerged since my last update, so I recommend checking for the latest
options. Here are some popular open-source collaborative interface platforms:
Figma (Community Edition): Figma is a cloud-based design tool that offers a Community
Edition, allowing users to collaborate in real-time on design projects. It supports design,
prototyping, and developer handoff. While the core product is not open-source, Figma
Community allows users to share and collaborate on design files freely.
Vectr: Vectr is a free and open-source vector graphics editor that supports collaborative
design. It runs on the web as well as on desktop (Windows, macOS, Linux). Multiple users
can work together on the same design in real-time.
Gravit Designer: Gravit Designer is a full-featured vector design tool with collaboration
capabilities. It allows multiple users to work simultaneously on the same project online.
Drawpile: Drawpile is an open-source collaborative drawing program. While it is more
focused on artistic collaboration, it can be used for UI design brainstorming and
prototyping as well.
Whiteboard: Whiteboard is an open-source online collaborative whiteboard tool. While

primarily intended for general collaboration, it can be used for UI design discussions and
wireframe sketches.
Excalidraw: Excalidraw is a virtual collaborative whiteboard tool designed for sketching
rough drawings and wireframes. It can be used for basic UI design collaboration.
Wireflow: Wireflow is an open-source tool that combines wireframes and flowcharts to

create user flow diagrams. While not focused on real-time collaboration, it allows
multiple users to work on the same project file.
Remember that the collaborative features in these platforms may vary, and some may
require setting up additional infrastructure to host the collaboration server. Before
choosing a platform, consider factors like ease of use, real-time collaboration capabilities,
export options, and the specific needs of your team and projects. Always check the latest
information and updates about these tools to ensure they meet your requirements.
Ex.No.:6
Hands on Design Thinking Process for a new product
Design thinking is a user-centered approach to problem-solving and product

development that emphasizes empathy, creativity, and iterative prototyping. Here's a
hands-on guide to the design thinking process for creating a new product:
Empathize: Understand the users and their needs. Conduct interviews, surveys, and
observations to gain insights into their pain points, desires, and behaviors.
Define: Analyze the data collected during the empathy phase to define the specific
problem or challenge you want to address with your new product. Create a clear and
concise problem statement.
Ideate: Brainstorm creative solutions without judgment. Encourage a diverse team to

generate as many ideas as possible to solve the defined problem.
Prototype: Select the most promising ideas from the ideation phase and create low-
fidelity prototypes of your product. These could be sketches, wireframes, or simple
mockups.
Test: Gather feedback from potential users by conducting usability tests with your
prototypes. Observe how users interact with the product and identify areas for
improvement.
Iterate: Based on the feedback received during testing, refine your prototypes and make
necessary adjustments to address user feedback and improve the product.
Implement: Develop a high-fidelity version of the product based on the improved

prototypes. Collaborate with developers, designers, and stakeholders to build the
product.
Launch: Introduce the product to the market or the intended user base. Monitor its
performance and gather real-world feedback.
Feedback and Refinement: Continuously collect user feedback and data after the product
launch. Use this information to refine and enhance the product based on actual user usage
and needs.
Scale: If the product proves successful, plan for its expansion and scalability to reach a
wider audience or address additional markets.
Throughout the design thinking process, keep the following principles in mind: User-
Centered Approach: Always focus on the needs and desires of the users. Design with
empathy and consider their perspectives in every stage.
Collaboration: Encourage collaboration among team members from diverse
backgrounds. Different perspectives lead to more innovative solutions.
Iterative Process: Design thinking is an iterative process. Be prepared to revisit and refine
your ideas based on user feedback and insights.
Fail Fast, Learn Faster: Embrace failure as a learning opportunity. Quick prototyping and
testing allow you to learn from mistakes and make improvements rapidly.
By following the design thinking process, you can create a new product that resonates
with users, addresses their needs, and offers a delightful user experience.
Ex.No. 7
To brainstorm features for a proposed product
To brainstorm features for a proposed product, we'll need to know more about the
product's nature or its target market. Since I don't have specific details about the product
you're proposing, I'll provide a general list of potential features that could be applicable
to various types of products. Feel free to adapt these ideas based on the nature of your
product:
User Registration and Authentication: Allow users to create accounts and log in securely.
User Profile: Enable users to create and manage their profiles with personal information
and preferences.
Search Functionality: Implement a robust search feature to help users find relevant
content or products easily.
Personalization: Offer personalized recommendations or content based on user behavior

and preferences.
Notifications: Provide users with notifications for important updates, activities, or

interactions.
Social Sharing: Allow users to share content or products on social media platforms.
Messaging or Chat: Incorporate a messaging or chat feature to enable direct

communication between users.
User-generated Content: Allow users to create, upload, or submit their content, such as
reviews, articles, or images.
Community or Forum: Create a space for users to engage in discussions, ask questions,
and interact with others.
Dashboard or Analytics: Offer users a dashboard or analytics section to track their

activities, performance, or progress.
E-commerce Integration: If relevant, integrate an e-commerce platform to facilitate

product purchases.
Multi-language Support: Provide support for multiple languages to cater to a diverse user
base.
Gamification: Implement gamification elements, such as badges, points, or leaderboards,

to enhance user engagement.
Offline Support: Consider enabling certain features to work offline, allowing users to
access content without an internet connection.
Data Security and Privacy: Ensure robust data security measures and options for users to
manage their privacy settings.
Accessibility Features: Design the product with accessibility in mind, catering to users
with disabilities.
Integration with Third-party Services: Integrate with other popular services or APIs to
enhance functionality.
Feedback and Review System: Allow users to provide feedback, rate products or content,
and leave reviews.
Data Sync Across Devices: Enable seamless data synchronization across multiple devices
for a consistent user experience.
Offline Data Sync: If applicable, allow users to sync data when they reconnect to the
internet after being offline.
Remember that the best features for your product will depend on its purpose, target
audience, and unique selling proposition. Conducting user research and gathering
feedback during the development process will help you prioritize and refine these
features to meet your users' needs and expectations.
Ex.No. 8:
Defining the Look and Feel of the new Project
Defining the look and feel of a new project is a crucial step in creating a visually appealing
and cohesive user experience. This process involves establishing the project's overall
visual style, including the design elements, color palette, typography, and imagery. Here's
a step-by-step guide to defining the look and feel of your new project:
Understand the Project's Purpose and Audience: Start by understanding the project's
goals, target audience, and the problem it aims to solve. Identifying the project's purpose
will guide the design choices.
Gather Inspirations and References: Collect visual inspirations and references that align
with the project's theme and goals. Look for examples of designs that evoke the desired
emotions or fit the intended style.
Create a Mood Board: Compile the collected inspirations into a mood board. This collage
of images, colors, and typography will serve as a reference to set the overall tone and
mood for the project.
Define the Color Palette: Choose a color palette that complements the project's theme and
evokes the desired emotions. Limit the number of colors to maintain visual consistency.
Select Typography: Choose appropriate fonts that align with the project's tone and are
easy to read. Select font styles for headings, subheadings, and body text.
Design Elements and Icons: Define the visual elements and icons that will be used
throughout the project. Consistency in design elements creates a cohesive look.
Layout and Composition: Establish the layout and composition guidelines for different
screens or pages. Consider visual hierarchy and balance to ensure a user-friendly design.
Imagery and Graphics: Determine the types of imagery and graphics that will be used,
such as illustrations, photographs, or icons. Ensure they align with the project's theme
and reinforce the intended emotions.
Create Style Guides: Develop style guides that document all the visual elements, color
codes, typography, and guidelines. Style guides serve as a reference for the design team
and ensure consistency.
Design Iteratively: Start creating visual mockups for different screens or pages, applying
the defined look and feel. Seek feedback and iterate on the design based on input from
stakeholders or users.
Prototype (If Applicable): If the project involves interactive elements, create a high-
fidelity prototype to demonstrate how the look and feel translate into a user interface.
Testing and Refinement: Conduct usability testing to gather feedback from users. Use this
feedback to refine the design and make necessary improvements.
Finalize and Implement: After thorough testing and refinement, finalize the design and
prepare the necessary assets for development.
Remember that the look and feel should align with the project's purpose and resonate
with the target audience. A well-defined and consistent visual style enhances the overall
user experience and helps build a strong brand identity for the project.
Ex.No.9
Create a Sample Pattern Library for that product
(Mood board, Fonts, Colors based on UI principles)
Creating a sample pattern library for a product involves compiling visual elements,
typography, and colors into a cohesive and organized resource. Below is a simple sample
pattern library for a fictional social networking app called "Sociable."
1. Mood Board:A mood board serves as an inspiration and reference point for the overall
look and feel of the product. Here's a mood board for Sociable:
Sociable Mood Board
2. Fonts: Selecting appropriate fonts is essential for creating a consistent and readable
user interface. For Sociable, we'll choose two complementary fonts:
Heading Font: Montserrat (Bold)
Body Font: Roboto (Regular)
3. Colors: A carefully chosen color palette sets the tone and mood of the product. For
Sociable, we'll use a vibrant and friendly color scheme:
Primary Color: #007BFF (Blue)
Secondary Color: #00C853 (Green)
Accent Color: #FF3D00 (Red)
Background Color: #F5F5F5 (Light Gray)
4. UI Principles: Incorporate UI principles to maintain consistency and improve user

experience:
Visual Hierarchy: Use font size, weight, and color to establish a clear visual hierarchy for
content.
Consistency: Apply consistent spacing, alignment, and design elements throughout the
app.
Accessibility: Ensure sufficient contrast between text and background for readability.
Mobile-First Approach: Design with mobile devices in mind to create a responsive user
experience.
Feedback and Validation: Provide visual feedback for user actions and validate form
input.
5. Components: Create a list of commonly used components in the pattern library:
• Buttons (Primary, Secondary, Icon, Disabled)

• Input Fields (Text, Email, Password, etc.)
• Typography Styles (Heading 1, Heading 2, Body, Caption)
• Cards (User Profile, Posts)
• Icons (User, Heart, Comment, Share)
• Navigation Bar (Logo, Search, Notifications)
• Modals (Login, Sign Up, Post Creation)
6. Example Screens: Mock up example screens using the defined fonts, colors, and
components:
Home Feed:
User Profile:
Post Detail:
This sample pattern library provides a foundation for the Sociable app's visual design.
The library ensures consistency across the product, simplifies design and development,
and creates a delightful user experience. Remember that a pattern library should evolve
as the product grows, incorporating new elements and features while maintaining the
defined design principles.
Ex.No. 10
Conducting end-to-end user research for understanding target audiences,

creating user personas, ideating user stories and scenarios, and creating flow
diagrams or flow mapping.
Conducting end-to-end user research for a book stall involves understanding the target
audience, creating user personas, ideating user stories and scenarios, and creating flow
diagrams to optimize the user experience. Let's go through each step:
User Research: Identify the target audience for the book stall. This might include book
enthusiasts, students, parents, or casual readers. Conduct surveys or interviews to gather
insights into their reading preferences, interests, and buying behavior.
Creating User Personas: Based on the user research, create user personas that represent
different types of customers who visit the book stall. For example:
Persona 1: Jane - A university student looking for academic textbooks and literary
classics.
Persona 2: Mark - A tech enthusiast interested in sci-fi and fantasy books.
Persona 3: Lisa - A busy professional seeking bestsellers for leisure reading.
Ideation Process: With the user personas in mind, conduct brainstorming sessions with
your team to generate ideas to improve the book stall's user experience and marketing
strategies.
User Stories: Write user stories from the perspective of your user personas. For example:
As Jane, I want to easily find academic textbooks related to my courses, so I can buy them
quickly and get back to studying. As Mark, I want to explore a diverse collection of sci-fi
and fantasy books, so I can discover new titles to add to my reading list.
Scenarios: Develop scenarios that elaborate on user stories. For instance:
Scenario 1: Jane arrives at the book stall with a specific textbook in mind. She wants to
quickly find it without wasting time searching through unrelated titles.
Scenario 2: Mark is browsing the shelves for sci-fi books. He sees a special display
showcasing the latest releases, catching his attention.
Flow Diagrams: Create flow diagrams to visualize the user journey at the book stall. Map
out the steps a customer goes through from entering the stall to making a purchase.
Consider different touchpoints like browsing, recommendations, payment, and checkout.
Flow Mapping: Utilize flow mapping to have a comprehensive visual representation of
the entire user experience at the book stall. This helps identify potential bottlenecks and
improve the overall user journey.
Test and Validate: Put the user stories, scenarios, flow diagrams, and flow mapping to the
test by conducting usability tests with actual customers. Observe how they interact with
the book stall and gather feedback.
Refine and Iterate: Based on the feedback from usability tests, refine the user experience
at the book stall. Make necessary improvements to enhance the overall shopping
experience.
By conducting end-to-end user research and following the ideation process, you can
ensure that the book stall caters to the needs of its target audience and provides a
pleasant and enjoyable experience for customers. Regularly update the user personas and
adapt your strategies based on evolving customer preferences.
User: Conducting end-to-end user research for digital marketing involves understanding
target audiences, creating user personas, ideating user stories and scenarios, and creating
flow diagrams or flow mapping for departmental store
ChatGPT: Certainly! Conducting end-to-end user research for a departmental store

involves understanding the target audience, creating user personas, ideating user stories
and scenarios, and creating flow diagrams to optimize the user experience. Let's walk
through each step:
User Research: Identify the target audience for the departmental store. This might
include families, working professionals, students, and elderly individuals. Conduct
surveys, interviews, or use data analytics to gather insights into their shopping
preferences, needs, and pain points.
Creating User Personas: Based on the user research, create user personas that represent
different types of shoppers who visit the departmental store. For example:
Persona 1: Sarah - A busy working professional looking for quick grocery shopping.
Persona 2: John - A retired individual seeking discounts and deals on various items.
Persona 3: Emma - A young parent shopping for baby products and household essentials.
Ideation Process: With the user personas in mind, conduct brainstorming sessions with
your team to generate ideas to improve the departmental store's user experience,
promotions, and marketing strategies.
User Stories: Write user stories from the perspective of your user personas. For example:
As Sarah, I want to easily locate the grocery section and find the items I need efficiently.
As John, I want to receive notifications about ongoing discounts and promotions on my
favorite products.
Scenarios: Develop scenarios that elaborate on user stories. For instance:
Scenario 1: Emma is shopping with her baby. She needs to quickly find baby products
without navigating through crowded aisles.
Flow Diagrams: Create flow diagrams to visualize the user journey within the
departmental store. Map out the steps a customer goes through, such as entering the
store, browsing products, checking out, and receiving assistance.
Flow Mapping: Utilize flow mapping to have a comprehensive visual representation of

the entire user experience at the departmental store. This helps identify potential
bottlenecks and optimize the layout and product placements.
Test and Validate: Put the user stories, scenarios, flow diagrams, and flow mapping to the
test by conducting usability tests with actual customers. Observe how they navigate
through the store and gather feedback.
Refine and Iterate: Based on the feedback from usability tests, refine the store layout,
product display, and customer service. Continuously improve the user experience to meet
the needs of the target audience.
By conducting end-to-end user research and following the ideation process, the
departmental store can enhance its overall shopping experience and cater to the needs of
its diverse customer base. Regularly update the user personas and adapt your strategies
based on changing customer preferences and market trends.
Ex.No. 11
Sketch, design with popular tool and build a prototype and perform usability
testing and identify improvements
The process of creating a prototype and performing usability testing for a book stall using
popular design tools like Figma, Adobe XD, or Sketch. Here's the step-by-step process:
1. Sketching and Designing: Start by sketching the user interface on paper or using digital
sketching tools. Design the various screens of the book stall app, including the home page,
book categories, product details, cart, and checkout.
2. Creating the Prototype: Choose a popular design tool like Figma, Adobe XD, or Sketch
to create an interactive prototype. Use the previously designed screens and link them
together to simulate the user flow. Add interactions, transitions, and animations to make
the prototype feel like a real app.
3. Usability Testing: Recruit participants who match the book stall's target audience.
Prepare a usability testing script with specific tasks for the participants to complete using
the prototype. Observe how they interact with the app and listen to their feedback.
4. Identify Improvements: Based on the usability testing results and user feedback,
identify areas for improvement. Pay attention to navigation, clarity of information, visual
hierarchy, readability, and any pain points users encountered.
5. Iterate and Refine: Make necessary changes and improvements to the prototype based
on the insights gained from usability testing. Continue to iterate on the design until you
achieve a user-friendly and intuitive user experience.
6. Perform Additional Testing: Conduct additional rounds of usability testing with

different participants to validate the changes made. Iterate further based on the feedback
received during these sessions.
7. Finalize the Prototype: Once you're satisfied with the prototype and have addressed
most of the usability issues, finalize the design.
Remember, the success of a book stall app depends on understanding the needs of your
target audience and delivering an intuitive and delightful user experience. User testing
and iteration are crucial steps to ensure the app meets users' expectations and provides
value to its users.

CCS370 - UI - UX Design Lab Manual

Uploaded by

Copyright:

Available Formats

CCS370 - UI - UX Design Lab Manual

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CCS370 - UI - UX Design Lab Manual

Uploaded by

Copyright:

Available Formats

Ex.No.

Navigation: Implement an intuitive and easy-to-use navigation system. For smaller

<meta name="viewport" content="width=device-width, initial-scale=1.0">

font-family: Arial, sans-serif;

/* Main content styles */

/* Main content area styles */

/* Media Queries for responsiveness */

@media screen and (max-width: 768px) {

@media screen and (max-width: 600px) {

<p>&copy; 2023 Societal App. All rights reserved.</p>

Exploring various UI Interaction Patterns

6. Pagination vs. continuous scrolling

10. Accordion Menu

Progressive disclosure is used very often in user onboarding as well as in complex

9. Need for closure

10. Input feedback

Developing an interface with proper UI Style Guides

Typography when creating a UI style guide

Additional UI Components That May Be Needed

Organize and Contextualize Design Instructions

In addition to must-have UI components, there are a number of practical features that

Spacing and Positioning Instructions

UI style guide spacing and positioning

Do’s and Don’ts

User interface design principles to include when creating a ui style guide

Live Elements and Code Snippets

More recently, a handful of cloud-based platforms have emerged, allowing teams to

UI pattern library-InVision: “All brand and UX components—including usage

UI Style Guides Should Be Easy to Use

Informative Use Scenarios

UI Style Guides Are a Valuable Resource and Powerful Design Tool

Contemporary design and development teams value efficiency and multidisciplinary

Creating a UI style guide, one can use code snippets

Step 1: Download and Install Pencil:

Visit the Pencil website (https://pencil.evolus.vn/) and download the appropriate

Step 2: Open Pencil and Create a New Document:

Step 3: Define User Flows and User Journey:

Step 4: Create Wireframes:

Step 5: Arrange Screens:

Step 6: Add Interactions:

Step 7: Add Annotations (Optional):

Exploring various open source collaborative interface Platform

There were several open-source collaborative interface platforms available. These

Whiteboard: Whiteboard is an open-source online collaborative whiteboard tool. While

Wireflow: Wireflow is an open-source tool that combines wireframes and flowcharts to

Hands on Design Thinking Process for a new product

Design thinking is a user-centered approach to problem-solving and product

Ideate: Brainstorm creative solutions without judgment. Encourage a diverse team to

Implement: Develop a high-fidelity version of the product based on the improved

To brainstorm features for a proposed product

Personalization: Offer personalized recommendations or content based on user behavior

Notifications: Provide users with notifications for important updates, activities, or

Messaging or Chat: Incorporate a messaging or chat feature to enable direct

Dashboard or Analytics: Offer users a dashboard or analytics section to track their

E-commerce Integration: If relevant, integrate an e-commerce platform to facilitate

Gamification: Implement gamification elements, such as badges, points, or leaderboards,

Defining the Look and Feel of the new Project

<p>© 2023 Societal App. All rights reserved.</p>