Elance - Designhttps://www.elance.com/q/taxonomy/term/34
enUsing Parallax Scrolling to Liven Your Web Designhttps://www.elance.com/q/blog/2012/04/using-parallax-scrolling-to-liven-your-web-design.html
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<iframe scrolling="no" frameborder="0" allowtransparency="allowtransparency" src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.elance.com%2Fp%2Fblog%2F2012%2F04%2Fusing-parallax-scrolling-to-liven-your-web-design.html&amp;layout=button_count&amp;show_faces=false&amp;width=102&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" style="border: medium none; width: 102px; height: 21px; overflow: hidden;"></iframe>
<a data-text="Using Parallax Scrolling to Liven Your Web Design - @Elance Blog - " data-url="https://www.elance.com/p/blog/2012/04/using-parallax-scrolling-to-liven-your-web-design.html" class="twitter-share-button" href="https://twitter.com/share">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <g:plusone href="http://www.elance.com/p/blog/2012/04/using-parallax-scrolling-to-liven-your-web-design.html" size="medium"></g:plusone></p>
<p>I may not be old enough to remember Moon Patrol; in fact I was born the year it came out, but I played my fair share of video games through the &lsquo;80s and &lsquo;90s and recognize how they&rsquo;ve changed over the years. Not just from a graphics standpoint, but from only being able to move left and right across the screen to having free reign in an AI environment. By now you&rsquo;re surely wondering what Moon Patrol and retro video games have to do with web design? The answer&rsquo;s simple: <em>parallax scrolling</em>.<br />
<br />
Parallax scrolling is a technique that is currently creeping into the web design world. It was being used in animation as far back as the 1940s, but was made popular by the game Moon Patrol in 1982. Parallax scrolling is a method of programming computer graphics where background images move at a different rate than foreground images. The result is a depth illusion in a 2D visual that always makes me think of the video games I used to waste hours playing as a kid when I should have been doing my schoolwork.<br />
<br />
I could write on and on trying to come up with a clear explanation on how parallax scrolling works, but since a picture&rsquo;s worth a thousand words, I&rsquo;ll save us some time and we take a look at an excellent example of a parallax scrolling website in action. The <a target="_blank" href="http://activatedrinks.com/">Activate enhance water beverage site</a> is a phenomenal example of parallax scrolling.<br />
<br />
<a target="_blank" href="http://activatedrinks.com/"><img width="688" height="525" border="0" alt="" src="/p/files/image/parallax_1_688x525.jpg" /></a><br />
<br />
<!--break--> You will notice that as you scroll down the site that the text, background, and foreground images are all scrolling at different speeds. This is achieved through JavaScript and defining a data-speed attribute within the HTML for each layer of content, telling those elements to scroll at different rates.<br />
<br />
When creating a parallax scrolling site, a standard procedure to keep in mind is to have your background image scroll the slowest. Next would be your images or sprites scrolling at a slightly faster rate. Lastly would be your content, which would scroll at the same speed as the window.<br />
<br />
If you&rsquo;re unfamiliar with what a &ldquo;sprite&rdquo; is, the quick explanation would be that it&rsquo;s multiple images combined in one image file, and the desired image is then displayed properly using the background-position property in CSS. Think of a button that is 100px wide by 50px tall, combine both the normal and hover state of that button in one image side-by-side, then define the background position of the normal state as 0 and the hover state in as -100px in your CSS.<br />
<br />
Don&rsquo;t be fooled in to thinking that you must have a single-page, vertically scrolling website if you want to utilize parallax scrolling in your site. Wouldn&rsquo;t you know that it&rsquo;s Nintendo that proves this theory wrong with their <a target="_blank" href="http://www.nintendo.com.au/gamesites/mariokartwii/#home">micro-site for Mario Kart Wii</a>.<br />
<br />
<a target="_blank" href="http://www.nintendo.com.au/gamesites/mariokartwii/#home"><img width="688" height="520" border="0" alt="" src="/p/files/image/parallax_2_688x520.jpg" /></a><br />
<br />
This site is an excellent example of parallax scrolling because it not only proves you&rsquo;re not limited to vertical scrolling, but that your site can scroll vertically and horizontally and still maintain the parallax scrolling effect. You&rsquo;ll notice this as you move from page three to page four and pages five to six, the site will scroll horizontally. <br />
<br />
You also don&rsquo;t have to have a massive and complex site like Mario Kart or Activate if you want to include a bit of parallax scrolling in to a site. Check out this example for the <a target="_blank" href="http://fingerbilliards.com/">Finger Billiards app website</a>.<br />
<br />
<a target="_blank" href="http://fingerbilliards.com/"><img width="688" height="525" border="0" alt="" src="/p/files/image/parallax_3_688x525.jpg" /></a><br />
<br />
I like this site for its simplicity. They don&rsquo;t overwhelm you with information and simply give you what you need to know, how to play the game and where to get the game. The parallax effect is just enough to make the site unique and give it some character.<br />
<br />
As you can see from these examples adding parallax scrolling to a site gives the site its own uniqueness and allows it to stand out from the rest. Whether you have a large, multi-page layout with things flying everywhere like the Activate page, a navigation that&rsquo;s as zig-zaggy as my driving skills in Mario Kart Wii, or just a simple splash of character that transforms a site from basic to impressive, parallax scrolling is a cool trick to have up your sleeve.<br />
<br />
<em><strong>About the Author</strong></em><br />
<a href="http://www.elance.com/s/scottstanton" target="_blank"><em><strong><img width="164" height="110" border="0" align="right" src="/p/files/image/scottStantonHeadShot.jpg" img="" style="padding-bottom: 20px; padding-left: 20px" alt="" /></strong></em></a><em><a href="http://www.elance.com/s/scottstanton" target="_blank">Scott Stanton</a> has spent the past decade working nights as a freelance web designer, only to write about the latest design trends at his day job as a freelance writer. Hang on Scott's every word <a href="http://twitter.com/TheScottStanton" target="_blank">@TheScottStanton</a>.</em></p>
<p>&nbsp;</p></div></div></div>Mon, 02 Apr 2012 22:29:36 +0000Guest_Blogger975 at https://www.elance.com/qhttps://www.elance.com/q/blog/2012/04/using-parallax-scrolling-to-liven-your-web-design.html#commentsResponsive Web Design: Answering the Challengehttps://www.elance.com/q/blog/2012/01/responsive-web-design.html
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><iframe scrolling="no" frameborder="0" allowtransparency="allowtransparency" src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.elance.com%2Fp%2Fblog%2F2012%2F01%2Fresponsive-web-design.html&amp;layout=button_count&amp;show_faces=false&amp;width=102&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" style="border: medium none; width: 102px; height: 21px; overflow: hidden;"></iframe><a data-via="Elance" data-text="Responsive Web Design: Answering the Challenge - @Elance Blog - " data-url="https://www.elance.com/p/blog/2012/01/responsive-web-design.html" class="twitter-share-button" href="https://twitter.com/share">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <g:plusone size="medium" href="https://www.elance.com/p/blog/2012/01/responsive-web-design.html"></g:plusone></p>
<p>A while back I talked about the importance of <a href="http://www.elance.com/p/blog/2011/10/the-importance-of-tablet-and-mobile-friendly-websites.html" target="_blank">your web presence being mobile-friendly</a>. There are many ways to accommodate a mobile viewer, be it a separate mobile-friendly website, making sure that your site has the right dimensions and parameters to display properly on a mobile device, or by creating a responsive website. The first time I heard the phrase &ldquo;responsive web design&rdquo; my friend was describing it to me as &ldquo;the new hotness&rdquo; (i.e. the &quot;in&quot; thing) and current trends would seem to prove him right. <br />
<br />
Responsive web design is certainly a trend worth looking into as it allows a website to break itself down between multiple screen resolutions and monitor sizes&mdash;whether that monitor is an actual monitor, mobile phone screen, or tablet display. Setting CSS media queries to accommodate specific resolutions is the key ingredient to creating a responsive site. Using CSS to give elements of a site a percentage based size, setting a max and min height/width and utilizing the em font size are other ways for a site to dynamically adjust. Having your website dynamically select the proper image size for your visitor&rsquo;s display is a nice feature, it will speed up load times by not trying to load an image that&rsquo;s three times the size of the display and it will ensure the visitor is able to see the full image, not just parts of it. <br />
<br />
Let&rsquo;s take a look at a great example of a responsive website from a brand I&rsquo;m sure we&rsquo;ve all heard of: <a href="http://www.sony.com" target="_blank">Sony</a>.</p>
<center> <br />
<br />
<img width="656" height="528" border="0" src="/p/files/image/answering_the_challenge_ss1_656x528.jpg" alt="" /></center>
<p>&nbsp;</p>
<!--break-->
<p>You probably won&rsquo;t notice much difference between the image above and the image below, other than the tabbed product box under the main banner image that drops from three columns to two. However, if you have a widescreen monitor and squeeze the site in, you will not only see the &ldquo;More Sony Store&rdquo; column drop below the products in the middle section of the page, but you will also notice that the main banner image resizes itself to a smaller dimension.</p>
<center><br />
<br />
<img width="656" height="813" border="0" src="/p/files/image/answering_the_challenge_ss2_656x813.jpg" alt="" /></center>
<p><br />
<br />
Squeeze it a little more and you&rsquo;ll see it adjust itself down to an interface that looks like a dream to navigate on a mobile device. The banner image resizes itself down again for quicker loading, the main menu changes to a drop down, and all of the content compresses to one thin, tidy and organized column.</p>
<center><br />
<br />
<img width="480" height="632" border="0" src="/p/files/image/answering_the_challenge_ss3.jpg" alt="" /></center>
<p><br />
<br />
The Sony site utilizes a few different sized main images to accommodate multiple sizes of displays and screen resolutions, but maintain the same appearance across multiple platforms and resolutions. You can also run scripts that will automatically resize your images on the fly. <a href="http://2011.dconstruct.org/" target="_blank">The 2011 dConstruct conference</a> website is an excellent example of this. Their homepage features photos of all their keynote speakers and you will notice that as you expand and collapse the browser window, the images automatically adjust to the new parameters. Another aspect I liked of the dConstruct site was that once you get down to the mobile-sized version the main navigation text links switch to icons. Text links can be a bit of a nuisance to navigate with on a smaller touch screen mobile phone, switching to larger links with bigger target areas and spacing them out is a smart move.</p>
<center><br />
<br />
<img width="656" height="164" border="0" src="/p/files/image/answering_the_challenge_ss4_656x164.jpg" alt="" /></center>
<p><br />
<br />
<a href="http://clearairchallenge.com/" target="_blank">The Clean Air Challenge</a> website features another method of making your navigation links more mobile friendly, once the site is scaled down to that size. Take a look at how the yellow text links at the top of the page stay text links, but you&rsquo;re given a bigger target area to click on.</p>
<center><br />
<br />
<img width="656" height="228" border="0" src="/p/files/image/answering_the_challenge_ss5_656x228.jpg" alt="" /></center>
<p><br />
<br />
These three examples are not only exceptional for the reasons I&rsquo;ve pointed out, but because they also embrace color. All too often when I come across a responsive website the designer has shied away from making a visually and aesthetically pleasing site by only using one or two colors and lots of text, which varies in size to give the site some sort of design element. Sure, designing and developing a responsive web site that is both functional and pleasing to look at is going to take a little more work. But it could also be the difference between a barely-satisfied client and an ecstatic one, or a yawn prompting a potential client to click &ldquo;Back&rdquo; to their search results rather than jumping out of their chair to inquire about your services.<br />
<br />
<a href="http://www.kayakcapers.co.uk/" target="_blank">Kayak Capers</a> is not only a fun sounding way to spend your day, but their website reflects that mood as well. The heavy use of icons and broad color palette help this site stand out from a lot of the other responsive sites I&rsquo;ve come across.</p>
<center><br />
<br />
<img width="656" height="661" border="0" src="/p/files/image/answering_the_challenge_ss6_656x661.jpg" alt="" /></center>
<p><br />
<br />
I would encourage you to consider the &ldquo;hotness&rdquo; (as my friend put it) of your next website and think abut how you can make it a responsive site. And I beg you to keep the Internet something fun to look at. Be proud of your work; take the time to make sure that you&rsquo;re not sacrificing visual stimulation to adhere to the responsiveness of your site. Make it something you&rsquo;ll want to boast about to all your friends, colleagues, followers, connections, and email list. After all, you wouldn&rsquo;t hire a heart surgeon who takes no pride in their work, would you?<br />
<br />
<em><strong>About the Author</strong></em><br />
<a target="_blank" href="http://www.elance.com/s/scottstanton"><em><strong><img align="right" width="164" height="110" border="0" alt="" style="padding-bottom: 20px; padding-left: 20px" img="" src="/p/files/image/scottStantonHeadShot.jpg" /></strong></em></a><em><a target="_blank" href="http://www.elance.com/s/scottstanton">Scott Stanton</a> has spent the past decade working nights as a freelance web designer, only to write about the latest design trends at his day job as a freelance writer. Hang on Scott's every word <a target="_blank" href="http://twitter.com/TheScottStanton">@TheScottStanton</a>.</em></p>
<p>&nbsp;</p>
<p>&nbsp;</p></div></div></div>Tue, 17 Jan 2012 22:44:53 +0000Elance_Keith697 at https://www.elance.com/qhttps://www.elance.com/q/blog/2012/01/responsive-web-design.html#commentsTypography: Stocks Tank, Customs Bankhttps://www.elance.com/q/blog/2011/08/typography-stocks-tank-customs-bank.html
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<p><iframe style="border-bottom: medium none; border-left: medium none; width: 102px; height: 21px; overflow: hidden; border-top: medium none; border-right: medium none" src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.elance.com%2Fp%2Fblog%2F2011%2F08%2Ftypography-stocks-tank-customs-bank.html&amp;layout=button_count&amp;show_faces=false&amp;width=102&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" frameborder="0" allowtransparency="allowtransparency" scrolling="no"></iframe><iframe style="width: 125px; height: 21px" src="https://platform.twitter.com/widgets/tweet_button.html?url=http://www.elance.com/p/blog/2011/08/typography-stocks-tank-customs-bank.html&amp;count=horizontal&amp;text=Typography: Stocks Tank, Customs Bank - @Elance Blog - " frameborder="0" allowtransparency="allowtransparency" scrolling="no"></iframe><g:plusone size="medium" href="http://www.elance.com/p/blog/2011/08/typography-stocks-tank-customs-bank.html"></g:plusone></p>
<p><em><img style="padding-bottom: 20px; padding-left: 20px" alt="" align="right" img="" src="/p/files/image/typography_chalkboard_310x209(1).jpg" />For years, website typography was limited to a handful of &quot;web-safe&quot; fonts. Now with new developments in web technologies like HTML5 and CSS, there are few reasons not to utilize the different typography at one's fingertips&mdash;especially since SEO is no longer negatively impacted. In this blog article, freelance web designer and writer <a target="_blank" href="http://www.elance.com/s/scottstanton">Scott Stanton</a> shares&nbsp; how to infuse more personality into your site using @font-face CSS rule.</em><br />
<br />
Back in the day when calculations were done on an abacus and stories were chiseled in stone, the only way to get eye-catching fonts in your website was by converting them to images and then placing the images in your site. Talk about two steps forward and one step back! Not only was that a little bit on the time consuming side of things, but in order to break out of the core 13 or so &ldquo;web safe&rdquo; fonts by converting the text to an image, you were actually taking text out of your site, a big no-no if you&rsquo;re hoping search engines will ask you to prom. Text is the way to impress search engines and a surefire way to get yourself noticed. <br />
<br />
The last time I had my car in the shop I noticed they had a computer screen full of custom wheels that were available for purchase. So, if we&rsquo;ve reinvented the wheel that many times does that mean we&rsquo;ve finally reinvented typography in the cyber world? The simple answer is, yes! With HTML5 and CSS3 we&rsquo;re now able include custom fonts in our websites and have them remain viewable across multiple browsers and operating systems thanks to the <em>@font-face</em> CSS rule. Granted some browsers have supported it for a while, it&rsquo;s now accepted by about 98% of the browsers and operating systems out there. <br />
<!--break--><br />
Before we bust out the chisel and stone to do some coding, let&rsquo;s filter through all that jargon I just spouted off and transform it into a graphical image that will make you say, &ldquo;Oooh!&rdquo; Check out how many different fonts are used <a target="_blank" href="http://www.extensis.com/en/WebINK/samples/destiny/">in this site</a> thanks to the <em>@font-face</em> property. I know what you might be thinking, and sure, this could have been done with lots of images. But then you wouldn&rsquo;t have any text for search engines to feast their hungry algorithms on:</p>
<p>&nbsp;</p>
<center><img alt="" width="604" height="371" src="/p/files/image/Typography screen 1_resized.jpg" /> </center>
<p><br />
Let&rsquo;s talk code. Once you&rsquo;ve found the font (or fonts), that you think will make your site sparkle brighter than the rest, upload it to your server. I should step in at this point and suggest that you make sure you&rsquo;re not violating any copyright rules with your fonts of choice. Now open up a new CSS document and get ready to scribble a few lines of code. For this example I&rsquo;m going to pretend my font name is &ldquo;elance.ttf&rdquo;. <br />
<strong><br />
@font-face {</strong><strong><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: elance;</strong><br />
<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; src: url(/location/of/font/on/your/server/elance.ttf) format(&ldquo;truetype&rdquo;);<br />
} </strong></p>
<p>&nbsp;</p>
<p>Once you&rsquo;ve set that bit of code in stone, you can use it just like you would any other font. <br />
<br />
<strong>.superCoolClass {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: elance, veranda, Helvetica, sans-serif;<br />
} <br />
</strong><br />
Wait. Put the phone down. It&rsquo;s not quite that easy, so you can&rsquo;t start bragging yet. In order to achieve full cross-browser compatibility you&rsquo;ll need to scratch some more code and convert your font to an Embedded OpenType font (EOT) for compatibility with Microsoft&rsquo;s Internet Explorer. The conversion process is fairly painless, if not completely, and can be done with the <a target="_blank" href="http://www.microsoft.com/typography/WEFT.mspx">Microsoft WEFT tool</a> or through this <a target="_blank" href="http://www.kirsle.net/wizards/ttf2eot.cgi">simple online service</a>. Once you&rsquo;ve mastered the conversion process, wipe your brow, take a deep breath and upload your EOT font to the server along with your TTF font. Your EOT now covers your back on IE6, IE7, and IE8 while your TTF has doing your dirty work in Firefox 3.5+, Safari, Chrome, and Opera v10+. <br />
<br />
All that talk about converting and file types may have your head spinning a little, but, let&rsquo;s keep our eye on the prize by taking a look at another good example of where we&rsquo;re going with this whole <em>@font-face</em> usage for typography in our website. Check out this real basic design from <a target="_blank" href="http://www.extensis.com/en/WebINK/samples/aspic/">Extensis</a> that utilizes the <em>@font-face</em> property nicely with a handful of fonts to give the page some character:</p>
<p>&nbsp;</p>
<center><img alt="" width="604" height="381" src="/p/files/image/Typography screen 2_resized.jpg" /></center>
<p><br />
Now let&rsquo;s get back to work on our CSS file by modifying our code a bit. We&rsquo;ll need to add a bit of code to what we already have in order for IE to search the viewers computer for the font before reverting to the EOT. It&rsquo;s important that you type the font exactly as you downloaded it, capitalization matters on this one. To do this we simply add a &ldquo;local&rdquo; declaration in front of what we already have. So our code should look as follows: <br />
<br />
<strong>@font-face {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: elance;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; src: local(&ldquo;elance&rdquo;), url(/location/of/font/on/your/server/elance.ttf) format(&ldquo;truetype&rdquo;); <br />
} </strong><br />
<br />
<strong>.superCoolClass {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: elance, veranda, Helvetica, sans-serif;<br />
} </strong><br />
<br />
The final step is to add the source for our EOT font; we&rsquo;ll drop it in above our ttf, so your final code should look like this. <br />
<br />
<strong>@font-face {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: elance;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; src: url(/location/of/font/on/your/server/elance.eot);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; src: local(&ldquo;elance&rdquo;), url(/location/of/font/on/your/server/elance.ttf)<br />
format(&ldquo;truetype&rdquo;);<br />
} <br />
<br />
.superCoolClass {</strong> <strong><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: elance, veranda, Helvetica, sans-serif;<br />
} </strong><br />
<br />
Congratulations! You are now qualified to put fancy typography in your website. If that short coding lesson caused beads of sweat to form on your forehead, let&rsquo;s get inspired by looking at another typography masterpiece you&rsquo;ll now be able to create thanks to the fruits of your labor. <br />
<br />
<a target="_blank" href="http://www.wearefixel.com/">Fixel</a> is a small design agency that made great use of custom fonts to help give their site a fun little vibe. Notice how there isn&rsquo;t an abundance of photos in their site; the only ones we see on the home page come in the form of screenshots of sites they designed, which happened to have a photo in them. Most of their design elements are coming from the fonts. <a target="_blank" href="http://www.wearefixel.com/">Fixel</a> is a small design agency that made great use of custom fonts to help give their site a fun little vibe. Notice how there isn&rsquo;t an abundance of photos in their site; the only ones we see on the home page come in the form of screenshots of sites they designed, which happened to have a photo in them. Most of their design elements are coming from the fonts:</p>
<p>&nbsp;</p>
<center><img alt="" src="/p/files/image/Typography screen 3_resized(1).jpg" /></center>
<p><br />
If you&rsquo;re <a target="_blank" href="http://www.elance.com/p/blog/2011/08/less-is-more-clean-websites.html">looking to design a clean website</a>, but would like to inject some character or personality in it, typography is a great way to do so. It doesn&rsquo;t present the cluttered effect that images tend to do, grabbing an overwhelming eyeful, but adds contrast to your site through their lines and colors. They might not be quite as catchy as hieroglyphics, but that&rsquo;s what icons are for. And rattling off a few lines of code probably beats a chisel and stone any day of the week. <br />
<br />
<em><strong>About the Author</strong></em><em><br />
<a target="_blank" href="http://www.elance.com/s/scottstanton">Scott Stanton</a> has spent the past decade working nights as a freelance web designer, only to write about the latest design trends at his day job as a freelance writer.</em></p>
<p>&nbsp;</p></div></div></div>Wed, 24 Aug 2011 00:54:48 +0000Guest_Blogger798 at https://www.elance.com/qhttps://www.elance.com/q/blog/2011/08/typography-stocks-tank-customs-bank.html#commentsLess is More: Clean Websiteshttps://www.elance.com/q/blog/2011/08/less-is-more-clean-websites.html
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<p><iframe style="border-bottom: medium none; border-left: medium none; width: 102px; height: 21px; overflow: hidden; border-top: medium none; border-right: medium none" src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.elance.com%2Fp%2Fblog%2F2011%2F08%2Fless-is-more-clean-websites.html&amp;layout=button_count&amp;show_faces=false&amp;width=102&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" frameborder="0" allowtransparency="allowtransparency" scrolling="no"></iframe><iframe style="width: 125px; height: 21px" src="https://platform.twitter.com/widgets/tweet_button.html?url=http://www.elance.com/p/blog/2011/08/less-is-more-clean-websites.html&amp;count=horizontal&amp;text=Less is More: Clean Websites - @Elance Blog - " frameborder="0" allowtransparency="allowtransparency" scrolling="no"></iframe><g:plusone size="medium" href="http://www.elance.com/p/blog/2011/08/less-is-more-clean-websites.html"></g:plusone></p>
<p><em><a target="_blank" href="http://www.elance.com/s/scottstanton"><img style="padding-bottom: 20px; padding-left: 20px" border="0" alt="" align="right" img="" src="/p/files/image/scottStantonHeadShot.jpg" /></a>What does effective website design look like to you? If you survey the web landscape today, you'll likely notice that companies are shying away from cluttered layouts full of links in favor of simple and clean. Freelance web designer and writer <a target="_blank" href="http://www.elance.com/s/scottstanton">Scott Stanton</a> shares his perspective on this trend of minimalist web design and the particular elements that make&nbsp;it pleasing to the eye.</em><br />
<br />
We&rsquo;ve all heard the saying, &ldquo;<em>Less is more</em>.&rdquo; And I&rsquo;m sure we&rsquo;ve all been told to clean up after ourselves, perhaps some of us more often than others. So it&rsquo;s no surprise that the minimalist web design trend is always a safe bet when you&rsquo;re looking for a design that will withstand an industry where trends seem to change more often than the coffee filter in the break room. So how do you make a white background pop? <br />
<br />
There are a few reoccurring design aspects that are popular in minimalist sites: gradients, shadows, rounded corners, and clean lines. A lot of times you&rsquo;ll see a combination of these elements in the main navigation bar of the site. The gradient helps give the site some depth and sets modern websites apart from the ones of yesteryear. It&rsquo;s rare that I come across a site with a white, or solid color background, and a navigation bar that&rsquo;s also a solid color. Not only would it make me shudder from flashbacks to a time of bowl haircuts and grunge music, but it gives the website a flat appearance. Nothing has any depth and the eye has a hard time determining which color is supposed to be on top of the other. <br />
<br />
One site that some of us might be familiar with that incorporates gradients in to their design is, well, this one. If you&rsquo;re signed in to Elance, notice the use of a linear gradient in the main navigation bar at the top, starting dark at the top and fading to a lighter gray at the bottom. This adds another dimension that feels as though it&rsquo;s protruding towards us. Now try and picture how different this page would look if that was one solid color, the page would seem flat and much further away from us.&nbsp;<br />
<br />
<br />
<img alt="" src="/p/files/image/clean websites_image1.jpg" /><br />
<br />
<!--break--><br />
If you&rsquo;re not signed in, take a quick look at how Elance uses a light blue, linear gradient along the top to help soften that edge and make the page feel as though it&rsquo;s tucking back away from the viewer. Or just notice how each blog has a light gray linear gradient at the top, fading to white, thus helping lift it up off the blank white background of the page and stand out more.&nbsp;<br />
<br />
<br />
<img alt="" width="702" height="230" src="/p/files/image/clean%20websites_image2.jpg" /><br />
<br />
<br />
Depth can also be achieved by applying drop shadows to elements. Drop shadows help the eye easily distinguish which element is on top of another. This detail helps the eye relax and gives the website a nice, polished, professional look. <a target="_blank" href="http://www.apple.com">Apple</a> is a great example of this. Not only does their website ooze simplicity, but they are a company who has completely rebuilt their brand on keeping everything clean and simple. Not only does every content box have a shadow, but they&rsquo;ve also incorporated gradients, rounded corners, and clean lines. A minimal grand slam!<br />
<br />
<br />
<img alt="" width="702" height="437" src="/p/files/image/clean%20websites_image3.jpg" /><br />
<br />
<br />
Rounded corners help soften the feel of the site and allow for your eyes to make a smooth transition from one element to the next. It also achieves a more open feel, opposed to square, 90 degree corners that can give a site a cold and boxed in feeling. <a target="_blank" href="http://www.linkedin.com">LinkedIn</a> is a good example of this. Imagine what your eye would be doing if the main navigation and &ldquo;Join LinkedIn Today&rdquo; boxes had square edges. It would cause me to think the site was originally designed out of Legos. See any other aspects we&rsquo;ve talked about?&nbsp;<br />
<br />
<br />
<img alt="" width="702" height="264" src="/p/files/image/clean%20websites_image4.jpg" /><br />
<br />
<br />
Clean lines help keep everything neat, orderly and aesthetically pleasing. They help the eye flow smoothly and uninterrupted over, across and down a site. This means that everything needs to be aligned to pixel-perfection. The eye likes to follow a straight, smooth line. Scoot back and pan your eyes along the top of your desk. Cringe? Probably because your eye had to make its way over coffee mugs from last week, dirty plates, and half read newspapers, just to name the things sitting on top of the bills you &ldquo;still need to go through.&rdquo; Now compare that to the day you bought the desk and there was nothing on top of it, just a clean, smooth, continuous plane, uninterrupted. <a target="_blank" href="http://www.galluzzocom.com">Galluzzo Communications</a> is one of the best minimalist sites I&rsquo;ve come across with clean lines. Notice how the top border line for the sub navigation aligns itself perfectly with the middle of the &ldquo;Galluzzo&rdquo; in the logo as well as the mid-point of the brand being displayed below. It&rsquo;s almost as if they thought that one out! Again, note the use of rounded corners and drop shadows.<br />
<br />
<br />
<img alt="" width="702" height="596" src="/p/files/image/clean%20websites_image5.jpg" /><br />
<br />
<br />
This doesn&rsquo;t necessarily mean that all horizontal rule, straight line, or element boxes have to span from the absolute left to the absolute right. That would be terrible; viewers would have to work their necks to look from the left to right side of your page. And who wants to work when they&rsquo;re sitting in front of a computer? <br />
<br />
In the not-so-rare instances that you need to break that solid line in order to have multiple design elements side by side, make sure they&rsquo;re aligned on the same y-axis. <a target="_blank" href="http://www.tokyoid.com/">Dustin Heerken&rsquo;s site</a> is an interesting blend of a good and bad example of this. His header is pixel-perfect, images are evenly spaced, and the top of his name aligns perfectly with the top of the images, while the bottom line aligns perfectly with the bottoms of the images. But in the right column with Insight, Categories and Updates everything appears to be shifted up slightly more than the tops and bottoms of the images to the left.&nbsp;<br />
<br />
<br />
<img alt="" width="702" height="466" src="/p/files/image/clean websites_image6.jpg" /><br />
<br />
<br />
Clean lines can be tricky. Things may only be off by a pixel or two, but your eye picks that out and draws to it. These imperfections can give the wrong impression, and trust me when I say there&rsquo;s nothing worse than a client who thinks you developed his site at the bar during happy hour. Not that I&rsquo;ve ever done that, of course.<strong><em><br />
<br />
About the Author</em></strong><em><br />
<a target="_blank" href="http://www.elance.com/s/scottstanton">Scott Stanton</a> has spent the past decade working nights as a freelance web designer, only to write about the latest design trends at his day job as a freelance writer.</em></p></div></div></div>Mon, 01 Aug 2011 23:44:11 +0000Guest_Blogger790 at https://www.elance.com/qhttps://www.elance.com/q/blog/2011/08/less-is-more-clean-websites.html#commentsMore Graphic Design Trends For 2011https://www.elance.com/q/blog/2011/02/graphic-design-trends-for-2011.html
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><iframe frameborder="0" scrolling="no" src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.elance.com%2Fp%2Fblog%2F2011%2F02%2Fgraphic-design-trends-for-2011.html&amp;layout=button_count&amp;show_faces=false&amp;width=102&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" style="border:none; overflow:hidden; width:102px; height:21px;" allowtransparency="true"></iframe><iframe frameborder="0" scrolling="no" allowtransparency="true" src="https://platform.twitter.com/widgets/tweet_button.html?url=http://www.elance.com/p/blog/2011/02/graphic-design-trends-for-2011.html&amp;count=horizontal&amp;text=8 Tips To Win More Jobs on Elance - Elance Blog - " style="width:102px; height:21px;"></iframe></p>
<p>Every year, certain trends affect <a target="_blank" href="http://www.elance.com/php/search/main/eolsearch.php?matchType=project#matchKeywords=Graphic Design&amp;catFilter=10184">graphic design</a> as <a target="_blank" href="http://www.elance.com/php/search/main/eolsearch.php?matchType=profile#matchKeywords=Graphic Design&amp;catFilter=10184">designers</a> look for new ways to effectively communicate certain concepts to their audience and customers. Whether you&rsquo;re a Photoshop guru or an Illustrator newbie, we&rsquo;ve compiled the trends to look at as we get deeper into 2011. As a designer working on Elance, looking for new ways to lock in potential jobs is important, and analyzing current trends is one way to anticipate what your customers are going to want. <br />
<br />
<strong>Style</strong><br />
A new retro style and color scheme makes a big comeback in clothing and fashion every year. Web and graphic design are no different and falls subject to a revival of colors and styles every year. Posters, collateral, and websites all sport colors and graphics that were unique yet patterned throwbacks to a funkier time. (For web references, check out WDL&rsquo;s <a target="_blank" href="http://webdesignledger.com/inspiration/50-retro-and-vintage-web-designs-to-inspire-you">50 Retro and Vintage Web Designs to Inspire You</a>). Color schemes, fonts, and textures were also big in 2010 and will continue to be big in 2011 &ndash; especially antique paper and concrete textures, stripes, and vintage lines. <br />
<br />
<img border="0" alt="" align="right" src="/p/files/image/1_enoguy_logo.jpg" />Minimalism has been a trend for years, but only recently has it become a dominant trend in design. Everything from offices to websites to architecture is focusing more on stark yet purposeful design functionality. Logos are focusing more on simple glyphs, simple shapes, understated text and simple colors. Utilizing simple shapes and single colors can be an understated yet powerful combination. Websites such as <a target="_blank" href="http://\\fs01\users$\Keith Do\Elance Blog\Keith Do\AppData\Local\Temp\Glyphish.com">Glyphish.com</a> can provide you with hundreds of glyphs to help in your minimalistic design with both free and paid options. <br />
<br />
<img style="padding-bottom: 20px; padding-left: 20px" border="0" alt="" align="right" src="/p/files/image/2_derrick_Mitchell.jpg" />Hand drawn elements became largely popular at the end of the year and can continue to carry popularity into 2011. Not only did many designs utilize paper textures, but many of the popular designs involved handwritten fonts and other sketched elements, such as the hand-written logo above. Many designs utilized the customized, semi-random and personal nature of hand-drawn elements, and a simple Google search for &ldquo;hand-drawn design element&rdquo; will reveal hundreds of brushes, icons, and vector sets with free hand-drawn elements for your next design.<br />
<br />
<!--break--><strong>Color Scheme</strong><br />
<br />
<img border="0" alt="" src="/p/files/image/3_color scheme.jpg" /></p>
<p><br />
Bright yet pale colors are going to continue to be very popular for 2011, and I&rsquo;ve heard some claims that honeysuckle, vintage wine, and citrus yellow have all been cited as colors to take note of in 2011. In addition, we think contrasting colors are going to be a staple for the remainder of of the year. Contrasting desaturated images and icons with strong yellow, yellow, orange, and red text is a strong trend, as are skin tones with contrasting colors. Subtle, muted tans, greys and off whites along with copper, grey and other muted tones are great calls for 2011. We are definitely seeing a call for earthy tones, especially those that are offset with a bold color, such as red. As an example, check out <a target="_blank" href="http://www.carbon-photography.com/">Carbon Photography</a>, a site that we did using these tones.<br />
<br />
If you need some inspiration, head over to <a target="_blank" href="http://htttp://www.Colourlovers.com/">COLOURlovers</a> for color schemes posted by users. A good majority of the color schemes posted fall under the suggested color schemes mentioned above. Many were skin tones, contrasting colors, and bold and contrasting colors. Many designers like us are recommending that color schemes should be limited to two or three colors so consider using a strong base color to setup the rest of your design to make a bold statement with complimentary colors helping to make your design stand out. <br />
<br />
<strong>Mobile Influence</strong><br />
With the huge popularity of mobile and web applications, particularly in the past year, many design elements are going to be based off of examples in the mobile sector. As people become more familiar and comfortable with web technologies, they expect similar design elements to be found in other graphic design examples. When people see certain elements such as a big &ldquo;Like&rdquo; button, they know exactly what it means and won&rsquo;t be surprised when similar buttons start appearing on other websites and applications. <br />
<br />
Mobile user interfaces in particular have to have simple, directive and self-explanatory design. Poorly designed mobile applications are largely ignored because users don&rsquo;t understand how to use them. Well-conceived design actually increases the user&rsquo;s ability to use and understand functionality, so it is important for users to respond positively to well-designed applications. For a great example of icon-branding for all online and mobile devices that is simple yet effective, consider the whole set of the Adobe Creative Suite icons:<br />
<br />
<img border="0" alt="" width="238" height="354" src="/p/files/image/4_adobe icons.jpg" /></p>
<p><br />
These icons showcase simple elegance and their fabulous color schemes set them apart them each other and make them memorable.<br />
<br />
Web applications have also shaped how the public expects their information to be shared. They fuel a consumer desire for simple, direct, and clear access to information, and as these applications become more widespread, the more an expectation for simple and quickly accessible information becomes the norm. Graphic designers need to cater to the consumer culture in their projects and take cultural elements into consideration. Logos should be simple and clearly communicate all the necessary information to the public. Worldwide corporations have begun to recognize this and some such as Walmart changed their logos to better reflect this consumer expectation. Under Consideration has a great summary of <a target="_blank" href="http://www.underconsideration.com/brandnew/archives/less_hyphen_more_burst_for_wal.php">logo evolution for Walmart here</a>. Other companies such as Starbucks, the Gap, and Scribd have recently underdone logo revamps as well. See a great and comprehensive list of redesigned logos at <a target="_blank" href="http://www.graphicdesignblog.org/famous-logo-redesigns-2010">Graphic Design Blog</a>.<br />
<br />
<strong>Software and Tools</strong><br />
As mentioned before, mobile applications are making a huge splash in the design world as they provide image editing tools and effects on the go, allowing designers the opportunities to be creative and inspired away from their workstations. One of the heavy hitters in the mobile app world is <a target="_blank" href="http://instagr.am/">Instagram for the iPhone</a>. Instagram allows you to take photos with your iPhone and quickly apply a wide range of filters and effects to the photo before uploading it to the Internet for all to see. Being able to catalogue and review various inspirational elements is a huge help for designers. You can also play around with photos already taken, so if you need some inspiration you can mess around with your regular photos. <br />
<br />
One of the best new applications on multiple platforms for web designers is <a target="_blank" href="http://getgalleried.com/">Galleried</a>, a web-based gallery of hand picked websites that you can review and mark when you see something you like. Galleried provides you with the opportunity to download the application on your phone or login on their website to manage your favorite sites. You can also submit a suggestion to the Galleried crew to contribute to the wealth of well-designed websites. <br />
<br />
If you&rsquo;ve been looking for a Photoshop replacement, <a target="_blank" href="http://www.gimp.org/">Gimp</a> has been gaining popularity for both Mac and PC and has been adding new even more useful features that make it a valid replacement for Photoshop, and many users have said that they feel like Gimp provides a much more intuitive interface than its Adobe counterpart. The mobile market push has also encouraged some devoted Photoshop users to switch to other Adobe applications such as Illustrator or Fireworks for their editing abilities as well as their ability to better cater to web and desktop application designing, with one reason for this switch being the ease of use that these programs offer.<br />
<br />
<strong>Building Design Value</strong><br />
If your business has been a little slow so far this year, don&rsquo;t panic just yet. Many companies are looking to get their money&rsquo;s worth from their designers. Companies want to know that you are not only talented, but that you not only have the capability to cost-effectively and quickly produce their designs, but are capable of keeping up with these new trends and aren&rsquo;t resistant to trying something new. <br />
<br />
Expect potential clients to ask to see extra designs, so be prepared to potentially add more work to your Elance portfolio. Potential clients are also going to look for a wide range of skills and talents perhaps looking for a skill beyond something you&rsquo;ve already designed. If you haven&rsquo;t designed something in a specific domain such as mobile interface, take a week or two and try your hand at some experimental work. Having some examples to expand your portfolio could help land that job you are qualified for but haven&rsquo;t yet done. <br />
<br />
Something that we have begun doing &ndash; especially in the area of logo design &ndash; is to provide many different yet related looks to our clients in the first round. Not only does this help them feel like they have gotten their money&rsquo;s worth, but it also gives them more to choose from, which in turn makes the next revision round simpler for us both. Here is a sample of what we have done for a client using this model:<br />
<br />
<img border="0" alt="" src="/p/files/image/5_grandtechniq logos.jpg" /></p>
<p><br />
As a result, he decided that he liked a combination of number four and number nine, respectively. <br />
<br />
Ultimately, the 2011 design trends should give you a direction to take with future clients. Remember, though, that your individual style and the unique aspect of your client&rsquo;s project should always shine through no matter what.<br />
<br />
<em><strong>About the Authors:</strong><br />
<a target="_blank" href="http://www.elance.com/s/jennahmitchell/">Derrick and Jennah Mitchell</a> own and operate a small graphic and web design company in Montana. Together they design print and web materials and provide copy-writing services for clients all over the United States. Derrick graduated with an Art and Business degree form Whitworth University and Jennah graduated with a Secondary Education and English degree from Northwest University. They are passionate about design and feel that there is no greater success in the creative field than creating a lasting design for people who are dedicated to helping their businesses grow and flourish.</em></p></div></div></div>Fri, 25 Feb 2011 19:50:10 +0000Guest_Blogger1110 at https://www.elance.com/qhttps://www.elance.com/q/blog/2011/02/graphic-design-trends-for-2011.html#comments10 Online Resources for Graphic and Web Designershttps://www.elance.com/q/blog/2011/1/10-online-resources-for-graphic-and-web-designers.html
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><iframe frameborder="0" scrolling="no" src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.elance.com%2Fp%2Fblog%2F2011%2F1%2F10-online-resources-for-graphic-and-web-designers.html&amp;layout=button_count&amp;show_faces=false&amp;width=102&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" style="border:none; overflow:hidden; width:102px; height:21px;" allowtransparency="true"></iframe><iframe frameborder="0" scrolling="no" allowtransparency="true" src="https://platform.twitter.com/widgets/tweet_button.html?url=http://www.elance.com/p/blog/2011/1/10-online-resources-for-graphic-and-web-designers.html&amp;count=horizontal&amp;text=8 Tips To Win More Jobs on Elance - Elance Blog - " style="width:102px; height:21px;"></iframe></p>
<p>How dull of a place would the world be without the artistry and passion that graphic and web designers bring to the table? We&rsquo;ve put together a list of ten exciting resources for all of our creatives worldwide&mdash;so whether you&rsquo;re looking for some <a target="_blank" href="http://www.elance.com/php/search/main/eolsearch.php?matchType=project#matchKeywords=photoshop">Photoshop</a> tips and tutorials, fresh new fonts or themes, or simply a jolt of inspiration, you&rsquo;re bound to find what you&rsquo;re looking for on one of these sites. And with over 800 active jobs awaiting <a target="_blank" href="http://www.elance.com/php/search/main/eolsearch.php?matchType=project#matchKeywords=Graphic%20Design&amp;catFilter=10184">graphic </a>and <a target="_blank" href="http://www.elance.com/php/search/main/eolsearch.php?matchType=project#page=1&amp;sortBy=&amp;sortOrder=1&amp;matchKeywords=web%20design&amp;catFilter=100&amp;subcatFilter=&amp;timeleftFilter=0&amp;timelistedFilter=0&amp;budgetFilter=-1&amp;featuredprojectFilter=false&amp;b2bprojectFilter=false&amp;statusFilter=10037&amp;fixedprojectFilter=false&amp;hourlyprojectFilter=false&amp;groupFilter=&amp;inDescrCheck=false&amp;inSkillsCheck=false&amp;inNameCheck=false&amp;escrowprojectFilter=false">web designers</a> on Elance right now, you can learn some new tricks, get motivated, and then start bidding on some new projects!<br />
<br />
<u><a target="_blank" href="http://www.1stwebdesigner.com"><strong>1stwebdesigner</strong></a></u><br />
<br />
<a target="_blank" href="http://www.1stwebdesigner.com/"><img style="padding-bottom: 20px; padding-left: 30px" alt="" align="right" src="/p/files/image/1stwebdesigner_150width.jpg" /></a>A design blog catering to bloggers, freelancers, and web developers that gets 1.5 million hits a month. Includes helpful articles on coding (HTML &amp; CSS, AJAX, and PHP to name a few) and tutorials on effects&mdash;3D, photo, and text. There&rsquo;s also a premium content section ($9.95 for full access) with exclusive tutorials, downloadable source code, and coupon codes for design-related businesses. If you&rsquo;re into that sort of thing. <br />
<br />
<em>Be sure to check: <a target="_blank" href="http://www.1stwebdesigner.com/inspiration/most-popular-design-articles-2010/">45 Top and Most Popular Articles of 2010 in Design Community</a></em><br />
<br />
<u><a target="_blank" href="http://creattica.com/"><strong>Creattica</strong></a></u><br />
<br />
<a target="_blank" href="http://creattica.com/"><img style="padding-bottom: 20px; padding-left: 30px" alt="" align="right" src="/p/files/image/creattica_150width.jpg" /></a>A go-to site if you&rsquo;re looking for some inspiration. Creattica provides galleries of design examples across categories like Business Cards, Flash Websites, Logos, and 3D Graphics, and every piece of work is user-submitted. Then the user community votes on which pieces go up on the site--and consequently which ones gets thousands of eyeballs a day on their creations. To start submitting your work simply <a target="_blank" href="http://creattica.com/identities/new">create an account</a> on the site.<br />
<em><br />
Be sure to check: <a target="_blank" href="http://creattica.com/flash/latest-designs">Flash | Latest Designs</a></em><br />
<br />
<u><a target="_blank" href="http://designerscouch.org"><strong>DesignersCouch</strong></a></u><br />
<br />
<a target="_blank" href="http://designerscouch.org/"><img style="padding-bottom: 20px; padding-left: 30px" alt="" align="right" src="/p/files/image/designerscouch_150width.jpg" /></a>An online community for designers where you can create your own portfolio and publish it so that you can receive feedback from your peers. Oh, and did we mentioned you win prizes for your constructive critiques? The only knock is that membership is invitation only&mdash;though you can get on the <a target="_blank" href="http://designerscouch.org/creatives">wait list</a>, you may be off cozying up to one of the <a target="_blank" href="http://designerscouch.org/creatives">7500+ &ldquo;Creatives&rdquo;</a> who can help get you through the gates. Otherwise there are some great articles and design collections to browse while you wait.<br />
<br />
<em>Be sure to check: <a target="_blank" href="http://designerscouch.org/inspirelog">DesignersCouch InspireLog</a></em><br />
<br />
<!--break--><u><a target="_blank" href="http://www.hongkiat.com"><strong>Hongkiat.com</strong></a></u><br />
<br />
<a target="_blank" href="http://www.hongkiat.com/"><img style="padding-bottom: 20px; padding-left: 30px" alt="" align="right" src="/p/files/image/hongkiat_150width.jpg" /></a>Here we have a traditional but very useful design weblog dedicated to designers and bloggers with tricks, tools, tutorials and a lot of great giveaways to boot. Check out their Wordpress tips, grab a couple of new Icons, or just read up with one of their informative article on Web 2.0 technologies.<br />
<br />
<em>Be sure to check: <a target="_blank" href="http://www.hongkiat.com/blog/category/freebies-online/free-icons/">Icons for your interface</a></em><br />
<br />
<u><a target="_blank" href="http://www.inspiredm.com/"><strong>Inspired Magazine</strong></a></u><br />
<br />
<a target="_blank" href="http://www.inspiredm.com/"><img style="padding-bottom: 20px; padding-left: 30px" alt="" align="right" src="/p/files/image/inspiredmag_150width.jpg" /></a>A daily source of articles and resources with over 45 thousand subscribers and followers. More geared towards web developers and designers, with specific sections dedicated to Drupal, iPhone, Twitter and WordPress design&mdash;oh, and a ton of great articles on design for social media.<br />
<em><br />
Be sure to check: <a target="_blank" href="http://www.inspiredm.com/2011/01/19/5-upcoming-web-apps-for-designers/">5 Upcoming Web Apps for Designers</a></em><br />
<br />
<u><a target="_blank" href="http://www.smashingmagazine.com/"><strong>Smashing Magazine</strong></a></u><br />
<br />
<a target="_blank" href="http://www.smashingmagazine.com/"><img style="padding-bottom: 20px; padding-left: 30px" alt="" align="right" src="/p/files/image/smashingmagazine_150width.jpg" /></a>One of the most comprehensive places on the web for designers and developers, with resources for everything from HTML5 and CSS to Typography. Their &ldquo;Smashing Network&rdquo; is a manually selected collection of articles pulled from the best design blogs on the internet, updated daily. A great one-stop shop if you don&rsquo;t have the time to peruse a ton of different sites during your day.<br />
<br />
<em>Be sure to check: <a target="_blank" href="http://www.smashingmagazine.com/network-posts/">Smashing Network</a></em><br />
<br />
<u><a target="_blank" href="http://speckyboy.com/"><strong>Speckyboy Design Magazine</strong></a></u><br />
<br />
<a target="_blank" href="http://speckyboy.com/"><img style="padding-bottom: 20px; padding-left: 30px" alt="" align="right" src="/p/files/image/speckyboy_150width.jpg" /></a>Started in October 2007 as the personal freelance web design homepage of Paul Andrew, Speckyboy&rsquo;s site evolved into one of the leading web resources for design in web, CMS, mobile development and graphic design. If you&rsquo;re designing for the web and can&rsquo;t find a relevant resource here&mdash;maybe it doesn&rsquo;t exist?<br />
<br />
<em>Be sure to check: <a target="_blank" href="http://speckyboy.com/2011/01/19/50-free-tools-and-apps-for-web-designers-and-developers/">50 Free Tools for Web Designers and Developers</a></em><br />
<br />
<u><a target="_blank" href="http://tutorialblog.org"><strong>Tutorial Blog</strong></a></u><br />
<br />
<a target="_blank" href="http://tutorialblog.org"><img style="padding-bottom: 20px; padding-left: 30px" alt="" align="right" src="/p/files/image/tutorialblog_150width.jpg" /></a>One of our favorite go-to resource destinations on the internet, geared towards&mdash;you guessed it&mdash;tutorials for beginner and intermediate web and graphic designers, artists and writers. Tons of great tips and advice to get you up and running on everything from Microsoft Office, Social Media, email campaigning, and maintaining your own freelance career. <br />
<em><br />
Be sure to check: <a target="_blank" href="http://tutorialblog.org/emailium-browse-email-design-showcase-for-inspiration/">Browse Email Marketing Campaigns on Emailium for Inspiration and Ideas</a></em><br />
<u><br />
<a target="_blank" href="http://www.webdesignerdepot.com"><strong>Webdesigner Depot</strong> </a></u><br />
<br />
<a target="_blank" href="http://www.webdesignerdepot.com"><img style="padding-bottom: 20px; padding-left: 30px" alt="" align="right" src="/p/files/image/webdesignerdepot_150width.jpg" /></a>Touted as a joint effort and collaboration between leading designers around the world, this site is another example of design diversity, with categories ranging from Adobe Creative Suite, coding and typography to best practices for your design business. <br />
<br />
<em>Be sure to check: <a target="_blank" href="http://www.webdesignerdepot.com/2011/01/what-to-ask-a-client-before-you-start-their-project/">What to Ask a Client Before You Start Their Project</a></em><br />
<a target="_blank" href="http://www.webdesignshock.com/"><br />
<u><strong>Web Design Shock</strong></u> </a><br />
<br />
<a target="_blank" href="http://www.webdesignshock.com/"><img style="padding-bottom: 20px; padding-left: 30px" alt="" align="right" src="/p/files/image/webdesignshock_150width.jpg" /></a>A little light on the sheer amount of content, but what makes it on this blog really packs a punch. How about lists like &ldquo;<a target="_blank" href="http://www.webdesignshock.com/review/best-web-design-2010/">The best of the best web design tools and resources of 2010</a>&rdquo; and the &ldquo;<a target="_blank" href="http://www.webdesignshock.com/inspiration/best-illustrations-web-design/">200 best illustrations in web design</a>&rdquo;? It&rsquo;s clear that they spend a lot of time compiling these extensive lists, and you shouldn&rsquo;t be afraid to take a few coffee breaks to scroll through them.<br />
<em><br />
Be sure to check: <a target="_blank" href="http://www.webdesignshock.com/review/design-trends-for-2011/">The real design trends of 2011</a></em><br />
<br />
Have a design resource that you&rsquo;ve got bookmarked and would like to share with your fellow designers? Leave us a comment below or join the discussion on our <a target="_blank" href="http://www.facebook.com/Elance">Facebook Page</a>!</p>
<p>&nbsp;</p></div></div></div>Fri, 21 Jan 2011 00:01:26 +0000Elance_Keith768 at https://www.elance.com/qhttps://www.elance.com/q/blog/2011/1/10-online-resources-for-graphic-and-web-designers.html#commentsDid Apple’s iPhone and iPad Kill Flash?https://www.elance.com/q/blog/2010/05/did_apples_iphone_and_ipad_kill_flash.html
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><script type="text/javascript"> tweetmeme_style = 'compact'; tweetmeme_source = 'Elance'; tweetmeme_url = 'http://www.elance.com/p/blog/2010/05/did_apples_iphone_and_ipad_kill_flash.html'; </script><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
<p><img style="padding-bottom: 20px; padding-left: 20px" alt="" align="right" width="252" height="252" src="/p/files/image/blog/flash.jpg" />Rumors of Flash&rsquo;s impending death have been greatly exaggerated, but <a target="_blank" href="http://www.google.com/search?q=steve+job+flash">according to recent headlines</a>, the Cupertino mobile devices giant is looking to singlehandedly shift online rich media content from the Adobe Flash platform to HTML5, CSS, and Javascript with its mega popular <a target="_blank" href="http://www.elance.com/php/search/main/eolsearch.php?matchType=profile#page=1&amp;matchKeywords=iPhone">iPhone</a>, iPod touch, and <a target="_blank" href="http://www.elance.com/php/search/main/eolsearch.php?matchType=profile#page=1&amp;matchKeywords=iPad">iPad</a> devices. But why? <br />
<br />
Last week, Apple CEO Steve Jobs published a 1,500+ word article titled <a target="_blank" href="http://www.apple.com/hotnews/thoughts-on-flash/">&ldquo;Thoughts on Flash&rdquo;</a> highlighting his and Apple&rsquo;s collective decision to continue to leave Adobe&rsquo;s Flash technology off of their products. His argument details six main reasons, which include (<a target="_blank" href="http://www.apple.com/hotnews/thoughts-on-flash/">from Apple.com</a>): &nbsp;</p>
<ol>
<li><a target="_blank" href="http://www.elance.com/php/search/main/eolsearch.php?matchType=profile#page=1&amp;matchKeywords=Adobe%20Flash">Adobe Flash</a> is a 100% proprietary product that is not open and is completely controlled by Adobe.<br />
&nbsp;</li>
<li>While most online video is Flash based, H.264 is a more modern alternative that is widely available.<br />
&nbsp;</li>
<li>Flash has significant reliability, security, and performance issues. (He even claims the number one reason why Macs crash is due to Flash.)<br />
&nbsp;</li>
<li>Flash technologies require software decoding, thus eating an unnecessarily large amount of battery life.<br />
&nbsp;</li>
<li>Flash was designed in a world when input devices simply comprised of mice and keyboards and not touch.<br />
&nbsp;</li>
<li>The most important reason to Jobs: Flash is a third-party layer of software that hinders the progress of development and the platforms it resides on, like the iPhone OS, for example.<br />
&nbsp;</li>
</ol>
<p>While most of these arguments can be seen as thoroughly valid points, several of them can be fiercely debated, and recently, some of them&nbsp;have been. <br />
<br />
First, Flash is neither entirely proprietary or entirely open &ndash; according to an article from <a target="_blank" href="http://www.fastcompany.com/1634130/adobe-executives-respond-to-steve-jobss-flash-bashing">Fast Company</a>. Certain aspects of Flash are open source, like the SWF and FLV video formats and the Flex SDK, and some are not, like Flash IDE. But why the accusation of open vs. closed? Fast Company writes, <em>&ldquo;The open-vs.-closed argument isn't really what we're talking about here, anyway: <strong>Jobs only mentions it to negate the accusations that iPhone OS is 'too closed.'</strong> His real problems are technological (like battery life and touch).&rdquo;</em><br />
<!--break--><br />
Second, regarding Jobs&rsquo; fourth point, ReadWriteWeb put together an in-depth look at the performance consumption with interesting results. In a nutshell, if Flash is given access to graphics hardware, then it can be as efficient or even more efficient in many cases. From <a target="_blank" href="http://www.readwriteweb.com/archives/does_html5_really_beat_flash_surprising_results_of_new_tests.php">ReadWriteWeb</a>: <em>&ldquo;Here's what this all means in layman's terms: <strong>Apple isn't allowing Flash to become more efficient on their Mac OS X/Safari platform (or their iPod/iPhone/iPad one, either) by not providing the access to the hardware it needs to reduce its CPU load.</strong> Adobe is waiting and watching to see if they do, but, as Ozer says &quot;the ball is in Apple's court.&quot;</em><br />
<br />
Despite the validity of arguments and counter-arguments published on the web, several members of the technology community are currently alluding to a hidden truth behind Apple&rsquo;s interest in the matter: It&rsquo;s not that third-party apps will muck up the experience on the iPhone, iPad, or iPod touch, and it&rsquo;s not the fact that battery life will significantly decrease. It&rsquo;s Apple&rsquo;s interest in continued control and oversight of all rich media content throughout Apple&rsquo;s hardware ecosystem. <br />
<br />
Author <a target="_blank" href="http://www.antipope.org/charlie/blog-static/2010/04/why-steve-jobs-hates-flash.html">Charlie Stross</a> shares this on his personal blog. <em>&ldquo;<strong>The App Store and the iTunes Store have taught Steve Jobs that ownership of the sales channel is vital. </strong>Even if he's reduced to giving the machines away, as long as he can charge rent for access to data (or apps) he's got a business model. He can also maintain quality (whatever that is), exclude malware, and beat off rivals. A well-cultivated app store is actually a customer draw. It's also a powerful tool for promoting the operating system the apps run on. Operating system, hardware platform, and apps define an ecosystem.&rdquo;</em><br />
<br />
The overall outlook for Adobe isn&rsquo;t exactly peachy, <a target="_blank" href="http://techcrunch.com/2010/05/01/h-264-66-percent-web-video/">according to a new report featured on TechCrunch</a>. A significant population of businesses and other content creators have already shifted their investments of time, resources, and money into ensuring their content is properly viewable in a mobile platform (read: iPhone) by utilizing the H.264 codec over Flash video. <br />
<br />
Now, Flash video isn&rsquo;t the only piece in this puzzle, as there are tons of other Flash-dependent interactive experiences on the web that still exist (casual gaming being one of the biggest). Additionally, Adobe Flash and its related technologies continue to be some of the most highly demanded skills by businesses on Elance, according to the <a target="_blank" href="http://www.elance.com/p/online_talent_report_it.html">Online Talent Report</a>,&nbsp; So the truth behind the matter, much to Jobs&rsquo; dismay, is that Flash won&rsquo;t be disappearing into oblivion anytime soon. <br />
<br />
However, even if journalists, the media, influencers, CEOs, and self-proclaimed pundits reveal the true motives behind Apple&rsquo;s decisions to leave Flash in the digital dust, all of the he-said-she-said mudslinging will ultimately result in a moot point. The winner of this battle and the supposed impending expiration date of Flash will be determined by consumers. And with the iPad reportedly reaching the <a target="_blank" href="http://www.sfgate.com/cgi-bin/article.cgi?f=/c/a/2010/05/04/BU051D8PMJ.DTL&amp;type=tech">&ldquo;1 million sold&rdquo; milestone in record time</a>, it appears that the consumers are speaking very clearly.<br />
<br />
<strong>Links:</strong><br />
<a href="http://www.elance.com/p/online_talent_report_it.html">Elance - The Online Talent Report</a><br />
<a href="http://www.elance.com/p/blog/2010/04/hp_and_palm_what_does_it_mean_for_the_smartphone_market_and_developers.html">Elance Blog - HP and Palm: What Does it Mean for the Smartphone Market and Developers</a></p></div></div></div>Wed, 05 May 2010 00:48:32 +0000Elance_Alex994 at https://www.elance.com/qhttps://www.elance.com/q/blog/2010/05/did_apples_iphone_and_ipad_kill_flash.html#commentsTo The White House: Hire An Elancer And Save $299,900https://www.elance.com/q/blog/2009/04/to_the_white_house_hire_an_elancer_and_save_299900.html
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><table cellspacing="0" cellpadding="6" border="0" align="right" width="260">
<tbody>
<tr>
<td align="center" valign="top"><img height="189" width="250" src="http://www.elance.com/p/files/image/blog/horriblephotoshop.jpg" alt="" /></td>
</tr>
</tbody>
</table>
<p>To Whom It May Concern:<br />
<br />
Word is that you recently looked to take the ol&rsquo; Air Force One out for a photo shoot earlier this week, and I heard the bill wasn&rsquo;t pretty. $300,000!<br />
<br />
Don&rsquo;t get me wrong, I don&rsquo;t have a problem with you spending some dough to take the Presidential ride out for a few glamour shots, but next time, consider hiring an elancer to do a little photo editing for you instead. It&rsquo;s easy, and ninety nine&nbsp;times out of a hundred, you probably wouldn&rsquo;t be able to tell the difference. And did I mention that it would save you a major grip of cash? I&rsquo;ve even taken the liberty of creating a sample for you at no cost.<br />
<br />
All jokes aside, the reality is this: If a picture is worth a thousand words, Photoshop is worth a million. It&rsquo;s an unbelievably incredible tool that can create even more incredible results. You&rsquo;d honestly be surprised at what people can do these days. <a href="http://rookery2.viary.com/storagev12/749000/749029_24b3_625x1000.jpg">Astonished</a>. <a href="http://rookery3.viary.com/storagev12/1293000/1293299_7426_625x1000.jpg">Amazed</a>. Maybe even <a href="http://rookery3.viary.com/storagev12/1289500/1289948_9bac_625x1000.jpg">perplexed</a>. And through Elance, you have access to a huge pool of expert Photoshop providers that take &lsquo;chopping to the next level &ndash; <a href="http://www.elance.com/php/search/main/eolsearch.php?matchType=profile#matchKeywords=Photoshop&amp;catFilter=10184">10,302 to be exact</a>.<br />
<br />
So, a word to the wise and to anyone listening in from inside the beltway:&nbsp;The next time&nbsp;you&rsquo;ve got 300 grand burning a hole in your pocket and you&rsquo;re in desperate need of some fly pictures of your private jet in action, keep it in the hangar, <a href="http://www.elance.com/postjob">hire an elancer</a>, and save the leftovers&nbsp;for the next round of bailouts.</p></div></div></div>Thu, 30 Apr 2009 04:38:34 +0000Elance_Alex1270 at https://www.elance.com/qhttps://www.elance.com/q/blog/2009/04/to_the_white_house_hire_an_elancer_and_save_299900.html#commentsElance Blog Gets A Makeoverhttps://www.elance.com/q/blog/elance_blog_gets_a_makeover.html
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><img style="float: right" alt="" hspace="10" vspace="10" src="/p/files/image/blog/blog_redesign.jpg" /></p>
<p>We&rsquo;re kicking off 2009 with a new blog design for our readers - we hope you like it!<br />
<br />
We went for a simple and clean design to make it easier for you to read, browse and search for blog articles. <br />
<br />
We hired and collaborated with elancer Ketan Sethi from <a target="_blank" href="http://eyeforweb.elance.com">Eyeforweb</a> to design and code the new blog template &ndash; thanks, Ketan!</p></div></div></div>Mon, 19 Jan 2009 19:27:57 +0000elance_jon735 at https://www.elance.com/qhttps://www.elance.com/q/blog/elance_blog_gets_a_makeover.html#commentsHow to Create a Video on Budgethttps://www.elance.com/q/blog/how_to_create_video_on_budget.html
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><img hspace="10" vspace="10" align="right" style="float: right;" alt="" src="/p/files/image/blog/snewton.jpg" /></p>
<p><em>Guest Contributor Shannon Newton is back, and he's sharing his expertise about video production and what you can do to successfully manage your next video project within your budget: </em><br />
<br />
Pretend you want to build a nice, second story deck for your home. If this deck was your video and you had a specific budget to spend on it, where would your money go? I took a look and based on my experience, here's what I found:<br />
<!--break--><br />
<strong>You will spend roughly 15% of your budget on an architect (video writer) and a contractor (video producer).</strong><br />
<br />
The script for your video is like the blueprint for the deck. Writing this plan is one of the smallest costs but it has an enormous domino effect on the rest of your production &ndash; so it is especially important to get this right. Clear and specific plans lead to high-quality and timely productions.<br />
<br />
How to stay within budget in this area (often times called the pre-production phase):</p>
<ol>
<li>Take your time screening and hiring the right producer/director for the job</li>
<li>Save time and hire a writer who is also a producer (i.e., architect + contractor in one)</li>
<li>Remember, more time writing the script will equal less confusion during production</li>
<li>Get everyone involved in planning meetings so you have fewer of them</li>
<li>If you need a studio, hire a company that owns one</li>
<li>If you need to shoot in a specific format (like HD), then hire someone that owns the equipment or who has a special rental arrangement</li>
</ol>
<p><strong><br />
You will spend roughly 35% of your budget on the video producer and their team for the basic structure (i.e., shooting the video).</strong><br />
<br />
You will need a small army of people and other resources to shoot the video. Like constructing the frame of a deck, production shoot days are the most costly part of building your video, so, the fewer the better. This is also the most exciting part &ndash; but beware, this is where costly mistakes can be made. <br />
<br />
Stay on schedule, but also keep in mind that there is no discount for finishing early, as most crews are booked for the entire day. A good producer plus a good plan = gold here. <br />
<br />
How to stay within your budget in this area (oftentimes called the production phase):</p>
<ol>
<li>Make sure you have all client stakeholders sign-off on the plan for the video</li>
<li>Make sure everyone agrees on the details</li>
<li>Schedule a rehearsal and invite the client to view this (if you can do this virtually, then great!)</li>
<li>Record excellent audio</li>
<li>Rent specialized gear only if necessary (jibs, steadicams, dollies, etc.)</li>
<li>If you are recording digitally, hire someone onset to manage and backup the data to minimize risk to your ONLY copy of the material</li>
</ol>
<p><strong><br />
You will spend roughly 40% of your budget on getting the video finished (the editing and sound phase).</strong><br />
<br />
The basic framework is built, but you still need to add the flooring and stairs that turn your framing into something functional. The main driver for cost here is the sheer time it takes for a good editor to do the work. <br />
<br />
Typically, many hours are spent sifting through footage and cutting together the best video for your review. Included in this cost is the sound design (music and sound effects) and output rendering (to produce final video output).<br />
<br />
How to stay within budget in this area (oftentimes called the post production phase):</p>
<ol>
<li>Don&rsquo;t dump excess footage on your post production team &ndash; editors cost too much to have them sort endlessly through video you wouldn&rsquo;t consider for the final product</li>
<li>Collect all feedback before the editor makes any changes</li>
<li>Feedback should be descriptive and specific feedback</li>
<li>Deliver assets to the editor on time (logos, stock footage, etc.)</li>
<li>Deliver music to the editor beforehand (if applicable)</li>
</ol>
<p><strong><br />
You will spend roughly 10% or more of your budget on the finishing touches.</strong><br />
<br />
Costs can vary significantly for finishing visual and audio effects. It is the hardest to estimate, and can quickly spiral out of control, so the devil is in the details of this silent killer.<br />
<br />
The real trick on finishing touches is trying to nail them on the first try. Decide on them beforehand, clearly define them, and incorporate them into the video planning and avoid the dreaded &ldquo;wouldn&rsquo;t it be cool if&hellip;&rdquo;<br />
<br />
How to stay within budget in this area (oftentimes called the post production effects phase):</p>
<ol>
<li>Completely script graphic sequences (open and close) before work starts</li>
<li>If using greenscreen elements, hire a producer with this specific experience</li>
<li>Hire a <a target="_blank" href="http://www.elance.com/php/search/main/eolsearch.php?matchType=profile#page=1&amp;matchKeywords=VFX&amp;sortBy=&amp;sortOrder=1&amp;bizFilter=false&amp;catFilter=100&amp;indFilter=false&amp;premierFilter=false&amp;feedbackFilter=0&amp;reviewsFilter=0&amp;minrateFilter=0&amp;locFilter=&amp;regionFilter=&amp;z">VFX supervisor</a> for complex visual effects</li>
<li>Eliminate any other special effects that don&rsquo;t contribute to the overall story</li>
</ol>
<p>Now, you have built your video within your budget, and it is sturdy and stunning and ready to go! <br />
<br />
<em><strong>About:</strong><br />
Shannon is the co-founder of Nickel Tour Productions and is the voice of the producer within <a target="_blank" href="http://www.market7.com/">Market7</a>, a company building software for video producers and their clients. Shannon has produced content for over 40 clients and does his best to keep his foot out of his mouth although, is still occasionally unsuccessful.</em></p></div></div></div>Wed, 17 Dec 2008 00:37:46 +0000Elance_Keith726 at https://www.elance.com/qhttps://www.elance.com/q/blog/how_to_create_video_on_budget.html#comments