<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Devil is in the Details</title>
	<atom:link href="http://www.8164.org/devil-is-in-the-details/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.8164.org/devil-is-in-the-details/</link>
	<description>Jin Yang&#039;s blog on web design, philosophy of Taoism and life in general.</description>
	<lastBuildDate>Wed, 08 Sep 2010 23:14:27 -0700</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
	<item>
		<title>By: Jin</title>
		<link>http://www.8164.org/devil-is-in-the-details/comment-page-1/#comment-243</link>
		<dc:creator>Jin</dc:creator>
		<pubDate>Wed, 15 Oct 2008 02:46:57 +0000</pubDate>
		<guid isPermaLink="false">http://www.8164.org/?p=636#comment-243</guid>
		<description>Frank, the web is quite complex these days. There are a lot of things for a new comer to learn than when I started. So it may seem overwhelming. 

Focus on both the techniques and concepts equally. I don&#039;t have enough free time to write long technical tutorials, so I tend to write mostly about design from a philosophical point of view. There are a lot of good resource sites on improving your technical skill, such as nettuts.com or psdtuts.com and many more. 

Even though online resources are vast, I still recommend you to buy good books. Rarely a site is as good as a well written book in terms of comprehensiveness. 

For Photoshop, the best book is &lt;a href=&quot;http://www.amazon.com/Photoshop-CS2-Wow-Book-WOW/dp/0321213459/ref=pd_bbs_sr_1?ie=UTF8&amp;s=books&amp;qid=1224038636&amp;sr=8-1&quot; rel=&quot;external&quot; rel=&quot;nofollow&quot;&gt;Photoshop CS2 WoW&lt;/a&gt;. The book is printed in full color, each tutorial is explained in details.

Also, get &lt;a href=&quot;http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=sr_1_1?ie=UTF8&amp;s=books&amp;qid=1224038738&amp;sr=1-1&quot; rel=&quot;external&quot; rel=&quot;nofollow&quot;&gt;Don&#039;t Make Me Think&lt;/a&gt;, it&#039;s one of the best books ever written on UI design. 

There are a lot of well designed sites out there. Observe what makes them good. But be careful not to make inspirations as a design crutch.

You can also find inspirations in other medias as well, such as print, photography, industrial design and fine art etc. The more you get into it, you&#039;ll find similarities between all these fields.

