{"id":1345,"date":"2023-03-25T08:03:43","date_gmt":"2023-03-25T08:03:43","guid":{"rendered":"http:\/\/www.reneeshen.com\/portfolio4\/?post_type=portfolio&#038;p=1345"},"modified":"2023-06-12T07:44:38","modified_gmt":"2023-06-12T07:44:38","slug":"skill_4","status":"publish","type":"portfolio","link":"http:\/\/www.reneeshen.com\/portfolio4\/portfolio\/skill_4\/","title":{"rendered":"Creating design guidelines"},"content":{"rendered":"[vc_row][vc_column][vc_column_text animation=&#8221;animation fade-in&#8221; el_class=&#8221;small-title&#8221;]\/ UX UI[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;]\t<div id=\"thb-highlighttype-69f5faa17f15f\" class=\"thb-highlighttype thb-highlight-hover  animation fade-in\">\n\t\t\n<h4>Creating <span class=\"thb-highlight\">design guidelines<\/span> for better consistency and efficiency<\/h4>\n\n\t\t<style>\n\t\t\t\t\t\t\t\t\t\t#thb-highlighttype-69f5faa17f15f.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-69f5faa17f15f.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\">While working with other designers, I often initiate the construction of a design guideline in order to establish a shared language for consistency and efficiency. A design guideline also provides a framework for developers to quickly implement the design.<\/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 style=\"text-align: left;\">I have led&#8230;<\/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;1595&#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_1681028474707{padding-top: 40px !important;padding-right: 40px !important;padding-bottom: 40px !important;padding-left: 40px !important;background-color: #ffffff !important;}&#8221;]\n<h5>Wireframe Kits<\/h5>\n<p class=\"p1\"><span class=\"s1\">When I worked at MING Labs, the team\u2019s rapid expansion caused issues with document consistency and work efficiency. To solve this problem, I proactively developed a wireframe kit consisting of pre-built components to enable designers work more productively.<\/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;1596&#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_1681028487006{padding-top: 40px !important;padding-right: 40px !important;padding-bottom: 40px !important;padding-left: 40px !important;background-color: #ffffff !important;}&#8221;]\n<h5>UX UI Guideline<\/h5>\n<p class=\"p1\"><span class=\"s1\">When I led the design team at Gogolook, I requested time from the company to collaborate with the team in reviewing previously designed pages and jointly creating UX UI guidelines. I also invited the development team to establish a design system together to ensure the overall consistency of our apps.<\/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;1597&#8243; img_size=&#8221;full&#8221; onclick=&#8221;link_no&#8221; hide_pagination_control=&#8221;yes&#8221; hide_prev_next_buttons=&#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_1681028498071{padding-top: 40px !important;padding-right: 40px !important;padding-bottom: 40px !important;padding-left: 40px !important;background-color: #ffffff !important;}&#8221;]\n<h5>Illustration Style Guide<\/h5>\n<p class=\"p1\"><span class=\"s1\">Similar to the UX UI guidelines, I took advantage of the extra time to collaboratively develop an illustration style guide with the design team, as we didn\u2019t have any in-house illustrator. After a drawing session, we extracted the visual elements from everyone\u2019s illustrations to achieve a visually cohesive outcome.<\/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;]\/ UX 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;] While working with other designers, I often initiate the construction of a design guideline in order to establish a shared language for consistency and efficiency. A design guideline also provides a framework for developers to quickly implement the design. [\/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&hellip;<\/p>\n","protected":false},"featured_media":1540,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","tags":[],"_links":{"self":[{"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/portfolio\/1345"}],"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=1345"}],"version-history":[{"count":21,"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/portfolio\/1345\/revisions"}],"predecessor-version":[{"id":1685,"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/portfolio\/1345\/revisions\/1685"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/media\/1540"}],"wp:attachment":[{"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/media?parent=1345"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.reneeshen.com\/portfolio4\/wp-json\/wp\/v2\/tags?post=1345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}