[fix] resolve #136, illustration visual assets

FirefoxUX · Nov 8, 2017 · 3def594 · 3def594
1 parent 216a496
commit 3def594
Show file tree

Hide file tree

Showing 16 changed files with 501 additions and 26 deletions.
diff --git a/contents/includes/illustration/illustration-about.html b/contents/includes/illustration/illustration-about.html
diff --git a/contents/includes/illustration/illustration-errors.html b/contents/includes/illustration/illustration-errors.html
diff --git a/contents/includes/illustration/illustration-onboarding.html b/contents/includes/illustration/illustration-onboarding.html
diff --git a/contents/includes/illustration/illustration-whimsical.html b/contents/includes/illustration/illustration-whimsical.html
diff --git a/contents/visuals/illustration.html b/contents/visuals/illustration.html
@@ -13,19 +13,37 @@ <h2>Usage</h2>
   <p>
     Use illustration to encourage users who are frustrated, are lost, or have had something go wrong. Don't use illustration if the user is in danger. 
   </p>
-  <% include ../includes/illustration/illustration-errors.html %>
+  <figure>
+    <img src="../images/illustration/illustration-usage-1.svg" alt="Use of illustration in an error page">
+    <figcaption>
+      In pages like <em>error pages</em>, the illustration may bring a smile to the user's face 
+    </figcaption>
+  </figure>
   <p>
     Use illustration to <strong>introduce</strong> and <strong>explain</strong> a product or feature. This can be especially helpful for new, misused, or neglected features.
   </p>
-  <% include ../includes/illustration/illustration-onboarding.html %>
+  <figure>
+    <img src="../images/illustration/illustration-usage-4.svg" alt="Use of illustration in the onboarding">
+    <figcaption>
+      During <em>onboarding</em>, illustrations are used to introduce the user to the product's features
+    </figcaption>
+  </figure>
   <p>
     Use illustration to help people <strong>understand</strong> content by <strong>exemplifying</strong> it. This is especially useful in text-heavy components like announcements.
   </p>
-  <% include ../includes/illustration/illustration-about.html %>
+  <figure>
+    <img src="../images/illustration/illustration-usage-2.svg" alt="Use of illustration in the 'About Your Rights' page">
+    <figcaption>
+      In pages like <em>about:rights</em>, the whimisical illustration encourages to read
+    </figcaption>
+  </figure>
   <p>
     Use illustration to <strong>congratulate</strong> or <strong>celebrate</strong> with people.
   </p>
-  <% include ../includes/illustration/illustration-whimsical.html %>
+  <figure>
+    <img src="../images/illustration/illustration-usage-3.svg" alt="Use of illustration in the 'Our Contributors' page">
+    <figcaption>A whimisical unicorn celebrates our contributors in the <em>about:credits</em> page</figcaption>
+  </figure>
 </section>
 
 <section>

diff --git a/images/illustration/error-1.png b/images/illustration/error-1.png
diff --git a/images/illustration/error-2.png b/images/illustration/error-2.png
diff --git a/images/illustration/error-3.png b/images/illustration/error-3.png
diff --git a/images/illustration/error-4.png b/images/illustration/error-4.png
diff --git a/images/illustration/illustration-usage-1.svg b/images/illustration/illustration-usage-1.svg
diff --git a/images/illustration/illustration-usage-2.svg b/images/illustration/illustration-usage-2.svg
diff --git a/images/illustration/illustration-usage-3.svg b/images/illustration/illustration-usage-3.svg
diff --git a/images/illustration/illustration-usage-4.svg b/images/illustration/illustration-usage-4.svg
diff --git a/images/illustration/long-text-1.png b/images/illustration/long-text-1.png
diff --git a/images/illustration/long-text-2.png b/images/illustration/long-text-2.png
diff --git a/images/illustration/onboarding-1.png b/images/illustration/onboarding-1.png