{"id":426,"date":"2023-04-05T21:40:14","date_gmt":"2023-04-05T21:40:14","guid":{"rendered":"https:\/\/projects.etc.cmu.edu\/xrt\/?page_id=426"},"modified":"2023-04-05T21:40:14","modified_gmt":"2023-04-05T21:40:14","slug":"behind-the-scene-the-original-icons","status":"publish","type":"page","link":"https:\/\/projects.etc.cmu.edu\/xrt\/behind-the-scene-the-original-icons\/","title":{"rendered":"Behind The Scene &#8211; The Original Icons"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">To better power up our UI design, Tiange created a series of icons we will use on our pages. We want to make the icons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Non-binary<\/li>\n\n\n\n<li>Inclusive<\/li>\n\n\n\n<li>Diverse<\/li>\n\n\n\n<li>Aesthetic <\/li>\n\n\n\n<li>Unique<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Initialization<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By researching several references, Tiange found <a href=\"https:\/\/www.akqa.com\/work\/coke-zero-sugar\/take-a-taste\/\">this<\/a> illustration and the style of Happy Tree Friends valuable.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/image-1024x576.png\" alt=\"\" class=\"wp-image-427\" srcset=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/image-1024x576.png 1024w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/image-300x169.png 300w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/image-768x432.png 768w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/image-1536x864.png 1536w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/image.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Coca-Cola Zero Sugar<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/5b56af70ba12a8c80bf559bd83899d0-796x1024.png\" alt=\"\" class=\"wp-image-428\" width=\"209\" height=\"269\" srcset=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/5b56af70ba12a8c80bf559bd83899d0-796x1024.png 796w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/5b56af70ba12a8c80bf559bd83899d0-233x300.png 233w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/5b56af70ba12a8c80bf559bd83899d0-768x988.png 768w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/5b56af70ba12a8c80bf559bd83899d0.png 933w\" sizes=\"auto, (max-width: 209px) 100vw, 209px\" \/><figcaption class=\"wp-element-caption\">Happy Tree Friends<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">We wanted to make illustrations have these characteristics:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quirky<\/li>\n\n\n\n<li>Fantasy<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Considering the usages we want to utilize the illustrations, we consider these scenarios:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Login &#8211; welcome<\/li>\n\n\n\n<li>Publish &#8211; congratulations<\/li>\n\n\n\n<li>Placement &#8211; caution<\/li>\n\n\n\n<li>Placement &#8211; floor detection<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"18916\" height=\"4500\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/001-01.png\" alt=\"\" class=\"wp-image-429\"\/><figcaption class=\"wp-element-caption\">Draft for different scenarios<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Process<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Then, Tiange drew the illustration based on the draft and the styles she has researched.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"20533\" height=\"4501\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/002-02.png\" alt=\"\" class=\"wp-image-430\"\/><figcaption class=\"wp-element-caption\">Process of the illustrations<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/all-1-1024x623.png\" alt=\"\" class=\"wp-image-431\" srcset=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/all-1-1024x623.png 1024w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/all-1-300x183.png 300w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/all-1-768x467.png 768w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/all-1-1536x935.png 1536w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/all-1-2048x1246.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The process of the creation<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The completion<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/log-in-1024x1024.png\" alt=\"\" class=\"wp-image-373\" srcset=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/log-in-1024x1024.png 1024w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/log-in-300x300.png 300w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/log-in-150x150.png 150w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/log-in-768x767.png 768w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/log-in-1536x1534.png 1536w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/log-in-2048x2045.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Login &#8211; welcome<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/floor-1024x1024.png\" alt=\"\" class=\"wp-image-374\" srcset=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/floor-1024x1024.png 1024w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/floor-300x300.png 300w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/floor-150x150.png 150w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/floor-768x767.png 768w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/floor-1536x1534.png 1536w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/floor-2048x2045.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Publish &#8211; congratulations<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/caution-1024x1024.png\" alt=\"\" class=\"wp-image-377\" srcset=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/caution-1024x1024.png 1024w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/caution-300x300.png 300w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/caution-150x150.png 150w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/caution-768x767.png 768w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/caution-1536x1534.png 1536w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/caution-2048x2045.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Placement &#8211; caution<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/cong-1024x1024.png\" alt=\"\" class=\"wp-image-376\" srcset=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/cong-1024x1024.png 1024w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/cong-300x300.png 300w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/cong-150x150.png 150w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/cong-768x767.png 768w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/cong-1536x1534.png 1536w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/cong-2048x2045.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Placement &#8211; floor detection<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Besides the first 4 illustrations, Tiange also added one for the empty home page:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/empty-1024x1024.png\" alt=\"\" class=\"wp-image-375\" srcset=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/empty-1024x1024.png 1024w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/empty-300x300.png 300w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/empty-150x150.png 150w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/empty-768x767.png 768w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/empty-1536x1534.png 1536w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/empty-2048x2046.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Illustration for empty pages<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/Artist-Home-Empty.png\" alt=\"\" class=\"wp-image-388\" width=\"218\" height=\"484\" srcset=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/Artist-Home-Empty.png 360w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/Artist-Home-Empty-135x300.png 135w\" sizes=\"auto, (max-width: 218px) 100vw, 218px\" \/><figcaption class=\"wp-element-caption\">Empty home<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In addition, Tiange also created an illustration for loading:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/back-03-1024x1024.png\" alt=\"\" class=\"wp-image-379\" width=\"321\" height=\"321\" srcset=\"https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/back-03-1024x1024.png 1024w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/back-03-300x300.png 300w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/back-03-150x150.png 150w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/back-03-768x767.png 768w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/back-03-1536x1534.png 1536w, https:\/\/projects.etc.cmu.edu\/xrt\/wp-content\/uploads\/2023\/04\/back-03-2048x2046.png 2048w\" sizes=\"auto, (max-width: 321px) 100vw, 321px\" \/><figcaption class=\"wp-element-caption\">Loading<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>To better power up our UI design, Tiange created a series of icons we will use on our pages. We want to make the icons: Initialization By researching several references, Tiange found this illustration and the style of Happy Tree Friends valuable. We wanted to make illustrations have these characteristics: Considering the usages we want [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-426","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/projects.etc.cmu.edu\/xrt\/wp-json\/wp\/v2\/pages\/426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.etc.cmu.edu\/xrt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projects.etc.cmu.edu\/xrt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/xrt\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/xrt\/wp-json\/wp\/v2\/comments?post=426"}],"version-history":[{"count":1,"href":"https:\/\/projects.etc.cmu.edu\/xrt\/wp-json\/wp\/v2\/pages\/426\/revisions"}],"predecessor-version":[{"id":432,"href":"https:\/\/projects.etc.cmu.edu\/xrt\/wp-json\/wp\/v2\/pages\/426\/revisions\/432"}],"wp:attachment":[{"href":"https:\/\/projects.etc.cmu.edu\/xrt\/wp-json\/wp\/v2\/media?parent=426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}