-
Notifications
You must be signed in to change notification settings - Fork 0
/
ux.html
235 lines (196 loc) · 11.8 KB
/
ux.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
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lesly Paraguay</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
h1,h2,h3,h4,h5,h6 {font-family: "Oswald"}
body {font-family: "Open Sans"}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-7927110595823834",
enable_page_level_ads: true
});
</script>
</head>
<body class="w3-light-grey">
<!-- Navigation bar with social media icons -->
<div class="w3-bar w3-write w3-hide-small">
<a href="index.html" class="w3-bar-item w3-button"> Lesly Paraguay</a>
<a href="https://www.behance.net/LeslyParaguay" target="_blank" class="w3-bar-item w3-button"><i class="fa fa-behance"></i></a>
<a href="https://www.linkedin.com/in/lesly-paraguay/" target="_blank" class="w3-bar-item w3-button"><i class="fa fa-linkedin"></i></a>
<!-- Float links to the right. Hide them on small screens -->
<div class="w3-right w3-hide-small">
<a href="index.html" class="w3-bar-item w3-button">Inicio</a>
<a href="ikigai.html" class="w3-bar-item w3-button">ikigai</a>
<a href="contact.html" class="w3-bar-item w3-button">Contactos</a>
</div>
</div>
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:960px">
<br>
<a href="index.html"><button class="w3-button w3-margin-bottom" style="background:linear-gradient(135deg, #42e695 0%,#3bb2b8 100%);color: #fff;">Volver</button></a>
<!-- Header -->
<header class="w3-container w3-center w3-padding-35">
<h1 class="w3-xxxlarge"><b>Experiencia del usuario</b></h1>
<h6><span class="w3-tag"></span></h6>
</header>
<!-- Grid -->
<div class="w3-row w3-padding ">
<!-- Blog entries -->
<div class="w3-col l8 s12">
<!-- Blog entry -->
<div class="w3-container w3-white w3-margin w3-padding-large">
<div class="w3-center">
<h3><span style="color: #8c68b9;">Una introducción al diseño de la experiencia del usuario</span></h3>
<h5><span class="w3-opacity">Jeff Broderick</span></h5>
</div>
<div class="w3-white w3-margin">
<div class="w3-container w3-xlarge w3-padding w3-center">
<i class="fa fa-facebook-official w3-hover-opacity"></i>
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-snapchat w3-hover-opacity"></i>
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
</div>
</div>
<div class="w3-justify">
<img src="http://leslywebd.esy.es/images/ux.png" alt="Girl Hat" style="width:100%" class="w3-padding-16">
<p><strong>Le tomó!</strong> a nuestra industria varios años entender completamente cuán importante es la experiencia del usuario (UX) para todo lo que construimos. Ahora que podemos medir y confirmar la relación entre un buen UX y sitios web exitosos, las habilidades de UX tienen una gran demanda: PayScale muestra un salario medio de aproximadamente $ 41k para diseñadores web, $ 50k para desarrolladores web y $ 77k para diseñadores de experiencia de usuario.
</p>
<p>En esencia, el diseño de UX se trata de abordar de manera efectiva las necesidades y circunstancias de sus usuarios, para producir una interfaz que sea cómoda e incluso alegre de usar. Como si eso no fuera suficiente, las necesidades de los usuarios siempre están cambiando, a medida que las personas evolucionan continuamente sus expectativas y tecnologías.
<br>
Usaremos esta lección para ver los principios subyacentes eternos detrás de una gran experiencia de usuario.</p>
<br>
<div class="w3-center">
<h3 style="color: #8c68b9;">Review: El diseño de las cosas cotidianas</h3>
</div>
<div class="w3-justify">
<!--<img src="images/man_hat.jpg" alt="Men in Hats" style="width:100%" class="w3-padding-16">-->
<p><strong>Donald Norman!</strong> a menudo se llama el inventor de la experiencia del usuario, y esta revisión cubre muchos puntos importantes de su libro seminal. Lea el artículo y luego intente encontrar ejemplos en las próximas 24 horas donde los diseñadores de productos hayan elegido opciones fáciles y lentas sobre mejores experiencias de usuario (sugerencia: observe los electrodomésticos, controles remotos, tableros de automóviles, etc.).</p>
<p class="w3-clear"></p>
</div>
<div class="w3-center">
<h3 style="color: #8c68b9;">Primeros principios de diseño de interacción</h3>
</div>
<div class="w3-justify">
<!--<img src="images/man_hat.jpg" alt="Men in Hats" style="width:100%" class="w3-padding-16">-->
<p><strong>Lea o vuelva!</strong> a familiarizarse con estos fundamentos de la psicología de la computadora humana, luego considere cómo puede aplicar los <a href="https://en.wikipedia.org/wiki/Gestalt_psychology#Gestalt_laws_of_grouping">principios de Gestalt</a> en su diseño para cumplir con la consistencia, la capacidad de aprendizaje y otras expectativas del usuario.</p>
<p class="w3-clear"></p>
</div>
<div class="w3-center">
<h3 style="color: #8c68b9;">Investigar la experiencia del usuario</h3>
</div>
<div class="w3-justify">
<!--<img src="images/man_hat.jpg" alt="Men in Hats" style="width:100%" class="w3-padding-16">-->
<p><strong>Cuanto más!</strong> sepa sobre sus usuarios, mejor podrá diseñar según sus necesidades y circunstancias. Lea la lista de métodos de investigación de los usuarios y elija una o más que mejor se adapte a su etapa de proyecto.</p>
<p class="w3-clear"></p>
</div>
<div class="w3-center">
<h3 style="color: #8c68b9;">Dibujando la experiencia del usuario</h3>
</div>
<div class="w3-justify">
<!--<img src="images/man_hat.jpg" alt="Men in Hats" style="width:100%" class="w3-padding-16">-->
<p><strong>Explore!</strong> este directorio de ejemplos de wireframe y prototipos para comprender cómo los profesionales de la experiencia del usuario combinan la teoría del diseño y el conocimiento del usuario en ideas visuales (wireframes o maquetas) antes de aplicar cualquier estilo o marca. Compare con <a href="http://www.wireframeshowcase.com/">Wireframe Showcase</a> que demuestra cómo los wireframes se transforman en diseños finales.</p>
<p class="w3-clear"></p>
</div>
<div class="w3-center">
<h3 style="color: #8c68b9;">Medir la experiencia del usuario</h3>
</div>
<div class="w3-justify">
<!--<img src="images/man_hat.jpg" alt="Men in Hats" style="width:100%" class="w3-padding-16">-->
<p><strong>No voy!</strong> a preguntarle sobre la ecuación de este artículo, pero los Estudios de casos brindan ejemplos útiles de lo que puede medir para medir la efectividad de UX en una interfaz. Considere cómo podría usar herramientas como Keen.io y Crazy Egg para cuantificar, analizar y mejorar los elementos de la experiencia del usuario en su proyecto.</p>
<p class="w3-clear"></p>
</div>
</div>
</div>
<hr>
<!-- END BLOG ENTRIES -->
</div>
<!-- About/Information menu -->
<div class="w3-col l4">
<div class="w3-white w3-margin">
<a href=""><img src="http://leslywebd.esy.es/images/descargaux.jpg" alt="Jane" style="width:100%"> </a>
<div class="w3-container w3-white">
<ul class="w3-ul">
<li class="w3-white w3-padding">
<button class="w3-button w3-red w3-padding-large" onclick="document.getElementById('download').style.display='block'"><i class="fa fa-download"></i> Descargar</button>
</li>
</ul>
</div>
</div>
<!-- Modal -->
<div id="download" class="w3-modal w3-animate-opacity">
<div class="w3-modal-content" style="padding:32px">
<div class="w3-container w3-white">
<i onclick="document.getElementById('download').style.display='none'" class="fa fa-remove w3-xlarge w3-button w3-transparent w3-right w3-xlarge"></i>
<h2 class="w3-wide">Descargar</h2>
<p>Descargar el material de Diseño de producto</p>
<p><input class="w3-input w3-border" type="text" placeholder="Enter e-mail"></p>
<button type="button" class="w3-button w3-block w3-padding-large w3-red w3-margin-bottom" onclick="document.getElementById('download').style.display='none'">Descargar</button>
</div>
</div>
</div>
<!-- Subscribe -->
<div class="w3-white w3-margin">
<div class="w3-container w3-padding w3-black">
<h4>Suscribete</h4>
</div>
<div class="w3-container w3-white">
<p>Ingrese su dirección de correo electrónico a continuación y reciba notificaciones sobre las últimas publicaciones en el blog.</p>
<p><input class="w3-input w3-border" type="text" placeholder="Enter e-mail" style="width:100%"></p>
<p><button type="button" onclick="document.getElementById('subscribe').style.display='block'" class="w3-button w3-block w3-red">Subscribe</button></p>
</div>
</div>
<!-- END About/Intro Menu -->
</div>
<!-- END GRID -->
</div>
<!-- END w3-content -->
</div>
<!-- Subscribe Modal -->
<div id="subscribe" class="w3-modal w3-animate-opacity">
<div class="w3-modal-content" style="padding:32px">
<div class="w3-container w3-white">
<i onclick="document.getElementById('subscribe').style.display='none'" class="fa fa-remove w3-transparent w3-button w3-xlarge w3-right"></i>
<h2 class="w3-wide">SUBSCRIBE</h2>
<p>Join my mailing list to receive updates on the latest blog posts and other things.</p>
<p><input class="w3-input w3-border" type="text" placeholder="Enter e-mail"></p>
<button type="button" class="w3-button w3-block w3-padding-large w3-red w3-margin-bottom" onclick="document.getElementById('subscribe').style.display='none'">Subscribe</button>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-light-grey w3-center">
<a href="index.html"><button class="w3-button w3-black w3-disabled w3-padding-large w3-margin-bottom">Anterior</button></a>
<a href="front-end.html"><button class="w3-button w3-black w3-padding-large w3-margin-bottom" style="background:linear-gradient(135deg, #42e695 0%,#3bb2b8 100%);">Siguiente »</button></a>
<p>@copyright 2017 <a href="https://www.behance.net/LeslyParaguay" title="W3.CSS" target="_blank" class="w3-hover-text-green">Leslyparaguay.com</a></p>
</footer>
<script>
// Toggle between hiding and showing blog replies/comments
document.getElementById("myBtn").click();
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
function likeFunction(x) {
x.style.fontWeight = "bold";
x.innerHTML = "✓ Liked";
}
</script>
</body>
</html>