illustration-how-tails-work.mdwn 10.1 KB
Newer Older
sajolida's avatar
sajolida committed
1
[[!meta title="Illustrations on what is Tails and how it works"]]
sajolida's avatar
sajolida committed
2
3

[[!meta stylesheet="jobs" rel="stylesheet" title=""]]
sajolida's avatar
sajolida committed
4
[[!tag job/consultancy]]
5
[[!tag job/open]]
sajolida's avatar
sajolida committed
6

sajolida's avatar
sajolida committed
7
8
[[!meta robots="noindex"]]

sajolida's avatar
sajolida committed
9
10
11
**This is a design brief for a consultancy job.**

[[!toc levels=2]]
sajolida's avatar
sajolida committed
12
13
14
15

Summary
=======

sajolida's avatar
sajolida committed
16
17
18
19
Tails, a portable operating system that protects your privacy and avoids
censorship, is looking for a contractor to design illustrations to help
explaining what is Tails.

sajolida's avatar
sajolida committed
20
21
22
23
24
About Tails
===========

[[!inline pages="jobs/about-tails" raw="yes" sort="age"]]

sajolida's avatar
sajolida committed
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
Details
=======

### Scope

This work is part of a larger effort to improve the description and
explanation of Tails, adjust the voice and tone of the homepage, and
implement a newly developed brand identity.

The contractor will create illustrations to aid in communicating:

- On the homepage: what is Tails and what are its main benefits (6
  illustrations).

  See the [[draft description and benefits for the homepage|blueprint/explain_tails/homepage]]

- On the 'How Tails works' page: the main properties and features of
  Tails (10 illustrations).

  See the [[Draft text for the 'How Tails works' page|blueprint/explain_tails/about]]

The contractor will work as a team with the Tails UX designer:

- The contractor will be responsible for all the illustration work.
- The Tails UX designer will be responsible for the structure, text, and
  integration on the website.

### Target audience

Activists, journalists, people who are being surveilled or censored.

People learning about Tails for the first time.

People who have to explain Tails to others, for example, digital
security trainers.

Our target audience is exemplified by our [[personas|contribute/personas]].

### Proposed process

1. Mockups

   - The contractor and the UX designer work together to ideate and
     create initial mockups for each illustration.

1. Usability testing of the content

   - The UX designer integrates the initial mockups into the draft
     content.

   - The text and illustrations is tested with a few potential users
