1.
DEVELOPING A REPONSIVE LAYOUT FOR AN SOCIETAL
APPLICATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Societal App</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Societal App</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Notifications</a></li>
</ul>
</nav>
</header>
<main>
<section class="content">
<h2>Latest Posts</h2>
<div class="post">
<h3>Post Title</h3>
<p>Content of the post...</p>
</div>
<!-- More posts go here -->
</section>
<aside class="sidebar">
<h2>Trending Topics</h2>
<ul>
<li>#topic1</li>
<li>#topic2</li>
<li>#topic3</li>
<!-- More trending topics go here -->
</ul>
</aside>
</main>
<footer>
<p>© 2024 Societal App. All rights reserved.</p>
</footer>
</body>
</html>
CSS ([Link]):
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.content {
flex: 70%;
}
.sidebar {
flex: 30%;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
/* Responsive Styles */
@media screen and (max-width: 768px) {
main {
flex-direction: column;
}
.sidebar {
order: -1; /* Move sidebar to the top on small screens */
margin-top: 20px;
}
}
Output:
[Link] VARIOUS UI PATTERNS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewp`ort" content="width=device-width, initial-scale=1.0">
<title>UI Interaction Patterns</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Explore UI Interaction Patterns</h1>
<button id="btnToggleModal">Open Modal</button>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>This is a modal. Click the × button to close.</p>
</div>
</div>
<input type="text" placeholder="Enter text">
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</div>
<script src="[Link]"></script>
</body>
</html>
CSS ([Link]):
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
input[type="text"], select {
margin: 10px 0;
padding: 8px;
width: 100%;
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
avaScript ([Link]):
[Link]('DOMContentLoaded', function() {
var modal = [Link]('modal');
var btnToggleModal = [Link]('btnToggleModal');
var spanClose = [Link]('close')[0];
[Link]('click', function() {
[Link] = 'block';
});
[Link]('click', function() {
[Link] = 'none';
});
[Link]('click', function(event) {
if ([Link] == modal) {
[Link] = 'none';
});
});
Output:
[Link] an interface with proper UI style Guides
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Style Guide Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>My App</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section 1</h2>
<p>This is the content of section 1.</p>
</section>
<section>
<h2>Section 2</h2>
<p>This is the content of section 2.</p>
</section>
</main>
<footer>
<p>© 2024 My App. All rights reserved.</p>
</footer>
<script src="[Link]"></script>
</body>
</html>
CSS ([Link]):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
OUTPUT:
[Link] Wireflow diagram for application using open source software
5. Exploring various open source collaborative interface Platform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Open Source Collaborative Interface Platforms</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 6px;
}
li:hover {
background-color: #eaeaea;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Explore Open Source Collaborative Interface Platforms</h1>
<ul id="platformList">
<!-- Platforms will be added dynamically using JavaScript -->
</ul>
</div>
<script>
// Example data of open source collaborative interface platforms
const platforms = [
{ name: "GitHub", url: "[Link] },
{ name: "GitLab", url: "[Link] },
{ name: "Bitbucket", url: "[Link] },
// Add more platforms as needed
];
// Function to dynamically populate the platform list
function populatePlatformList() {
const platformList = [Link]('platformList');
[Link] = ''; // Clear existing list items
[Link](platform => {
const listItem = [Link]('li');
[Link] = [Link];
[Link]('click', () => [Link]([Link],
'_blank'));
[Link](listItem);
});
}
// Call the function to populate the platform list on page load
populatePlatformList();
</script>
</body>
</html>
[Link] on Design Thinking Process for a new product
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Design Thinking Process for a New Product</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
}
.step {
margin-bottom: 20px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 6px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Design Thinking Process for a New Product</h1>
<div class="step" id="step1">
<h2>Step 1: Empathize</h2>
<p>Understand the user's needs, motivations, and pain points.</p>
<button onclick="nextStep()">Next</button>
</div>
<div class="step hidden" id="step2">
<h2>Step 2: Define</h2>
<p>Clearly define the problem based on user insights.</p>
<button onclick="nextStep()">Next</button>
</div>
<div class="step hidden" id="step3">
<h2>Step 3: Ideate</h2>
<p>Generate ideas to solve the defined problem.</p>
<button onclick="nextStep()">Next</button>
</div>
<div class="step hidden" id="step4">
<h2>Step 4: Prototype</h2>
<p>Create a low-fidelity prototype of the solution.</p>
<button onclick="nextStep()">Next</button>
</div>
<div class="step hidden" id="step5">
<h2>Step 5: Test</h2>
<p>Test the prototype with users and gather feedback.</p>
<button onclick="restart()">Restart</button>
</div>
</div>
<script>
let currentStep = 1;
function nextStep() {
[Link](`step$
{currentStep}`).[Link]('hidden');
currentStep++;
if (currentStep <= 5) {
[Link](`step$
{currentStep}`).[Link]('hidden');
}
}
function restart() {
[Link](`step$
{currentStep}`).[Link]('hidden');
currentStep = 1;
[Link](`step$
{currentStep}`).[Link]('hidden');
}
</script>
</body>
</html>
[Link] feature for proposed product
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Brainstorming Feature for Proposed Product</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
}
form {
text-align: center;
margin-bottom: 20px;
}
input[type="text"] {
width: 70%;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
text-align: left;
}
li {
padding: 10px;
background-color: #f9f9f9;
margin-bottom: 10px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>Brainstorming Feature for Proposed Product</h1>
<form id="ideaForm">
<input type="text" id="ideaInput" placeholder="Enter your
idea">
<button type="submit">Submit Idea</button>
</form>
<ul id="ideaList">
<!-- Ideas will be added dynamically using JavaScript -->
</ul>
</div>
<script>
// Function to add idea to the list
function addIdea(event) {
[Link](); // Prevent form submission
const ideaInput = [Link]('ideaInput');
const idea = [Link]();
if (idea !== '') {
const ideaList = [Link]('ideaList');
const listItem = [Link]('li');
[Link] = idea;
[Link](listItem);
[Link] = ''; // Clear input field
}
}
// Add event listener to form submission
[Link]('ideaForm').addEventListener('submit',
addIdea);
</script>
</body>
</html>
8. Defining the Look and Feel of the new Project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Define Look and Feel</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
.option {
margin-bottom: 20px;
}
.option label {
font-weight: bold;
}
.option input[type="color"] {
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
cursor: pointer;
}
.option select {
padding: 5px;
border-radius: 4px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Define Look and Feel</h1>
<div class="option">
<label for="primaryColor">Primary Color:</label>
<input type="color" id="primaryColor" value="#007bff">
</div>
<div class="option">
<label for="secondaryColor">Secondary Color:</label>
<input type="color" id="secondaryColor" value="#6c757d">
</div>
<div class="option">
<label for="fontFamily">Font Family:</label>
<select id="fontFamily">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Helvetica">Helvetica</option>
<!-- Add more font options as needed -->
</select>
</div>
<button onclick="applyChanges()">Apply Changes</button>
</div>
<script>
function applyChanges() {
const primaryColor =
[Link]('primaryColor').value;
const secondaryColor =
[Link]('secondaryColor').value;
const fontFamily =
[Link]('fontFamily').value;
[Link]('--primary-color',
primaryColor);
[Link]('--secondary-color',
secondaryColor);
[Link]('--font-family', fontFamily);
}
</script>
</body>
</html>
[Link] a Sample Pattern Library for that product (Mood board, Fonts, Colors based on UI
principles)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Pattern Library</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
h1 {
text-align: center;
.section {
margin-bottom: 30px;
.section h2 {
margin-bottom: 10px;
.mood-board {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.mood-board img {
width: 30%;
margin-bottom: 10px;
border-radius: 8px;
.fonts {
font-family: 'Open Sans', sans-serif;
margin-top: 20px;
.colors {
margin-top: 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.color-box {
width: 30%;
height: 100px;
margin-bottom: 10px;
border-radius: 8px;
</style>
</head>
<body>
<div class="container">
<h1>Sample Pattern Library</h1>
<div class="section">
<h2>Mood Board</h2>
<div class="mood-board">
<img src="[Link] alt="Mood Image 1">
<img src="[Link] alt="Mood Image 2">
<img src="[Link] alt="Mood Image 3">
</div>
</div>
<div class="section">
<h2>Fonts</h2>
<div class="fonts">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in mauris euismod,
suscipit turpis et, vestibulum erat.</p>
</div>
</div>
<div class="section">
<h2>Colors</h2>
<div class="colors">
<div class="color-box" style="background-color: #007bff;"></div>
<div class="color-box" style="background-color: #6c757d;"></div>
<div class="color-box" style="background-color: #28a745;"></div>
<div class="color-box" style="background-color: #17a2b8;"></div>
<div class="color-box" style="background-color: #ffc107;"></div>
<div class="color-box" style="background-color: #dc3545;"></div>
</div>
</div>
</div>
</body>
</html>
10. Identify a customer problem to solve
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Identify Customer Problem</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
form {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Identify Customer Problem</h1>
<form id="problemForm" onsubmit="submitProblem(event)">
<label for="problemTitle">Problem Title:</label>
<input type="text" id="problemTitle" required>
<label for="problemDescription">Problem Description:</label>
<textarea id="problemDescription" rows="4" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
<script>
function submitProblem(event) {
[Link]();
const problemTitle = [Link]('problemTitle').value;
const problemDescription =
[Link]('problemDescription').value;
// Here you can perform further actions like sending the data to a server, etc.
[Link]("Problem Title:", problemTitle);
[Link]("Problem Description:", problemDescription);
// Optionally, you can display a success message or redirect the user to another
page.
}
</script>
</body>
</html>
[Link] end-to-end user research - User research, creating personas,
Ideation process (User stories, Scenarios), Flow diagrams, Flow Mapping
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>End-to-End User Research</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
}
form {
margin-top: 20px;
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
}
input[type="text"],
textarea {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
align-self: flex-end;
}
button:hover {
background-color: #0056b3;
}
.persona {
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
}
.persona h2 {
margin-top: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>End-to-End User Research</h1>
<!-- User Research Form -->
<h2>User Research</h2>
<form id="userResearchForm">
<label for="researchTopic">Research Topic:</label>
<input type="text" id="researchTopic" required>
<label for="researchDetails">Research Details:</label>
<textarea id="researchDetails" rows="4"
required></textarea>
<button type="submit">Submit</button>
</form>
<!-- Persona Creation -->
<div class="persona" id="personaSection" style="display:
none;">
<h2>Persona</h2>
<div id="personaDetails">
<!-- Persona details will be displayed here -->
</div>
</div>
<!-- Ideation Process -->
<h2>Ideation Process</h2>
<!-- User Stories, Scenarios, Flow Diagrams, Flow Mapping
can be added here -->
</div>
<script>
[Link]('userResearchForm').addEventList
ener('submit', function(event) {
[Link]();
const researchTopic =
[Link]('researchTopic').value;
const researchDetails =
[Link]('researchDetails').value;
// Process the research data (e.g., store in database, perform
analysis)
[Link]("Research Topic:", researchTopic);
[Link]("Research Details:", researchDetails);
// Display Persona section
[Link]('personaSection').[Link] =
'block';
// Generate and display Persona (this is just an example,
actual persona creation may be more complex)
const personaDetails = `
<p><strong>Name:</strong> John Doe</p>
<p><strong>Age:</strong> 35</p>
<p><strong>Occupation:</strong> Software Developer</p>
<!-- Add more persona details as needed -->
`;
[Link]('personaDetails').innerHTML =
personaDetails;
});
</script>
</body>
</html>