Good luck on your journey into web design. I think it&#039;s very fun and rewarding.</description>
		<content:encoded><![CDATA[<p>Frank, the web is quite complex these days. There are a lot of things for a new comer to learn than when I started. So it may seem overwhelming. </p>
<p>Focus on both the techniques and concepts equally. I don&#8217;t have enough free time to write long technical tutorials, so I tend to write mostly about design from a philosophical point of view. There are a lot of good resource sites on improving your technical skill, such as nettuts.com or psdtuts.com and many more. </p>
<p>Even though online resources are vast, I still recommend you to buy good books. Rarely a site is as good as a well written book in terms of comprehensiveness. </p>
<p>For Photoshop, the best book is <a href="http://www.amazon.com/Photoshop-CS2-Wow-Book-WOW/dp/0321213459/ref=pd_bbs_sr_1?ie=UTF8&#038;s=books&#038;qid=1224038636&#038;sr=8-1" rel="external" rel="nofollow">Photoshop CS2 WoW</a>. The book is printed in full color, each tutorial is explained in details.</p>
<p>Also, get <a href="http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=sr_1_1?ie=UTF8&#038;s=books&#038;qid=1224038738&#038;sr=1-1" rel="external" rel="nofollow">Don&#8217;t Make Me Think</a>, it&#8217;s one of the best books ever written on UI design. </p>
<p>There are a lot of well designed sites out there. Observe what makes them good. But be careful not to make inspirations as a design crutch.</p>
<p>You can also find inspirations in other medias as well, such as print, photography, industrial design and fine art etc. The more you get into it, you&#8217;ll find similarities between all these fields.</p>
<p>Good luck on your journey into web design. I think it&#8217;s very fun and rewarding.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Frank Lee</title>
		<link>http://www.8164.org/devil-is-in-the-details/comment-page-1/#comment-242</link>
		<dc:creator>Frank Lee</dc:creator>
		<pubDate>Tue, 14 Oct 2008 23:37:20 +0000</pubDate>
		<guid isPermaLink="false">http://www.8164.org/?p=636#comment-242</guid>
		<description>I wish my professors could explain it the way you just did, seriously, thanks alot.  It&#039;s hard when you&#039;re first learning about web design to put all of the pieces of what makes a good site together, but your blogs really help.  I missed a class going back so I could read all of them, but I think I learned more from  you anyway.  Can&#039;t wait to see what you talk about next.</description>
		<content:encoded><![CDATA[<p>I wish my professors could explain it the way you just did, seriously, thanks alot.  It&#8217;s hard when you&#8217;re first learning about web design to put all of the pieces of what makes a good site together, but your blogs really help.  I missed a class going back so I could read all of them, but I think I learned more from  you anyway.  Can&#8217;t wait to see what you talk about next.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Jin</title>
		<link>http://www.8164.org/devil-is-in-the-details/comment-page-1/#comment-241</link>
		<dc:creator>Jin</dc:creator>
		<pubDate>Tue, 14 Oct 2008 22:15:30 +0000</pubDate>
		<guid isPermaLink="false">http://www.8164.org/?p=636#comment-241</guid>
		<description>@Frank,

&lt;blockquote&gt;It seems for me, when it comes to details, it’s hard not to overdo it and become a perfectionist.&lt;/blockquote&gt;

IMHO, the term &quot;perfection&quot; is rather subjective. In my experience, I find trying to be a perfectionist really hinders more than it helps. What&#039;s &quot;perfect&quot; to you may be interpreted differently by others; also what&#039;s &quot;perfect&quot; to you may be different next week when you revisit your original design. But I think ultimately, what you&#039;re saying is, to strive for as much excellence as you can, not necessarily &quot;perfection,&quot; which is what every designer should aim for.

One way that works well for me is when I find myself spending too much time on details, I take a step back. I look at the details I&#039;ve been working on and see if they serve the purpose of the overall theme. I wrote an &lt;a href=&quot;http://www.8164.org/serpent-feet/&quot; rel=&quot;nofollow&quot;&gt;article&lt;/a&gt; on not over doing it not too long ago, also there are couple blogs published recently on this topic as well: &lt;a href=&quot;http://www.usabilitypost.com/2008/10/08/fighting-perfection/&quot; rel=&quot;external&quot; rel=&quot;nofollow&quot;&gt;Fight Perfection&lt;/a&gt; and &lt;a href=&quot;http://www.dailyblogtips.com/perfectionism-is-bad-for-you/&quot; rel=&quot;external&quot; rel=&quot;nofollow&quot;&gt;Perfection is Bad for You&lt;/a&gt;.


What constitutes good details in web design? I can&#039;t really give you specific examples that are true to all web sites, since each site is different in nature. However, on a conceptual level, each site design process is similar. Establishing an efficient design process is very important, because it helps you to identify what are needed details, and what’s just mere noise.

I typically try to establish a clear understanding what the site is set out to do: its core, basically. Then I come up with visual, structural and interactive solutions to achieve those goals. At this point, I don&#039;t think about details like typography, colors, graphic effects, etc. I just sketch out a wire-frame mockup, with the bare minimal essentials, not &quot;features.&quot; 

Once I think the site design is sound from a usability standpoint, then I focus on the visuals. 

Enough with the fluff, here is something more substantial:

Take my site for example: its primary goal is to let people read and comment my blog articles. Its secondary goal is to reflect a personality (branding, if you will). The emphasis I wanted was on each individual article, therefore I only display one at a time. I give the article title an extra big type so it will grab people&#039;s attention right away. The excerpt box has a clear visual cue to separate the title and body, and it also serves as a teaser or hint to what the article is about. The article body and comment section have high contrast in colors, so visitors know clearly when the article ends and when the comment section begins. Within the comment section, my (author) comments are further distinguished from regular comments with different link and background color.

Next for navigations: To achieve a basic navigation, all you need is a link to an archive page that contains all the past posts. But that&#039;s not very user friendly, so I added &quot;previous&quot; and &quot;next&quot; article links. I could go on and add listings of &quot;past N posts,&quot; &quot;most active commenters,&quot; &quot;last N comments,&quot; &quot;most popular posts,&quot; etc. To me they&#039;re just features that distract people from reading the article. They may work for other sites, but not mine. It&#039;s also the reason why I fix my navigation bar on the bottom. 

For the secondary goal: to reflect a personality. At this point, the layout is already quite unique to reflect my own taste, which is a simplistic design. However, it looks plain and boring. The challenge is to add graphical elements without taking away from the primary goal. I thought about creating ONE common graphical template for the entire site, but what purpose would it serve? When it comes to a blog site, visuals have very high diminishing return. No matter how impressive I&#039;d make it, people won&#039;t see it the 100th time they visit the site. Content is king on a blog site, that&#039;s why I focus on each article. I decided to use a different background photo or color that are appropriate for each blog entry, this way the visual becomes part of the content. Not only do they compliment each other well, but also add freshness to the site.

Those are the details I focus on first, because they&#039;re important. Here are some that I do care about, but less. That&#039;s why they&#039;re still not fixed yet.

&lt;ul&gt;
&lt;li&gt;The top and bottom padding doesn&#039;t match the left padding in the excerpt box.&lt;/li&gt;
&lt;li&gt;Print.css still has glitches with Internet Explorer.&lt;/li&gt;
&lt;li&gt;The RSS icon on the footer is ugly.&lt;/li&gt;
&lt;li&gt;Archive page&#039;s formatting isn&#039;t done.&lt;/li&gt;
&lt;li&gt;Text anti-aliasing issue with IE7.&lt;/li&gt;
&lt;li&gt;Previous link not showing up on frontpage(WordPress issue).&lt;/li&gt;
&lt;li&gt;Overall typography needs tweeking.&lt;/li&gt;
&lt;/ul&gt;

The list goes on. The point is, none of them would affect how people read the articles too much, therefore they can wait. If I spent more time fixing everything to make it &quot;perfect,&quot; chances are my blog would still have 0 posts right now.

I&#039;m not sure if I answered your question, but I think it&#039;s important to show you a design thought process. Keep in mind, it&#039;s MY process. In this particular example, it works for my site. In reality, making a site for a client, all the little bugs should be fixed, but you need to set the priorities.</description>
		<content:encoded><![CDATA[<p>@Frank,</p>
<blockquote><p>It seems for me, when it comes to details, it’s hard not to overdo it and become a perfectionist.</p></blockquote>
<p>IMHO, the term &#8220;perfection&#8221; is rather subjective. In my experience, I find trying to be a perfectionist really hinders more than it helps. What&#8217;s &#8220;perfect&#8221; to you may be interpreted differently by others; also what&#8217;s &#8220;perfect&#8221; to you may be different next week when you revisit your original design. But I think ultimately, what you&#8217;re saying is, to strive for as much excellence as you can, not necessarily &#8220;perfection,&#8221; which is what every designer should aim for.</p>
<p>One way that works well for me is when I find myself spending too much time on details, I take a step back. I look at the details I&#8217;ve been working on and see if they serve the purpose of the overall theme. I wrote an <a href="http://www.8164.org/serpent-feet/" rel="nofollow">article</a> on not over doing it not too long ago, also there are couple blogs published recently on this topic as well: <a href="http://www.usabilitypost.com/2008/10/08/fighting-perfection/" rel="external" rel="nofollow">Fight Perfection</a> and <a href="http://www.dailyblogtips.com/perfectionism-is-bad-for-you/" rel="external" rel="nofollow">Perfection is Bad for You</a>.</p>
<p>What constitutes good details in web design? I can&#8217;t really give you specific examples that are true to all web sites, since each site is different in nature. However, on a conceptual level, each site design process is similar. Establishing an efficient design process is very important, because it helps you to identify what are needed details, and what’s just mere noise.</p>
<p>I typically try to establish a clear understanding what the site is set out to do: its core, basically. Then I come up with visual, structural and interactive solutions to achieve those goals. At this point, I don&#8217;t think about details like typography, colors, graphic effects, etc. I just sketch out a wire-frame mockup, with the bare minimal essentials, not &#8220;features.&#8221; </p>
<p>Once I think the site design is sound from a usability standpoint, then I focus on the visuals. </p>
<p>Enough with the fluff, here is something more substantial:</p>
<p>Take my site for example: its primary goal is to let people read and comment my blog articles. Its secondary goal is to reflect a personality (branding, if you will). The emphasis I wanted was on each individual article, therefore I only display one at a time. I give the article title an extra big type so it will grab people&#8217;s attention right away. The excerpt box has a clear visual cue to separate the title and body, and it also serves as a teaser or hint to what the article is about. The article body and comment section have high contrast in colors, so visitors know clearly when the article ends and when the comment section begins. Within the comment section, my (author) comments are further distinguished from regular comments with different link and background color.</p>
<p>Next for navigations: To achieve a basic navigation, all you need is a link to an archive page that contains all the past posts. But that&#8217;s not very user friendly, so I added &#8220;previous&#8221; and &#8220;next&#8221; article links. I could go on and add listings of &#8220;past N posts,&#8221; &#8220;most active commenters,&#8221; &#8220;last N comments,&#8221; &#8220;most popular posts,&#8221; etc. To me they&#8217;re just features that distract people from reading the article. They may work for other sites, but not mine. It&#8217;s also the reason why I fix my navigation bar on the bottom. </p>
<p>For the secondary goal: to reflect a personality. At this point, the layout is already quite unique to reflect my own taste, which is a simplistic design. However, it looks plain and boring. The challenge is to add graphical elements without taking away from the primary goal. I thought about creating ONE common graphical template for the entire site, but what purpose would it serve? When it comes to a blog site, visuals have very high diminishing return. No matter how impressive I&#8217;d make it, people won&#8217;t see it the 100th time they visit the site. Content is king on a blog site, that&#8217;s why I focus on each article. I decided to use a different background photo or color that are appropriate for each blog entry, this way the visual becomes part of the content. Not only do they compliment each other well, but also add freshness to the site.</p>
<p>Those are the details I focus on first, because they&#8217;re important. Here are some that I do care about, but less. That&#8217;s why they&#8217;re still not fixed yet.</p>
<ul>
<li>The top and bottom padding doesn&#8217;t match the left padding in the excerpt box.</li>
<li>Print.css still has glitches with Internet Explorer.</li>
<li>The RSS icon on the footer is ugly.</li>
<li>Archive page&#8217;s formatting isn&#8217;t done.</li>
<li>Text anti-aliasing issue with IE7.</li>
<li>Previous link not showing up on frontpage(WordPress issue).</li>
<li>Overall typography needs tweeking.</li>
</ul>
<p>The list goes on. The point is, none of them would affect how people read the articles too much, therefore they can wait. If I spent more time fixing everything to make it &#8220;perfect,&#8221; chances are my blog would still have 0 posts right now.</p>
<p>I&#8217;m not sure if I answered your question, but I think it&#8217;s important to show you a design thought process. Keep in mind, it&#8217;s MY process. In this particular example, it works for my site. In reality, making a site for a client, all the little bugs should be fixed, but you need to set the priorities.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Frank Lee</title>
		<link>http://www.8164.org/devil-is-in-the-details/comment-page-1/#comment-240</link>
		<dc:creator>Frank Lee</dc:creator>
		<pubDate>Tue, 14 Oct 2008 16:26:25 +0000</pubDate>
		<guid isPermaLink="false">http://www.8164.org/?p=636#comment-240</guid>
		<description>Jin,  I think this is a good start on paying attention to details, but I&#039;d like to know more of your ideas of what constitutes good details in web design.  I&#039;m getting my Associate of Applied Science in Web Design now, and this is something my professors have brought up a lot.  
It seems for me, when it comes to details, it&#039;s hard not to overdo it and become a perfectionist.</description>
		<content:encoded><![CDATA[<p>Jin,  I think this is a good start on paying attention to details, but I&#8217;d like to know more of your ideas of what constitutes good details in web design.  I&#8217;m getting my Associate of Applied Science in Web Design now, and this is something my professors have brought up a lot.<br />
It seems for me, when it comes to details, it&#8217;s hard not to overdo it and become a perfectionist.</p>
]]></content:encoded>
	</item>
</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->