-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprocess.html
More file actions
291 lines (272 loc) · 15.5 KB
/
Copy pathprocess.html
File metadata and controls
291 lines (272 loc) · 15.5 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
291
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<title>Maxim Nyanin - process</title>
<!-- Google Fonts -->
<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=Noticia+Text&family=Merriweather:wght@300;400&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom Styles and Overrides -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body class="bg-light d-flex flex-column h-100" id="process">
<!-- Bootstrap Nav Bar here -->
<!-- https://getbootstrap.com/docs/5.0/components/navbar/ -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a id="wordmark" class="navbar-brand" href="index.html">Maxim Nyanin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-2">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="about.html">About Me</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link active" aria-current="page" href="process.html">Process</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="contacts.html">Contacts</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Bootstrap Jumbotron here -->
<!-- https://getbootstrap.com/docs/5.0/examples/jumbotron/ -->
<div id="hero" class="p-5 bg-dark text-light">
<div class="container py-5">
<h1 class="display-5">Process</h1>
<p class="col-md-8 fs-4">The creative process behind creating this website including inspirations,
references, and accessibility considerations.</p>
<form>
<button type="submit" class="btn btn-secondary btn-lg" type="button">
<a href="docs/process-documentation.pdf" target="_blank">download process document</a>
</button>
</form>
</div>
</div>
<!-- Design Approach paragraph section here -->
<section class="paragraph bg-light">
<div class="container my-5">
<h2>Design Approach</h2>
<div class="inner-text">
<p>There are many things that need to be considered when it comes to creating a website or an
application. Although
the funcationality is often considered to be the most important aspect of a digital product, more
and more
we see companies emphasizing an significance of the intuitive, simple, and elegant design. This is
especially important in industries such as medicine or transportation where poor human-computer
connection can put lives in danger. Nevertheless, design plays an important role for any brand or
company trying to be successful and stand out among the competition. Hence, it is critical to plan
ahead and develop a step-by-step approach towards designing a product or an application to ensure it
is created with user experience and accessibility in mind. Below are the key steps of my design
process, which I followed to build this website.
</p>
</div>
</div>
</section>
<!-- Information Architecture card -->
<!-- https://getbootstrap.com/docs/5.0/components/card/#horizontal -->
<section class="container">
<div class="card mb-5">
<div class="row g-0">
<div class="col-md-4">
<img src="img/site-map.jpg" class="img-fluid rounded-start rounded" alt="Pixel Pirate">
</div>
<div class="col-md-8">
<div class="card-body ps-4">
<h4 class="card-title">Information Architecture</h4>
<div class="text-container py-2">
<p class="card-text">Before starting to work on the user interface and the website
aesthetic, it is essential to plan out the content hierarchy or information
architecture. At this point, the designer must think of how the user might navigate
their website
and how this journey can be facilitated through links and page structures. Consistency
is one thing that needs to be considered from the very beginning. Consistent navigation
bars and page elements allow the user to learn the website hierarchy much quicker
rather than when every page looks different. The same idea can be applied to other
fonts, paddings, and other elements. This website, for example, includes
consistent navigation bars across all 5 pages and elements such as Bootstrap cards and
heroes
that all have similar design and aesthetics.</p>
<p>Dan Brown identifies 8 principles of information architecture that help consider
potential user experience issues when designing a website. The principle of exemplars,
for instance, states that a webpage must describe the contents of subpages by
providing examples or snippets of that contents. This website does so by showing short
descriptions of the projects when clicked on them.</p>
<p>When it comes to planning out the website structure, a site map helps visualize relations
between different pages as well as consider different types of navigation that can be
included. You can find this website's site map in the process document.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Wireframing card -->
<!-- https://getbootstrap.com/docs/5.0/components/card/#horizontal -->
<section class="container">
<div class="card mb-5">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body ps-4 py-5 my-5">
<h4 class="card-title">Wireframing</h4>
<div class="text-container py-2">
<p class="card-text">Once the infromation acrhitecture is planned out and the site structure
designed, the devloper must consider the layout for each page. Mapping elements together
using tools like Balsamiq or Adobe XD helps better visualize how differentg elements
will relate to each other. Wireframing also helps re-evaluate IA decisions and motivates
to think about paddings and
margins, which again need to be cosnistant for the quality user experience. You can find
wireframes for this website in the process document.</p>
</div>
</div>
</div>
<div class="col-md-4">
<img src="img/wireframe.jpg" class="img-fluid rounded-start rounded" alt="Pixel Pirate">
</div>
</div>
</div>
</section>
<!-- Accessibility Considerations card -->
<!-- https://getbootstrap.com/docs/5.0/components/card/#horizontal -->
<section class="container">
<div class="card mb-5">
<img src="img/palette.png" class="card-img-top rounded" alt="Colour Palette">
<div class="card-body ps-4 py-4">
<h4 class="card-title">Accessibility Considerations</h4>
<div class="text-container py-2">
<p class="card-text">Website usability and accessibility play a critical role in the design process.
It
is shown that properly implemented accessibility features can benefit not only those with
disabilities, but all kinds of users. For instance, keyboard-friendly design and allowing the
user
to move through the website's content using the TAB key can help visitors with motor
disabilities as
well as other users who don't have or can't use a mouse. Below is the list of some accessibility
features implemented on this website using the Bootstrap framework and in compliance with WCAG
2.0:</p>
<div class="row py-4">
<div class="col-6">
<ul>
<li>intuitive controls and navigation</li>
</ul>
<ul>
<li>alternative text for images and other media</li>
</ul>
<ul>
<li>simple and clear language</li>
</ul>
<ul>
<li>consistent fonts and page layouts</li>
</ul>
</div>
<div class="col-6">
<ul>
<li>use of icons and media to accompy text</li>
</ul>
<ul>
<li>use of ARIA attributes</li>
</ul>
<ul>
<li>high color contrast</li>
</ul>
<ul>
<li>accessible forms with input validation</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Resources Card Grid goes here -->
<section class="resources-cards">
<section class="container mb-5">
<div class="row row-cols-1 row-cols-md-2 g-4 mx-5 px-5">
<div class="col px-5">
<div class="card">
<div class="card-body px-5">
<div class="card-title py-2"><h4 style="text-align:center">Inspiration</h4></div>
<ul>
<li><a href="http://www.iamdeantate.com/">Dean Tate</a></li>
</ul>
<ul>
<li><a href="http://www.nathaliejankie.nl/">Nathalie Jankie</a></li>
</ul>
<ul>
<li><a href="https://www.katelin-frederick.com/">Katelin Frederick</a></li>
</ul>
</div>
</div>
</div>
<div class="col px-5">
<div class="card">
<div class="card-body px-5">
<div class="card-title py-2"><h4 style="text-align:center">References</h4></div>
<ul>
<li><a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0">How to Meet WCAG (Quick Reference)</a></li>
</ul>
<ul>
<li><a href="https://webaim.org/standards/wcag/checklist">WebAIM's WCAG 2 Checklist</a></li>
</ul>
<ul>
<li><a href="https://getbootstrap.com/">Bootstrap Documentation</a></li>
</ul>
<ul>
<li><a href="http://colormind.io/bootstrap/">Colourmind</a></li>
</ul>
<ul>
<li><a href="https://fontawesome.com/">Font Awesome</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
</section>
<!-- Sticky Footer https://getbootstrap.com/docs/5.0/examples/sticky-footer/ -->
<!-- Also Note the classes on the html and body tags -->
<footer class="footer mt-auto py-3 bg-dark">
<div class="container">
<div class="row">
<div class="col my-auto" id="copyright">
<span class="text-white">© 2022-2023 | <a href="index.html">Maxim Nyanin</a></span>
</div>
<div class="col">
<div class="container" style="display: inline-flex; justify-content: flex-end;">
<div class="footer-icon"><a href="https://github.com/MaxisNy"><i class="fa fa-github"
style="font-size:30px; color:white"></i></a></div>
<div class="footer-icon"><a href="https://www.linkedin.com/in/maxim-nyanin-0373bb1a0/"><i
class="fa fa-linkedin" style="font-size:30px; color:white"></i></a></div>
<div class="footer-icon" id="last-icon"><a href="mailto:max.nyanin@mail.utoronto.ca"
target="_blank"><i class="fa fa-envelope" style="font-size:30px; color:white"></i></a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap Javascript Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
</body>
</html>