{"id":1354,"date":"2023-03-25T08:33:43","date_gmt":"2023-03-25T08:33:43","guid":{"rendered":"http:\/\/www.reneeshen.com\/portfolio4\/?post_type=portfolio&#038;p=1354"},"modified":"2023-04-25T08:06:56","modified_gmt":"2023-04-25T08:06:56","slug":"skill_8","status":"publish","type":"portfolio","link":"http:\/\/www.reneeshen.com\/portfolio4\/portfolio\/skill_8\/","title":{"rendered":"Crafting the visual design"},"content":{"rendered":"[vc_row][vc_column][vc_column_text animation=&#8221;animation fade-in&#8221; el_class=&#8221;small-title&#8221;]\/ UI[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;]\t<div id=\"thb-highlighttype-69f5d8df31f5b\" class=\"thb-highlighttype thb-highlight-hover  animation fade-in\">\n\t\t\n<h4>Defining the tone of the interface and crafting the <span class=\"thb-highlight\">visual design<\/span><\/h4>\n\n\t\t<style>\n\t\t\t\t\t\t\t\t\t\t#thb-highlighttype-69f5d8df31f5b.thb-highlighttype .thb-highlight {\n\t\t\t\t\tbackground-image: linear-gradient( #f4bd46,  #f4bd46);\n\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t#thb-highlighttype-69f5d8df31f5b.thb-highlighttype .thb-highlight {\n\t\t\t\t\tbackground-size: 0% 30%;\n\t\t\t\t}\n\t\t\t\t\t<\/style>\n\n\t<\/div>\n\n\t[vc_empty_space height=&#8221;40px&#8221;][vc_column_text animation=&#8221;animation fade-in&#8221;]\n<p class=\"p1\"><span class=\"s1\">My goal in visual design is to create interfaces that are visually compelling, functional, and easy to use. These interfaces should not only effectively communicate a message to the audiences but also evoke user engagements.<\/span><\/p>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row thb_full_width=&#8221;true&#8221; thb_row_padding=&#8221;true&#8221; css=&#8221;.vc_custom_1679680963471{padding-top: 60px !important;padding-right: 10vh !important;padding-bottom: 60px !important;padding-left: 10vh !important;background-color: #f8f8f8 !important;}&#8221;][vc_column][vc_row_inner thb_max_width=&#8221;max_width&#8221;][vc_column_inner][vc_column_text]\n<h5>My outputs include\u2026<\/h5>\n[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_empty_space height=&#8221;40px&#8221;][vc_row_inner thb_max_width=&#8221;max_width&#8221;][vc_column_inner width=&#8221;1\/3&#8243; offset=&#8221;vc_col-xs-4\/5&#8243;][vc_images_carousel images=&#8221;1615&#8243; img_size=&#8221;full&#8221; onclick=&#8221;link_no&#8221; hide_pagination_control=&#8221;yes&#8221; hide_prev_next_buttons=&#8221;yes&#8221; css_animation=&#8221;fadeIn&#8221;][vc_column_text animation=&#8221;animation bottom-to-top&#8221; el_class=&#8221;mini-text&#8221; css=&#8221;.vc_custom_1681028730902{padding-top: 40px !important;padding-right: 40px !important;padding-bottom: 40px !important;padding-left: 40px !important;background-color: #ffffff !important;}&#8221;]\n<h5>Mood Board<\/h5>\n<p class=\"p1\"><span class=\"s1\">When defining the art direction of a project, I typically create 2-4 mood boards based on my understanding of the target audience, and use them to initiate conversations with stakeholders.<\/span><\/p>\n[\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][vc_images_carousel images=&#8221;1622&#8243; img_size=&#8221;full&#8221; onclick=&#8221;link_no&#8221; hide_pagination_control=&#8221;yes&#8221; hide_prev_next_buttons=&#8221;yes&#8221; css_animation=&#8221;fadeIn&#8221;][vc_column_text animation=&#8221;animation bottom-to-top&#8221; el_class=&#8221;mini-text&#8221; css=&#8221;.vc_custom_1681028960185{padding-top: 40px !important;padding-right: 40px !important;padding-bottom: 40px !important;padding-left: 40px !important;background-color: #ffffff !important;}&#8221;]\n<h5>Design Specification<\/h5>\n<p class=\"p1\"><span class=\"s1\">I usually combine the visual design and interaction design documents into a single file, with screen behaviors and design rationales noted below the screens. Then, I hand it over to the development team along with a Zeplin link.<\/span><\/p>\n[\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243; offset=&#8221;vc_col-xs-4\/5&#8243;][vc_images_carousel images=&#8221;1616,1617,1619,1620&#8243; img_size=&#8221;full&#8221; onclick=&#8221;link_no&#8221; autoplay=&#8221;yes&#8221; hide_pagination_control=&#8221;yes&#8221; wrap=&#8221;yes&#8221; css_animation=&#8221;fadeIn&#8221;][vc_column_text animation=&#8221;animation bottom-to-top&#8221; el_class=&#8221;mini-text&#8221; css=&#8221;.vc_custom_1681028742604{padding-top: 40px !important;padding-right: 40px !important;padding-bottom: 40px !important;padding-left: 40px !important;background-color: #ffffff !important;}&#8221;]\n<h5>Illustration<\/h5>\n<p class=\"p1\"><span class=\"s1\">I usually start by hand drawing a few different approaches based on the message we want to convey on a specific screen. Then, I paste the drafts onto the screen and discuss them with the team for the next iteration.<\/span><\/p>\n[\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][vc_images_carousel images=&#8221;1623,1625&#8243; img_size=&#8221;full&#8221; onclick=&#8221;link_no&#8221; speed=&#8221;10&#8243; autoplay=&#8221;yes&#8221; hide_pagination_control=&#8221;yes&#8221; hide_prev_next_buttons=&#8221;yes&#8221; css_animation=&#8221;fadeIn&#8221;][vc_column_text animation=&#8221;animation bottom-to-top&#8221; el_class=&#8221;mini-text&#8221; css=&#8221;.vc_custom_1681028935765{padding-top: 40px !important;padding-right: 40px !important;padding-bottom: 40px !important;padding-left: 40px !important;background-color: #ffffff !important;}&#8221;]\n<h5>Prototype<\/h5>\n<p class=\"p1\"><span class=\"s1\">Depending on whether I need to demonstrate a concept or to conduct a usability testing, my visual prototypes can take the form of an animation or a click-through.<\/span><\/p>\n[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243; offset=&#8221;vc_col-xs-4\/5&#8243;][vc_images_carousel images=&#8221;1621&#8243; img_size=&#8221;full&#8221; onclick=&#8221;link_no&#8221; hide_pagination_control=&#8221;yes&#8221; hide_prev_next_buttons=&#8221;yes&#8221; css_animation=&#8221;fadeIn&#8221;][vc_column_text animation=&#8221;animation bottom-to-top&#8221; el_class=&#8221;mini-text&#8221; css=&#8221;.vc_custom_1681028754151{padding-top: 40px !important;padding-right: 40px !important;padding-bottom: 40px !important;padding-left: 40px !important;background-color: #ffffff !important;}&#8221;]\n<h5>Style Guide<\/h5>\n<p class=\"p1\"><span class=\"s1\">When working on a product that involves multiple designers and developers, we use a style guide to ensure consistency and coherence throughout. A style guide could include typography, color palettes, iconography, layout, as well as behaviors of common components, such as buttons, forms, and navigation.<\/span><\/p>\n[\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text animation=&#8221;animation fade-in&#8221; el_class=&#8221;small-title&#8221;]\/ UI[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_empty_space height=&#8221;40px&#8221;][vc_column_text animation=&#8221;animation fade-in&#8221;] My goal in visual design is to create interfaces that are visually compelling, functional, and easy to use. These interfaces should not only effectively communicate a message to the audiences but also evoke user engagements. [\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row thb_full_width=&#8221;true&#8221; thb_row_padding=&#8221;true&#8221; css=&#8221;.vc_custom_1679680963471{padding-top: 60px !important;padding-right: 10vh !important;padding-bottom: 60px !important;padding-left:&hellip;<\/p>\n","protected":false},"featured_media":1550,"parent":0,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","tags":[],"_links":{"self":[{"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/portfolio\/1354"}],"collection":[{"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/types\/portfolio"}],"replies":[{"embeddable":true,"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/comments?post=1354"}],"version-history":[{"count":14,"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/portfolio\/1354\/revisions"}],"predecessor-version":[{"id":1678,"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/portfolio\/1354\/revisions\/1678"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/media\/1550"}],"wp:attachment":[{"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/media?parent=1354"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/tags?post=1354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}