-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathethos.html
227 lines (189 loc) · 8.83 KB
/
ethos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Split Layout Website with Bootstrap</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="ux.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Bebas+Neue&family=Calistoga&family=DotGothic16&family=Instrument+Serif:ital@0;1&family=Maiden+Orange&family=Pixelify+Sans:[email protected]&family=Staatliches&display=swap"
rel="stylesheet">
<link rel="icon" href="logo.png" type="png">
<meta name="theme-color" content="#ffc800">
<link href="https://fonts.googleapis.com/css2?family=Onest:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link
href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<style>
.lefte {
color: #000000;
padding-top: 5%;
text-align: justify;
font-family: Onest;
font-size: 30px;
font-weight: 500;
line-height: 100%;
/* text-transform: uppercase; */
position: relative;
}
#left-side {
background-color: #FFC800;
color: #000000;
border-left: solid 30px black;
padding: 20px;
border-right: solid 2px black;
}
h1 {
color: #000;
font-family: vcr;
font-size: 80px;
/* font-weight: 800; */
/* text-align: justify; */
line-height: 75%;
letter-spacing: 0px;
/* 64px */
padding-top: 5%;
}
.image-strip img {
position: fixed;
top: 0%;
height: 3px;
width: 100%;
}
img {
transition: transform 0.9s ease-in-out;
}
img:hover {
transform: translateY(-6px) rotate(-0.7deg);
border-radius: 5px;
transition: 1s;
}
#uxarti {
margin-top: 40px;
margin-bottom: 100px;
}
#Perarti {
margin-top: 10%;
}
#portfolio {
display: block;
position: relative;
overflow: hidden;
/* max-width: 60%; */
margin: auto auto 1rem;
padding: 7% 5% 2% 5%;
}
.portfolio-item img {
border-radius: 25px;
}
p {
font-size: 15px;
width: 100%;
padding: 0% 5%;
}
/* .custom-container {
width: 100%;
max-width: 90%;
margin: 0 auto;
} */
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Left Side (Fixed) -->
<div id="left-side" class="col-md-3 position-fixed vh-100" style="background-color: #FFC800;">
<h1 style="width: 100%; padding-top: 0; text-transform: uppercase;
">Human Driven Design
<br>
-
<br>
ETHOS
</h1>
<a href="https://medium.com/@RaghavPrasannaUX" target="_blank" class="d-t d-flex text-center"
style="font-family: vcr; right: 0%; align-items: end; position: relative; margin-top: 10%; font-size: 20px; color: black; z-index: 200;">UX
related Medium* /</a>
<a href="https://medium.com/@raghavprasanna2000" target="_blank" class="d-t d-flex text-center"
style="font-family: vcr; right: 0%; align-items: end; position: relative; margin-top: -5px; font-size: 20px; color: black; z-index: 200;">Personal
Medium blogs* /</a>
</div>
</div>
<!-- Right Side (Scrollable) -->
<div class="col-md-9 offset-md-3 right-side">
<nav class="navbar navtext">
<div class="custom-container">
<div class="row">
<div class="col-1" style="text-align: start; margin-top: 20px">
<a href="index.html">
<img src="images/DEDROX.DSGN/dedroxLogo.svg"
style="width: 30px; height: auto; z-index: 100;">
</a>
</div>
<div class="col-9" style="margin-top: 18px;">
<a href="freefonts.html" class="s-t">Free Font* /</a>
<a href="articlepage.html" class="w-t">Articles* /</a>
<a href="gamedes.html" class="d-t">3D & game-design* /</a>
</div>
</div>
</div>
</nav>
<div class="blurtop"></div>
<!-- Main Content -->
<main class="p-5 mt-5">
<p class="lefte" style="width: 80%;">
<span style=" font-size: 60px; font-weight: 900; line-height: 2; color: #000;">Human Driven
Design</span><br>
Ill say it again...
Humaannn-Drivenn-Designss! for Humansss!<br><br>
In this 21st century, In the midst of all the digital noise, it's easy to forget that at the heart
of it all, we're designing and strategizing for our fellow humans. Sometimes, we need to cut through
the clutter and remind ourselves of that simple truth.<br><br>
Human-Driven Design is an approach that gives designers the freedom and time to think beyond
personas. It's about considering everyone, from your neighbors to your grandma, when starting a
project, to truly grasp the broader impact of your work.<br><br>
Change Your Game, Change The Game<br><br>
<hr style="border: solid 1px #000;">
</p>
<p class="lefte" style="width: 80%;">
Human-Driven Design is the Remedy to robotic, impersonal digital experiences. It’s an approach that
allows designers to step outside the typical personas and wireframes and think about the bigger
picture. It encourages us to consider not just the purpose of the design, but also the feel of
it.<br><br>
It’s about asking the hard questions:
- Does the product just have to be serve the purpose?
- If so, how are we differentiating with the competitors?
- Is purpose also enough for the users to be a contstant users?
Many companies and client forget the base human to product connection. That feel of using the
product. Nowadays everything is just a blank slate of information and cookies. (Without any joy or
sweetness)<br><br>
Human-Driven Design is not just about making things “have a base purpose” or “convert better”—it’s
about creating meaningful, deep to the core experiences that enhance people’s lives.<br><br>
Human-Driven Design is an approach that gives me as a product designer the freedom and time to think
beyond personas. This is where Human-Driven Design comes in. It’s more than just a process; it’s
a philosophy—a return to designing with empathy and purpose. It’s about understanding that behind
every screen is a person with a life, emotions, and a story, and those stories should guide our
design decisions.<br><br>
<br><br>
</p>
</main>
</div>
</div>
<div class="blur-box" style="
height: 80px;
opacity: 90%;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); user-select: none; pointer-events: none;
background: rgba(225, 225, 225, 0.05);
mask-image: linear-gradient(rgb(255 255 255 / 0%) 0%, rgb(223 223 223) 100%, rgb(255 255 255 / 0%) 50%);">
</div>
</body>
</html>