<?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>1stwebdesigner - Graphic and Web Design Blog &#187; Anastasia Miles</title>
	<atom:link href="http://www.1stwebdesigner.com/author/anastasia/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.1stwebdesigner.com</link>
	<description>1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles.</description>
	<lastBuildDate>Sun, 12 Feb 2012 13:09:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>30+ Awesome Online Shoes Stores: Best Practices and Showcase</title>
		<link>http://www.1stwebdesigner.com/inspiration/online-shoes-stores-showcase/</link>
		<comments>http://www.1stwebdesigner.com/inspiration/online-shoes-stores-showcase/#comments</comments>
		<pubDate>Wed, 11 Aug 2010 21:00:01 +0000</pubDate>
		<dc:creator>Anastasia Miles</dc:creator>
				<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[e-commerce]]></category>
		<category><![CDATA[Roundup]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=20958</guid>
		<description><![CDATA[The internet is enormous and a big part of it is, online shopping and e-commerce. In this article we have written down best practices to run Online shoe stores and after that there is a showcase to inspire you. The main goal and purpose of every online and offline shop and store is To Sell. [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/inspiration/online-shoes-stores-showcase/"><img class="alignleft size-full wp-image-21137" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/online-shoes-store-icon.jpg" alt="" width="150" height="150" /></a>The internet is enormous and a big part of it is, online shopping and e-commerce. In this article we have written down best practices to run Online shoe stores and after that there is a showcase to inspire you. The main goal and purpose of every online and offline shop and store is To Sell. The online sale as an event is influenced by multiples factors, let us list the main ones:<span id="more-20958"></span></p>
<ul>
<li>the attractiveness of the offer;</li>
<li>the wide choice or</li>
<li>the presence of the desired product or brand;</li>
<li>the easiness of finding the desired product;</li>
<li>the simplicity of the purchase process;</li>
<li>special offers and discounts;</li>
<li>the overall design and feeling of the online store;</li>
<li>representation of 1st class, luxury, reliability, quality whatever.<!--more--></li>
</ul>
<p>There&#8217;s probably not much difference when creating the design for the flowers, cushions or shoes online store, those several principles outlined above always remain the same and can be applied to any industry. Still and if you want to stand out from your competition there&#8217;s something unique you have to offer to your potential customers.</p>
<p>The style of design of your new future online shop should be determined by the brands that will be presented on the website. If that&#8217;s a one brand website you can allow a splash page with the huge photos of the products and a few introductory words. If you&#8217;re selling the costly designer shoes your website should transmit a sense of luxury and style. If that&#8217;s a stock shoes site for whatever shoes in the world there are- you should make an emphasis on the variety of choice, and if that&#8217;s a low price that you can boast then you should create the banners featuring not the products but your pricing.</p>
<p>The showcase of some nice online stores below is meant to help the designers who are facing the task to create a unique, nifty design for the shoes store that Will Sell. Here you will see one brand websites with the huge images and get some tips on creating the &#8220;sale&#8221; banners that work. You will see websites with the &#8220;glamour&#8221; structure and websites with clean layout; you&#8217;ll learn to build both horizontal &amp; vertical user friendly products navigation and combine the style of different brands into one. Let the force be with you and feel free to share your own designs or links to the other cool online shoe shops you were lucky to see and visit.</p>
<h2>33 Online Shoes Stores Providing Great Selling Tips</h2>
<h3><a href="http://www.schuh.co.uk/">Schuh</a></h3>
<p><img class="alignnone size-full wp-image-20959" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/schuh.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.shoebacca.com/">Shoebacca</a></h3>
<p><img class="alignnone size-full wp-image-20961" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/shoebacca.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.betts.com.au/">Betts</a></h3>
<p><img class="alignnone size-full wp-image-20962" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/betts.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.shoeshed.com.au/">ShoeShed</a></h3>
<p><img class="alignnone size-full wp-image-20963" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/shoeshed.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.shoes.co.uk/">Shoes.co.uk</a></h3>
<p><img class="alignnone size-full wp-image-20965" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/shoes-uk.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.shoemetro.com/">ShoeMetro</a></h3>
<p><img class="alignnone size-full wp-image-20967" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/shoemetro.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.converse.com/">Converse</a></h3>
<p><img class="alignnone size-full wp-image-20968" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/converse-com.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.urbanog.com/">Urban Original</a></h3>
<p><img class="alignnone size-full wp-image-20969" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/urbanog.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://shoeguru.ca/">ShoeGuru</a></h3>
<p><img class="alignnone size-full wp-image-20970" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/shoeguru.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.shoepassion.de/">ShoePassion</a></h3>
<p><img class="alignnone size-full wp-image-20971" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/shoepassion.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.teva.com/">Teva</a></h3>
<p><img class="alignnone size-full wp-image-20972" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/teva.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.projectshoes.com/IT/">Project Shoes</a></h3>
<p><img class="alignnone size-full wp-image-20975" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/projectshoes.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.habitatshoes.com/">Habitat Shoe Boutique</a></h3>
<p><img class="alignnone size-full wp-image-20976" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/habitatshoes.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://mivokids.pl/">Mivo Kids</a></h3>
<p><img class="alignnone size-full wp-image-20977" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/mivokids.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.keds.com/store/SiteController/kedspro/home">Pro-Keds</a></h3>
<p><img class="alignnone size-full wp-image-20979" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/keds.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://theshoebuff.com/">The Shoe Buff</a></h3>
<p><img class="alignnone size-full wp-image-20980" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/theshoebuff.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://shoegazr.com/">Shoegazr</a></h3>
<p><img class="alignnone size-full wp-image-20981" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/shoegazr.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.dsw.com/">DSW designer shoes</a></h3>
<p><img class="alignnone size-full wp-image-20983" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/dsw.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.vivaladiva.com/shop/">Viva La Diva</a></h3>
<p><img class="alignnone size-full wp-image-20984" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/vivaladiva.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.shoefest.com/">ShoeFest</a></h3>
<p><img class="alignnone size-full wp-image-20985" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/shoefest.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.shudoo.co.uk/">Shudoo</a></h3>
<p><img class="alignnone size-full wp-image-20986" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/shudoo.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.overstockonlineshoes.com/">Overstock Online Shoes</a></h3>
<p><img class="alignnone size-full wp-image-20987" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/overstock.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.braska.co.uk/index-real.php">Braska</a></h3>
<p><img class="alignnone size-full wp-image-20988" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/braska.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://cinti.it/">Cinti</a></h3>
<p><img class="alignnone size-full wp-image-20989" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/cinti.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.drmartens.com/">Dr. Martens</a></h3>
<p><img class="alignnone size-full wp-image-20990" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/drmartens.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.allenedmonds.com/">Allen Edmonds</a></h3>
<p><img class="alignnone size-full wp-image-20991" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/allen.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.asicsamerica.com/">Asics</a></h3>
<p><img class="alignnone size-full wp-image-20992" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/asics.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.birkenstockusa.com/">Brikenstock</a></h3>
<p><img class="alignnone size-full wp-image-20993" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/birken.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.bornshoes.com/">Born Shoes</a></h3>
<p><img class="alignnone size-full wp-image-20994" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/bornshoes.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.hushpuppies.com/US/en-US/Home.mvc.aspx">Hush Puppies</a></h3>
<p><img class="alignnone size-full wp-image-20996" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/hushpuppies.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.naturalizer.com/">Naturalizer</a></h3>
<p><img class="alignnone size-full wp-image-20997" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/naturalizer.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.rockport.com/home/index.jsp">Rockport</a></h3>
<p><img class="alignnone size-full wp-image-20998" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/rockport.jpg" alt="" width="570" height="360" /></p>
<h3><a href="http://www.shoes.com/">Shoes.com</a></h3>
<p><img class="alignnone size-full wp-image-20999" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/shoescom.jpg" alt="" width="570" height="360" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/inspiration/online-shoes-stores-showcase/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>The Niceties &amp; Standards of Real Estate Website Design</title>
		<link>http://www.1stwebdesigner.com/inspiration/real-estate-website-design/</link>
		<comments>http://www.1stwebdesigner.com/inspiration/real-estate-website-design/#comments</comments>
		<pubDate>Fri, 30 Jul 2010 10:00:12 +0000</pubDate>
		<dc:creator>Anastasia Miles</dc:creator>
				<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Real Estate]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=20378</guid>
		<description><![CDATA[On my professional opinion, real-estate websites are among the most complicated types of projects to be planned and designed. One of the reasons is that competition is extremely high and with the standard approach you will be buried under the heap of your competitor&#8217;s websites and secondly, the creative design does not guarantee anything. Most [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/inspiration/real-estate-website-design/"><img class="alignleft size-full wp-image-20435" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/home-icon.jpg" alt="" width="150" height="150" /></a></p>
<p>On my professional opinion, real-estate websites are among the most complicated types of projects to be planned and designed. One of the reasons is that competition is extremely high and with the standard approach you will be buried under the heap of your competitor&#8217;s websites and secondly, the creative design does not guarantee anything.<span id="more-20378"></span></p>
<p>Most of the industry websites have old-fashioned tabled designs with small fonts and cluttered layout, however the traffic to this websites is tremendous. That said and having observed the behavior of website visitors from some of the studies, I can make the following conclusions:</p>
<ul>
<li>people don&#8217;t pay much attention to the look and feel of real estate websites;</li>
<li>it&#8217;s the properties database and convenience of search that play the main role;</li>
<li>the older the design is, the longer the company is on the market and thus, there&#8217;s more trust.</li>
</ul>
<p>In my post today I&#8217;d like to present you the collection of thoroughly chosen and best in their niches websites related to real estate market that should help you with your own real estate project. The designs presented in this showcase below cover a wide range of property and real estate related websites and thus I hope will be useful for every designer and project manager.</p>
<p>The websites do not stand out by their designs only, the parameters I used when making this list are:</p>
<ul>
<li>clean layout;</li>
<li>great presentation of the property search;</li>
<li>call to action buttons that make you want to click;</li>
<li>effective header area;</li>
<li>creative use of photos, icons, illustrations;</li>
<li>workable color-scheme;</li>
<li>website memorability.</li>
</ul>
<p>None of the websites in this list are perfect (except for probably <a href="http://www.remax.com/">Remax</a> which is my favorite one) but every single site has something worth seeing and analyzing. Some of the websites may have a unique property search presentation only, others may have cool call to action buttons but lack user-friendliness and clean page structure. Some of the websites present real estate standards formed for ages and nicely embedded into new design, others are quite innovative and created in the mixed style you will probably love. Like in every niche, there&#8217;s always place for experimentation but there&#8217;s also customer experience that we should never neglect.</p>
<p>Browsing trough the list you will find the one-property websites, vacation rental websites, property portals, corporate websites of property companies and much more. Enjoy the first-class concept presentation and share your thoughts with us!</p>
<p><strong><a href="http://terminusrealestate.com/">Terminus Real Estate</a></strong><br />
<img class="alignnone size-full wp-image-20380" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/terminus.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.zoopla.co.uk/">Zoopla</a></strong><br />
<img class="alignnone size-full wp-image-20426" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/zoopla.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://vacationrentalstation.com/">Vacation Rental Station</a></strong><br />
<img class="alignnone size-full wp-image-20381" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/vacation.jpg" alt="" width="570" height="361" /><br />
<strong><br />
<a href="http://www.jimolenbush.com/">Cantera Real Estate</a></strong><br />
<img class="alignnone size-full wp-image-20383" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/jimo.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.nakedapartments.com/vb">Naked Apartments</a></strong><br />
<img class="alignnone size-full wp-image-20384" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/nakedapartments.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.findaproperty.com/">Find a Property</a></strong><br />
<img class="alignnone size-full wp-image-20385" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/find-a-property.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.equityapartments.com/">Equity Apartments</a></strong><br />
<img class="alignnone size-full wp-image-20387" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/equity.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.houstonapartmenthelp.com/">Houston Apartment Help</a></strong><br />
<img class="alignnone size-full wp-image-20388" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/houston.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://birdboxx.com/">BirdBoxx</a></strong><br />
<img class="alignnone size-full wp-image-20390" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/birdboxx.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.avaloncommunities.com/">Avalon Communities</a></strong><br />
<img class="alignnone size-full wp-image-20429" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/avalon.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.optimalrentals.net/en/">Optimal Rentals</a></strong><br />
<img class="alignnone size-full wp-image-20391" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/optimal.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.firstnational.com.au/">First National</a></strong><br />
<img class="alignnone size-full wp-image-20393" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/firstnational.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.lpcwashingtondc.com/">Lincoln Property Company</a></strong><br />
<img class="alignnone size-full wp-image-20395" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/lpc.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.globrix.com/">Globrix</a></strong><br />
<img class="alignnone size-full wp-image-20396" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/globrix.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.realestate.com.au">Real Estate</a></strong><br />
<img class="alignnone size-full wp-image-20398" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/reaestate-au.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.bethemiddleman.com/">Be The Middle Man</a></strong><br />
<img class="alignnone size-full wp-image-20399" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/bethemiddle.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://realestate.drawingonthepromises.com/">realestate.drawingonthepromises.com</a></strong><br />
<img class="alignnone size-full wp-image-20401" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/drawing.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.lanikaiproperties.com/">Lanikai Properties</a></strong><br />
<img class="alignnone size-full wp-image-20402" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/lanikai.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://emlakcenter.org/en/">Emlak Center</a></strong><br />
<img class="alignnone size-full wp-image-20404" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/emlak.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.ranchline.com/">Rachline</a></strong><br />
<img class="alignnone size-full wp-image-20405" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/ranch.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.previewnaples.com/">Preview Naples</a></strong><br />
<img class="alignnone size-full wp-image-20406" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/preview2.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.meadowscastlerock.com/">Meadow Castle Rock</a></strong><br />
<img class="alignnone size-full wp-image-20407" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/medow.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://belvedereinc.net/">Belvedere Inc</a></strong><br />
<img class="alignnone size-full wp-image-20408" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/belvedere.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.woolshedgrove.com.au/">Woolshed Grove</a></strong><br />
<img class="alignnone size-full wp-image-20409" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/wool.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.rentalpropertyshop.com/">Rental Property Shop</a></strong><br />
<img class="alignnone size-full wp-image-20410" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/rentalpropertyshop.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.batico.be/">Batico</a></strong><br />
<img class="alignnone size-full wp-image-20411" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/batico.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.kensingtonlakes.com.au/residential-airpark/">Kensington Lakes</a></strong><br />
<img class="alignnone size-full wp-image-20412" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/kensington.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.prusantafe.com">Prudential Real Estate</a></strong><br />
<img class="alignnone size-full wp-image-20413" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/prudential.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://windermere.com">Windermere Real Estate</a></strong><br />
<img class="alignnone size-full wp-image-20414" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/winder.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.rentalhomesplus.com/">Rental Homes Plus</a></strong><br />
<img class="alignnone size-full wp-image-20415" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/rentalhomeplus.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.homeaway.com/">HomeAway</a></strong><br />
<img class="alignnone size-full wp-image-20416" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/homeaway.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.otalo.com/">Otalo</a></strong><br />
<img class="alignnone size-full wp-image-20417" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/otalo.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://streetfolio.com/">StreetFolio</a></strong><br />
<img class="alignnone size-full wp-image-20418" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/streetfolio.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.remax.com/">Remax</a></strong><br />
<img class="alignnone size-full wp-image-20419" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/remax.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.capriimoveis.com.br/">CapriMoveis</a></strong><br />
<img class="alignnone size-full wp-image-20420" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/capri.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.forrent.com/">For Rent</a></strong><br />
<img class="alignnone size-full wp-image-20421" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/forrent.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.bhgrealestate.com/">Better Homes Real Estate</a></strong><br />
<img class="alignnone size-full wp-image-20422" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/betterhomes.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.mrrental.com/">MrRental</a></strong><br />
<img class="alignnone size-full wp-image-20423" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/mrrental.jpg" alt="" width="570" height="361" /></p>
<p><strong><a href="http://www.rentping.com/">RentPing</a></strong><br />
<img class="alignnone size-full wp-image-20424" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/07/rentping.jpg" alt="" width="570" height="361" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/inspiration/real-estate-website-design/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>How To Make The Right Keyword Analysis For Your Website (Part-2)</title>
		<link>http://www.1stwebdesigner.com/design/right-keyword-analysis-2/</link>
		<comments>http://www.1stwebdesigner.com/design/right-keyword-analysis-2/#comments</comments>
		<pubDate>Fri, 25 Jun 2010 10:00:44 +0000</pubDate>
		<dc:creator>Anastasia Miles</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Keyword Analysis]]></category>
		<category><![CDATA[seo]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[tricks]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=17580</guid>
		<description><![CDATA[In my previous post &#8220;How To Make The Right Keyword Analysis For Your Website&#8221; I have shared my experience in choosing the best sweet keywords for the website. We have ended up with an xls table with the list of pages names and the keywords breakdown for these pages. As promised, today I&#8217;ll be speaking [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/development/right-keyword-analysis-2/"><img class="alignleft size-full wp-image-17584" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/title-keyword-analysis1.jpg" alt="" width="150" height="150" /></a>In my previous post <a href="http://www.1stwebdesigner.com/development/right-keyword-analysis-website/">&#8220;How To Make The Right Keyword Analysis For Your Website&#8221;</a> I have shared my experience in choosing the best sweet keywords for the website. We have ended up with an xls table with the list of pages names and the keywords breakdown for these pages. As promised, today I&#8217;ll be speaking about On-page search engine optimization- that is how and where to use the keywords on your website page to get higher positions for the given keywords and key phrases in search engines results yet keeping the page organically readable for your website visitors.<span id="more-17580"></span></p>
<p>Though I&#8217;ll be mentioning Google most of the times, the principles of the On-page SEO are same for all search engines.</p>
<p><img class="aligncenter size-full wp-image-17645" title="keyword-analysis" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/keyword-analysis.jpg" alt="" width="550" height="60" /></p>
<p>First of all and before we get into details, let me emphasize that the valuable/interesting/unique information presented on your website is what matters most. You have to write your texts for website visitors and not for the search engines. The aim of SEO is not just to get on top of search results and get some additional traffic to your website, but rather convert this traffic into sales, new members, subscribers whatever. Even if Google or other search engines won&#8217;t penalize your for keyword stuffing and you get&#8217;ll somewhere close to top 10 results (just theoretically) and people will be clicking on your website name, if you don&#8217;t offer the qualitative content they will leave. So please be very careful when using the tips I&#8217;m going to give you today and do not spend your time on something that is not going to work. Remember that it&#8217;s people who are visiting your website while On-Page SEO is a technique meant to help people find your amazing products.</p>
<h2>On Page Keyword Characteristics</h2>
<p><img class="aligncenter size-full wp-image-17646" title="keyword-analysis-2" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/keyword-analysis-2.jpg" alt="" width="550" height="60" /></p>
<p>There are several characteristics that can be applied to the keywords and key-phrases in the context of on-page SEO:</p>
<ul>
<li><strong>Prominence</strong></li>
<li><strong>Density</strong></li>
<li><strong>Frequency</strong></li>
<li><strong>Proximity</strong></li>
</ul>
<h3>Prominence</h3>
<p>Prominence is how close your keyword/key phrase is to the beginning of the analyzed area on page. Speaking about introductory text on your home page, 100% prominence is when you use your keyword in the first sentence of your first abstract and start your sentence with this keyword.</p>
<h3>Density</h3>
<p>Keyword density is a number of keywords to the rest of content on page, usually measured in %. For example, if you have a text area of 150 words, and use the keyword &#8220;development&#8221; 5 times on a page, the density will be calculated as 5/150X100% and that is 3,33%. If the keyword consists of a single word, obviously its density within some context will be lower than if it consisted of two words or a phrase.</p>
<h3>Frequency</h3>
<p>Frequency is simply the number of times you use the keyword in the analyzed area of a page.</p>
<h3>Proximity</h3>
<p>Proximity is how close the keywords that make up your key phrase are to each other. For example if your key-phrase is &#8220;website design&#8221; but you don&#8217;t want to repeat it (and don&#8217;t have to!) twice in that same short sentence, you may finish the sentence with &#8220;website&#8221; and start the new one with &#8220;design&#8221; or something like cool &#8220;design&#8221;. The closer they keywords in your key phrase are to each other the better.</p>
<h2>SEO important page elements</h2>
<h3>Page Name</h3>
<p><img class="alignnone size-full wp-image-17590" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/website-title.jpg" alt="" width="570" height="60" /></p>
<p>Let&#8217;s start from the very top of the page. When you create the page you give it the name something like services.html (or php/asp whatever). This is the first place to use your keywords. If you&#8217;re a design studio offering logo design and corporate identity design, use the according keywords to name your website pages- something like logo-design.html. Do not use blank spaces (logo design.html) or underlines (logo_design.html) in the name of the pages, always use hyphens to separate the words and Google will recognize it as 2 separate words and yeah, you&#8217;re telling Google that this page on your website is about logo design.</p>
<h3>Page Title</h3>
<p><img class="alignnone size-full wp-image-17593" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/meta-title.jpg" alt="" width="570" height="60" /></p>
<p>Website Title is the part of the page coding located in the</p>
<pre class="brush: xml; title: ; notranslate">&lt;head&gt;</pre>
<p>section of your HTML file and looking like:</p>
<pre class="brush: xml; title: ; notranslate">&lt;title&gt;My title goes here&lt;/title&gt;</pre>
<p>. The title of the page is the second characteristics Google will see when indexing your page after its name. This is also the Title that will be shown in Search engine results and that people will consider as the general title covering in short what&#8217;s the page and website is about.</p>
<p>Before optimizing your title with the keywords don&#8217;t forget that we focus on people not on search engines, and if they don&#8217;t like your title, find it overstuffed with keywords or just think it&#8217;s not relevant to what actually they have been looking for your optimization efforts will be absolutely useless.</p>
<p>As a rule website title consists of about 5 to 12 words, and character length up to 75 symbols. Do not compose huge sentences for your title as the title might get cut and will look weird. If you own an established brand &#8211; be sure to include the name in the titles. If you target some certain geographical region be sure to mention it as well.</p>
<h3>Meta Description</h3>
<p><img class="alignnone size-full wp-image-17594" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/meta-description.jpg" alt="" width="570" height="60" /></p>
<p>Meta description</p>
<pre class="brush: xml; title: ; notranslate">&lt;meta name=&quot;description&quot; content=&quot;description goes here&quot;/&gt;</pre>
<p>is also the part of the page code located in the head area and not visible to website visitors when they open the page, it&#8217;s solely used by the search engines. Meta description is a brief summary of the information you provide on page and thus it should be sharp, descriptive and contain your targeted keywords. In some cases meta description may show up on the search results pages below the Title of your page- the so-called &#8220;snippet&#8221; so do not forget that people making the search are likely to see this description and judge on your company and services based upon it. It will also influence their decision to click on the link to your website or not.</p>
<p><img class="alignnone size-full wp-image-17595" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/snippet.jpg" alt="" width="570" height="100" /></p>
<p>Nice meta description usually contains about 25-30 words. The best keywords should be placed closer to the beginning (100% prominence). It&#8217;s better to start with the most sweet keywords, while organically including just nice ones in the rest of the summary.</p>
<h3>Website Content</h3>
<p><strong>HTML headings h1 – h6</strong></p>
<p>HTML heading tag indicates to the search engines that this is the main title of your page, secondary title of your page and less important subtitles. It&#8217;s a good practice to include keywords into the headings with the 100% prominence as this is the other time that we tell the search engines that this is what our page is about. It&#8217;s important not to repeat the same level tag more than one time.</p>
<p><strong>Text on page</strong></p>
<p><img class="alignnone size-full wp-image-17599" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/website-content1.jpg" alt="" width="570" height="441" /></p>
<p>After all the preludes we have finally come to the most sweet part &#8211; the text content of the page. That is where you your imagination and creativity have no boundaries. You can write as much text as you&#8217;d like to (of course, this should be a unique text) but there should be at least 100 words. Keywords prominence should be 100% &#8211; that is your best keywords should be used in the first abstract (as Google indexes the content from left to write, from bottom to top- exactly the same way that we read), just a bit in the middle and mentioned a few times closer to the end. Do not forget about proximity, it&#8217;ll help you to use your keywords close to each other yet escaping the keywords stuffing. The keyword density should be around 3-7%, if it&#8217;s higher than this you can just add some more text.</p>
<p>Search engines may also use a few lines of text from your page and show them as snippet on the result pages instead of the meta description.</p>
<p>Once you&#8217;re done with the text, show it to your friends. You have to make sure that it&#8217;s easily and nicely readable by human beings.</p>
<p>To emphasize your keywords, use the bold <strong> tag, but don&#8217;t over use it as the content presentation can become pretty irritating.</strong></p>
<p>If you have so graphics/or photos on page be sure the include the  and  tags for your images. Adding a keyword there would be nice as well, as the  text will show up in case images are disabled, while texts from both  and  tags are used by Google for their images search. We shouldn&#8217;t lose any opportunity so lets invest some efforts into this.And finally, when linking to a page use the keyword as the anchor text for the link, this will also tell Google the page is relevant to this query.</p>
<p><strong>That&#8217;s it! Good luck with the on-page SEO and I hope that it&#8217;ll be of some great help to you guys!</strong></p>
<p><strong> </strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/design/right-keyword-analysis-2/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>How To Make The Right Keyword Analysis For Your Website</title>
		<link>http://www.1stwebdesigner.com/design/right-keyword-analysis-website/</link>
		<comments>http://www.1stwebdesigner.com/design/right-keyword-analysis-website/#comments</comments>
		<pubDate>Wed, 16 Jun 2010 10:00:20 +0000</pubDate>
		<dc:creator>Anastasia Miles</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[how to]]></category>
		<category><![CDATA[keywords]]></category>
		<category><![CDATA[keywords analysis]]></category>
		<category><![CDATA[seo]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[tricks]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=16914</guid>
		<description><![CDATA[Everyone looking to build a website might have heard about SEO- the mysterious Search Engine Optimization. This is a never-ending process that consists of multiple steps and there are always enhancements that can be done to improve website visibility in the search engines. If you have ever heard about the SEO you might have also [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/development/right-keyword-analysis-website/" target="_self"><img class="size-full wp-image-17126 alignleft" title="title-keyword-analysis" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/title-keyword-analysis.jpg" alt="" width="150" height="150" /></a>Everyone looking to build a website might have heard about SEO- the mysterious Search Engine Optimization. This is a never-ending process that consists of multiple steps and there are always enhancements that can be done to improve website visibility in the search engines.</p>
<p>If you have ever heard about the SEO you might have also heard that one of the basics of successful SEO is the Keyword analysis and that&#8217;s exactly what I&#8217;m going to speak about today.<span id="more-16914"></span></p>
<p><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/google1.jpg" alt="" width="570" height="203" /></p>
<p>Let&#8217;s start from the very beginning. The keywords are the words that web surfers use in the search engines to look for the product/service/information needed. This is the &#8220;WordPress beginners guide&#8221; that you type when you&#8217;re looking for the info how and where to start with WordPress and &#8220;website design studio&#8221; when you&#8217;re looking for a company to create a website for you.</p>
<h2>1. Define the keywords that people use to find your business.</h2>
<p>This step is most important and probably the easiest one and you can complete it in 3 simple steps without any additional software or paid programs offered on the market.</p>
<ul>
<li><strong>1.</strong> Ask your friends and relatives what words and phrases they associate with your business and put them on list.</li>
<li><strong>2.</strong> Go to Google and type the keywords and key phrases into the browser and Google will also show you the related searches performed by other people.To make things even easier, you can switch from the Standard view to Related searches view. Just type your keyword to the Google search bar and on the left of the search results page click on the panel &#8220;Show search tools&#8221; and scroll to the bottom until you see it, and here&#8217;s how it looks.</li>
</ul>
<p><img class="alignnone size-full wp-image-17045" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/related-searches2.jpg" alt="" width="570" height="290" /></p>
<ul>
<li><strong>3. </strong>Use Google Wonder Wheel- that&#8217;s an adorable tool that I love so much. The wonder Wheel is another variation of the Related searches but in a more convenient way and is located right below Related searches view in the left panel. The wonder wheel shows you all related searches and their popularity. You can also click on the related search circle and go even deeper into the search keywords. Put as many related keywords on the list as you can but make sure they are really related to your business, service or product.</li>
</ul>
<p><img class="alignnone size-full wp-image-17046" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/google-wonder-wheel2.jpg" alt="" width="570" height="290" /></p>
<h2>2. Find out how many people are actually using the keywords you have selected.</h2>
<p>The cool tool you can use here is Google Keywords Suggestion tool. It&#8217;s a part of <a href="http://adwords.google.com/">Google Adwords</a> (and is used to find nice keywords for your google ands) but you can use it separately to identify the popularity of the chosen keywords and key phrases. Take a minute to register with Google Adwords and you are ready to use the tool.</p>
<p><img class="alignnone size-full wp-image-17049" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/google-keywords-tool.jpg" alt="" width="570" height="275" /></p>
<p>Type in your key phrase and <a href="http://www.google.com/url?sa=t&amp;source=web&amp;cd=1&amp;ved=0CB0QFjAA&amp;url=https%3A%2F%2Fadwords.google.com%2Fselect%2FKeywordToolExternal&amp;ei=OusPTJGOJ5KWOJDTiPwK&amp;usg=AFQjCNGTVtE8qvjaqHJgAAJEqL2HwooXJw&amp;sig2=Njo4VtiTc9_kcwC9YnbaWA">Google Keywords Too</a>l will show you the list of related searches (compare it with your list and see if you&#8217;re  missing something) and the number of Monthly searches for according keyword.</p>
<p>At this stage you can make an excel table with your keywords in the first column and the number of monthly searches in the second one. Now sort your keywords putting the most popular ones on top and less popular ones closer to the bottom.</p>
<p>Delete the keywords that have less that 1000 searches a month except if you offer something really unique and that&#8217;s the top number of search engines visitors looking for it.</p>
<h2>3. Define your competition and make sure the keywords you have chosen are relevant.</h2>
<p>Make yourself a cup off coffee or tee as we&#8217;re starting on a pretty boring thing. Now that you have all the possible keywords in your list, we have to find out their relevance and competition.</p>
<p>Let me explain you what I mean for the term &#8220;relevance&#8221;. Let&#8217;s say you produce a software allowing photographers to create cool photography websites easily. One of the great keywords that you might think of is a &#8220;photo website&#8221; however it is not. If you go to Google and type &#8220;photo website&#8221; into the search field you will see that the search returned you a list of websites offering stock photography and thus this is not the keyword you should base your website optimization strategy on.</p>
<p><img class="alignnone size-full wp-image-17048" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/competition.jpg" alt="" width="570" height="83" /></p>
<p>Now back to the competition. This is not really the number of companies offering the same services that you do but rather the number of indexed pages in Google containing your keyword and which you actually have to beat. So type your keyword into the Google search bar, make sure it&#8217;s relevant and put the number of indexed pages for the according keyword into your table next to the number of monthly searches.</p>
<h2>4. Finding the best keywords</h2>
<p>By now you should have a list from about 50 keywords and keywords phrases in the descending order with the appropriate number of monthly searches and competition. If you have a website with the number of pages over 20 you can use all of them, but it you have a simple 5-10 pages website you&#8217;ll have to choose the best of the keywords.</p>
<p>The keyword &#8220;bestestness&#8221; is defined by the ration between relevance, popularity and competition. The keyword which is most close to your business, has the largest number of searches and the smallest competition is the best.</p>
<p>There are lots of coefficients offered by different experts, but if you are not making the keywords analysis every other day you are most likely to forget how to calculate it. So, to keep things simple, you can divide the number of monthly searches to the number of pages indexed for this keyword and multiply by 1000 for example. You&#8217;ll get figures like 0,1-0,3, less than 0,1 and much less than 0,01. Small figures mean that there is either a small number of searches for the given keywords of the competition is really high.</p>
<p><img class="alignnone size-full wp-image-17052" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/best-analysis1.jpg" alt="" width="570" height="290" /></p>
<p>You can exclude these keywords, however do check each one individually. If you have the best product in some area, you can easily overcome all the competition and show up in the search engine results for the given keyword.</p>
<p>At the end and having made the ratio analysis you should have around 10 very cool keywords, 10 just cool keywords and around 5-10 nice keywords that also might be useful.</p>
<p><img class="alignnone size-full wp-image-17053" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/best-analysis-2.jpg" alt="" width="570" height="290" /></p>
<h2>5. Breaking keywords into pages.</h2>
<p>Now we&#8217;re going to the most complex point. You can&#8217;t use all your keywords on just one page. Every page has to be optimized for no more than 2-3 keywords/keyword phrases and of course, they should be 100% relevant to the content of the page.</p>
<p>Choose the best 3 keywords for the home page and spread the rest on the other pages. Now add a few nice keywords for every page. Choose one or two keywords that you can use throughout the pages in the text organically.</p>
<p>Put it all in a spreadsheet. Now you have the list of keywords to use on every page of your website to ensure best visibility for the given keywords in the search engine results. Sorry for the blurred screen but I have to keep my own keyword research results private.</p>
<p><img class="alignnone size-full wp-image-17054" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/pages.jpg" alt="" width="570" height="290" /></p>
<p>The next step is actually creating the keyword optimized content for the website pages. This is the separate science and I&#8217;m going to speak about it in my next post. Stay tuned, make the keywords analysis and check back with us soon!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/design/right-keyword-analysis-website/feed/</wfw:commentRss>
		<slash:comments>39</slash:comments>
		</item>
		<item>
		<title>An Indepth Review of 9 Best Flash CMS Solutions</title>
		<link>http://www.1stwebdesigner.com/freebies/an-indepth-review-of-9-best-flash-cms-solutions/</link>
		<comments>http://www.1stwebdesigner.com/freebies/an-indepth-review-of-9-best-flash-cms-solutions/#comments</comments>
		<pubDate>Tue, 18 May 2010 10:14:47 +0000</pubDate>
		<dc:creator>Anastasia Miles</dc:creator>
				<category><![CDATA[Freebies]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[review]]></category>
		<category><![CDATA[softwares]]></category>
		<category><![CDATA[tools]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=13939</guid>
		<description><![CDATA[Flash templates are getting more and more popular these days and though beautiful outside, they can be a real disaster inside. While most of the template companies state that their templates are easy to manage and update, customizing the ready-made template can be a tough task for you. How to ensure that you won&#8217;t have [...]]]></description>
			<content:encoded><![CDATA[<p>Flash templates are getting more and more popular these days and though beautiful outside, they can be a real disaster inside. While most of the template companies state that their templates are easy to manage and update, customizing the ready-made template can be a tough task for you. How to ensure that you won&#8217;t have to dive into the flash code, Action Script or spend hundreds of dollars on a web developer to customize the template for you? This post is meant to give you a helping hand in the world of various flash templates and flash systems so if you consider creating your website from the flash template and want it to be real easy and affordable this post is for you.<span id="more-13939"></span></p>
<p>First of all and if you have never seen Adobe Flash, do not try to convince yourself that you can manage it. Yes, you can probably learn some simple things from YouTube tutorials, but the flash templates of the new generation are much more than just a number or links, images and text blocks. So what&#8217;s the solution if you are a flash fan and dream of an awesome interactive flash template?</p>
<h2>Flash Content Management System.</h2>
<p>What&#8217;s a flash content management system or simply flash CMS? That&#8217;s a system that helps you manage your flash website without actual source files editing. The CMS based flash template usually consists of the 3 main sections: the design skin- that works like the shell for the content, the core- the codes and programmed functions, and the website content- that can be stored in the database or external txt/xml files. The content management system in simple words is an administrative interface where you can enter the content in a convenient, intuitive, friendly manner without going into any codes and this content will show up on the website in the real time.</p>
<p>So Flash CMS seems to be a really cool solution but can you build your website using its functionality if you are not a flash developer? The answer is obviously no. There have been lots of Flash CMS solutions reviews recently but they are useless for the regular users as most of us simply don&#8217;t know where and how to implement them. That&#8217;s why I have decided to create a review of Flash CMS templates solutions presently available on the market, the solutions that will allow you build your new flash website quickly, easily at without additional costs.</p>
<h2><a href="http://www.wix.com">1. Wix Site Builder</a></h2>
<p><a href="http://www.wix.com"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/wix.jpg" alt="" width="570" height="306" /></a></p>
<p>If you have ever been looking for a free flash website you might have been on a Wix site and even considered using their builder to create your free flash website. Guys at Wix have a huge number of nicely designed templates and working with the Wix system is a real pleasure. It takes just a few minutes to sign up with them, choose the template and proceed to the editing interface. Editing the template reminds more of a fun game with big iconed tools :) You can change texts and fonts, you can add photos, videos and music and create nice galleries. You can also view your website online on the link like this one <a href="http://www.wix.com/adzyasan/anastasia">http://www.wix.com/adzyasan/anastasia</a> and it&#8217;s also for free.</p>
<p>If you want more features than the free version of Wix allows you can sign up for a premium account (<strong>starting from $4.95/month</strong>) and use your own domain name, remove Wix ads and logo from your website.</p>
<h2></h2>
<h2><a href="http://www.readyphotosite.com">2. ReadyPhotoSite Flash CMS</a></h2>
<p><a href="http://www.readyphotosite.com"><img class=" size-full wp-image-13963" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/readyphotosite.jpg" alt="" width="570" height="270" /></a></p>
<p>Initially developed for photographers community, ReadyPhotoSite CMS can be used to create any type of website, from business to entertainment sites. The product is available in 4 packages:</p>
<ul>
<li>Basic- for business websites;</li>
<li>Creative- for photography websites and personal portfolios;</li>
<li>Ecommerce- for online flash stores;</li>
<li>Premium- includes the design .fla files allowing to make modifications not available from the admin area.</li>
</ul>
<p>The modules presented in ReadyPhotoSite CMS include:</p>
<ul>
<li>General website settings (logo, menu, copyright etc);</li>
<li>Meta-data manager;</li>
<li>Photo gallery (unlimited number of photo galleries);</li>
<li>Video gallery (unlimited number of video galleries);</li>
<li>Slideshow creator;</li>
<li>Mp3 tracks editor;</li>
<li>News section;</li>
<li>Events editor;</li>
<li>Password protected galleries;</li>
<li>Shopping cart and online store.</li>
</ul>
<p><strong>The pricing for ReadyPhotoSite websites depends on functionality.</strong> The basic package is $149, creative $159, ecommerce- $199 and premium package is $250.</p>
<p>The collection presently includes 10 templates and several new templates are added monthly. The templates do not require database to store info. All the texts, paths to the files and parameters are stored in the external XML files used by the system. The system is skin based but there are certain design restrictions applied for every template and thus changing one design to the other might be not a good idea. Deep linking technology makes ReadyPhotoSite websites search engine friendly and lets your reference the difference sections of your flash website as if it was simple clean HTML.</p>
<p><strong>View <a href="http://www.readyphotosite.com/products.php">ReadyPhotoSite templates</a></strong> <strong>View <a href="http://www.readyphotosite.com/demo/ecommerce/admin/">admin area demo </a> </strong></p>
<h2><a href="http://fancycms.com">3. Fancy CMS</a></h2>
<p><a href="http://fancycms.com"><img class=" size-full wp-image-13964" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/fancy-cms.jpg" alt="" width="570" height="406" /></a></p>
<p>Fancy CMS is a new promising flash content management system that seems to be still in development. They have triumphantly launched their first template and promise more to come shortly. As a fresh developing product Fancy CMS might also be interesting for flash developers as there&#8217;s a beta version of Fancy Flash CMS Core available for free. One oops- the admin area is not available yet so if you decide to download the templates be ready to edit the info directly in the xml files.</p>
<p>Among the interesting features of Fancy Flash CMS are:</p>
<ul>
<li>Rich content pages with 2-level menus;</li>
<li>Flash blog;</li>
<li>e-commerce shopping cart,</li>
<li>Option to change the pages design and layout;</li>
<li>Video, Image &amp; Sound Galleries.</li>
</ul>
<p>The system is skin based so you can easily change skins to newer design versions. At the moment the system is <strong>free</strong>.</p>
<p><strong><a href="http://fancycms.com/free-flash-cms/">Download Free Fancy CMS </a></strong></p>
<h2><a href="http://www.flashmoto.com">4. FlashMoto CMS</a></h2>
<p><img class=" size-full wp-image-13965" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/flashmoto1.jpg" alt="" width="570" height="267" /></p>
<p>Loved by flash developers the FlashMoto CMS has the widest range of functionality possible. There&#8217;s an option to edit the core of the system, add new modules and widgets and create separate projects based on the FlashMoto CMS. However when it comes to website management it gets complicated for most of us&#8230; since there are too many options available. Certain functionality limitations would guarantee that design look and feel remains stylish and professional but this in not the case when you can play around with almost every element and then can&#8217;t set it back to default position. Yet, we have to admit that FlashMoto CMS is a powerful engine, though (and in the consent of our theme today) oriented more on developers than end users. What&#8217;s really cool about this CMS is the Multilingual Control Panel supporting 12 languages.</p>
<p>Among the features of the FlashMoto CMS you will find:</p>
<ul>
<li>Interface to update general settings like logo, menu, company name etc;</li>
<li>Ability to add unlimited number of pages in a rich WYSIWYG editing environment;</li>
<li>Media Library &amp; Preload Item option;</li>
<li>News module, Video &amp; Image Gallery ;</li>
<li>Video and MP3 player.</li>
</ul>
<p>While the admin area works smooth I can&#8217;t call it intuitive though this can be a matter of time and getting used to things. People logging in for the first time to WordPress or Oscommerce admin area might be feeling kinda lost as well :)</p>
<p>The templates cost around <strong>$250</strong> and are all designed in the up-to-date clean style which makes the offer even more attractive.</p>
<p>There&#8217;s an interesting fact that FlashMint and FlashMoto which are supposed to be competitors have recently signed an <a href="http://www.flashmint.com/wp/2010/04/flashmint-flashmoto/">agreement</a> where FlashMint will be developing templates based on FlashMoto CMS.</p>
<p><strong>View <a href="http://templates.flashmoto.com/">FlashMoto CMS templates</a></strong> <strong>View <a href="http://www.flashmoto.com/demo/">admin area demo</a> </strong></p>
<h2><a href="http://www.flashmint.com">5. Mint Editor</a></h2>
<p><a href="http://www.flashmint.com"><img class=" size-full wp-image-13967" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/mint-editor-full.png" alt="" width="570" height="290" /></a></p>
<p>Mint editor is another flash website management product created by www.flashmint.com. This is not a standalone product or system but rather a management interface allowing to easily update info on the flash templates via simple admin area. While opened in Mint Editor, the template is represented as a structured combination of various flash components, with a separate set of configuration settings for each of them. The list of components include:</p>
<ul>
<li>Audio gallery;</li>
<li>Image gallery;</li>
<li>Video gallery;</li>
<li>Slideshow;</li>
<li>Dynamic news;</li>
<li>Dynamic text page;</li>
<li>Contact section.</li>
</ul>
<p>Mint Editor is probably the <strong>cheapest solution</strong> of that kind presented on the market. Mint Editor templates <strong>cost $50</strong> and are hand-coded for a certain appropriate design.</p>
<h2><a href="http://auroraflash.org">6. AuroraFlash Site Builder</a></h2>
<p><a href="http://auroraflash.org"><img class=" size-full wp-image-13978" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/aurora.jpg" alt="" width="570" height="267" /></a></p>
<p>In simple words AuroraFlash site builder is your desktop flash WYSIWYG editor allowing to build fantastic flash websites without any special skills and within 30 minutes. The concept is very simple and the editor works as a candy. All you have to do is download the editor and auto install it on your computer in several simple clicks. After that the program will offer you choose the template to work with from the number of default designs and the interface will load.</p>
<p>The components presented in default free templates include:</p>
<ul>
<li>Text pages;</li>
<li>News;</li>
<li>Photo gallery;</li>
<li>Contact section.</li>
</ul>
<p>There&#8217;s a <a href="http://auroraflash.org/downloads/pack1.zip">set of flash templates</a> you can download directly from the website absolutely for free and use it for creating of your personal website, however if you plan creating a project for your customer based on AuroraFlash website builder be sure to read the <a href="http://auroraflash.org/blog/?p=175">licensing terms</a>.</p>
<h2><a href=" http://www.yooba.com">7. Yooba Flash CMS</a></h2>
<p><strong>Developer:</strong></p>
<p><a href=" http://www.yooba.com"><img class=" size-full wp-image-13968" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/yooba.jpg" alt="" width="570" height="331" /></a></p>
<p>Yooba Flash CMS is a tool for creating simple flash animated websites in the Yooba environment. That&#8217;s a hosted solution so in order to manage your website you have to login to the membership area on the Yooba website. Before starting on the project you&#8217;ll have to prepare the design of your new web page and save all the elements as separate images that then will be uploaded to your Yooba interface. The nice feature about Yooba is that they offer simple website visitors stats.</p>
<p>The price of Yooba is somewhat high- <strong>€40 per slot a month</strong> and you have to build the design on your own. Yooba is not a CMS in the usual understanding however it allows to create animated websites with easy and without flash or any other special knowledge.</p>
<h2>8. <a href="http://www.flashmint.com">FlashMint CMS v3</a></h2>
<p><a href="http://www.flashmint.com"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/cmsv3.jpg" alt="" width="570" height="299" /></a></p>
<p>FlashMint is a leading provider of Flash CMS Templates. They have CMS v1, CMS v2 and CMS v3 templates presented in their collection. While the first two versions of FlashMint content management system where pretty primitive, version 3 looks cool. There&#8217;s a nice intuitive admin area and the administration interface allows to perform the following basic actions:</p>
<ul>
<li>Upload your logo; add company name;</li>
<li>Upload website background image;</li>
<li>Change company name and menu colors.</li>
</ul>
<p>As every content management system FlashMint CMS v3 allows:</p>
<ul>
<li>Create unlimited number of text pages;</li>
<li>Rearrange the order of the menu tabs.</li>
</ul>
<p>FlashMint CMS v3 was developed mainly as the content management system for portfolios and photography websites hence the following features:</p>
<ul>
<li>Unlimited number of photo galleries;</li>
<li>Photo controls for the website visitors;</li>
<li>Photo search;</li>
<li></li>
<li>Unlimited number of video galleries;</li>
<li>Slideshow creator.</li>
</ul>
<p>Other modules presented in FlashMint CMS v3 include news editor, events editor, mp3 track editor, meta tags section. There are 30 beautiful flash templates to choose from, no special server requirements and no complicated installation. The system is not skin based, so every template is developed separately.</p>
<p><strong>Template price: $204-215</strong></p>
<h2><a href=" http://templateaction.com">9. TemplateAction Flash CMS</a></h2>
<p><strong>Developer:</strong></p>
<p><img class=" size-full wp-image-13970" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/TemplateAction.jpg" alt="" width="570" height="306" /></p>
<p>According to TemplateAction team, TemplateAction website templates are fully customizable and editable via an extensive control panel. The admin area allows:</p>
<ul>
<li>Rename pages, edit and format texts;</li>
<li>Add links, add/remove/change images;</li>
<li>Change the video background.</li>
</ul>
<p>Compared to other Flash CMS system reviewed above, TemplateAction CMS doesn&#8217;t have an advanced functionality but it&#8217;s quite enough for a simple flash business or personal website. There are 17 nice templates presently available and the price is fair- <strong>$89</strong> only. There&#8217;s a admin panel demo available on <a href="http://templateaction.com/flash-cms-demo">YouTube</a> so you have a good chance to review the functionality before making your choice of the CMS based flash template and placing the order.</p>
<p>In conclusion I&#8217;d like to say that it&#8217;s only up to you what system to choose for creating and managing your flash website but let me give you some advice.</p>
<ol>
<li>Check the admin panel demo before making the purchase and make sure that it&#8217;s convenient for you. Don&#8217;t trust the words, test it.</li>
<li>Think what features you need and what you don&#8217;t- you don&#8217;t have to pay for the stuff that you don&#8217;t need.</li>
<li>Make your decision based on your template type. If you are a photographer- you&#8217;ll need photo and video galleries as well as your own domain name for brand recognition. Wix templates will work for a personal hobby website but you have to be more thoughtful when choosing a flash solution for your company business website.</li>
<li>Avoid all the templates with huge/complex animations. This websites will not only work slowly but can make the browser and computer freeze.</li>
</ol>
<p>Feel free to share your thoughts. All the best guys! Have a great day and see you soon again :)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/freebies/an-indepth-review-of-9-best-flash-cms-solutions/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Medical Websites in the Realm of Modern Design Trends</title>
		<link>http://www.1stwebdesigner.com/inspiration/medical-websites-in-the-realm-of-modern-design-trends/</link>
		<comments>http://www.1stwebdesigner.com/inspiration/medical-websites-in-the-realm-of-modern-design-trends/#comments</comments>
		<pubDate>Mon, 10 May 2010 21:00:36 +0000</pubDate>
		<dc:creator>Anastasia Miles</dc:creator>
				<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Case Study]]></category>
		<category><![CDATA[Medical Websites]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=13708</guid>
		<description><![CDATA[With design and development technologies evolving quickly it&#8217;s hard to imagine that some of the companies still have the websites designed in late 90&#8242;s or early 2000&#8242;s and do not think of creating something new and attractive. For some time and rarely meeting such oldie websites online I had no idea that the whole industry [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/inspiration/medical-websites-in-the-realm-of-modern-design-trends/"><img class="alignleft size-full wp-image-13751" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/medical-logo.png" alt="" width="150" height="150" /></a>With design and development technologies evolving quickly it&#8217;s hard to imagine that some of the companies still have the websites designed in late 90&#8242;s or early 2000&#8242;s and do not think of creating something new and attractive. For some time and rarely meeting such oldie websites online I had no idea that the whole industry could still be keeping to the old design and development formats that&#8217;s the medical centers and hospitals websites. <span id="more-13708"></span>There are hundreds of beautiful website showcases presented online but I have never seen any related to medical websites and so decided to give it a try.</p>
<p>I have browsed through all CSS galleries with zero results, made a search in Google for medical centers and even checked Google keyword suggestion tool for all the possible keywords people use to find hospitals and medical centers online&#8230; and it&#8217;s really desperate! Overall I have checked over 500 websites and just a few had a hint of modern design and the idea of the inspirational showcase post went into oblivion :)</p>
<p>Still, I think this article will be useful for any designer working on the medical project as I&#8217;m going to analyze the structure of the websites, the important home page elements, the menu and other design aspects.</p>
<p>At the end you will find a showcase of 24 non standard medical websites that can help you start with your own design as well as help medical centers to plan a scheme for a successful user-friendly medical website.</p>
<p>First of all let&#8217;s look into <strong>disadvantages of the old style designs</strong> for the medical center website:</p>
<p><a href="http://www.mcbg.org/"><img class="alignnone size-full wp-image-13742" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/wrong1.jpg" alt="" width="570" height="349" /></a></p>
<h3><strong>1. Small website width and as a result:</strong></h3>
<ul>
<li>No place for important info of the website home page;</li>
<li>The info is presented in a not efficient manner, the pages look cluttered;</li>
<li>The necessity to create multiple inside pages;</li>
<li>The feeling like you&#8217;re in the 90&#8242;s;</li>
<li>Loosing clients who don&#8217;t want to dive deep into the content but look for quick info on the home page before going into details.</li>
</ul>
<p><a href="http://www.texasmedicalcenter.org/root/en"><img class="alignnone size-full wp-image-13744" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/wrong2.jpg" alt="" width="570" height="349" /></a></p>
<h3><strong>2. Usage of small fonts and as a result:</strong></h3>
<ul>
<li>Visitor non- friendliness;</li>
<li>The inability to browser through the website pages for aged people;</li>
<li>Less accent on important information.</li>
</ul>
<h3><strong>3. Non professional/small/cut photos and images</strong></h3>
<p>I&#8217;m not sure if that&#8217;s really me who got used to modern creative websites, large spaces and easy access to information, but I think that the old-style websites are simply inconvenient to use. Let&#8217;s analyze what <strong>the key-points of successful medical website</strong> are and what elements I&#8217;d expect on the website home page as a regular user looking for some services or advice.</p>
<p><img class="alignnone size-full wp-image-13747" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/do-no-panic.jpg" alt="" width="570" height="103" /></p>
<h3><strong>1. Something telling me not to panic.</strong></h3>
<p>The relaxing light color scheme and some phrase in the header saying they can help no matter what. Small flash animation showing the photos of nurses, surgeons, doctors with convincing calming phrases would be perfect.</p>
<h3><strong>2.Search area.</strong></h3>
<p>Search area is vital. That means easy access to the needed information.</p>
<h3><strong>3. Testimonials area.</strong></h3>
<p>I feel a bit scared and desperate and I want to know what others say. In other words I need someone to calm me down and tell that everything is gonna be okay.</p>
<h3><strong>4. A big obvious button to Request an Appointment.</strong></h3>
<p>Well that&#8217;s exactly the reason why I have finally come to the website of the medical center. I want to request an appointment and I&#8217;d be grateful if you could point me to the right direction right away. Comparing to other websites that&#8217;s the same calls to action, they should be big enough and obvious.</p>
<h3><strong>5. Phone number.</strong></h3>
<p>The phone number should be in big letters somewhere on top right area. If that&#8217;s an emergency I&#8217;ll definitely would like to make a call.</p>
<h3><strong>6. Quick links. </strong></h3>
<p>Quick links to women&#8217;s health, physical health, healthy living or to frequently requested patient and visitor information.</p>
<h3><strong>7. Big multilevel menu on top.</strong></h3>
<p>Big multilevel menu on top giving access to all the sections possible. This is probably one of the website types when the larger number of sub menus can&#8217;t hurt. It&#8217;s simple, if you know nothing about medicine or doctors you won&#8217;t be able to find anything on the medical website without these multiple helping links.</p>
<h3><strong>8. Community engagement.</strong></h3>
<p>Link to forum, blog or some knowledge center. People are social creatures yet afraid of doctors and all of us would probably study all the possible literature and cases before visiting the doctors. Here&#8217;s when the forum with the doctor advice would be real handy.</p>
<p><img class="alignnone size-full wp-image-13749" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/no-place.jpg" alt="" width="570" height="103" /></p>
<p>Making this small analysis and comparing multiple old style and more up-to-date websites I have come to conclusion that this ancient websites suck not because I miss all the modern cool elements, big buttons or cute boxes, but mostly because there&#8217;s simply no place for the information that visitors were seeking for and expected to see.</p>
<p>Thus, building a website for a medical center or hospital keep in mind that space is really important. Think about people who would visit the website, about their behavior and psychology, talk to your friends, parents and grand parents as in this case that might be more helpful than your 10 years of website design experience.</p>
<p>Below is a collection of 24 medical websites that truly stand out from the crowd. They are both for website planning and design inspiration and I&#8217;d be happy to see a website created by you or your company in this list in the near future. Stay tuned and good luck!</p>
<h2>24 Really Nice &amp; Non-Standard Medical Center Websites</h2>
<h2><strong>1. <a href="http://www.doctorsofusc.com/">Doctorsofusc</a></strong></h2>
<p><img class="alignnone size-full wp-image-13714" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/doctorsofusc.jpg" alt="" width="570" height="424" /></p>
<h2><strong>2. <a href="http://uillinoismedcenter.org/">University of Illinois Medical Center</a></strong></h2>
<p><img class="alignnone size-full wp-image-13715" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/uillinoismedcenter.jpg" alt="" width="570" height="424" /></p>
<h2><strong>3. <a href="http://www.medhelp.org/">MedHelp</a></strong></h2>
<p><img class="alignnone size-full wp-image-13716" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/medhelp.jpg" alt="" width="570" height="424" /></p>
<h2><strong>4. <a href="http://www.flagstaffmedicalcenter.com/default">Flag Staff Medical Center</a></strong></h2>
<p><img class="alignnone size-full wp-image-13717" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/flagstaffmedicalcenter.jpg" alt="" width="570" height="424" /></p>
<h2><strong>5. <a href="http://www.concentra.com/">Concentra</a></strong></h2>
<p><img class="alignnone size-full wp-image-13719" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/concentra.jpg" alt="" width="570" height="424" /></p>
<h2><strong>6. <a href="http://www.csmc.edu/">CSMC</a></strong></h2>
<p><img class="alignnone size-full wp-image-13720" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/csmc.jpg" alt="" width="570" height="424" /></p>
<h2><strong>7.<a href="http://www.lexmed.com/"> LexMed</a></strong></h2>
<p><img class="alignnone size-full wp-image-13721" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/lexmed.jpg" alt="" width="570" height="416" /></p>
<h2><strong>8. <a href="http://www.bmc.org/">BMC</a></strong></h2>
<p><img class="alignnone size-full wp-image-13722" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/bmc.jpg" alt="" width="570" height="416" /></p>
<h2><strong>9. <a href="http://www.holyredeemer.com/Main/Home.aspx">HolyreDeemer</a></strong></h2>
<p><img class="alignnone size-full wp-image-13723" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/holyredeemer.jpg" alt="" width="570" height="416" /></p>
<h2><strong>10. <a href="http://www.healthangle.com/">Health Angle</a></strong></h2>
<p><img class="alignnone size-full wp-image-13724" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/healthangle.jpg" alt="" width="570" height="416" /></p>
<h2><strong>11. <a href="http://www.gapmedics.com/">GapMedics</a></strong></h2>
<p><img class="alignnone size-full wp-image-13725" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/gapmedics.jpg" alt="" width="570" height="416" /></p>
<h2><strong>12. <a href="http://lrmc.com/">lrmc</a></strong></h2>
<p><img class="alignnone size-full wp-image-13726" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/lrmc.jpg" alt="" width="570" height="416" /></p>
<h2><strong>13. <a href="http://www.tgmc.com/">Tgmc</a></strong></h2>
<p><img class="alignnone size-full wp-image-13727" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/tgmc.jpg" alt="" width="570" height="416" /></p>
<h2><strong>14. <a href="http://www.shs-nutrition.com/">Shs-Nutrition</a></strong></h2>
<p><img class="alignnone size-full wp-image-13728" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/shs-nutrition.jpg" alt="" width="570" height="416" /><br />
<strong><br />
</strong></p>
<h2><strong> 15. <a href="http://www.med.cornell.edu/#id=16">Med.Cornell</a></strong></h2>
<p><img class="alignnone size-full wp-image-13729" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/med.jpg" alt="" width="570" height="416" /></p>
<h2><strong>16. <a href="http://intermountainhealthcare.org/Pages/home.aspx">Intermountain Healthcare</a></strong></h2>
<p><img class="alignnone size-full wp-image-13730" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/intermountainhealthcare.jpg" alt="" width="570" height="416" /></p>
<h2><strong>17.<a href="http://www.jeffersonhospital.org/">Jefferson Hospital</a></strong></h2>
<p><img class="alignnone size-full wp-image-13731" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/jeffersonhospital.jpg" alt="" width="570" height="416" /></p>
<h2><strong>18. <a href="http://my.clevelandclinic.org/default.aspx">Clevel And Clinic</a></strong></h2>
<p><img class="alignnone size-full wp-image-13732" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/clevelandclinic.jpg" alt="" width="570" height="416" /></p>
<h2><strong>19. <a href="http://www.mobridgehospital.org/">Mobridge Hospital</a></strong></h2>
<p><img class="alignnone size-full wp-image-13733" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/mobridgehospital.jpg" alt="" width="570" height="416" /></p>
<h2><strong>20. <a href="http://www.valleymed.org/">Valley Med</a></strong></h2>
<p><img class="alignnone size-full wp-image-13734" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/valleymed.jpg" alt="" width="570" height="416" /></p>
<h2><strong>21. <a href="http://www.mountnittany.org/">Mountnittany</a></strong></h2>
<p><img class="alignnone size-full wp-image-13735" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/mountnittany.jpg" alt="" width="570" height="416" /></p>
<h2><strong>22. <a href="http://www.kumed.com/">Kumed</a></strong></h2>
<p><img class="alignnone size-full wp-image-13736" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/kumed.jpg" alt="" width="570" height="416" /></p>
<h2><strong>23. <a href="http://www.childrens.com/">Childrens</a></strong></h2>
<p><img class="alignnone size-full wp-image-13737" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/childrens.jpg" alt="" width="570" height="416" /></p>
<h2><strong>24. <a href="http://www.seattlechildrens.org/">Seattle Childrens</a></strong></h2>
<p><img class="alignnone size-full wp-image-13738" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/05/seattlechildrens.jpg" alt="" width="570" height="416" /><br />
Don&#8217;t forget to share your feed back via comments section.:)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/inspiration/medical-websites-in-the-realm-of-modern-design-trends/feed/</wfw:commentRss>
		<slash:comments>26</slash:comments>
		</item>
		<item>
		<title>The Ultimate Guide to Twitter Theme Design</title>
		<link>http://www.1stwebdesigner.com/design/ultimate-guide-twitter-theme-design/</link>
		<comments>http://www.1stwebdesigner.com/design/ultimate-guide-twitter-theme-design/#comments</comments>
		<pubDate>Fri, 02 Apr 2010 10:00:46 +0000</pubDate>
		<dc:creator>Anastasia Miles</dc:creator>
				<category><![CDATA[Social Media]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=9493</guid>
		<description><![CDATA[This post will help you become a real Twitter theme design Guru. You will learn how to design the cool theme, where to draw inspiration or where to get/generate some free themes if you don&#8217;t have time to create something on your own, don&#8217;t know Photoshop or you are just lazy and spend most of [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/design/ultimate-guide-twitter-theme-design/"><img class="alignleft size-thumbnail wp-image-9533" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/twitter-logo-150x150.png" alt="" width="150" height="150" /></a>This post will help you become a real Twitter theme design Guru. You will learn how to design the cool theme, where to draw inspiration or where to get/generate some free themes if you don&#8217;t have time to create something on your own, don&#8217;t know Photoshop or you are just lazy and spend most of the day enjoying the young spring sun :)</p>
<p><span id="more-9493"></span></p>
<h2>Designing a Custom Twitter Theme</h2>
<p>Strange as it may be but all the designers use different (though pretty close) dimensions when designing Twitter backgrounds, here come just a few:</p>
<ul>
<li>1600 px by 1200 px</li>
<li>1898 px by 1593 px</li>
<li>2048 px by 1707 px</li>
</ul>
<p>The dimensions you can choose for your Twitter theme depend on <strong>2 factors</strong>:</p>
<ul>
<li>the background design you plan creating;</li>
<li>the most used resolution (you can check it <a href="http://www.w3counter.com/globalstats.php">here</a> ): 1024&#215;768 (26,42%),1280&#215;800 (20,18% ) and 1280&#215;1024 (10,94%).</li>
</ul>
<p>If you plan creating a graphically rich background and want it to be large enough not to tile you can make it 1600 pixels wide &#8211; taking into account the most popular resolutions. If you plan leaving the right area in just a solid color with no graphics or gradients you can make the theme narrower (1200 pixels) and just add an option to tile. In most cases you can make your design 1200 pixels high but don&#8217;t forget that the active/informational area should be not higher than 800 pixels as some of us have lots of tools added to the browser toolbar which makes the visible area even smaller.</p>
<p>Creating the design for DesignTermite Twitter theme we have used 1300 x1000 canvas size matching all the most popular resolutions and quite enough to create something unique.</p>
<p><img class="alignnone size-full wp-image-9497" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/twitter1.jpg" alt="" width="570" height="438" /></p>
<p>Starting on the Twitter theme design I strongly recommend making a screenshot of some twitter theme in your browser and use it as the basis for future design. The area on the left of the tweeting interface is 250 pixels wide. It&#8217;s recommended to leave at least 10 pixels on the right and left of this area for better visibility and perception and thus the active area is around 230 pixels or so (the active area on our theme is 210 pixels).</p>
<p><img class="alignnone size-full wp-image-9498" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/twitter2.jpg" alt="" width="570" height="438" /></p>
<p>Having the tweeting interface screenshot as a part of your design will help you to better organize the elements and ensure they are not being covered by the middle area. You will also know where to start the background design on the right side if you plan creating some specific design elements.</p>
<p>The sample of the Twitter theme with middle area overlapping the text info on the left:</p>
<p><a href="http://twitter.com/betterinpink"><img class="alignnone size-full wp-image-9499" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/betterinpink.jpg" alt="" width="570" height="408" /></a></p>
<p>Some of designers are also making use of the Twitter background header area and add company name, links, email addresses or contact phones there. This is not an easy thing to accomplish, you have to move the elements, save as .jpg, upload as a Twitter background and look for a perfect location for say a company name at the same time making sure the design doesn&#8217;t look cluttered. If you&#8217;re a fan of the clean style, you can just leave the header area as it is, if you are a guru of the clean style, it&#8217;s worth giving it a try.</p>
<h3><strong>Good example:</strong></h3>
<p><a href="http://twitter.com/chadmcmillan"><img class="alignnone size-full wp-image-9500" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/good-example.jpg" alt="" width="570" height="317" /></a></p>
<h3><strong>Bad example:</strong></h3>
<p><a href="http://twitter.com/nymphont"><img class="alignnone size-full wp-image-9501" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/bad-example.jpg" alt="" width="570" height="317" /></a></p>
<h2>10 Rules to Follow</h2>
<p>Now when you can choose the right dimensions and have a draft with the middle area screenshot ready you can start on design itself. Same as a website home page, Twitter theme should speak about the author/services or whatever you are trying to deliver to your audience. These 10 simple rules will help you make your Twitter theme not just a cool background but an effective marketing tool:</p>
<ol>
<li>Design your Twitter theme following the style and colors of your website.</li>
<li>Add your photo (if you are a one-company person) for more personal approach (we all like to see who we are working/communicating with).</li>
<li>Add your company logo and company name.</li>
<li>Give a link to your website.</li>
<li>Provide email and contact phone number (in case you check your email often and answer the phone, Twitter is real-time).</li>
<li>If you work in California only don&#8217;t forget to mention that, it&#8217;ll help you to create a more targeted base of followers interested in your services.</li>
<li>Give a brief description of the services you provide: this can be a few words or several sentences but make sure they deliver the important information.</li>
<li>Spend some time on your design. If you provide design services some percentage of people might judge on your creativity from your Twitter theme.</li>
<li>Keep the design clean. Make sure the middle area is not overlapping your information (this is the problem with 80% of themes having the info block on the left), that your company name is not cut and that Twitter users don&#8217;t have to scroll down to see some important info.</li>
<li>Make Twitter theme a small portfolio of your works. If you are a photographer, designer or painter you can nicely integrate the screenshots of your works into the background and your work will speak for itself.</li>
</ol>
<p><strong>P.S</strong> You may skip some of the points above if you own a well established brand or a popular website and just create something cool to keep your fans even more excited and inspired.</p>
<h2>Examples:</h2>
<p><a href="http://twitter.com/designmeme"><img class="alignnone size-full wp-image-9505" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/designmeme.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/aaronmillerillz"><img class="alignnone size-full wp-image-9506" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/aaronmillerillz.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="https://twitter.com/naldzgraphics"><img class="alignnone size-full wp-image-9504" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/naldzgraphics.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/jonathan360"><img class="alignnone size-full wp-image-9507" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/jonathan360.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/mayhemstudios"><img class="alignnone size-full wp-image-9515" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/mayhem.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/jodyphillips"><img class="alignnone size-full wp-image-9508" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/jodyphillips.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/farrhad"><img class="alignnone size-full wp-image-9509" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/farrhad.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/problogger"><img class="alignnone size-full wp-image-9510" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/problogger.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/glenstansberry"><img class="alignnone size-full wp-image-9514" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/glen.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/DesignerDepot"><img class="alignnone size-full wp-image-9512" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/designerdepot.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/gavello"><img class="alignnone size-full wp-image-9513" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/gavello.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/patternhead"><img class="alignnone size-full wp-image-9503" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/patternhead.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/peachpops"><img class="alignnone size-full wp-image-9511" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/peachpops.jpg" alt="" width="570" height="337" /></a></p>
<h2>Using photo as a Custom Twitter background</h2>
<p>This is probably the most simple way to create a custom Twitter theme. Just take a cool photo and upload it as a Twitter background. Adding some information will help other twitters to identify who you are and what you do. You still have to keep in mind that the photo size should be at least 1024&#215;800 to cover the background and that the middle area will be covered by tweeting interface. It makes sense to use some abstract rather than portrait photos and blend the edges of the photo into the background to eliminate the harsh edges.</p>
<h4>Examples:</h4>
<p><a href="http://twitter.com/indigomay/"><img class="alignnone size-full wp-image-9517" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/julia.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/thephotoargus"><img class="alignnone size-full wp-image-9525" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/argus.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/ClubPhotography"><img class="alignnone size-full wp-image-9518" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/clubphotography.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/rgphotographic"><br />
<img class="alignnone size-full wp-image-9519" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/rgphotographic.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/kriskidd"><br />
<img class="alignnone size-full wp-image-9521" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/kriskidd.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/tamarlevine"><img class="alignnone size-full wp-image-9522" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/tamarlevine.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/dianatopan"><img class="alignnone size-full wp-image-9523" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/dianatopan.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/Zinziii"><img class="alignnone size-full wp-image-9520" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/zinziii.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/Donaldverger"><img class="alignnone size-full wp-image-9524" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/donald.jpg" alt="" width="570" height="337" /></a></p>
<h2>Using a Tile Pattern for Twitter background</h2>
<p>Not way too creative but not a bad solution if you need things done quickly. You can either type &#8220;free patterns&#8221;, &#8220;tile patterns&#8221;, &#8216;twitter patterns&#8221; into Google and look for something to your liking or generate a custom pattern using one of the tools below. Do not forget about size requirements. The patterns look nice but if you want your Twitter background to be informative you&#8217;ll have to add backings for text, logo and info. Below you will find some resources where you can find cool free Twitter patterns.</p>
<ul>
<li><strong><a href="http://bestdesignoptions.com/?p=1576">BestDesignOptions</a></strong><br />
1000+ free background patterns</li>
<li><strong><a href="http://www.colourlovers.com/">COLOURlovers</a></strong><br />
You can choose from the list of patterns available or create your own pattern directly on the website with a cool Seamless Studio application.</li>
<li><strong><a href="http://www.stripegenerator.com/">Stripe Generator</a></strong><br />
Allows you to generate only striped patterns but they look quite cool.</li>
<li><strong><a href="http://www.tartanmaker.com/">Tartan Maker</a></strong><br />
The name speaks for itself. You can create various tartan backgrounds.</li>
<li><strong><a href="http://bgpatterns.com/">BgPatterns</a></strong><br />
This one is pretty simple. You are offered to choose a figure that will be repeated multiple times. You can choose the background color, opacity and the angle for the icon-tile. The backgrounds are simple yet very sweet.</li>
<li><strong><a href="http://www.subblue.com/projects/guilloche">Guilloché Pattern Generator</a></strong><br />
This one is a bit different from the rest and allows to create a unique structure (there are lots of similar generators on the web now). You can use it as a tile for your background and create something unique looking with less efforts.</li>
</ul>
<h2>Examples:</h2>
<p><a href="http://twitter.com/sophie_muagghh"><img class="alignnone size-full wp-image-9659" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/sophie_muagghh.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/hayes_photo"><img class="alignnone size-full wp-image-9528" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/hayes.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/photoignite"><img class="alignnone size-full wp-image-9529" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/photoignite.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/msphotoshow"><img class="alignnone size-full wp-image-9530" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/msp.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/TopBeatKylee"><img class="alignnone size-thumbnail wp-image-9655" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/TopBeatKylee.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/ArtyDani"><img class="alignnone size-full wp-image-9657" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/ArtyDani.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/angelamayhew"><img class="alignnone size-full wp-image-9658" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/angelamayhew.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/UniqueCruise"><img class="alignnone size-full wp-image-9660" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/UniqueCruise.jpg" alt="" width="570" height="337" /></a></p>
<p><a href="http://twitter.com/toxicmeez"><img class="alignnone size-full wp-image-9656" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/toxicmeez.jpg" alt="" width="570" height="337" /></a></p>
<h2>Get a ready-to-go Twitter background for free</h2>
<p>The number of websites offering nice free Twitter backgrounds is rapidly growing (and the number of those creating low quality stuff is growing even faster) so we&#8217;ll list just a few we like most. The main reason is that Twitter backgrounds are cheap and easy to create and same as the free templates they are used mainly for promotion of some other services and paid design as well as for the text line &#8220;created by&#8221;. In any case that&#8217;s the sweet offer and it would be a mistake not to use it. Also, if you are looking for a holiday Twitter backgrounds you may follow <a href="www.flashmint.com">FlashMint</a> and <a href="www.templatemonster.com">TemplateMonster</a> on Twitter as these template giants usually create free Twitter backgrounds for Christmas, Halloween and other holidays. Most of the websites listed below offer Personalized Twitter Backgrounds and Custom Twitter Backgrounds for a fair fee.</p>
<ul>
<li><a href="http://www.custombackgroundsfortwitter.com/gallery/category/free/">Social Indentities</a></li>
<li><a href="http://twitpaper.com/">TwitPaper</a></li>
<li><a href="http://www.twitrbackgrounds.com/">Twitrbackgrounds</a></li>
<li><a href="http://freetwitterdesigner.com/">Free Twitter Designer</a></li>
<li><a href="http://www.twitbacks.com/">TwitBacks</a></li>
<li><a href="http://www.twitter-images.com/">Twitter Images</a></li>
<li><a href="http://www.twitbackgroundimages.com/">TwitBackgroundImages</a></li>
<li><a href="http://www.freetwitterskins.com/">FreeTwitterSkins</a></li>
<li><a href="http://www.twitterbackgroundsbase.com/">TwitterBackgroundBase</a></li>
<li><a href="http://www.twitterbackgrounds.org/">Twitterbackgrounds</a></li>
</ul>
<h2>Useful Twitter Tutorials</h2>
<ul>
<li><a href="http://web.mac.com/zban2002/Lawfulevil_Pages/Twitter_Tutorials.html">How to make a Twitter background picture in Photoshop</a></li>
<li><a href="http://www.layersmagazine.com/twitter-background-using-adobe-illustrator.html">Twitter Background using Adobe Illustrator</a></li>
<li><a href="http://theclosetentrepreneur.com/create-a-twitter-background-using-powerpoint">Create a Twitter background using PowerPoint</a></li>
<li><a href="http://mashable.com/2009/05/31/twitter-tutorials-youtube/">Top 7 Twitter Tutorials on YouTube</a> (not design related)</li>
<li><a href="http://www.outlawdesignblog.com/2009/30-essential-twitter-tutorials-for-newbies-and-experts/">30 Essential Twitter Tutorials for Newbies and Experts </a>(almost not design related)</li>
</ul>
<p>I hope you will find this post useful and it&#8217;ll help you to create a nice and functional Twitter background. Good luck!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/design/ultimate-guide-twitter-theme-design/feed/</wfw:commentRss>
		<slash:comments>36</slash:comments>
		</item>
		<item>
		<title>Empathizing Color Psychology in Web Design</title>
		<link>http://www.1stwebdesigner.com/design/color-psychology-website-design/</link>
		<comments>http://www.1stwebdesigner.com/design/color-psychology-website-design/#comments</comments>
		<pubDate>Thu, 01 Apr 2010 06:00:25 +0000</pubDate>
		<dc:creator>Anastasia Miles</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[colors]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=8803</guid>
		<description><![CDATA[The way different colors influence our mood, state of soul and body is really exciting. Most of us do not realize how it works and only a few probably pay attention. Though the influence of the colors may be some what overestimated, we can obviously feel it in some situations (imagine yourself in a dark [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/design/color-psychology-website-design/"><img class="alignleft size-full wp-image-8859" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/colors1.jpeg" alt="" width="150" height="150" /></a>The way different colors influence our mood, state of soul and body is really exciting. Most of us do not realize how it works and only a few probably pay attention. Though the influence of the colors may be some what overestimated, we can obviously feel it in some situations (imagine yourself in a dark red room or in the room in the sky colors). Today we&#8217;ll be speaking about color perception and color psychology in website design, the way different brands use colors and what&#8217;s their message.<br />
<span id="more-8803"></span></p>
<p><img class="alignleft size-full wp-image-8860" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/colors2.gif" alt="" width="245" height="205" />The colors are divided into two basic groups &#8211; colors in the red area of the color spectrum known as warm colors (red, orange and yellow) and colors in the blue area known as cool colors (blue, purple and green). The warm colors evoke emotions ranging from feelings of warmth, comfort and coziness (the fire burning in the rainy cold evening) to anger and aggression. Cool colors are as a rule described as calm and tranquil but can also be associated with sadness (being in blues) or indifference.</p>
<p>In the ancient times people believed that colors can cure from different diseases. This science was called Chemotherapy, and some of the basics were as following:</p>
<ul>
<li> <strong>Red</strong> increases blood circulation and thus stimulates the body and mind</li>
<li> <strong>Yellow</strong> stimulates the nerves and purifies the body</li>
<li> <strong>Orange</strong> increases your energy</li>
<li> <strong>Blue</strong> treats pain</li>
<li> <strong>Indigo</strong> alleviates skin problems</li>
</ul>
<p>Though the majority of psychologists take color therapy sceptically big brands don&#8217;t seem to agree with that. They create huge marketing campaigns based on the way we perceive the colors and make people buy. Below is the table with the colors and emotions/feelings they are widely associated with. Let&#8217;s try to analyze the websites of some world-known companies and see how they implement color techniques.</p>
<table border="1">
<tbody>
<tr>
<th>Color</th>
<th>Emotions</th>
</tr>
<tr>
<td>Black</td>
<td>Symbol of menace or evil, popular as an indicator of power. Associated with death and mourning, unhappiness, sexuality, formality, and sophistication.</td>
</tr>
<tr>
<td>White</td>
<td>Purity or innocence. Cold, bland, and sterile.</td>
</tr>
<tr>
<td>Red</td>
<td>Evokes strong emotions, associated with love, warmth, and comfort. Still considered an intense and angry color that creates feelings of excitement, intensity, sexuality.</td>
</tr>
<tr>
<td>Blue</td>
<td>A favorite color for many people and the color most preferred by men. Gives the feelings of calmness or serenity. Described as peaceful, tranquil, secure, and orderly.</td>
</tr>
<tr>
<td>Green</td>
<td>Symbolizes nature and the natural world. Represents tranquility, good luck, health, and jealousy. Symbol of fertility, has a calming effect and relieves stress.</td>
</tr>
<tr>
<td>Yellow</td>
<td>Cheery and warm, but can also create feelings of frustration and anger. Most fatiguing to the eye (that&#8217;s why you&#8217;ll rarely see a bright yellow website or a room painted with yellow with the exception of playrooms for kids) yet most attention-getting color (so great color for important details or calls to action- remember the yellow stop/caution color).</td>
</tr>
<tr>
<td>Purple</td>
<td>Royalty and wealth, wisdom and spirituality, sex and relationships, exotic and special.</td>
</tr>
<tr>
<td>Brown (all of us love wooden backgrounds).</td>
<td>Natural color that evokes a sense of strength and reliability, warmth, comfort, and security.</td>
</tr>
<tr>
<td>Orange (banner color of the counter-culture).</td>
<td>Blatant and vulgar color, makes you feel excitement, enthusiasm, and warmth. As a combination of red and yellow it&#8217;s often used to draw attention.</td>
</tr>
<tr>
<td>Pink</td>
<td>Associated with love, romance, youth, freshness and may have a calming effect. Pink effect depends on the type of pink (strong, light, deep etc).</td>
</tr>
</tbody>
</table>
<p>Now when we know what colors mean and what feelings they evoke, let&#8217;s try to make a simple analysis of the color schemes used by 20 world-known brands on their corporate websites. That&#8217;s really exciting and you start taking things differently.</p>
<h2>1. <a href="http://www.coca-cola.com/index.jsp ">Coca-Cola</a></h2>
<p><img class="alignnone size-full wp-image-8837" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/coca-cola.jpg" alt="" width="570" height="358" /><br />
Primary color is red on a white and light gray background for better visibility and contrast. The red is supposed to create the feeling of excitement and energy. &#8220;Open happiness&#8221; text in the main menu corresponds to the color perception.</p>
<p>Though the white is probably used to make an accent on red, as a cold color it&#8217;s supposed to give the feeling of coolness &#8220;For refreshing ideas&#8221; as they say in the moto. An excellent job!</p>
<h2>2. <a href="http://www.mcdonalds.com/">McDonalds</a></h2>
<p><img class="alignnone size-full wp-image-8838" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/mcdonalds.jpg" alt="" width="570" height="358" /><br />
Though the McDonalds restaurant colors we are used to are yellow and red (to cause children excitement, a bit of irritation and craziness), the website looks pretty formal in black and white. And no wonder, being visited by parents who would like to know what their kids eat and how fat is that, black and white is the perfect solution to make the website look strict, formal, informative, clean and somewhat sterile.</p>
<p>Now imagine it would be mainly in yellow and red (causing excitement and the most fatiguing to the eye)- that would make parents mad. Frustrated parents = Less money</p>
<h2>3. <a href="http://www.mms.com/us/">M&amp;M&#8217;s</a></h2>
<p><img class="alignnone size-full wp-image-8839" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/mms.jpg" alt="" width="570" height="358" /><br />
The M&amp;M&#8217;s colors that we usually see in the TV/bigboard ads are yellow and red (double excitement). The website itself is a mix of all possible colors, from light blue on the background to dark-blue, purple, green, yellow, orange, red in the banners and header area. The M&amp;M&#8217;s guys are extremely smart, everyone can choose a candy to his liking :) There&#8217;s one problem though- the website looks very clumsy and kinda created from pieces that do not match.</p>
<h2>4. <a href="http://www.colgate.com/app/Colgate/US/HomePage.cvsp">Colgate</a></h2>
<p><img class="alignnone size-full wp-image-8840" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/colgate.jpg" alt="" width="570" height="358" /><br />
Red, white and blue- the colors of world-famous 3-colored toothpaste and the only colors used on the website (even mother and kid on the photo in the header area are dressed in red and white on the blue sky background!). Red for energy and happiness, white for shine and sterility, blue for cold freshness of stream water and confidence. Though I like the toothpaste, the website color scheme is not pleasant to my eyes. The abundance of bright red makes me feel uncomfortable and makes it almost not possible for me to focus on the texts and information.</p>
<h2>5. <a href="http://www.nestle.com/ ">Nestle</a></h2>
<p><img class="alignnone size-full wp-image-8842" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/nestle.jpg" alt="" width="570" height="358" /><br />
Nestle slogan says &#8220;Good Food, Good Life&#8221; and the white-gray-blue color-scheme makes you feel calm, secure and in some way sure that&#8217;s everything is gonna be okay. You will remember this feeling subliminally and buying something produced by Nestle next time you&#8217;ll be thinking &#8220;somehow I know this is a reliable company producing good products, I might have read this somewhere&#8221;. Another great example how marketing is closely connected with the color perception.</p>
<h2>6. <a href="http://www.nescafe.com/">Nescafe</a></h2>
<p><img class="alignnone size-full wp-image-8843" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/nescafe.jpg" alt="" width="570" height="358" /><br />
A product of Nestle company, Nescafe website is however designed in deep plum colors- a mix of red associated with the cozy warmth, energy and power and purple- making you feel so special, exclusive and unique. I love this color scheme, it&#8217;s not so annoying as red and not so exquisite as purple, it makes you feel special yet very comfy.</p>
<h2>7. <a href="http://www.cadbury.com/">Cadbury</a></h2>
<p><img class="alignnone size-full wp-image-8844" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/cadbury.jpg" alt="" width="570" height="358" /><br />
A website made of all shades of purple. I guess it is supposed to say that Cadbury products are very special, but it makes me feel playful for some reason. That&#8217;s an interesting approach, while the chocolate is usually associated with energy (like Snikers) or sex (dark black chocolate) the playful approach definitely makes the brand stand out from the crowd. Or am I the only one taking it like this?</p>
<h2>8. <a href="http://www.nokia.com/A4138120">Nokia</a></h2>
<p><img class="alignnone size-full wp-image-8845" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/nokia.jpg" alt="" width="570" height="358" /><br />
Blue, green, gray, white and a little bit of pink. Blue for serenity, green for tranquility and nature, gray to nicely mix blue and green, white for clarity, pink is probably to attract girls :) The website is designed in the colors to make you feel sure of the quality, yet they stay away from the standard blue-gray-white color scheme.</p>
<p>Green is knows to relieve stress and will have a calming effect on somewhat frustrated with daily heap of things to do business people who have come to check for the updates.</p>
<h2>9. <a href="http://www.kodak.com/">Kodak</a></h2>
<p><img class="alignnone size-full wp-image-8846" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/kodak.jpg" alt="" width="570" height="358" /><br />
Though the Kodak products are usually associated with yellow (yeah, they catch the attention) the website is designed in the classic gray-white-blue color scheme, so pleasant to the eye and allowing to focus on texts and information. You feel that you will get all the info that you need in a clear way, yet you do not feel too formal, just professional approach to things.</p>
<h2>10. <a href="http://www.gillette.com">Gillette</a></h2>
<p><img class="alignnone size-full wp-image-8847" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/gilette.jpg" alt="" width="570" height="358" /><br />
Blue is the color most preferred by men and guys at Gillette perfectly know this. &#8220;The Best a man can get&#8221;- the favorite men color and a bit of red and orange on promotions to catch attention. They know what you like guys and they know how to sell their products to you.</p>
<h2>11. <a href="https://www.marlboro.com/">Marlboro</a></h2>
<p><img class="alignnone size-full wp-image-8848" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/marlboro.jpg" alt="" width="570" height="358" /><br />
Red, black and gray- power, sophistication, sexuality and strong emotions- features of a &#8220;real&#8221; man. However if you visit <a href="http://www.philipmorrisusa.com/">philipmorrisusa</a> you will notice that the company corporate website is designed in blue color scheme- peaceful, tranquil, secure. That&#8217;s an excellent example how the colors work, if you still don&#8217;t believe it, let&#8217;s move forward.</p>
<h2>12. <a href="http://www.ikea.com/us/en/">Ikea</a></h2>
<p><img class="alignnone size-full wp-image-8849" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/ikea.jpg" alt="" width="570" height="358" /><br />
The header of the website is designed in bright colors- yellow, yellowish-green and sky-buy &#8211; which makes your feel somewhat excited (and willing to buy something?). The photos used in flash animation are bright as well which makes you even more excited. The website body is pretty simple- black and blue text on a white background to give you full access to the information.</p>
<p>The <a href="http://www.ikea.com/ms/en_US/special_offers.html">special offers page</a> has a huge red banner on top and you can&#8217;t keep your eyes from it! That same moment your brain keeps reading &#8220;special offers&#8221; over and over again &#8230; and Ikea has you.</p>
<h2>13. <a href="http://budweiser.com/">Budweiser</a></h2>
<p><img class="alignnone size-full wp-image-8850" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/budweiser.jpg" alt="" width="570" height="358" /><br />
Same as the Marlboro the Budweiser website main promotional page is designed in red and black colors, meaning &#8220;Hey Dude- drink Budweiser and you&#8217;ll be a &#8220;Man&#8221;. The inside pages all have different backgrounds- white, red, black, gray. I don&#8217;t think that there&#8217;s some separate marketing campaign behind this but rather a non-standard design approach (though most of the pages still remain in red).</p>
<h2>14. <a href="http://www.loreal.com">L&#8217;oreal</a></h2>
<p><img class="alignnone size-full wp-image-8851" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/loreal.jpg" alt="" width="570" height="358" /><br />
Not much to say about L&#8217;oreal website- being designed in all possible shades of purple it makes you feel really special. With L&#8217;oreal products you&#8217;ll be sexy, stylish, sure of yourself, and really-really special.</p>
<h2>15. <a href="http://www2.kelloggs.com/">Kellogg&#8217;s</a></h2>
<p><img class="alignnone size-full wp-image-8852" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/kelloggs.jpg" alt="" width="570" height="358" /><br />
Since 1906 people have known Kellogg as a company they can rely on for great-tasting, high-quality foods. All the website speaks of fun and excitement (lots of yellow and red) and the smiling families on the photos in the header area make you feel even happier. Yeah, your kids gonna love Kellogg&#8217;s they are so fun and cool! Even the text on the website speaks about it &#8220;We&#8217;re excited to offer fun promotions related to our products.&#8221; It&#8217;s fun, fun, fun!</p>
<h2>16. <a href="http://gucci.com/">Gucci</a></h2>
<p><img class="alignnone size-full wp-image-8853" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/gucci.jpg" alt="" width="570" height="358" /><br />
Natural light brown colors make you think of the Gucci products as very natural (and in some meaning they are since they are made from leather). Similar to L&#8217;oreal, the website is designed in a single color where different shades are used to make accents. Though I&#8217;m against killing animals for fur and leather, I like Gucci website, it&#8217;s so exquisite and natural.</p>
<h2>17. <a href="http://www.heinz.com/">Heinz</a></h2>
<p><img class="alignnone size-full wp-image-8854" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/heinz.jpg" alt="" width="570" height="358" /><br />
The website home page has a huge photo used as the background, and you can see the sky, the field and tasty tomatoes- simple yet effective. The background of the website inside pages changes from page to page: brown which resembles of land, blue which resembles the sky and the gray like the sky before the rain. Heinz guys are using colors very effectively, since the core of their product is what they grow (or buy from third party) they use all the natural colors and photos to show that the product is the essence of what beautiful nature gives us.</p>
<h2>18. <a href="http://www.converse.com/">Converse</a></h2>
<p><img class="alignnone size-full wp-image-8855" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/converse.jpg" alt="" width="570" height="358" /><br />
While the converse products are available in all possible colors, the website is designed in grunge style and colors resembling the pavement and old jeans. The accent here is made not on the colors but the audience which should be attracted by the according design style, hand-drawn elements and the seeming carelessness.</p>
<h2>19. <a href="http://www.kleenex.com/NA/Default.aspx">Kleenex</a></h2>
<p><img class="alignnone size-full wp-image-8856" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/cleenex.jpg" alt="" width="570" height="358" /><br />
Kleenex is another great example of the website designed in the natural blue/green colorscheme (to make you feel confident the product is natural and reliable) with the orange elements to grab attention. It&#8217;s pretty interesting that I have never paid attention earlier how many of big corporate websites are using this same colorscheme and still don&#8217;t resemble each other. Probably that&#8217;s because we do perceive the colors in some other way than just knowing and recognizing what color is that, I think that we see it as an integral part of some system.</p>
<h2>20. <a href="http://www.duracell.com/">Duracell</a></h2>
<p><img class="alignnone size-full wp-image-8857" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/duracell.jpg" alt="" width="570" height="358" /><br />
Duracell website is designed in 3 main colors and their shades: black, orange and green. Black- to make more contrast for the orange and to add some formality and solidity. Orange- power, energy, joy. Green is natural and works great with the orange. &#8220;Smart power&#8221; as they say in the product, and the whole website makes you feel as if Duracell products are just what you need, the batteries are powerful and you can rely on them in any situation. BTW, I do buy Duracell :)</p>
<p>What colors do you use in website design? What are your favorite colors? Waiting on your comments guys!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/design/color-psychology-website-design/feed/</wfw:commentRss>
		<slash:comments>28</slash:comments>
		</item>
		<item>
		<title>Redesign Process: Taking Small Steps for a Better Website</title>
		<link>http://www.1stwebdesigner.com/design/redesign-process-taking-small-steps-better-website/</link>
		<comments>http://www.1stwebdesigner.com/design/redesign-process-taking-small-steps-better-website/#comments</comments>
		<pubDate>Fri, 12 Mar 2010 10:00:43 +0000</pubDate>
		<dc:creator>Anastasia Miles</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[creative_process]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[redesign]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=7106</guid>
		<description><![CDATA[This is experimental article, where you will see whole redesigning process behind the scenes and read different way of thinking. In this review you will be leaded through necessary steps needed to get successful redesign. If responses and feedback will be positive, we will make this monthly or even weekly event analyzing also well known [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://1stwebdesigner.com/design/redesign-process-taking-small-steps-better-website"><img class="alignleft size-full wp-image-7111" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/readyphotosite-logo.jpg" alt="" width="150" height="150" /></a></p>
<p>This is experimental article, where you will see whole redesigning process behind the scenes and read different way of thinking. In this review you will be leaded through necessary steps needed to get successful redesign.</p>
<p>If responses and feedback will be positive, we will make this monthly or even weekly event analyzing also well known blog redesigns &#8211; showing pros and cons. I think real examples are the best way to show the point and teach something! Let&#8217;s start &#8211; we will be happy to hear your feedback! It will be exciting!<span id="more-7106"></span></p>
<p><a href="http://www.readyphotosite.com"><strong>ReadyPhotoSite</strong></a> is a flash photo CMS created especially for photographers, painters, artists and people of art. The CMS is presented in <strong>3 different package</strong>s that vary in functionality and a number of skins, so you can choose the design you like and then choose the website features.</p>
<p>We started working on this ReadyPhotoSite project on <em>May 2009</em> together with Karen Myers who is presently the CEO of <a href="http://www.readyphotosite.com">readyphotosite</a>. But Karen is not only a partner, but also a good friend of mine so we were both into it.  By the time we started working on website design, the product (the CMS and the skins) was ready and our task was to launch a simple website as soon as possible, apply the changes and make the updates as we go. And so we did.</p>
<h1>Starting with a simple website and the problems we faced</h1>
<p><img class="alignnone size-full wp-image-7115" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/homepage-old.jpg" alt="" width="570" height="462" /><br />
The website we have uploaded online consisted of the <strong>following main pages</strong>:</p>
<ul>
<li>home page</li>
<li>products page</li>
<li>why buy</li>
<li>link to blog</li>
<li>contact page</li>
<li>links in the footer to Tutorials, TOS, Privacy, Tutorials and Hosting.</li>
</ul>
<p>The home page had around 10 lines of text and a cool stylish intro in retro style in the middle &#8211; home page didn&#8217;t share almost no information about the product and thus was pretty useless. Besides it took around <strong>30 second</strong>s for the intro to load and we were loosing most of the people already in beginning process when they were visiting our home page.</p>
<p>Still the owners of the project insisted <strong>we should keep the intro</strong> as they spent a good amount of money on it and wanted to see it online no matter what.</p>
<p><img class="alignnone size-full wp-image-7116" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/menu_old.jpg" alt="" width="570" height="209" /><br />
As I have mentioned at the very beginning of the post, the ReadyPhotoSite websites are available in 3 packages:</p>
<ul>
<li>basic,</li>
<li>advanced</li>
<li>ecommerce</li>
</ul>
<p>Look above, there is the screenshot showing how this concept was presented on the website.</p>
<p>While the products page itself had the basic text info, the buttons in the header lead to almost identical pages of basic, advanced and ecommerce packages that had:</p>
<ul>
<li>screenshots of design themes listed on them</li>
<li>the link to the preview</li>
<li>the buy button</li>
</ul>
<p>All the pages had the list of the same theme&#8217;s screenshots which was obviously somewhat confusing for the website visitors as without visiting the features page they had no idea of the difference and they just saw that same designs.</p>
<p><img class="alignnone size-full wp-image-7117" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/old-products-page.jpg" alt="" width="570" height="513" /><br />
The initial purchase process was even more complicated. The buy button next to the skin lead to a static html page with 2 options to choose from- &#8220;Host with ReadyPhotoSite&#8221; or &#8220;I already have hosting&#8221; and 2 separate links that took you further to the shopping cart page( the WHMCS shopping system allows creating only static product links). It was only later that we realized that the purchase process was a real nightmare with too many steps and no convenient option to choose other design or other package.</p>
<p>The other thing that we initially paid no special attention to was the skin preview page, that was simply opening the website in the new window and where we were loosing customers as well since there was no calls to action or some kind of info how to move forward.</p>
<p><img class="alignnone size-full wp-image-7119" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/traffic.jpg" alt="" width="570" height="108" /><br />
The website required a serious work. In about 3 month after launch we were getting nice targeted traffic from search engines, photo forums and blogs, photo communities, template and CMS reviews websites, paid ads, social networks and our partners, but the website <strong>was not converting the traffic into sales</strong>. We had a tremendous bounce rate of about 50% and people were staying on the website for less than 30 seconds, getting lost and not sure what to order and how to order. So we have started on conversion rate optimization, creating a user friendly website step by step.</p>
<h2>1) Moving the intro to the inside page.</h2>
<p><img class="alignnone size-full wp-image-7120" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/process.jpg" alt="" width="570" height="374" /><br />
The first step we made was the optimization of the website home page that was the main landing page and where we were loosing most of our clients because of the intro. We have replaced it with the large graphical collage explaining how to launch the website with ReadyPhotoSite CMS and huge buttons next to it: free trial, link to the admin area demo and the link to the page with the intro (requested by owners). Below we had a new keywords-rich text explaining the advantages of RPS and listing some of the main features.</p>
<h2>2) Reworking the product pages.</h2>
<p><img class="alignnone size-full wp-image-7125" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/old-menu-2.jpg" alt="" width="570" height="77" /><br />
The products pages and the ordering process was a real pain in the ass. We had 4 tasks to solve:</p>
<p>- reduce the number of steps before the purchase;<br />
- give an easy option to get back to other products and packages;<br />
- make the product structure understandable( the relation of skins and packages);<br />
- inform the potential buyer about package features on the fly (so that they don&#8217;t go away from the purchase pages to the features page).</p>
<p>And here&#8217;s what we did:</p>
<ol>
<li> Removed the buttons (and the pages) to advanced/creative/ecommerce packages from the menu.</li>
<li>Replaced the text on the products page with the list of skins screenshots and added buy and preview buttons.</li>
</ol>
<p><img class="alignnone size-full wp-image-7126" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/products-new.jpg" alt="" width="570" height="472" /></p>
<p>Now the problem was how and where do we actually link the buy and preview buttons (as there are 3 different previews for every skin (for basic, creative and ecommerce packages) and 6 buy links (as every package can be purchased with hosting or without it)).</p>
<p>The new buy page have solved all the tasks. Before reading this articles further I suggest to open this page online so that you check in real how it works. Click on any buy or preview button on this page <a href="http://www.readyphotosite.com/products.php">http://www.readyphotosite.com/products.php</a> and you&#8217;ll be taken to the buy page.</p>
<ul>
<li> we combined the preview page with the purchase page and now we keep the visitor focused on the purchase;</li>
<li>the buy or preview button from the products page automatically loads the preview of the ecommerce package of the chosen theme (since it&#8217;s most expensive and we&#8217;re interested in more people buying it);</li>
</ul>
<p><img class="alignnone size-full wp-image-7127" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/buy-page-1.jpg" alt="" width="570" height="357" /><br />
- on the first step you can browse between different themes and the preview will load below (to ensure better theme browsing we have added &#8220;hide panel&#8221; option at the very top of the page);<br />
- having chosen the theme you can now choose the package on the step 2. Next to every package there&#8217;s the price and the list of features included;</p>
<p><img class="alignnone size-full wp-image-7128" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/buy-page-2.jpg" alt="" width="570" height="344" /><br />
- finally on the step 3 you can choose whether to host with ReadyPhotoSite or not. You will also be shown the pricing and the hosting details.</p>
<p><img class="alignnone size-full wp-image-7129" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/buy-page-3.jpg" alt="" width="570" height="262" /></p>
<p>With the options for the 3 steps loaded you can still change the settings on that same page. You can choose the other theme or the other package or change your mind about hosting. Finally the buy button will take you to the purchase page with all the options you have taken.</p>
<h2>3) The need in new pages.</h2>
<p><img class="alignnone size-full wp-image-7130" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/keywords.jpg" alt="" width="570" height="240" /><br />
Making the analysis of the keywords people were using to find our websites in search engines from Google Analytics we have decided that it makes sense to create the keyword oriented pages giving the same time valuable information about the product. Some of the keywords included:</p>
<p>* Photography Website Design<br />
* Family Website Design<br />
* Personal Website Design<br />
* Wedding Website Design<br />
* Maternity Photo Website Design<br />
* ReadyPhotoSite review</p>
<p>While creating the pages we have faced another problem. The main website navigation allowed 5 buttons only and the footer was already crowded with the sub pages and we simply had no place to add the pages. In the next 2 points below I&#8217;ll be explaining how we addressed this problem.</p>
<h2>4) Creating new home page.</h2>
<p>Having tested the new home page for several months time we were still not satisfied with the results. We needed to push more people to the products pages and use the place on the home page in more efficient manner. Though the picture was good for people, the home page itself could not be called a good landing page.</p>
<p>1) First of all we decided to decrease the size of the header area, as it was nice but not functional so we reduced it by 40% or so.</p>
<p><img class="alignnone size-full wp-image-7133" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/new-header.jpg" alt="" width="570" height="135" /><br />
2) We then decided to decrease the height of the collage on the home by 50% to give more place to content and other stuff.</p>
<p><img class="alignnone size-full wp-image-7134" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/new-collage.jpg" alt="" width="570" height="169" /><br />
3) To catch the user attention with the products right on the home page we added the big screen of the featured theme linked to the buy page.<br />
4) We added pretty huge buttons linking to the products page, admin area demo, free trial and the buy button for the featured theme. Having all this main options in the center of the page the website visitor don&#8217;t even have to click on the menu to go to the main pages, it&#8217;s very intuitive and user-friendly.<br />
5) Following point 3 (the need of the new pages) we added the links to the new pages and the section for<br />
testimonials thus giving the website visitors the information they were looking for directly from the home page.</p>
<p><img class="alignnone size-full wp-image-7131" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/new-home-page.jpg" alt="" width="570" height="455" /></p>
<h2>5) Reworking the blog pages</h2>
<p><img class="alignleft size-full wp-image-7135" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/blog.jpg" alt="" width="257" height="570" /><br />
Writing lots of articles about photography, photo website design and promotion as well as just some fun posts, we were getting really good traffic both from social networks and search engines to our blog. For the first 2 months we were just attracting people by interesting and useful tips trying to get the reputation. In the new few months we have taken the following steps to make this traffic result into the product purchase</p>
<p>1) Added the banner to the left column offering to exchange old photography website to the new one with 20% discount.<br />
2) Added the big buttons linking to the features page and free trial.<br />
3) Finally we have replaced all that we have with the banner rotating the screenshots of our products, big button with the &#8220;free 7 day&#8221; website trial on it and the full list of product features. It was only this last update that has helped us to drive traffic from blog to the website features and product pages.</p>
<h2>6) Reworking the menu structure and adding new pages</h2>
<p>Viewing the entrance and the exit points of the website pages we were noticing that our visitors were not finding answers to the questions they were looking for. It was then when we decided to create the product guide section of the website that would contain all the info needed to make a decision.</p>
<p><img class="alignleft size-full wp-image-7136" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/new-menu.jpg" alt="" width="570" height="421" /><br />
We have replaced the Why Buy page in the main menu with the product-guide and created the sub pages that now contain most of the website/product info in the structured manner. We have also created the new samples page showing how of our clients customized the default themes and illustrating the changes that can be made from the admin area.</p>
<h2>In conclusion</h2>
<p>We&#8217;ve made a long way studying visitors behavior before the website started looking like this <a href="http://www.readyphotosite.com">http://www.readyphotosite.com</a>. I have learned that there is always place for improvement and that we are just on the start, not on the finish. We have tried different font sizes, buttons, graphical presentations, motos and texts. We still want to try Google Website Optimizer, add Google Translate, feedback form and some other cool features to make the website even more user-friendly and intuitive. You have to act to be on board. Below are some figures from the stats showing how successful the changes we performed has been so far:<br />
- After second home page update and restructuring of the purchase process the views of the products and buy pages has increased by 50%;<br />
- Thanks to rotating product screens about 10% of the blog visitors now visit the product pages;<br />
- Adding new information and keyword-rich pages increase traffic from the search engines by 30%;<br />
- Adding product guide increased the number of free trials by 30% and the number of general product inquiries by 25%.<br />
Unfortunately I can&#8217;t share all the details with you, but overall it was worth the efforts and we&#8217;ll keep on working!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/design/redesign-process-taking-small-steps-better-website/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>9 Handy FireFox Add-ons For Every Day Use</title>
		<link>http://www.1stwebdesigner.com/design/handy-firefox-add-ons-every-day-use/</link>
		<comments>http://www.1stwebdesigner.com/design/handy-firefox-add-ons-every-day-use/#comments</comments>
		<pubDate>Sun, 07 Mar 2010 10:00:58 +0000</pubDate>
		<dc:creator>Anastasia Miles</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[firefox plugins]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[tools]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=6565</guid>
		<description><![CDATA[Having worked as a project manager at several companies and having to monitor my own projects there&#8217;s a certain list of things I do to check on often (and I still do). Some of the things are SEO related, some are tech tasks, some help to achieve the marketing goals. Some of the things are [...]]]></description>
			<content:encoded><![CDATA[<p>Having worked as a project manager at several companies and having to monitor my own projects there&#8217;s a certain list of things I do to check on often (and I still do). Some of the things are SEO related, some are tech tasks, some help to achieve the marketing goals. Some of the things are just general but still it&#8217;s very convenient to have the nice set tools to perform the actions that you do on a regular basis. Today I&#8217;m going to write about Firefox add-ons that I have added my browser options (yes, I&#8217;m an addicted Firefox lover) as a project manager and just a human. All the add-ons listed help me in my daily work and I don&#8217;t know how much time I would spend if I had to search from all the information they give to me manually. I decided to divide this list into 2 sections-  the add-ons that I use as a usual human being and the add-ons I find extremely useful for the project management. So here we go.<span id="more-6565"></span></p>
<h1>The Add-ons for regular Internet Surfers</h1>
<h2>1. <a href="https://addons.mozilla.org/en-US/firefox/addon/3456">The WOT Add-on (Web of trust)</a></h2>
<p><strong><br />
</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/3456"><img class="alignnone size-full wp-image-6566" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/wot.jpg" alt="" width="570" height="328" /></a><br />
Web of Trust warns you about risky sites that cheat customers, deliver malware or send spam. Never in my life did I have a problem with some serious viruses infecting my computer until about a month ago. Suddenly my browser got frozen and in about 5 minutes all the programs and applications on my computer stopped working while the antivirus software that I had (kasperski) haven&#8217;t showed any thread which surprised me tremendously. Having restarted the system I trying at least something I was continuously getting the notice that I have to send a sms to some address and buy the security code that should unblock my computer or something along that line. I had to reinstall the system on my pc but this was not the end yet.</p>
<p>On the next day I found out that I got the virus on my server that have infected all the .html and .php files. I knew from the server logs that the virus got there from my computer and thanks God I had files backed up.<br />
Doing my daily job I visit hundreds of website and I had no idea where I could get such a deadly virus from. That&#8217;s when I started thinking that I need in some way to exclude the potentially dangerous websites or at least know what websites have low reputation. Now I&#8217;m a happy user of the WOT add-on. It works very simply and graphically clear.</p>
<p><img class="alignnone size-full wp-image-6567" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/wot1.jpg" alt="" width="570" height="450" /><br />
Next to every link and in the browser address line you will see the circle that changes the color from green to red depending on website trustworthiness, green being safe and red very poor. They gather this information from website visitors using the WOT and you can also rank the website for several parameters like trustworthiness, vendor reliability, privacy etc. You can also leave a review if you say got infected from this website and want to warn the rest of the community. In case you get to the dangerous website they will show you a big pop-up with the warning before actually prompting you to the page, where you can choose where you want to see why the page is considered as dangerous, ignore the warning and go to the page or leave the page. If you have children there is also a children control option where the websites will adult content will not be available for browsing. You can get additional info on WOT add-on <a href="https://www.mywot.com/en/settings/en-US/firefox/20091028/welcome#welcome">here</a>.</p>
<h2>2. <a href="https://addons.mozilla.org/en-US/firefox/addon/7661">Read It Later Add-on</a></h2>
<p><strong><br />
</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/7661"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/read-it-later.jpg" alt="" width="303" height="245" /></a></p>
<p>Read It Later allows you to save pages of interest to read later. It&#8217;s very simple but very useful, at least for<br />
me. Browsing tens of interesting pages daily I often don&#8217;t have time to read them right away. I used to add the pages I wanted to read to the bookmarks and then was totally forgetting about them or couldn&#8217;t find the pages I needed and finally I ended up with the long-long list of bookmarks cluttered with stuff of any kind one can ever imagine. Read it later add-on allows you to add the page to the read list in one click. You can right-click with the mouse anywhere on page you&#8217;d like to read later and choose an option &#8220;read this page later&#8221;.You can also copy the link and add it to the library clicking on small yellow arrow on the top right cornet of the browser.</p>
<h2>3. <a href="https://addons.mozilla.org/en-US/firefox/addon/6826">Ad block Plus</a></h2>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/6826"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/ad-block.jpg" alt="" width="380" height="200" /></a></p>
<p>A simple nice add-on that blocks add-on the pages. Once installed it will show up in a red hexagon in the top right of the browser window. Nothing special to say about it but it makes my life easier.</p>
<h2>4. <a href="https://addons.mozilla.org/en-US/firefox/addon/4076">AddThis</a></h2>
<p><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/addthis1.jpg" alt="" width="260" height="269" /></p>
<p>AddThis is a nice add-on making sharing and bookmarking simple. The list of social icons will be added to your<br />
browser toolbar area as well as to right-click mouse options. You just click on the icon, the application connects to your social network account and posts the update there. Here&#8217;s the sample how it looks in Twitter:<br />
<img class="alignnone size-full wp-image-6571" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/addthis2.jpg" alt="" width="570" height="209" /><br />
Though I use AddThis I still have a separate toolbar for stumble as this is one of my favorite websites and I love to have the options to leave a comment, thumb up or just view some cool stuff directly from the toolbar. You can install this add-on <a href="https://addons.mozilla.org/en-US/firefox/addon/138">here</a>.</p>
<h1>Add-ons that I use in my work of a project manager</h1>
<p>If you are starting the career of the project manager in some company or just have a start-up project I do recommend you to add this add-ons to the browser as they can not only make your life easier but help you choose the right direction in your marketing campaign as well as provide help to the customers if they run into some problems with the website.</p>
<h2>1. <a href="https://addons.mozilla.org/en-US/firefox/addon/684">Fire FTP</a></h2>
<p><strong><br />
</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/684"><img class="alignnone size-full wp-image-6627" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/fire-ftp.jpg" alt="" width="570" height="309" /></a><br />
This might be one of the most Firefox add-ons. This plugin allows you to upload files to the server as any other FTP client but you don&#8217;t have to install it separately on your computer. The interface is quite intuitive. On the left you will see list of files on your computer and on the right once connected to the server you will see the files on the server. When you start the files upload or download you will see the how the process flows in the bottom area, the connection errors will show up there as well. You can choose the mode for files transfer (binary, ASCII and automatic) and whether to show or not to show the hidden files.</p>
<p>I started using FireFtp after my website files on the server were infected. Before that I was using Total Commander for years which I had to reinstall as well and since I didn&#8217;t want to get used to any other similar programs I decided to give a try to Fire FTP.</p>
<p>It&#8217;s not perfect and the websites in the other tabs and windows start working slower when FireFtp is working and there are now usual hot keys but it&#8217;s not bad at all. I like the error reports and I like when the program says ZZZZ when it&#8217;s connected to the server but not command is performed. This can be actually the only reason why I&#8217;m using it :)</p>
<h2>2. <a href="https://addons.mozilla.org/en-US/firefox/addon/6647">HTTP Fox</a></h2>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/6647"><img class="alignnone size-full wp-image-6628" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/http-fox.jpg" alt="" width="570" height="190" /></a><br />
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. In simple words it shows you how the website interacts with the server and if any errors occur you can get the details of the error without having to check the server log files. I used to work for the company who developed a cool CMS system running on php and flex. Working with the customers, uploading files to their servers and helping them to actually manage the website I was facing some php or flex errors pretty often but the problem was that these were the errors the admin area was showing and I had no idea how to handle that. I&#8217;m neither a programmer nor a flash developer and this was a real nightmare for me. One of my friends recommended me to install the HTTP Fox plugin and there hasn&#8217;t been a single problem I couldn&#8217;t fix on my own.<br />
<img class="alignnone size-full wp-image-6629" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/http-fox2.jpg" alt="" width="570" height="257" /><br />
I guess things would still work for me much easier if I had a better php knowledge. The way it works now- I start HTTP Fox (toogle HTTP Fox as they call it in the application), get the error description, go to google to type it there and then check for solutions how the error can be fixed on the php and flash forums :) With the HTTP Fox add-on you can also check whether some website will save a cookie on your computer as well as get some other useful info.</p>
<h2>3. <a href="https://addons.mozilla.org/en-US/firefox/addon/1843">Fire Bug</a></h2>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/1843"><img class="alignnone size-full wp-image-6630" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/fire-bug.jpg" alt="" width="570" height="369" /></a><br />
Fire Bug is a great add-on that will be of a great help not just for a project manager but an advanced develop as well. The number of features is enormous but in my daily work I use just a few. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. I used Firebug multiple times to customize and make small changes on the WordPress themes, to get info on the images and embedded videos and flash files and get info about properties of the page elements. You can call the application from the Tools section of the browser or just right clicking on some elements on the page.</p>
<h2>4. <a href="https://addons.mozilla.org/en-US/firefox/addon/3036">SeoQuake SEO extension</a></h2>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/3036"><img class="alignnone size-full wp-image-6633" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/seoquake.jpg" alt="" width="570" height="67" /></a><br />
SeoQuake extension is a must if you perform any type of work related to SEO, links exchange, online advertising etc. It gives you a profound info about the website, helps you study your competitors and potential partners. At one glance you can see the page PageRank, the number of pages from the domain name indexed in Google, Yahoo and Bing, Alexa Rank, the age of the domain name and the direct link to the whois info. There&#8217;s information about internal and external links on the page as well as the information on the keywords density ( you can check what main keywords your competitors use and how often and where on page).</p>
<p>The SeoQuake extension has another cool feature- so called Yahoo links- showing the number (and the list) of external URLs pointing to the page and domain name. Extremely useful when you need to check who&#8217;s linking to your competitors.</p>
<h2>5. <a href="https://addons.mozilla.org/en-US/firefox/addon/321">Search Status</a></h2>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/321"><img class="alignnone size-full wp-image-6631" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/03/search-status.jpg" alt="" width="570" height="369" /></a></p>
<p>That&#8217;s a good alternative to SeoQuake but I prefer using them both. By default the Search Status add-on options will show up in the bottom right corner of the browser alone with the traffic stats from Alexa (alexa rank), Compete and mozRank by SeoMoz. Earlier I was using Alexa stats from the SeoQuake and had a separate Compete add-on installed and now I have them all in one place. Some of the other features Search Status add-on include: no follow links analysis, general page&#8217;s link report, stats about indexed pages and keywords density, whois info etc. There&#8217;s almost the same features as in SeoQuake and some additional ones but they are not convenient to use. I prefer clicking on an icon in the toolbar rather than going to the footer, clicking on the icon and only then getting the list of options available. It would be perfect is someone could combine these two.</p>
<p>That&#8217;s it, I&#8217;ve listed all the add-ons that I use daily. I&#8217;ll be glad to hear what add-ons you use and how they help you in your work. I still have a place for two or three until my browser stops working so do let me know :)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/design/handy-firefox-add-ons-every-day-use/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
	</channel>
</rss>

