<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	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/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Web Designer Notebook &#187; Design</title>
	<atom:link href="http://webdesignernotebook.com/category/design/feed/" rel="self" type="application/rss+xml" />
	<link>http://webdesignernotebook.com</link>
	<description>Web Designer Notebook is a blog for web designers featuring topics like CSS, HTML and Wordpress, tutorials, reviews and inspiration.</description>
	<lastBuildDate>Mon, 06 Sep 2010 19:28:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=abc</generator>
		<item>
		<title>Do designers need a personal style?</title>
		<link>http://webdesignernotebook.com/design/do-designers-need-a-personal-style/</link>
		<comments>http://webdesignernotebook.com/design/do-designers-need-a-personal-style/#comments</comments>
		<pubDate>Tue, 02 Feb 2010 23:27:13 +0000</pubDate>
		<dc:creator>Inayaili León</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Project 52]]></category>

		<guid isPermaLink="false">http://webdesignernotebook.com/?p=1189</guid>
		<description><![CDATA[A post by Darren Hoyt caught my eye the other day (among the hundreds of unread posts on my RSS reader…) where he asked whether designers needed a personal style or not. I wrote up a quick comment at the time, but I feel the question deserves a little more discussion — specially because no-one [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.darrenhoyt.com/2010/01/07/design-versatility/" rel="nofollow" >A post by Darren Hoyt</a> caught my eye the other day (among the hundreds of unread posts on my RSS reader…) where he asked whether designers needed a personal style or not. I wrote up a quick comment at the time, but I feel the question deserves a little more discussion — specially because no-one seems to have a definite answer (my bet is that there isn&#8217;t one).</p>
<p><span id="more-1189"></span></p>
<h3>The question</h3>
<p>So Darren asked:</p>
<blockquote cite="http://www.darrenhoyt.com/2010/01/07/design-versatility/">
<p>Is it more attractive when designers can…<br />
a) design like a chameleon in any style or genre appropriate to the project, or<br />
b) design over a period of years in a consistent, signature style</p>
</blockquote>
<p>And, this was (part of) my comment:</p>
<blockquote cite="http://www.darrenhoyt.com/2010/01/07/design-versatility/#comment-29854">
<p>I feel that <strong>the best designers usually have their own style</strong>, even if it’s quite subtle and hardly noticeable in some instances — there is always something of their own that they added to the work. And when I don’t immediately recognize one of their work, when I finally look at it, I will usually say “Ah, now I see it.”</p>
<p>While artists have usually a more evident personal style, <strong>designers go through their professionals paths adapting their work</strong> to the requirements. Artists don’t do that. But <strong>we both evolve</strong> throughout the years and, in my opinion, we both walk towards a style, or a way of working even, that is adapted to ourselves.</p>
</blockquote>
<h3>A or B?</h3>
<p>Basically, my opinion is still the same, I&#8217;d just like to elaborate on it a little more.</p>
<p>I certainly admire a designer that can completely transform their style for every project they work on, but <strong>I don&#8217;t think that happens very often</strong>, and I can&#8217;t even think of an example of a great web designer that does that, to illustrate this thought.</p>
<p>What I notice often though, is great web designers that <em>do</em> have a personal style, but that can adapt it for each project. It&#8217;s the details, or <strong>the way each project is handled</strong>. I like to think it&#8217;s adding a bit of their own selves to each thing they design.</p>
<p>Here are a couple of examples to illustrate my point.</p>
<p><strong><a href="http://www.31three.com/" rel="nofollow" >Jesse Bennett-Chamberlain</a></strong> is constantly creating stunning pieces of work and that doesn&#8217;t mean all his work looks the same. But they do come together to produce a solid portfolio that you can look at and say it&#8217;s definitely Jesse&#8217;s.</p>
<div id="attachment_1194" class="wp-caption alignnone" style="width: 610px"><img src="http://webdesignernotebook.com/wp_livesite/wp-content/uploads/2010/01/port_mwb.jpg" alt="" title="Jesse Bennett-Chamberlain&#039;s Mobile Web Design" width="600" height="516" class="size-full wp-image-1194" /><p class="wp-caption-text">Jesse Bennett-Chamberlain's Mobile Web Design</p></div>
<div id="attachment_1195" class="wp-caption alignnone" style="width: 610px"><img src="http://webdesignernotebook.com/wp_livesite/wp-content/uploads/2010/01/port_cm1.jpg" alt="" title="Jesse Bennett-Chamberlain&#039;s Campaign Monitor design" width="600" height="603" class="size-full wp-image-1195" /><p class="wp-caption-text">Jesse Bennett-Chamberlain's Campaign Monitor design</p></div>
<p>Another example is <a href="http://mikeprecious.com/" rel="nofollow" ><strong>Mike Precious</strong></a>, whose work is, like Jesse&#8217;s, stunning. Every single piece on his portfolio makes me want to just stare at it. The way he treats photography and how his projects have a deep, rich texture (not literally) is something that is seen across all of his work. And that doesn&#8217;t mean the end result is a boring &#8220;everything looks the same&#8221; portfolio.</p>
<div id="attachment_1196" class="wp-caption alignnone" style="width: 610px"><img src="http://webdesignernotebook.com/wp_livesite/wp-content/uploads/2010/01/wb-gbb.jpg" alt="" title="Mike Precious&#039; Green Business Bureau design" width="600" height="653" class="size-full wp-image-1196" /><p class="wp-caption-text">Mike Precious' Green Business Bureau design</p></div>
<div id="attachment_1197" class="wp-caption alignnone" style="width: 610px"><img src="http://webdesignernotebook.com/wp_livesite/wp-content/uploads/2010/01/wb-marriagetoday.jpg" alt="" title="Mike Precious&#039; Marriage Today design" width="600" height="717" class="size-full wp-image-1197" /><p class="wp-caption-text">Mike Precious' Marriage Today design</p></div>
<p>There are other designers that fit the description. Take, for instance, <a href="http://www.ndesign-studio.com/" rel="nofollow" >Nick La</a>, <a href="http://massiveblue.com/" rel="nofollow" >Sam Brown</a>, or <a href="http://madebyelephant.com/" rel="nofollow" >Tim Van Damme</a>. You get my point, right?</p>
<p>It doesn&#8217;t mean they use the same elements all the time, or the same special effects. It&#8217;s something you notice when you look at the overall design, <strong>it&#8217;s how you feel</strong> when you use the interfaces they create.</p>
<h3>Not artists</h3>
<p>I guess it&#8217;s safe to say <strong>designers are not artists</strong>, in a sense that a painter is an artist, or a musician is an artist. We have conventions to follow, briefs to guide us, users&#8217; feedback, clients to report to, etc.</p>
<p>(Actually, painters often had clients to report to and briefs to follow. A <a href="http://www.nationalgallery.org.uk/whats-on/calendar/guided-tours-morning/382040" rel="nofollow" >guided tour around the National Gallery</a> will let you know that that happened more often than not. But when a painting is finished, it&#8217;s finished forever.)</p>
<p>So, we don&#8217;t usually create work because we really only need to let our emotions flow, to show to the world our vision. Our work is going to be used and abused by others. However, that doesn&#8217;t impede us from <strong>adding a bit of ourselves to our work</strong> or to be creative and original.</p>
<h3>Adapting to a brief</h3>
<p>It&#8217;s incredibly hard to keep coming up with exciting new designs every month, and I believe the process of creating them is even more important then the style that is required to create them. And even if we have to adapt our creativity to whatever the brief requires, our process of working will invariably stay the same, or be very similar between projects. That may mean we always come up with something completely new and amazing, that was never seen before — and the fact that we <strong>do</strong> come up with that all the time may actually be the <strong>constant</strong> in our work.</p>
<p>One of the things that sometimes strikes me as unfair as a designer is how we are required to have a logical explanation for whatever it is we design, for every single detail, colour, position of the elements on a page, etc.</p>
<p>&#8220;Where is the theory that proves that placing this there is correct? Where is the study behind it? Why are you using blue?&#8221;</p>
<p>In my opinion, there is always a place for subjectivity, for just following your instinct to know what&#8217;s right. <strong>Sometimes you just feel that something <em>is</em> right</strong>, and there is no logic to it. And maybe that little bit you add is what creates your personal style.</p>
<p>Pardon me, I digress.</p>
<h3>Your thoughts</h3>
<p>So what do you think? Do you feel there is one correct answer to the question? Do you consider yourself a chameleon or would you rather be recognized for having a strong personal style?</p>
]]></content:encoded>
			<wfw:commentRss>http://webdesignernotebook.com/design/do-designers-need-a-personal-style/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>The Tangibility Of Websites, Or Something Like That</title>
		<link>http://webdesignernotebook.com/design/the-tangibility-of-websites-or-something-like-that/</link>
		<comments>http://webdesignernotebook.com/design/the-tangibility-of-websites-or-something-like-that/#comments</comments>
		<pubDate>Mon, 30 Nov 2009 13:17:29 +0000</pubDate>
		<dc:creator>Inayaili León</dc:creator>
				<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://webdesignernotebook.com/?p=1081</guid>
		<description><![CDATA[Last night I watched Objectified, a good film about the design of everyday things. In the film, the matter of durability and sustainability in design is mentioned a lot, and that led me to think of how those ideas translate to web design. Users are not owners One of the main difference between an object [...]]]></description>
			<content:encoded><![CDATA[<p>Last night I watched <a href="http://www.objectifiedfilm.com/" rel="nofollow" >Objectified</a>, a good film about the design of everyday things. In the film, the matter of durability and sustainability in design is mentioned a lot, and that led me to think of how those ideas translate to web design.</p>
<p><span id="more-1081"></span></p>
<h3>Users are not owners</h3>
<p>One of the main difference between an object and a website is the fact that you, as a user (I don&#8217;t particularly like this word, but it is used greatly within web design), don&#8217;t feel you actually <em>own</em> a site. You may make it feel more <em>like you</em>—by creating profiles and customising parts of it—but you can&#8217;t keep it somewhere, protect it, or destroy it. A user doesn&#8217;t feel like he can fundamentally change the object.</p>
<p>This may mean that there is no true engagement with the person, the user, or visitor. At least not on the same level as objects.</p>
<p>Having said this, in some instances the ability to change an object or use it for other things that it wasn&#8217;t supposed to (like using a book as a laptop stand) <em>does</em> translate to web design. For example, <strong>the famous case of Twitter</strong> and the replies or retweets. That functionality was added to Twitter by its users, it wasn&#8217;t in the original object.</p>
<h3>The durability concern</h3>
<p>In the movie, durability was addressed as a great concern for industrial designers: <strong>what happens to an object once it&#8217;s thrown away?</strong> Should we be making durable objects that will last and that our children will one day inherit? Or should we make, instead, even <em>less</em> durable objects that are clearly disposable but that are much easier to degrade?</p>
<p>I don&#8217;t think this question is addressed at all in web design. And to be honest, why should it? And the question of inheritance can also be related to the ownership one: how do we pass it on, if we don&#8217;t actually <em>own</em> it?</p>
<h3>The endless iteration process</h3>
<p>The truth is that both object and websites go through <strong>iterations that supposedly make them better</strong>. But whereas the iterations of objects require for new objects to be produced, iterations of websites just mean new files are uploaded (making <a href="http://www.archive.org/web/web.php" rel="nofollow" >Archive.org</a> the digital equivalent of the landfill). I&#8217;m sure many industrial designers would love that their flawed works could be as easily updated as ours!</p>
<p>If you think about it, is there actually any website that you can look at and think &#8220;this is perfect as it is, and it should never change, I want it to be like this forever and keep it&#8221;? There <em>are</em> objects. So does this mean that <strong>there are no perfectly designed websites</strong>, that get better with age, that fit better after years of use? Or should we look at <em>details</em> in web design that <em>are</em> like this, instead of whole website? Like putting the logo on the top left corner.</p>
<p>And how about <strong>sustainability</strong>—another big word frequently mentioned throughout the movie? Is it something we should be addressing more? And how?</p>
<h3>No point</h3>
<p>My question is: <strong>should we care at all?</strong> Am I talking about two completely distinctive things that by no means should be compared? The things is, we try to translate so many other characteristics of tangible design to web design, so why not try and translate these values more often too?</p>
<p>There is absolutely no point to this article. These are just some thoughts that came to my mind whilst watching the movie, and this was the easiest way of not losing those thoughts.</p>
<p>Even so, I&#8217;d like to know <em>your</em> thoughts on this: am I just being an idiot trying to compare two subjects that shouldn&#8217;t be compared like this? I&#8217;d like to hear your thoughts.</p>
]]></content:encoded>
			<wfw:commentRss>http://webdesignernotebook.com/design/the-tangibility-of-websites-or-something-like-that/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>From Print to Web: Avoiding Common Design Mistakes</title>
		<link>http://webdesignernotebook.com/work-method/from-print-to-web-common-design-mistakes/</link>
		<comments>http://webdesignernotebook.com/work-method/from-print-to-web-common-design-mistakes/#comments</comments>
		<pubDate>Tue, 14 Jul 2009 08:30:46 +0000</pubDate>
		<dc:creator>Inayaili León</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Work Method]]></category>

		<guid isPermaLink="false">http://webdesignernotebook.com/?p=428</guid>
		<description><![CDATA[Moving from print to the web is not as easy as it may seem. I had to do it myself a few years back, so I can speak from my personal experience of the process and also from my experiences coding designs that have been created by print designers that were new to the web. [...]]]></description>
			<content:encoded><![CDATA[<p>Moving from print to the web is not as easy as it may seem. I had to do it myself a few years back, so I can speak from my personal experience of the process and also from my experiences coding designs that have been created by print designers that were new to the web.</p>
<p><span id="more-428"></span></p>
<h3>The value of experience</h3>
<p>Experience will help and probably <strong>the first few tries will not be without their problems</strong>, no matter how hard you try. But there are some mistakes I usually spot on web designs that have been created by print designers or designers that have no knowledge of coding, and that, if you&#8217;re in that position, you can easily avoid.</p>
<h3>Learning how to code</h3>
<p>When you&#8217;re handing over a design to be coded by someone else with at least some experience, they will know in a second if the designer has any idea of how things work on the web, or on screen.</p>
<p><strong>Learning HTML and CSS is a must</strong>, not an option, if your intentions are to be truly great at what you do. It will make it easier for you and for the developers you&#8217;re working with. It doesn&#8217;t mean you have to become a front-end guru, but a basic knowledge of how things work will be to your advantage.</p>
<p>But don&#8217;t get me wrong! It&#8217;s good that there are no restrictions&mdash;sometimes designing a layout can become a very rational process if you know you will have to code it later on, but <strong>it&#8217;s wise to know how things work at a minimum level</strong>.</p>
<p>Here is a list of a few things that you should pay attention to when designing for the web: </p>
<h3>1. Proportions</h3>
<p><img src="http://webdesignernotebook.com/wp_livesite/wp-content/uploads/2009/07/78836687_a9258802c1.jpg" alt="Closed" width="500" height="200" class="alignnone size-full wp-image-696" /><br /><span class="photoInfo-large">Photo by <a href="http://www.flickr.com/photos/97619734@N00/78836687/" rel="nofollow" >caitlinburke</a></span></p>
<p>This one is easy! When you are creating a new layout, <strong>pay attention to the size of the elements</strong> and think of how and whether they will fit in the page. Are you creating buttons that are too big compared with the rest of the page? What happens when you have more navigation items than you designed, will they fit the design? How will they wrap?</p>
<p>It makes it easier to design with the units set to <strong>pixels</strong>, because that will be the primary measurement unit on the web. Pay attention that you are not designing a layout that has 20 centimeters, and if you really must, how will it translate to the screen?</p>
<h3>2. Organize your file</h3>
<p>If you&#8217;re handing out Photoshop, Illustrator, or any other layered type files, make sure that the layers are well organized. It doesn&#8217;t have to be OCD-organized, but at least separate the big blocks that make up your site in folders and name key layers.</p>
<p>Here is an example of a well-organized Photoshop file:</p>
<p><img src="http://webdesignernotebook.com/wp_livesite/wp-content/uploads/2009/07/photoshop-layers.jpg" alt="photoshop-layers" width="219" height="220" class="alignnone size-full wp-image-708" /></p>
<h3>3. Too many effects and details</h3>
<p>I&#8217;m referring to details that will <strong>not add value to the layout</strong> and will just make it harder to code. A rounded border with a coloured gradient border, a complex background that would require multiple images to reproduce and a dropshadow on the same element may be a bit too much (although you never know, right?)!</p>
<p>Your designs don&#8217;t have to be all shiny and cute to be beautiful and good.</p>
<h3>4. Use fonts that are web-safe</h3>
<p><img src="http://webdesignernotebook.com/wp_livesite/wp-content/uploads/2009/07/814913659_32dfd274c5_o.jpg" alt="Red-Type" width="500" height="200" class="alignnone size-full wp-image-700" /><br /><span class="photoInfo-large">Photo by <a href="http://www.flickr.com/photos/40861420@N00/814913659/" rel="nofollow" >bebop717</a></span></p>
<p>Opinions divide on this matter. Some say we should experiment with type, others that we must adapt to the medium and work with the fonts we have at our display. I would say I agree with both, with limits: we should definitely experiment, but in some cases, we have to play it safe.</p>
<p>In those cases, make sure that long chunks of text or text that needs to be flexible uses web-safe fonts. </p>
<p>Techniques can be used to use almost any font now, but sometimes that will add time to development that may not be suitable to a particular project. So the best thing is actually talk to the developers upfront whether that option is viable.</p>
<h3>5. Not following some conventions</h3>
<p><img src="http://webdesignernotebook.com/wp_livesite/wp-content/uploads/2009/07/2532368014_12eda4c44d_o.gif" alt="Doc martens punk" width="500" height="200" class="alignnone size-full wp-image-698" /><br /><span class="photoInfo-large">Photo by <a href="http://www.flickr.com/photos/21090801@N05/2532368014/" rel="nofollow" >dmmartens666</a></span></p>
<p>If you plan on designing a website that is intuitive to use and doesn&#8217;t get in the way of visitors and potential clients, there are some conventions you should at least try to follow. <strong>Most conventions exist for a very good reason</strong>: they make our lives easier, so we don&#8217;t have to analyze every single action we take in our day-to-day lives.</p>
<p>So be sure that if you&#8217;re breaking a convention, it&#8217;s because it actually feels right for your design, and not just because you desperately want to be different. There&#8217;s no point in reinventing the wheel.</p>
<h3>6. Not using grids or properly align elements</h3>
<p><img src="http://webdesignernotebook.com/wp_livesite/wp-content/uploads/2009/07/2970205352_17222d04bf.jpg" alt="Behind bars" width="500" height="199" class="alignnone size-full wp-image-703" /><br /><span class="photoInfo-large">Photo by <a href="http://www.flickr.com/photos/27847809@N03/2970205352/" rel="nofollow" >bollaeszter</a></span></p>
<p>Using grids is one of the best advice one can give you. The website will look <strong>more balanced</strong> and you won&#8217;t feel lost with the sight of a lot of stuff just floating around the screen and not knowing what to do with them or where to place them.</p>
<p>But don&#8217;t forget, the grid is also there to be broken! :)</p>
<h3>7. Use spacing carefully</h3>
<p><img src="http://webdesignernotebook.com/wp_livesite/wp-content/uploads/2009/07/2809069739_d0a8631256.jpg" alt="try to fit in" width="500" height="200" class="alignnone size-full wp-image-728" /><br /><span class="photoInfo-large">Photo by <a href="http://www.flickr.com/photos/64746955@N00/2809069739/" rel="nofollow" >Adam_T4</a></span></p>
<p>You don&#8217;t need to go overboard with this one, but pay attention to spacing when you&#8217;re designing websites. Make sure everything has enough room to &#8220;breathe&#8221;, that the design isn&#8217;t crammed and that <strong>spacing is consistent across the layout</strong> (padding, margins, borders, etc.).</p>
<h3>8. Write down notes</h3>
<p><img src="http://webdesignernotebook.com/wp_livesite/wp-content/uploads/2009/07/132361609_51b0c6ff77.jpg" alt="Magnus Christensson&#39;s notes" width="500" height="200" class="alignnone size-full wp-image-704" /><br /><span class="photoInfo-large">Photo by <a href="http://www.flickr.com/photos/47854931@N00/132361609/" rel="nofollow" >Jacob Bøtter</a></span></p>
<p>You don&#8217;t have to write a massive report about your designs when handing them down to someone else. Actually, if you do, you will probably be cursed at. I&#8217;m talking about small notes that you can write with pen and paper while you are designing and then put on a text file to accompany your layouts.</p>
<p>You can be as thorough as to giving the exact colour codes you used, or as scarce as just mentioning whether it is a fluid or a fixed layout&ndash;everything helps!</p>
<h3>Conclusion</h3>
<p>To sum things up, if you have little or no experience in designing for the web, the best thing you can do is take a look at how other designers do it, <strong>pay attention to websites you like using</strong> and that you think are good, and reflect on why you like them? What are the common features of a good design, what is it that you can improve in your work just by analysing others&#8217; work and experimenting?</p>
<p>Did you have any problems when you stared designing for the web? What were your biggest challenges and how did you overcome them? Leave you tips in the comments!</p>
<h3>Further reading</h3>
<ul>
<li><a href="http://sixrevisions.com/web_design/why-designers-should-learn-how-to-code/" rel="nofollow" >Why Designers Should Learn How to Code</a></li>
<li><a href="http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/" rel="nofollow" >9 Common Usability Mistakes In Web Design</a></li>
<li><a href="http://blog.themeforest.net/tutorials/common-mistakes-in-web-design/" rel="nofollow" >Common Mistakes in Web Design</a></li>
<li><a href="http://www.useit.com/alertbox/9605.html" rel="nofollow" >Top Ten Mistakes in Web Design</a></li>
<li><a href="http://www.wakeuplater.com/website-building/8-web-design-mistakes-that-developers-make.aspx" rel="nofollow" >8 Web Design Mistakes That Developers Make</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://webdesignernotebook.com/work-method/from-print-to-web-common-design-mistakes/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
