-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblog-uxuidesign.html
More file actions
290 lines (266 loc) · 18.3 KB
/
blog-uxuidesign.html
File metadata and controls
290 lines (266 loc) · 18.3 KB
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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>How To Explain UX and UI Design</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/facicon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<i class="bi bi-list mobile-nav-toggle d-xl-none"></i>
<!-- ======= Header ======= -->
<header id="header">
<div class="d-flex flex-column">
<div class="profile">
<img src="assets/img/profile-img.jpg" alt="Dharmveer Sharma Profile Image" class="img-fluid rounded-circle">
<h1 class="text-light"><a href="index.html">Dharmveer Sharma</a></h1>
<div class="social-links mt-3 text-center">
<a href="https://github.com/iamdharmveer" class="github" alt="Dharmveer Sharma Github" target="_blank"><i class="bx bxl-github"></i></a>
<a href="https://www.quora.com/profile/Dharmveer-Sharma-2" class="github" alt="Dharmveer Sharma Quora" target="_blank"><i class="bx bxl-quora"></i></a>
<a href="https://medium.com/@iamdharmveer" class="github" alt="Dharmveer Sharma Medium" target="_blank"><i class="bx bxl-medium"></i></a>
<a href="https://twitter.com/sdvsharma98" class="twitter" alt="Dharmveer Sharma Twitter" target="_blank"><i class="bx bxl-twitter"></i></a>
<a href="https://www.instagram.com/dharmveer.18/" class="instagram" alt="Dharmveer Sharma Instagram" target="_blank"><i class="bx bxl-instagram"></i></a>
<a href="https://www.linkedin.com/in/dharmveer-sharma-907010107/" class="linkedin" alt="Dharmveer Sharma Linkedin" target="_blank"><i class="bx bxl-linkedin"></i></a>
</div>
</div>
<nav id="navbar" class="nav-menu navbar">
<ul>
<li><a href="index.html" class="nav-link scrollto"><i class="bx bx-home"></i> <span>Home</span></a></li>
<li><a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About</span></a></li>
<li><a href="#education" class="nav-link scrollto"><i class="bx bx-briefcase"></i> <span>Work Experience</span></a></li>
<li><a href="#portfolio" class="nav-link scrollto"><i class="bx bx-book-content"></i> <span>Portfolio</span></a></li>
<li><a href="#blog" class="nav-link scrollto active"><i class="bx bx-edit"></i> <span>Blog</span></a></li>
<li><a href="#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<main id="main">
<!-- ======= Breadcrumbs ======= -->
<section id="breadcrumbs" class="breadcrumbs">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<h2>How To Explain UX and UI Design</h2>
<ol>
<li><a href="index.html">Home</a></li>
<li>Blog-Description</li>
</ol>
</div>
</div>
</section><!-- End Breadcrumbs -->
<!-- ======= Portfolio Details Section ======= -->
<section id="portfolio-details" class="portfolio-details blog">
<div class="container">
<div class="col-lg-12">
<div class="portfolio-details-slider swiper-container">
<div class="swiper-wrapper align-items-center">
<img src="assets/img/blog/uiux.jpg" alt="">
</div>
</div>
</div>
</div>
<br><br>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 resume-item">
<div class="portfolio-info">
<h6>May 12th,2021</h6>
<h1>How To Explain UX and UI Design ?</h1>
<h5>The metaphor of building a house</h5>
<p>As a designer, it’s important to think beyond apps and websites. Even if you’re working primarily in the digital space, remember that you’re literally surrounded by design.</p>
<div class="news_post_quote">
<h4 class="news_post_quote_text"><span>D</span>esign is everywhere. From the dress you’re wearing to the smartphone you’re holding, it’s design.</h4>
</div>
<p style="margin-top: 59px;">From architecture to fashion, right down to the simplest everyday objects like a hairbrush or toothbrush, virtually everything has been designed for human use. Design really is everywhere, so take inspiration from your surroundings.</p>
<h5>Imagine building a house :</h5>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-1.jpg" class="img-fluid" alt="">
</div>
<p>Would you start by choosing the paint for the bedroom walls ?</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-2.jpg" class="img-fluid" alt="">
</div>
<p><strong style="color:red">Probably not, </strong> You would start with asking questions:</p>
<h5>Who will be living in this house ?</h5>
<p>let's choose between 5 members family or corporate employee</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-3.jpg" class="img-fluid" alt="">
</div>
<p>Let's assume you choose a family of 5 members(2 kids, Couple and an old father) going to live in this house.</p>
<p>Now your next question will be</p>
<h5>What rooms does this house need ?</h5>
<p>As there are 2 kids, a couple and an old father going to live in this house. They Probably need a kids room,study room, Living room, guest room and 2 bedrooms for father and couple.</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-4.jpg" class="img-fluid" alt="">
</div>
<h5>How will people navigate through the house ?</h5>
<p>Now you know kids and an old father living in the house so considering their point of view doors, stairs will be chosen.</p>
<p>Like Sliding door,Double door, Single door</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-5.jpg" class="img-fluid" alt="">
</div>
<p>Stairs from inside or outside and Wheelchair Ramp</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-6.jpg" class="img-fluid" alt="">
</div>
<h5>How can we make the house safe ?</h5>
<p>Quality of materials used at the construction time, like bricks,cement. Structure testing for earthquakes and heavy rainfall or thunderstorms. Camera , Security Guard after you start living at home.</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-7.jpg" class="img-fluid" alt="">
</div>
<h5>How can we make the house pleasant to live in ?</h5>
<p>Garden, Pool, Proper Ventilation, Indoor outdoor lightning, art walls and more space after eliminating clutter etc.</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-8.jpg" class="img-fluid" alt="">
</div>
<h4>A UX designer ask similar questions when designing an app :</h4>
<h5>Who will be using this app ? </h5>
<p>A UX designer is going to ask you similar questions like “who will be using this app?” It’s a gaming app, fitness app, grocery app, ecom app, medical app, or a music app etc.</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-9.jpg" class="img-fluid" alt="">
</div>
<h5> How will people navigate through this app ?</h5>
<p>After you choose the service category, the question comes how users are going to navigate the app, like through login or try as a guest, menu bar, bottom navigation, looks similar to doors of a house how you are going from one room to another.</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-10.jpg" class="img-fluid" alt="">
</div>
<h5>Which features should this app have ?</h5>
<p>After choosing user flow, now comes features of the app. I am taking an example of a fitness app, for a fitness app workout plan must be included.</p>
<div class="col-lg-6 center-blog">
<img style="margin-top: 19px;" src="assets/img/blog/uiuxdesign-11.jpg" class="img-fluid" alt="">
</div>
<h5>How can we make this app accessible, useful and enjoyable ?</h5>
<p>Making your app accessible means you must consider the range of challenges a customer may face, ensuring that as many people as possible can use it. This includes those with impaired vision, motor difficulties, cognitive or learning difficulties, as well as deafness or impaired hearing.</p>
<h5>5 steps to ensuring your app is accessible to all:</h5>
<p>1. Create a simple, clear layout<br>
2. Design a consistent navigation<br>
3. Consider your text formatting<br>
4. Make audio and video accessible<br>
5. Give careful consideration to colour
</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-12.png" class="img-fluid" alt="">
</div>
<h5>After we know the who, what and how of the house let's talk style :</h5>
<p>A Mediterranean villa or A Victorian townhouse?</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-13.jpg" class="img-fluid" alt="">
</div>
<h5>How will the interior look like? Modern or Art Deco?</h5>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-14.jpg" class="img-fluid" alt="">
</div>
<p>Style is the realm of the UI Designer</p>
<h5>How can we maintain brand values into a design ?</h5>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-15.jpg" class="img-fluid" alt="">
</div>
<p>Brand value depends on so many factors but design is one of those factors. Clear on vision and mission - your design should be appealing to brand values of your client before you start designing.</p>
<p>Let‘s say one of the brand values is “lightness”. So consider using bright colors, light fonts, low complex forms and maybe some subtle shadows.</p>
<h5>How should this button looks like ?</h5>
<p>Buttons are an essential element of interaction design. They have a primary role in the conversation between a user and the system.</p>
<strong>1. Make buttons look like buttons</strong><p> When it comes to interacting with the user interface, users need to know instantly what is ‘clickable’ and what’s not. Every item in a design requires effort by the user to decode. Generally, the more time needed for users to decode the UI the less usable it becomes for them.</p>
<strong>2. Don’t forget about the whitespace</strong><p>Not only the visual properties of the button itself are important. The amount of whitespace near the button makes it easier (or harder) for users to understand whether it’s an interactive element or not.</p>
<strong>3. Put buttons where users expect to find them</strong><p>Buttons should be located in places where users can easily find them or expect to see. Don’t make users hunt for buttons. If users can’t find a button, they won’t know that it exists.</p>
<strong>4. Label buttons with what they do</strong><p>Buttons with generic or misleading labels can be a huge source of frustrations for your users. Write button labels that clearly explain what each button does. Ideally, the button’s label should clearly describe its action.</p>
<strong>5. Properly size your buttons</strong><p>Button size should reflect the priority of this element on the screen. Large button means more important action.</p>
<strong>6. Mind the order</strong><p>The order for buttons should reflect the nature of a conversation between the user and the system. Ask yourself, what order users expect to have on this screen and design accordingly.</p>
<p>Use familiar designs for your buttons</p>
<p>Here are a few examples of buttons that are familiar to most users:</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-16.jpg" class="img-fluid" alt="">
</div>
<h5>How can colors, brightness and contrast make a design more accessible ?</h5>
<p>
We often use color as a tool to convey status or meaning. A red background or border might denote an error. Green text may tell your user that an action was successful. Be careful not to rely solely on color to convey these messages, however, as those with color blindness may not see a distinction to understand your meaning.
<p>Instead combine your use of color with shapes, icons, or textures to double down on your message. For instance, it’s common to use a colored circle as a quick status indicator in applications: a green circle might mean an item was approved or a service is up, and a red circle might mean the item was rejected or the service is down. To color blind users, there is little to no difference between a red and green circle. But a green circle and a red square? That’s a lot more obvious.
</p>
<div class="col-lg-6 center-blog">
<img src="assets/img/blog/uiuxdesign-17.jpg" class="img-fluid" alt="">
</div>
<h5>Final Thoughts</h5>
<p>Design isn’t just about aesthetics. It’s the art of making things usable — be it an app, a gadget or a simple everyday object like a chair.</p>
<p>UX design is nothing without human interaction, and if a product isn’t fully able to serve its purpose, the design process is incomplete.</p>
<p>This is why user research and usability testing are so crucial, and as a UX designer, you need to be prepared to iterate and reiterate your designs over and over again.</p>
</div>
</div>
<br><br>
<div class="col-lg-4 col-md-6 center">
<div class="portfolio-info">
<div class="section-title">
<h2>Latest Post</h2>
</div>
<div class="portfolio-wrap">
<img src="assets/img/blog/uxwriting.jpg" class="img-fluid" alt="">
<h5><a href="blog-uxwriting.html" title="More Details">UX Writing why is it important</a></h5>
<h6>September 06th, 2021</h6>
</div>
<div class="portfolio-wrap">
<img src="assets/img/blog/freekeyword.jpg" class="img-fluid" alt="">
<h5><a href="blog-freekeyword.html" title="More Details">Free keyword tools to get your website on top</a></h5>
<h6>June 07th, 2021</h6>
</div>
<div class="portfolio-wrap">
<img src="assets/img/blog/5tips.jpg" class="img-fluid" alt="">
<h5><a href="blog-5tips.html" title="More Details">5 Simple Tips for the search Bar</a></h5>
<h6>April 09th, 2021</h6>
</div>
<div class="portfolio-wrap">
<img src="assets/img/blog/6tips.jpg" class="img-fluid" alt="">
<h5><a href="blog-6tips.html" title="More Details">6 Tips On How To Use Typography</a></h5>
<h6>January 18th, 2021</h6>
</div>
<div class="portfolio-wrap">
<img src="assets/img/blog/clientking.jpg" class="img-fluid" alt="">
<h5><a href="blog-clientking.html" title="More Details">Client is not King</a></h5>
<h6>December 10th, 2020</h6>
</div>
<!-- End testimonial item -->
</div>
</div>
</div>
</div>
</section><!-- End Portfolio Details Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<div class="copyright">
© Copyright <strong><span>Dharmveer Sharma</span></strong>
</div>
<div class="credits">
Designed by <a href="https://www.sproutingwingsdigitalmarketing.com/">Sprouting Wings</a>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/purecounter/purecounter.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/typed.js/typed.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>