<?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>PayPerTwit &#187; layout</title>
	<atom:link href="http://paypertwit.com/tag/layout/feed" rel="self" type="application/rss+xml" />
	<link>http://paypertwit.com</link>
	<description>Where Twitter meets business</description>
	<lastBuildDate>Tue, 03 Nov 2009 15:42:45 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=abc</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Creating your startup from scratch. Part 3 &#8211; Design, resources &amp; Inspiration</title>
		<link>http://paypertwit.com/creating-your-startup-from-scratch-part-3-design-resources-inspiration</link>
		<comments>http://paypertwit.com/creating-your-startup-from-scratch-part-3-design-resources-inspiration#comments</comments>
		<pubDate>Tue, 12 May 2009 14:59:47 +0000</pubDate>
		<dc:creator>Alex Puig</dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[business]]></category>
		<category><![CDATA[color palette]]></category>
		<category><![CDATA[css framework]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[inspiration]]></category>
		<category><![CDATA[layout]]></category>
		<category><![CDATA[scratch]]></category>
		<category><![CDATA[startup]]></category>
		<category><![CDATA[typography]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://paypertwit.com/?p=60</guid>
		<description><![CDATA[Now we have our idea, the domain name and the programming language. The next step is creating a design. I&#8217;ll try to go through the different parts of a good design.
I&#8217;m assuming you are a brave entrepreneur trying to launch your startup, but remember that help is always needed, design is not science, is an [...]]]></description>
			<content:encoded><![CDATA[<p>Now we have our idea, the domain name and the programming language. The next step is creating a design. I&#8217;ll try to go through the different parts of a good design.</p>
<p>I&#8217;m assuming you are a brave entrepreneur trying to launch your startup, but remember that help is always needed, design is not science, is an art and probably you are not an artist. Ask for help. In this early stage of the project there&#8217;s no budget to hire a designer, I know, but I strongly recommend it anyway.</p>
<h3>The message</h3>
<p>First ask yourself about your site, what are you trying to tell? who are you willing to convince? How can you explain your idea in a single web page (your home) in less than 10 secs? Because that&#8217;s the time you have to convince your visitor to stay. Your home must tell all of this and be attractive at the same time.</p>
<h3>Choose a color palette</h3>
<p>How many colors do you need? Depending on the layout, the number of columns, the look you want the site to have and the feeling your home should transmit. Choose your site colors wisely (messages, columns, logo, background&#8230;). You better visit lots of websites for inspiration and also use this applications online:</p>
<ul>
<li>http://kuler.adobe.com/#create/fromacolor<a href="http://www.colorblender.com/"></a></li>
<li><a href="http://colorschemedesigner.com/">http://colorschemedesigner.com/</a></li>
<li><a href="http://www.colorblender.com/">http://www.colorblender.com/</a></li>
<li><a href="http://www.colorschemer.com/online.html">http://www.colorschemer.com/online.html</a></li>
<li><a href="http://www.ficml.org/jemimap/style/color/wheel.html">http://www.ficml.org/jemimap/style/color/wheel.html</a></li>
</ul>
<p>Remember that every color has its own significance : <a title="Colors &amp; psychology" href="http://www.designersplayground.com/articles/166/1/The-psychology-of-color-in-web-design/Page1.html">The psychology of color in web design</a></p>
<h3>Typography</h3>
<p>It&#8217;s always a good idea to choose the right typography. This can be &#8220;the touch&#8221; for your site, the small detail that makes everything else look better. For compatibility reasons, few typographies are available to be used in the web, anyway you can use some of these Javascript based solutions:</p>
<ul>
<li><a title="dufón" href="http://cufon.shoqolate.com/generate/">cufón</a>. Uses the browser to draw vector objects using VML</li>
<li><a title="sifr" href="http://www.mikeindustries.com/blog/sifr/">Sifr</a>. Requires both JavaScript and Flash to be enabled.</li>
<li><a title="facelift" href="http://facelift.mawhorter.net/examples/">facelift</a>. Using PHP (and the GD library).</li>
</ul>
<h3>Layout</h3>
<p>More decisions to make : fluid, fixed or elastic layout?</p>
<ul>
<li>A fixed width site is one where the main wrapper is set to a specific immovable width independent of the user agent’s display resolution.</li>
<li>A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure.</li>
<li>An elastic site’s main wrapper and other elements are measured using ems as the unit of measure.</li>
</ul>
<p>I recommend reading <a title="layouts" href="http://green-beast.com/blog/?p=199">this post about layouts</a> to help you decide.</p>
<p>With the message in your mind you can choose a layout for your site ( header, columns&#8230; ). There are some tools to help you create a CSS layout for you:</p>
<ul>
<li><a href="http://csscreator.com/tools/layout">http://csscreator.com/tools/layout</a><a href="http://www.wannabegirl.org/firdamatic/"></a></li>
<li><a href="http://www.wannabegirl.org/firdamatic/">http://www.wannabegirl.org/firdamatic/</a><a href="http://layouts.ironmyers.com/"></a></li>
<li><a href="http://layouts.ironmyers.com/">http://layouts.ironmyers.com/</a></li>
</ul>
<h3>CSS Framework</h3>
<p>Optionally if you are not a CSS guru you may prefer using an already developed CSS Framework</p>
<p>Pros : Rapid development, normalization of code, standard compliance and cross-browser compatibility.</p>
<p>Cons : Design dependent on the framework and unnecessary code.</p>
<p>Some popular CSS frameworks are :</p>
<ul>
<li><a href="http://www.blueprintcss.org/" target="_blank">Blueprint</a></li>
<li><a href="http://www.yaml.de/en/" target="_blank">Yet Another Multicolumn Layout (YAML)</a></li>
<li><a href="http://developer.yahoo.com/yui/grids/" target="_blank">YUI Grids CSS Foundation</a></li>
<li><a href="http://960.gs/" target="_blank">960 Grid System</a></li>
<li><a href="http://bluetrip.org/" target="_blank">BlueTrip</a><a href="http://docs.jquery.com/UI/Theming/API" target="_blank"></a></li>
<li><a href="http://docs.jquery.com/UI/Theming/API" target="_blank">jQuery UI CSS Framework</a><a href="http://lwis.net/free-css-drop-down-menu/" target="_blank"></a></li>
<li><a href="http://lwis.net/free-css-drop-down-menu/" target="_blank">CSS Drop-Down Menu Framework</a><a href="http://code.google.com/p/hartija/" target="_blank"></a></li>
<li><a href="http://code.google.com/p/hartija/" target="_blank">Hartija &#8211; CSS Print Framework</a></li>
</ul>
<p><a href="http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/">You can find a complete list of CSS Frameworks here</a></p>
<h3>Inspiration</h3>
<p>Before starting with the design of the site, once the message you want to transmit is clear, I recommend spending some time exploring the web for inspiration. Some web sites will help you :</p>
<ul>
<li><a href="http://webcreme.com/">Web Creme</a><a href="http://www.cssheaven.com/"></a></li>
<li><a href="http://www.cssheaven.com/">CSS HEaven</a></li>
<li><a href="http://www.cssclip.com/">CSS Clip</a></li>
<li><a href="http://cssremix.com/">CSS Remix</a></li>
<li><a href="http://creattica.com/">Creaticca</a></li>
<li><a href="http://designshack.co.uk/gallery/all/">Design Shack</a></li>
</ul>
<p><a href="http://sixrevisions.com/web_design/16-best-web-design-galleries-for-inspiration/">More web design galleries for inspiration</a></p>
<p><a href="http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/"></a></p>
<h3>Final notes</h3>
<p>Now it&#8217;s time to work out your networking skills. First ask for help to your friends &amp; family, but after that try to involve some expert in design. Use twitter and facebook and try to get as much feedback as you can. Your site should be attractive to a lot of people, so it makes sense to let them participate in the making of.</p>
<div class="posts_index"><strong>Creating your startup from scratch</strong>         </p>
<p><a title="Choosing a domain name" href="http://paypertwit.com/creating-your-startup-from-scratch-part-1-choosing-a-domain-name" target="_self">Part 1 &#8211; Choosing a domain name</a></p>
<p><a title="Language, Framework &amp; CMS" href="http://paypertwit.com/startup-from-scratch-language-framework-cms" target="_self">Part 2 &#8211; Language, Framework &amp; CMS</a></p>
<p><a title="Design, resources &amp; Inspiration" href="http://paypertwit.com/creating-your-startup-from-scratch-part-3-design-resources-inspiration">Part 3 &#8211; Design, resources &amp; Inspiration</a></p>
<p>Part 4 &#8211; Database selection</p>
<p>Part 5 &#8211; Hosting or Dedicated Server?</p>
<p>Part 6 &#8211; Control Version System</p>
<p>Part 7 &#8211; CSS Structure</p>
<p>Part 8 &#8211; JS Structure and Framework</p>
<p>Part 9 &#8211; URLs &amp;SEO</p>
<p>Part 10 &#8211; Testing tools</p>
<p>Part 11 &#8211; Promoting your Startup</p></div>
]]></content:encoded>
			<wfw:commentRss>http://paypertwit.com/creating-your-startup-from-scratch-part-3-design-resources-inspiration/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>
