{"id":772,"date":"2008-12-04T09:01:24","date_gmt":"2008-12-04T08:01:24","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=772"},"modified":"2010-04-12T17:00:04","modified_gmt":"2010-04-12T16:00:04","slug":"episode-two-visually-design-information-elements-and-user-interface","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2008\/12\/04\/episode-two-visually-design-information-elements-and-user-interface\/","title":{"rendered":"Episode Two: Visually design information elements and user interface"},"content":{"rendered":"<div class=\"alignleft-pull pullquote\">\n<p>This is the second part of the series, \u201c<a href=\"http:\/\/www.maratz.com\/blog\/archives\/2008\/11\/23\/environmental-friendly-css-the-series\/\">Environmental friendly CSS<\/a>\u201d<\/p>\n<\/div>\n<p>In the <a href=\"http:\/\/www.maratz.com\/blog\/archives\/2008\/11\/27\/episode-one-prepare-your-content-and-interface-copy\/\">previous episode<\/a> we\u2019ve created a creative\/technical brief. In this article we are going to use that document to design the category cloud area. For all busy readers, here is the final result:<\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/www.maratz.com\/img\/2008\/12-dec\/environmental-friendly-css-final.gif\" alt=\"Final image\" width=\"420\" height=\"500\" \/><\/p>\n<h2>The process<\/h2>\n<p>Most of the time, you&#8217;d want to first scribble some sketches, the old school way \u2014 pencil and paper. Yes, another Moleskine sucker.<\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/www.maratz.com\/img\/2008\/12-dec\/environmental-friendly-css-moleskine.jpg\" alt=\"Final image\" width=\"420\" height=\"234\" \/><\/p>\n<p>As you can see, it all comes down to some quick ideas and metaphors in order to get rid of the noise. This way you can rapidly test <a href=\"http:\/\/www.thinkvitamin.com\/features\/design\/how-crap-is-your-site-design\">proximity, contrast and alignment<\/a> and set the overall look-and-feel.<\/p>\n<p>Before I fired-up Photoshop, I knew I was going to have a dialogue between two characters on a window, carelessly enjoying the force of the nature. As a contrast, I planed another character who\u2019s experience wouldn\u2019t be so pleasant and optimistic. <!--more--><\/p>\n<p>See some different\/transitional design versions:<\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/www.maratz.com\/img\/2008\/12-dec\/environmental-friendly-css-01.gif\" alt=\"ver. 01\" width=\"420\" height=\"500\" \/><\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/www.maratz.com\/img\/2008\/12-dec\/environmental-friendly-css-02.gif\" alt=\"ver. 02\" width=\"420\" height=\"500\" \/><\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/www.maratz.com\/img\/2008\/12-dec\/environmental-friendly-css-03.gif\" alt=\"ver. 03\" width=\"420\" height=\"500\" \/><\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/www.maratz.com\/img\/2008\/12-dec\/environmental-friendly-css-04.gif\" alt=\"ver. 04\" width=\"420\" height=\"500\" \/><\/p>\n<h2>Photoshop steps<\/h2>\n<p>The approximate Photoshop process goes like this:<\/p>\n<ul>\n<li><strong>Rectangular marquee tool<\/strong>: for the dimensions (300px in width, random in height), set Guides<\/li>\n<li><strong>Rounded rectangle tool<\/strong> (Shape layers toggled): draw main box (the window), set stroke<\/li>\n<li><strong>Elliptical marquee tool<\/strong>: create random circles and ellipses by holding Shift to form the big cloud, fill selection with color.<\/li>\n<li><strong>Pen tool<\/strong> (Shape layers toggled): draw lightning<\/li>\n<li><strong>Type tool<\/strong>: write copy (tags and the label)<\/li>\n<li><strong>Custom shape tool<\/strong> (Shape layers toggled): choose Talk 4 shape, draw dialog cloud, set stroke<\/li>\n<li><strong>Elliptical marquee and Polygonal lasso tools<\/strong>: draw the character prototype using selections and then filling it with black.<\/li>\n<li><strong>Duplicate<\/strong> the character and test downscaling, rotation and perspective (Edit &#8594; Transform).<\/li>\n<li>Set the characters in place, modify the one that is going to be hit by the lightning (I used <strong>a combination of elliptical selections and brushes<\/strong> for the face).<\/li>\n<li>Draw radiator with <strong>Pen tool<\/strong> (Paths toggled), then <strong>Make selection<\/strong>, and then <strong>Fill<\/strong>. If you draw the perspective freehand, it could take a couple of attempts to get it right.<\/li>\n<li><strong>Pen tool<\/strong> (Paths toggled): draw a cable curve, then <strong>Stroke path with Brush<\/strong> (toggle simulate pressure checkbox).<\/li>\n<li>Draw grills, color them red, make it all looks hot (as in hot temperature) with <strong>Outer Glow<\/strong>.<\/li>\n<li>Select one of the inside character layer, then <strong>Select &#8594; Modify &#8594; Contract<\/strong> for about 2px, then create new <strong>Layer via Copy<\/strong> (Cmd\/Ctrl + J), keep the selection toggled.<\/li>\n<li><strong>Brush tool<\/strong>: set <strong>Opacity<\/strong> to very low, color: red, and gently draw the reflection on the character; repeat for the second one.<\/li>\n<li><strong>Custom shape tool<\/strong> (Shape layers toggled): choose <strong>Heart card<\/strong> shape, draw a couple of hearts, variate size and opacity.<\/li>\n<li><strong>Elliptical marquee tool<\/strong>: select some ellipses, fill with black, free-transform and lower the opacity.<\/li>\n<li>Make final tweaks.<\/li>\n<\/ul>\n<h2>Deliverables<\/h2>\n<p>To get a better picture about how it looks like in layers, <strong>download open source PSD file <a href=\"http:\/\/www.maratz.com\/downloads\/environmental-friendly-css\/environmental-friendly-css.psd.zip\">environmental-friendly-css.psd.zip (68 KB)<\/a><\/strong>.<\/p>\n<h2>Movie anyone?<\/h2>\n<p>I&#8217;m aware that the written steps and a PSD don&#8217;t get you as close as you might want to, so at the end of the series we\u2019re going to deliver a screen-cast of the whole process.<\/p>\n<p>In a mean-time, please share your thoughts: Would you do it in the similar fashion? Or would you take totally different approach?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the second part of the series, \u201cEnvironmental friendly CSS\u201d In the previous episode we\u2019ve created a creative\/technical brief. In this article we are going to use that document to design the category cloud area. For all busy readers, here is the final result: The process Most of the time, you&#8217;d want to first [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[25,34,28],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/772"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=772"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/772\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=772"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}