76
     using the [think aloud protocol](https://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/).
sajolida's avatar
sajolida committed
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

     The contractor is encouraged to participate in the tests if they
     have experience or interest in usability testing.

   - Mockups might be refined as needed during the tests.

1. Design & illustration

   - Full illustration (16 images)

1. Revisions

   - 1 round of revision, based on feedback from the Tails community.

### Proposed timeline

Deadline for applications: 2019-10-31

Final delivery: 2019-12-31 or earlier

- Week 1: In-person or remote sprint
  - Ideation and initial mockups
  - Usability testing and refined mockups

- Week 2: Full illustration

- Week 3: Feedback

- Week 4: Final illustrations delivered
sajolida's avatar
sajolida committed
106

sajolida's avatar
sajolida committed
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
### Licensing

All work will be published under the
<a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative
Commons Attribution-ShareAlike 4.0 International License</a>.

The contractor may retain copyright and will be credited on our [[license
page|doc/about/license]].

### Deliverables

Vector graphics are preferred as they will make the work easier to reuse
and adapt in the future. Raster graphics might be considered if well
justified.

Source documents compatible with Free Software tools will be provided as
deliverables:

- [Inkscape](https://inkscape.org/) for vector graphics
- [GIMP](https://www.gimp.org/) for raster graphics

The contractor may work with non-Free Software tools until delivery.
Only the source documents in the final delivery must be compatible with
Free Software tools.

For example, in the case of vector graphics deliverables, the contractor
may work with Adobe Illustrator but must deliver working documents in
SVG format with all the objects and features compatible with the open
SVG standard.

### Budget

sajolida's avatar
sajolida committed
139
Billable hours paid up to 2 000€, including meetings.
sajolida's avatar
sajolida committed
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

Design considerations
=====================

### Brand guidelines

See the brand attributes in our [[mission and values|contribute/mission]].

### Tone

When using Tails, people trade off bits of convenience for some extra
security. They might have very little time, be under stress, or physical
threats.

We take the safety of our users very seriously and we speak to them in a
confident and reassuring way without being lighthearted or frivolous.

Our style inspires trust but doesn't sound distant. Even though we
address serious issues, we are always empathetic and encouraging.

To be accessible to our diverse and global audience, we value clarity
and sincerity above all. We provide state-of-the-art tools without
over-promising or sounding elitist.

### Visual style

Tails doesn't have a visual style guide yet and the work on this
167
contract will be some of the first professional visual design work done for
sajolida's avatar
sajolida committed
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
Tails.

The contractor will have to propose a visual style that matches our
brand guidelines and tone without being able to refer to more detailed
visual guidelines.

The visual style proposed by the contractor must be easily adoptable and
reusable for future work.

### Color scheme

The illustrations must be compatible with our brand colors:

<style>
.brand-color {
  display: inline-block;
  width: 200px;
  height: 100px;
  border-radius: 0.5em;
  padding: 1em;
  font-size: 16px;
  font-weight: bold;
}
</style>

<span class="brand-color" style="background-color: #56347c; color: white;">#56347c</span>

<span class="brand-color" style="background-color: #53b351;">#53b351</span>

### Inspiration

199
200
- [[Our personas|contribute/personas]]: how we think our target audience looks like
- [[Boot menu animation|install/win/usb#animation]]: other visuals on our website
sajolida's avatar
sajolida committed
201
202
- DuckDuckGo [App](https://duckduckgo.com/app) and [About](https://duckduckgo.com/about): outdoors to illustrate privacy and empowerment
- [TunnelBear](https://www.tunnelbear.com/): explain a product using a nature-related theme
sajolida's avatar
sajolida committed
203
204
205
206
- [Google Doogle with bears](https://www.google.com/doodles/grandfathers-day-2019-poland): encouraging
- [Intercom](https://www.intercom.com/product-tours): sketchy but serious

Design concept
sajolida's avatar
sajolida committed
207
208
==============

sajolida's avatar
sajolida committed
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
### Metaphor: Tails as a tent

<table>
<tr><th>Property of Tails</th><th>Property of tents and hiking in the outdoors</th></tr>
<tr><td>Portable</td><td>Tents are portable and can be used anywhere.</td></tr>
<tr><td>Avoid surveillance</td><td>Tents gives you a private space in a public environment.</td></tr>
<tr><td>Amnesia</td><td>When you set up your tent, it always starts empty, from a clean state. When you tear it down, it is empty.</td></tr>
<tr><td>Persistence</td><td>You can store your personal stuff in your backpack and unpack it in your tent.</td></tr>
<tr><td>Anonymity</td><td>Nobody know who you are when you are in your tent. Many tents look alike, making you anonymous.</td></tr>
<tr><td>Leave no trace</td><td>When you pack up your tent, you leave no trace.</td></tr>
<tr><td>Toolbox</td><td>You carry all you need in your backpack. Tails is like a Swiss Army knife</td></tr>
<tr><td>Avoid censorship</td><td>When walking in the outdoors, you can go anywhere, without censorship.</td></tr>
<tr><td>Avoid tracking</td><td>When walking in the outdoors, you leave no trace.</td></tr>
<tr><td>No virus</td><td>Tents protect you from nuisances: mosquitoes, rain, wind, etc.</td></tr>
<tr><td>No ads</td><td>When going in the outdoors, you leave pollution and noise behind.</td></tr>
</table>

### Images from workshop

These are images that Tails community members drew at a visual identity
workshop. We've included them here to show how the Tails community
thinks about the tent metaphor – they’re not meant to be exactly copied.

<a href="https://git.tails.boum.org/ux/plain/tent/Tails_tent_simple.png"><img src="https://git.tails.boum.org/ux/plain/tent/Tails_tent_simple.png" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/Tails_tent_roll.png"><img src="https://git.tails.boum.org/ux/plain/tent/Tails_tent_roll.png" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/Tails_tent_automatic.png"><img src="https://git.tails.boum.org/ux/plain/tent/Tails_tent_automatic.png" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/Tails_tent_many.png"><img src="https://git.tails.boum.org/ux/plain/tent/Tails_tent_many.png" width="300"></a>

<a href="https://git.tails.boum.org/ux/plain/tent/01.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/01.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/02.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/02.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/03.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/03.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/04.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/04.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/05.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/05.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/06.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/06.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/07.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/07.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/08.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/08.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/09.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/09.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/10.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/10.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/11.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/11.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/12.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/12.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/13.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/13.jpg" width="300"></a>
<a href="https://git.tails.boum.org/ux/plain/tent/14.jpg"><img src="https://git.tails.boum.org/ux/plain/tent/14.jpg" width="300"></a>
sajolida's avatar
sajolida committed
251
252
253
254
255

How to apply
============

[[!inline pages="jobs/apply" raw="yes" sort="age"]]