{"id":61,"date":"2016-09-28T11:46:30","date_gmt":"2016-09-28T15:46:30","guid":{"rendered":"https:\/\/wordpress.clarku.edu\/tzhang\/?p=61"},"modified":"2016-09-28T16:25:14","modified_gmt":"2016-09-28T20:25:14","slug":"ux-project-donation-page-redesign-ui-style-guide","status":"publish","type":"post","link":"https:\/\/wordpress.clarku.edu\/tzhang\/2016\/09\/28\/ux-project-donation-page-redesign-ui-style-guide\/","title":{"rendered":"UX Project: Donation Page Redesign &#8211; UI Style Guide"},"content":{"rendered":"<p>There are several kinds of style guide types, including brand identity guide, design language guide, voice and tone guide, writing guide, pattern library and code guide.<\/p>\n<p>This style guide is only for the give site on mobile. I only have one sample page of the site, but with the style guide, it is much easier to picture the whole site with the same look and feel. Here, I want to create a professional, modern and considerate look &amp; feel, as for creating trust from users, and warm feeling from alumni.<\/p>\n<h3>LOGO:<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-94\" src=\"https:\/\/wordpress.clarku.edu\/wp-content\/uploads\/sites\/428\/2016\/09\/logo.jpg\" alt=\"logo\" width=\"223\" height=\"48\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-95\" src=\"https:\/\/wordpress.clarku.edu\/wp-content\/uploads\/sites\/428\/2016\/09\/logo-black.jpg\" alt=\"logo-black\" width=\"223\" height=\"48\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-97\" src=\"https:\/\/wordpress.clarku.edu\/wp-content\/uploads\/sites\/428\/2016\/09\/logo-reverse-color.jpg\" alt=\"logo-reverse-color\" width=\"223\" height=\"48\" \/><\/p>\n<h3>COLOR PALETTE:<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-100 size-medium\" src=\"https:\/\/wordpress.clarku.edu\/wp-content\/uploads\/sites\/428\/2016\/09\/color-117x300.jpg\" alt=\"color\" width=\"117\" height=\"300\" srcset=\"https:\/\/wordpress.clarku.edu\/tzhang\/wp-content\/uploads\/sites\/428\/2016\/09\/color-117x300.jpg 117w, https:\/\/wordpress.clarku.edu\/tzhang\/wp-content\/uploads\/sites\/428\/2016\/09\/color.jpg 123w\" sizes=\"auto, (max-width: 117px) 100vw, 117px\" \/><br \/>\nColor 1: For header, links, options<\/p>\n<p style=\"text-align: justify;line-height: 1.8em\">Color 2, For buttons<\/p>\n<p style=\"text-align: justify;line-height: 1.8em\">Color 3, For words<\/p>\n<p style=\"text-align: justify;line-height: 1.8em\">Color 4, For borders and backgrounds<\/p>\n<p style=\"text-align: justify;line-height: 1.8em\">Color 5, For horizontal lines, backgrounds<\/p>\n<h3 style=\"text-align: justify;line-height: 1.8em\">FONTS: Lucida Grande<\/h3>\n<p style=\"text-align: justify;line-height: 1.8em\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-101 alignnone\" src=\"https:\/\/wordpress.clarku.edu\/wp-content\/uploads\/sites\/428\/2016\/09\/font-300x181.png\" alt=\"font\" width=\"300\" height=\"181\" srcset=\"https:\/\/wordpress.clarku.edu\/tzhang\/wp-content\/uploads\/sites\/428\/2016\/09\/font-300x181.png 300w, https:\/\/wordpress.clarku.edu\/tzhang\/wp-content\/uploads\/sites\/428\/2016\/09\/font.png 320w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><br \/>\nh1 {font-size: 20px; line-height: 23px;\u00a0font-weight:bold; color: CC3333;}<br \/>\nh2 {font-size: 18px; line-height: 21px;\u00a0font-weight:bold; color: 4A4A4A;}<br \/>\nh3 {font-size: 16px; line-height: 18px;\u00a0font-weight:bold; color: 4A4A4A;}<br \/>\np {font-size: 14px; line-height: 16px;\u00a0color: 4A4A4A;}<br \/>\nbreadcrumb { font-size: 12px; line-height: 15px; color: 4A4A4A;}<\/p>\n<h3>OTHER ELEMENTS:<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-104\" src=\"https:\/\/wordpress.clarku.edu\/wp-content\/uploads\/sites\/428\/2016\/09\/elements.png\" alt=\"elements\" width=\"400\" height=\"659\" srcset=\"https:\/\/wordpress.clarku.edu\/tzhang\/wp-content\/uploads\/sites\/428\/2016\/09\/elements.png 425w, https:\/\/wordpress.clarku.edu\/tzhang\/wp-content\/uploads\/sites\/428\/2016\/09\/elements-182x300.png 182w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<div style=\"float: right;margin-right: 10px\">\n<h4>Button<\/h4>\n<p>height: 40px<br \/>\ncolorA: #4A4A4A<br \/>\ncolorB: #E62E2E<br \/>\nborder: 2px<\/p>\n<h4>Filling box<\/h4>\n<p>height: 35px<br \/>\nfont-size: 16 px<br \/>\nfont-color: #D8D8D8<br \/>\nline-height: 18px<br \/>\ncolor:\u00a0#4A4A4A<\/p>\n<h4>Horizontal line<\/h4>\n<p><span style=\"font-size: 18px\">color:\u00a0#D8D8D8<br \/>\n<\/span><span style=\"font-size: 18px\">height: 2px<\/span><\/p>\n<h4>Call to action<\/h4>\n<p><span style=\"font-size: 18px\">Font-size: 14px<br \/>\n<\/span><span style=\"font-size: 18px\">height: 40px<\/span><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are several kinds of style guide types, including brand identity guide, design language guide, voice and tone guide, writing guide, pattern library and code guide. This style guide is [&hellip;]<\/p>\n","protected":false},"author":556,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-61","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/posts\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/users\/556"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}