-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
243 lines (221 loc) · 15.9 KB
/
index.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
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Documentation and design porfolio of Michael E DuBelko.">
<meta name="keywords" content="technical writing, technical illustration, documentation, vancouver">
<title>Michael E DuBelko</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#0054a6">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/ibm-plex.css">
</head>
<body>
<!-- Landing -->
<div class="landing">
<header>
<img src="images/logo.svg" alt="MED logo">
<h1>Michael E DuBelko</h1>
<p>Technical Writer & Illustrator<br>Vancouver, Canada</p>
<p class="top-contact"><a href="#writing">Writing</a> · <a href="#illustration">Illustration</a> · <a href="#about">About Me</a> · <a href="#contact">Contact</a></p>
</header>
<img src="images/arrow.svg" align="middle" alt="down arrow">
</div>
<!-- Content -->
<h1 id="writing">Writing & Documentation</h1>
<div class="portfolio">
<div>
<a href="documents/med_vfx_software_article.pdf" target="_blank">
<h2>VFX Software Concept Article</h2>
<img src="documents/med_vfx_software_article_thumb.jpg" alt="VFX software conceptual article preview">
</a>
<p class="file-desc">Digital - 3,224 KB .pdf</p>
<p>Conceptual article covering the fundamentals of the computation engine of Gaffer, an open source node-based VFX tool. The client needed a ground-truth description of how the software's nodes compute data, which is essential for all users to comprehend in order for their node graphs to remain performant. The document had to perfectly follow the conceptual model without bogging readers down with implementation details.</p>
<p class="file-ps">© John Haddon</p>
<p class="file-ps">© Image Engine Design, Inc</p>
<p class="file-ps">Used with permission.</p>
</div>
<div>
<a href="documents/med_vfx_jabukaterminology_article.pdf" target="_blank">
<h2>VFX Knowledge Base Reference Doc</h2>
<img src="documents/med_vfx_jabukaterminology_article_thumb.jpg" alt="VFX knowledge base reference doc preview">
</a>
<p class="file-desc">Digital - 2,443 KB .pdf</p>
<p>Reference article that defines the key terminology for a VFX studio's custom asset management tool. Part of a new hire package designed to help onboard intermediate-to-expert VFX artists who are already familiar with asset management concepts, but need to be oriented on the precise meanings of common terms in the client's solution.</p>
<p class="file-ps">© Image Engine Design, Inc</p>
<p class="file-ps">Used with permission.</p>
</div>
<div>
<a href="documents/med_vfx_dailycategories_article.pdf" target="_blank">
<h2>VFX Knowledge Base Concept Doc</h2>
<img src="documents/med_vfx_dailycategories_article_thumb.jpg" alt="VFX knowledge base concept doc preview">
</a>
<p class="file-desc">Digital - 1,924 KB .pdf</p>
<p>Conceptual and procedural article describing a VFX pipeline feature with far-reaching effect throughout the client's studio. This feature determines how the business organizes its main internal deliverables (dailies), so the breakdown had to cover how to configure and use it in a way that was digestible to the whole user base.</p>
<p class="file-ps">© Image Engine Design, Inc</p>
<p class="file-ps">Used with permission.</p>
</div>
<div>
<a href="documents/med_vfx_jump_article.pdf" target="_blank">
<h2>VFX Knowledge Base Task Doc</h2>
<img src="documents/med_vfx_jump_article_thumb.jpg" alt="VFX knowledge base task doc preview">
</a>
<p class="file-desc">Digital - 1,560 KB .pdf</p>
<p>Instructional article covering the first task that the client's staff performed every day. Since this procedure is of paramount importance for users to perform their daily duties, it was necessary to be as salient and short as possible, while also enticing them with optional actions that could improve their productivity.</p>
<p class="file-ps">© Image Engine Design, Inc</p>
<p class="file-ps">Used with permission.</p>
</div>
<div>
<a href="documents/med_conference_startup_guide.pdf" target="_blank">
<h2>Conference Room Startup Guide</h2>
<img src="documents/med_conference_startup_guide_thumb.jpg" alt="Conference room startup guide preview">
</a>
<p class="file-desc">Print - 7,772 KB .pdf</p>
<p>System startup guide for a studio's client review room. The guide had to fulfill multiple requirements on one page: speak to users of all technical abilities, distinguish between three overlapping hardware systems, and provide safety and security information per the IT department's needs.</p>
<p class="file-ps">© Image Engine Design, Inc</p>
<p class="file-ps">Used with permission.</p>
</div>
<div>
<a href="documents/med_crm_user_guide.pdf" target="_blank">
<h2>CRM Software User Guide</h2>
<img src="documents/med_crm_user_guide_thumb.jpg" alt="CRM user guide preview">
</a>
<p class="file-desc">Digital & print - 632 KB .pdf</p>
<p>Guide for internal CRM software for a public sector organisation. The client requested a guide that combined a user guide and reference, would be tailored for the their in-house use-case, and incorporate their users’ skill levels and training and adoption feedback.</p>
<p class="file-ps">© Vancouver Fraser Port Authority</p> <p class="file-ps">Used with permission.</p>
</div>
<div>
<a href="documents/med_pos_user_guide.pdf" target="_blank">
<h2>POS Software User Guide</h2>
<img src="documents/med_pos_user_guide_thumb.jpg" alt="POS user guide preview">
</a>
<p class="file-desc">Digital & print - 337 KB .pdf</p>
<p>Guide for operating open-source POS software and hardware for experienced salespeople. The client requested a guide that could be used as an introduction for new hires and a quick reference for current staff.</p>
</div>
<div>
<a href="documents/med_api_documentation.pdf" target="_blank">
<h2>REST API Documentation</h2>
<img src="documents/med_api_documentation_thumb.jpg" alt="API documentation preview">
</a>
<p class="file-desc">Digital & print - 264 KB .pdf</p>
<p>Documentation of API for database software with REST methods. Designed as a technical reference for expert users familar with APIs and API terminology.</p>
</div>
<div>
<a href="documents/med_society_policy.pdf" target="_blank">
<h2>Society Policy</h2>
<img src="documents/med_society_policy_thumb.jpg" alt="society policy preview">
</a>
<p class="file-desc">Print - 179 KB .pdf</p>
<p>Ban policy for a registered BC society. Client requested a set of simple and fair rules in plain English that would protect staff, clients, and the public, which accorded with the BC Society Act and BC Human Rights Code, and which accounted for the organisation’s atypical management structure.</p>
</div>
<div>
<a href="documents/med_password_manager_web_help.chm" target="_blank">
<h2>Password Manager Web Help</h2>
<img src="documents/med_password_manager_web_help_thumb.jpg" alt="password manager web help preview">
</a>
<p class="file-desc">Digital - 987 KB .chm</p>
<p>Web help for password manager software. Designed as a task-based guide and manual for an intermediate user who wants to secure their passwords, but has no familiarity with password software.</p>
</div>
<div>
<a href="documents/med_screen_capture_user_guide.pdf" target="_blank">
<h2>Screen Capture User Guide</h2>
<img src="documents/med_screen_capture_user_guide_thumb.jpg" alt="screen capture user guide preview">
</a>
<p class="file-desc">Digital - 1,820 KB .pdf</p>
<p>UI documentation for screen capture software. Designed as a task-based guide for first-time users.</p>
</div>
</div>
<h1 id="illustration">Illustration & Design</h1>
<div class="portfolio">
<div>
<a href="https://vimeo.com/424432020" target="_blank">
<h2>VFX Software Explanatory Animation</h2>
<img src="documents/med_vfx_software_animation_thumb.png" alt="VFX software animation preview">
</a>
<p class="file-desc">Web Video</p>
<p>Hybrid conceptual and interface animation that explains the operation of a spreadsheet-style processing node inside Gaffer, an open source node-based VFX tool. The behind-the-scenes flow of data, normally hidden because of implementation complexities, is visualized. By layering the visualization over the node's two established elements in the interface (the node in the graph and its editor window), new and existing users are eased into the concept.</p>
<p class="file-ps">© John Haddon</p>
<p class="file-ps">© Image Engine Design, Inc.</p>
<p class="file-ps">Used with permission.</p>
</div>
<div>
<a href="documents/med_conference_systems_layout.pdf" target="_blank">
<h2>Conference Room System Layout</h2>
<img src="documents/med_conference_systems_layout_thumb.jpg" alt="Conference room systems layout preview">
</a>
<p class="file-desc">Print - 10,142 KB .pdf</p>
<p>Layout diagram of the equipment in a studio's conference room. The room is mixed-use, with multiple embedded systems. Users needed a clear breakdown of the activities and attached peripherals of each respective system. Graphic was paired with a user guide.</p>
<p class="file-ps">© Image Engine Design, Inc</p>
<p class="file-ps">Used with permission.</p>
</div>
<div>
<a href="documents/med_service_level_flowchart.pdf" target="_blank">
<h2>Process & Service Level Flowchart</h2>
<img src="documents/med_service_level_flowchart_thumb.png" alt="service level flowchart preview">
</a>
<p class="file-desc">Print - 523 KB .pdf</p>
<p>Swimlane flowchart describing an organization’s customer service process with anticipated response times. Client requested a document that could be made into a large-format poster or used in printed staff training material.</p>
<p class="file-ps">© Vancouver Fraser Port Authority</p> <p class="file-ps">Used with permission.</p>
</div>
<div>
<a href="http://onecommunityfestival.dtesnhouse.ca" target="_blank">
<h2>Non-Profit Event Website</h2>
<img src="documents/med_website1_thumb.jpg" alt="non-profit website preview">
</a>
<p class="file-desc">Web</p>
<p>Website promoting a non-profit’s yearly event. The client requested a clean, readable, mobile layout that was colour-impaired friendly and loaded quickly.</p>
</div>
<div>
<a href="documents/med_graphic_design_book_cover.png" target="_blank">
<h2>Graphic Design Book Cover</h2>
<img src="documents/med_graphic_design_book_cover_thumb.jpg" alt="graphic design book cover preview">
</a>
<p class="file-desc">Print - 1,547 KB .png</p>
<p>Cover for introductory graphic design manual. Designed to effectively communicate the book’s use-case (introduction to the fundamentals of visuals) to a broad audience.</p>
</div>
<div>
<a href="documents/med_pos_hardware_diagram.png" target="_blank">
<h2>POS Hardware Diagram</h2>
<img src="documents/med_pos_hardware_diagram_thumb.jpg" alt="POS hardware diagram preview">
</a>
<p class="file-desc">Digital - 123 KB .png</p>
<p>Hardware input/output diagram for a retail point-of-sale. Client requested a layout that matched the real-world location and orientation of the hardware that demonstrated the process flow of the input and output.</p>
</div>
<div>
<a href="documents/med_recycler_magazine.pdf" target="_blank">
<h2>Recycler Advertisement</h2>
<img src="documents/med_recycler_magazine_thumb.jpg" alt="recycler advertisement preview">
</a>
<p class="file-desc">Print - 144 KB .pdf</p>
<p>Magazine advertisement for recycling company. Clients requested a simple, inviting layout that announced their partnership that conveyed an environmental theme.</p>
</div>
</div>
<!-- Profile -->
<div id="about" class="profile">
<h1>About</h1>
<div class="portrait">
<img src="images/author_portrait.png" alt="author's portrait">
</div>
<p>Located in Vancouver, Canada, I am a technical writer, editor, and illustrator with a fervour for language and technology. I have provided technical documents and illustrations to clients in the Lower Mainland since 2012.</p>
<p>I hold a Certificate in Technical Writing from BCIT, and a BA in English from Simon Fraser University with an extended minor in Linguistics.</p>
<p>When not flipping pages, I'm cranking gears on my bike.</p>
</div>
<div class="contact" id="contact">
<h1>Contact</h1>
<p class="contact"><a href="mailto:[email protected]">[email protected]</a></p>
<p class="contact"><a href="https://www.linkedin.com/in/michael-dubelko-060099106">LinkedIn</a></p>
</div>
<!--Footer-->
<footer>
© <script>document.write(new Date().getFullYear())</script><noscript>2018</noscript> Michael E DuBelko
</footer>
</body>
</html>