You are browsing the archive for Design.

50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)

February 18, 2010 in Design by Brandon Corbin

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)" border="0"/> /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=56"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=56" border="0" alt=" in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>   href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=63"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=63" border="0" alt=" in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>  href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=64"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=64" border="0" alt=" in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.

This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.

You may want to look at similar CSS-related posts that we published last months:

[By the way, did you know there is a brand new href="http://creatives.commindo-media.de/www/delivery/ck.php?oaparams=2__bannerid=1339__zoneid=0__cb=a279a7c66d__oadest=http%3A%2F%2Fshop.smashingmagazine.com%2Fsmashingbook-dispatcher.php%3Fd%3Dsmashing-wordpress%26utm_source%3DSmashing%252BMagazine%26utm_medium%3Deditorialbox2%26utm_campaign%3DSmashing%252BWordPress%2520-%2520BTW%2520Editorial%2520Box">Smashing Wordpress Book? Push WordPress past its limits!]

CSS Layouts: Techniques And Workarounds

href="http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/">Facebook Style Footer Admin Panel />Learn how to re-create the Facebook footer admin panel with CSS and jQuery. Also check out href="http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-2/">part 2.

class="showcase"> href="http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-15.jpg" width="480" height="300" alt="Css-technique-15 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.jankoatwarpspeed.com/post/2009/07/07/Adaptable-view.aspx">Adaptable View: How Do They Do It? />This tutorial explains how to manually change a layout, and it shows two great examples and “how they did it.”

class="showcase"> href="http://www.jankoatwarpspeed.com/post/2009/07/07/Adaptable-view.aspx"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-01.jpg" width="480" height="300" alt="Css-technique-01 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://designm.ag/tutorials/jquery-display-switch/">Easy Display Switch with CSS and jQuery />A quick and simple way to enable users to switch page layouts using CSS and jQuery.

class="showcase"> href="http://designm.ag/tutorials/jquery-display-switch/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-198.jpg" width="480" height="300" alt="Css-198 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/">Quick Tip – Resizing Images Based On Browser Window Size />In fluid layouts, formatting text to adjust smoothly to window size is easy, but images are not as fluid-friendly. This quick tip shows how to switch between two image sizes based on the size of the browser, the DIV or whatever else you choose.

class="showcase"> href="http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-064.jpg" width="480" height="300" alt="Css-064 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://css-tricks.com/one-page-resume-site/">One Page Résumé Site />A clean layout on one page—literally (just one index.html file with optional images). It comes with contact information in microformats and a main area for the resume using a definition list (dl). And it prints well.

class="showcase"> href="http://css-tricks.com/one-page-resume-site/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-000.jpg" width="480" height="300" alt="Css-000 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://ajaxian.com/archives/pegs-automate-display-fixed">Pegs: Automate Display: fixed++ />Chris Wetherell posts on Pegs, a strategy for having one scroll bar but independent scrolling areas. After the first one, click on the other items to flip between sizes. You will see that an area’s scroll depends on the configuration.

class="showcase"> href="http://ajaxian.com/archives/pegs-automate-display-fixed"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-135.jpg" width="480" height="300" alt="Css-135 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.tutwow.com/tips/quick-tip-css-100-height/">CSS 100% Height />A common problem among designers is how to get a div to stretch 100% of the window’s height. There are a few different techniques out there, and this tutorial shows one of them.

class="showcase"> href="http://www.tutwow.com/tips/quick-tip-css-100-height/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-18.jpg" width="480" height="300" alt="Css-technique-18 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.webdesignerwall.com/demo/css3-dropdown-menu//">CSS3 Drop-Down Menu />A clean, simple a nice navigation menu, designed by Nick La.

class="showcase"> href="http://www.webdesignerwall.com/demo/css3-dropdown-menu/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-21.jpg" width="480" height="211" alt="Css-technique-21 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.fivefingercoding.com/xhtml-and-css/scrolling-transparent-background-effect">CSS Trick for a Scrolling Transparent Background Effect />Scroll the page to watch a battle between good and evil take shape. The effect requires two images: one transparent and one tiled gradient image. The gradient scrolls under the transparent PNG. Because it matches the colors in the PNG, each set of images disappears, depending on the part of the gradient they’re on top of.

class="showcase"> href="http://www.fivefingercoding.com/xhtml-and-css/scrolling-transparent-background-effect"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-148.jpg" width="480" height="300" alt="Css-148 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://unstoppablerobotninja.com/entry/fluid-images/">Fluid Images />By default, an image element that is 500 pixels doesn’t exactly play nice with a container as large as 800 pixels or one as small as 100. What’s a designer to do?

class="showcase"> href="http://unstoppablerobotninja.com/entry/fluid-images/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-069.jpg" width="480" height="300" alt="Css-069 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://css-tricks.com/scrollfollow-sidebar/">Scroll/Follow Sidebar, Multiple Techniques />A really simple concept: the sidebar follows you as you scroll down the page. There are a number of ways to go about it. Two are covered here: CSS and JavaScript (jQuery), with a bonus CSS trick.

class="showcase"> href="http://css-tricks.com/scrollfollow-sidebar/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-00.jpg" width="480" height="300" alt="Css-technique-00 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://blog.themeforest.net/tutorials/vertical-centering-with-css/">Vertical Centering With CSS />There are a few different ways to vertically center objects using CSS, but choosing the right one can be difficult. Here is a list of the best ways and an explanation of how to create a nice centered website.

class="showcase"> href="http://blog.themeforest.net/tutorials/vertical-centering-with-css/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css3-new-08.jpg" width="480" height="300" alt="Css3-new-08 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.jankoatwarpspeed.com/post/2009/11/08/YouTube-adaptable-view-css-jquery.aspx">Create YouTube-like adaptable view using CSS and jQuery />Other than the “Turn off the lights” feature, YouTube has great stuff, such as the “change view” feature, which allows you to switch between normal and wide mode, thus expanding or shrinking the video area. Creating this is very simple.

class="showcase"> href="http://www.jankoatwarpspeed.com/post/2009/11/08/YouTube-adaptable-view-css-jquery.aspx"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-142.jpg" width="480" height="300" alt="Css-142 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/">How To Create a Horizontally Scrolling Site />If websites were made of wood, the grain would run up and down. Vertical is the natural flow of the Web. But browsers are equipped with vertical and horizontal scroll bars, right? We have the choice to go against the grain and create web pages that scroll primarily horizontally and that even expand horizontally to accommodate more content. Perhaps a slight blow to usability, but a cool creative touch nonetheless!

class="showcase"> href="http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-02.jpg" width="480" height="300" alt="Css-technique-02 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://buildinternet.com/2009/10/purely-css-faking-minimum-margins/">Purely CSS – Faking Minimum Margins />min-margin is non-existent in the CSS world. After you’ve pondered and Googled it, check out the solution here.

class="showcase"> href="http://buildinternet.com/2009/10/purely-css-faking-minimum-margins/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-03.jpg" width="480" height="300" alt="Css-technique-03 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns">Create Sidebars of Equal Height with Faux Columns />CSS can be tricky business. Creating columns of equal height, where the content in one column is longer than the content in another, is frustrating. Here’s where the faux-column technique can help. Find out how this solution makes even the most complicated layout a breeze to code.

href="http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/">Setting Equal Heights with jQuery />Here is a script to match the heights of boxes in the same container and create a tidy grid, with little overhead.

class="showcase"> href="http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-141.jpg" width="480" height="300" alt="Css-141 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://blog.sugarenia.com/archives/web-design/quick-tip-centered-fake-floats">Quick Tip: Centered Fake Floats />There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats.

href="http://www.webresourcesdepot.com/6-flexible-jquery-plugins-to-control-webpage-layouts-easily/">6 Flexible jQuery Plugins to Control Web Page Layouts Easily />A collection of six jQuery plug-ins to manage page layouts easily.

class="showcase"> href="http://www.webresourcesdepot.com/6-flexible-jquery-plugins-to-control-webpage-layouts-easily/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-125.jpg" width="480" height="300" alt="Css-125 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/">Four Methods to Create Equal-Height Columns />This article discusses ways to create equal-height columns that work in all major browsers (including IE6). All of the methods show how to create a three-column layout.

class="showcase"> href="http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-065.jpg" width="480" height="300" alt="Css-065 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.webdesignerwall.com/tutorials/how-to-css-large-background/">How to: CSS Large Background />A tutorial with various CSS examples for how to create a large background using either a single image or double images.

class="showcase"> href="http://www.webdesignerwall.com/tutorials/how-to-css-large-background/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-080.jpg" width="480" height="300" alt="Css-080 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://five.gregorywood.co.uk/index.php?/blog/article/a-nice-little-css-positioning-technique">A Nice Little CSS Positioning Technique />Here, we have a basic unordered list (ul), with left-floated images where the text doesn’t wrap under the images. Of course, this technique could be deployed in loads of other instances.

class="showcase"> href="http://five.gregorywood.co.uk/index.php?/blog/article/a-nice-little-css-positioning-technique"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-117.jpg" width="480" height="300" alt="Css-117 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://css-tricks.com/perfect-full-page-background-image/">Perfect Full Page Background Image />This technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.

class="showcase"> href="http://css-tricks.com/perfect-full-page-background-image/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-162.jpg" width="480" height="300" alt="Css-162 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/">Smart Columns With CSS and jQuery />In observing liquid-width websites, Soh Tanaka sees two common techniques for displaying columns: fixed columns and liquid columns. He points out the drawbacks of both and pitches his solution.

class="showcase"> href="http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-057.jpg" width="480" height="300" alt="Css-057 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.markercss.com/en/index.php">Markercss />You’ll learn how to create open-source code for website layouts flexibly and quickly, and based on standard CSS.

class="showcase"> href="http://www.markercss.com/en/index.php"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css3-new-06.jpg" width="480" height="300" alt="Css3-new-06 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

Images And Visual Effects With CSS

href="http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/">A Beautiful Apple-Style Slideshow Gallery With CSS and jQuery />Create an Apple-like slideshow gallery, similar to the one used on Apple’s website to showcase products. It works entirely in the front end; no PHP or databases required.

class="showcase"> href="http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-12.jpg" width="480" height="300" alt="Css-technique-12 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.romancortes.com/blog/pure-css-coke-can/">Rolling a coke can around with pure CSS />Román Cortés is having a lot of fun doing CSS tricks these days. He just built a rolling coke can that uses background-attachment, background-position and a few other tricks to achieve the effect. No fancy CSS3 needed here!

class="showcase"> href="http://www.romancortes.com/blog/pure-css-coke-can/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css3-new-10.jpg" width="480" height="300" alt="Css3-new-10 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/">Grayscale Hover Effect With CSS and jQuery />A few months ago, James Padolsey introduced a cool grayscale technique for non-IE browsers. His technique inspired Soh Tanaka to come up with a workaround with a similar effect. His solution relies on CSS Sprites and a few lines of jQuery, but it requires a bit of preparation before implementation. It is not recommended for large-scale projects; it is probably best for portfolio pieces.

class="showcase"> href="http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-055.jpg" width="480" height="300" alt="Css-055 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://labs.dragoninteractive.com/rainbows.php">Codename Rainbows />Some JavaScript and CSS magic is used here to apply a two-color gradient to text. Shadows and highlights can also be applied. This works especially well on big websites and for dynamic content where creating images for every instance would be impractical.

class="showcase"> href="http://labs.dragoninteractive.com/rainbows.php"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-097.jpg" width="480" height="300" alt="Css-097 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image">3 Easy and Fast CSS Techniques for Faux Image Cropping />This article summarizes three fast and easy CSS techniques for displaying only a portion of an image. All of the techniques need only a couple of lines of CSS. You are not literally cropping, which is why it’s called faux image cropping. These techniques can be helpful if you want to keep images to a certain size (for example, thumbnails in a news section). Being able to use CSS to control which portion of an image to display is great.

class="showcase"> href="http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-08.jpg" width="480" height="300" alt="Css-technique-08 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/">Image Rollover Borders That Do Not Change Layout />With CSS, the border of any block-level element is factored into the element’s size in the layout. So, if you add a border to an element on hover, the layout will shift. In this post, you will find how to use the regular border property and create inner borders to get around that.

class="showcase"> href="http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-10.jpg" width="480" height="270" alt="Css-technique-10 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.christinafowler.com/tutorial/horizontal-stripes">Horizontal Stripes />This tutorial shows you how to create never ending horizontal stripes in your web design using CSS.

class="showcase"> href="http://www.christinafowler.com/tutorial/horizontal-stripes"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-14.jpg" width="480" height="300" alt="Css-technique-14 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://css-tricks.com/css-image-replacement/">Nine Techniques for CSS Image Replacement />Put nine different techniques of image replacement to the test.

class="showcase"> href="http://css-tricks.com/css-image-replacement/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-13.jpg" width="480" height="300" alt="Css-technique-13 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.marcofolio.net/webdesign/pure_css3_bokeh_effect_with_some_jquery_help.html">Bokeh effects with CSS3 and jQuery />This tutorial teaches you how to re-create the bokeh effect with CSS 3. With some help from jQuery, we can add some randomness in colour, size and position for the effect.

class="showcase"> href="http://www.marcofolio.net/webdesign/pure_css3_bokeh_effect_with_some_jquery_help.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-16.jpg" width="480" height="262" alt="Css-technique-16 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.impressivewebs.com/stationary-logo-changes-page-scroll-css/">A Stationary Logo That Changes on Page Scroll with CSS />Here is an interesting effect that modifies the logo when the page is scrolled, using the CSS background-attachment property.

class="showcase"> href="http://www.impressivewebs.com/stationary-logo-changes-page-scroll-css/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css3-new-04.jpg" width="480" height="300" alt="Css3-new-04 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://css-tricks.com/silhouette-fadeins/">Silhouette Fade-Ins />To achieve the effect in the image above, first we need a DIV with the silhouettes as a background image. Then we put four images in that DIV, all the exact same size, with each band member highlighted. These images are hidden by default. Then you absolutely position four regions on top of the DIV; these are the roll-over link areas. With jQuery, we apply hover events to them, fading in the appropriate image.

class="showcase"> href="http://css-tricks.com/silhouette-fadeins/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-046.jpg" width="480" height="300" alt="Css-046 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.dinnermint.org/css/creating-triangles-in-css/">Creating Triangles in CSS />Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels.

class="showcase"> href="http://www.dinnermint.org/css/creating-triangles-in-css/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-004.jpg" width="480" height="300" alt="Css-004 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html">A parallax optical illusion with CSS: The Horse in Motion />Time for some fun with CSS and optical illusions.

class="showcase"> href="http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-203.jpg" width="480" height="300" alt="Css-203 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://cssglobe.com/post/4175/pure-css-line-graph">Pure CSS Line Graph />The idea here is not only to offer data visualization to people who aren’t comfortable using scripting languages, but to demonstrate the power of CSS and offer a different way of using CSS. If you are not a fan of line graphs and data visualization, you may still benefit from this article. Think of it as a CSS experiment, and learn a thing or two about CSS Sprites and positioning.

class="showcase"> href="http://cssglobe.com/post/4175/pure-css-line-graph"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-037.jpg" width="480" height="300" alt="Css-037 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.9lessons.info/2009/10/zooming-with-jquery-and-css.html">Zooming with jQuery and CSS />This post is about text zooming with jQuery and CSS. This is a basic-level tutorial about changing a style using a jQuery script. A simple way to zoom website content.

class="showcase"> href="http://www.9lessons.info/2009/10/zooming-with-jquery-and-css.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-146.jpg" width="480" height="300" alt="Css-146 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property">Create Resizing Thumbnails Using Overflow Property />This tutorial teaches you how to control thumbnail sizes. Sometimes we don’t have enough space to fit large thumbnails, and yet we would rather avoid small indecipherable images. Using this trick, we can limit the default dimensions of thumbnails and show them at full size when the user mouses over them.

class="showcase"> href="http://cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-150.jpg" width="480" height="300" alt="Css-150 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://nick-dunn.co.uk/article/cross-browser-drop-shadows-using-pure-css/">Cross-browser drop shadows using pure CSS />Most methods of adding drop-shadows to content blocks require additional HTML mark-up and one or more PNG images. But by combining the Glow and Shadow filters, something that fairly closely resembles the rendered CSS3 shadow can be achieved.

class="showcase"> href="http://nick-dunn.co.uk/article/cross-browser-drop-shadows-using-pure-css/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-151.jpg" width="480" height="300" alt="Css-151 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://css-tricks.com/date-badges-and-comment-bubbles-for-your-blog/">Date Badges and Comment Bubbles for Your Blog />One of the things you have to deal with when your blog grows is having to cram more info into less space to show everything you want to show. One thing you can do is add an icon for the date and then a bubble over it with the number of comments for that post.

class="showcase"> href="http://css-tricks.com/date-badges-and-comment-bubbles-for-your-blog/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-11.jpg" width="480" height="300" alt="Css-technique-11 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

CSS Tables And Web Forms

href="http://cssglobe.com/post/6984/ux-trick-display-form-data-as-tabular-data">UX trick: display form data as tabular data />This is a little trick to enhance the user experience of forms. It displays editable form data as readable tabular data.

class="showcase"> href="http://cssglobe.com/post/6984/ux-trick-display-form-data-as-tabular-data"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-04.jpg" width="480" height="300" alt="Css-technique-04 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.zurb.com/article/206/tables-not-as-evil-as-you-think">Tables: Not As Evil As You Think />Tables are evil, right? Yes and no. For tabular data, they’re not, of course. That’s what tables are for in the first place. CSS can do an excellent job of styling a properly formatted table, and the table structure provides good scaffolding for JavaScript calls. But what is addressed here is using tables for non-tabular data (i.e. for the layout). Yes, that’s right: using tables for layout.

class="showcase"> href="http://www.zurb.com/article/206/tables-not-as-evil-as-you-think"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-075.jpg" width="480" height="300" alt="Css-075 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/">Perfect Drop-Down Log-In Box Like Twitter Using jQuery />This shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form.

class="showcase"> href="http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-158.jpg" width="480" height="300" alt="Css-158 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://css-tricks.com/making-selects-printable/">Make a Select’s Options Printable />When printing a Web page with select elements on it, the select drop-down prints just as it looks on the Web. This of course is practically useless on the printed page. One option for handling this is to follow every select HTML element with an unordered list that duplicates the content. Hide the unordered list in your main CSS file and reveal it with your print style sheet. This is a reasonable approach, except that it’s a big ol’ pain in the butt to deal with all the time. Let’s rely on jQuery to do the heavy lifting instead.

class="showcase"> href="http://css-tricks.com/making-selects-printable/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-018.jpg" width="480" height="300" alt="Css-018 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.9lessons.info/2009/12/twitter-like-login-with-jquery-and-css.html">Twitter-Like Log-In With jQuery and CSS />This post explains how to get the Twitter-like hide and show effect for logging in using jQuery and CSS.” Very simple: just five lines of JavaScript for the hide() and show() events and a little CSS.

class="showcase"> href="http://www.9lessons.info/2009/12/twitter-like-login-with-jquery-and-css.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-145.jpg" width="480" height="300" alt="Css-145 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html">Clean and Pure CSS Form Design />This tutorial illustrates how to design a pure CSS form without using HTML tables.

class="showcase"> href="http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-105.jpg" width="480" height="300" alt="Css-105 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://cssglobe.com/post/6295/cssg-collection-free-comment-styles">CSSG Collection: Free Comment Styles />This is the second CSSG collection from CSS Globe.

class="showcase"> href="http://cssglobe.com/post/6295/cssg-collection-free-comment-styles"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-034.jpg" width="480" height="300" alt="Css-034 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://24ways.org/2009/have-a-field-day-with-html5-forms">Have a Field Day with HTML5 Forms />Here is a look at how to style a beautiful HTML5 form using some advanced CSS and the latest CSS3 techniques. You will definitely want to re-style your forms after having read this article.

class="showcase"> href="http://24ways.org/2009/have-a-field-day-with-html5-forms"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-011.jpg" width="480" height="300" alt="Css-011 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://css-tricks.com/editable-invoice-v2/">Editable/Printable Invoice />Create editable and printable invoices using CSS and some JavaScript. This is version 2 from Vinh Pham.

class="showcase"> href="http://css-tricks.com/editable-invoice-v2/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-047.jpg" width="480" height="300" alt="Css-047 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.zurb.com/article/279/how-to-mask-passwords-like-the-iphone">How to Mask Passwords Like the iPhone />Many smartphones, including the iPhone, show the last character that you typed in a password field with a delay of a second or two. You can see that last character but not the entire password. But browsers don’t do what these mobile devices do. Here is a solution, with some fancy JavaScript and behind-the-scenes trickery.

class="showcase"> href="http://www.zurb.com/article/279/how-to-mask-passwords-like-the-iphone"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-074.jpg" width="480" height="300" alt="Css-074 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.zurb.com/article/195/make-web-forms-suck-less-with-labels">Make Web Forms Suck Less With Labels />We’ve been filling out Web forms for years, and we all gripe that they could be better. Even with generous padding, the fields are too small. But hardly anyone has improved the most under-rated interaction of them all: checkboxes and radio buttons.

class="showcase"> href="http://www.zurb.com/article/195/make-web-forms-suck-less-with-labels"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-technique-20.jpg" width="480" height="300" alt="Css-technique-20 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://lipidity.com/fancy-form/">FancyForm: JavaScript checkbox replacement />FancyForm is a powerful and flexible checkbox-replacement script that changes the appearance and function of HTML form elements. It is accessible and easy to use, and it degrades gracefully on older non-supported browsers.

class="showcase"> href="http://lipidity.com/fancy-form/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-103.jpg" width="480" height="300" alt="Css-103 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://widowmaker.kiev.ua/checkbox/">jQuery checkbox v.1.3.0 Beta 1 />A lightweight custom-styled checkbox implementation for jQuery 1.2.x and 1.3.x.

class="showcase"> href="http://widowmaker.kiev.ua/checkbox/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-104.jpg" width="480" height="300" alt="Css-104 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://www.askthecssguy.com/2009/08/disabled_labels_and_the_trilem.html">Disabled labels and the Trilemma plug-in />The form above on the left makes use of the disabled attribute, but the default browser settings for disabled inputs don’t contrast as much as one would like. To better distinguish at a glance between which inputs are disabled and enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.

class="showcase"> href="http://www.askthecssguy.com/2009/08/disabled_labels_and_the_trilem.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-127.jpg" width="480" height="300" alt="Css-127 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

href="http://friedcellcollective.net/outbreak/2009/10/04/fluid-searchbox/">Fluid Search Box />Creating a fluid search box when you have only a single element next to it is trivial. What you should do is wrap the input in an element and use padding to create space for the fixed element; then position the fixed element absolutely (or relatively) in the space created by the padding.

Last Click

href="http://stewdio.org/pong/">Browser Pong />A whole new pong game using three browser windows for the ball and racquets. Clever!

class="showcase"> href="http://stewdio.org/pong/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-180.jpg" width="480" height="300" alt="Css-180 in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)"/>

Related posts

You may want to look at similar CSS-related posts that we published last months:

(kk) (jb) (vf) (al)

/>

© Smashing Editorial for href="http://www.smashingmagazine.com">Smashing Magazine, 2010. | href="http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects/">Permalink | href="http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects/#comments">21 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects/&title=50%20Useful%20Coding%20Techniques%20(CSS%20Layouts,%20Visual%20Effects%20and%20Forms)">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'50%20Useful%20Coding%20Techniques%20(CSS%20Layouts,%20Visual%20Effects%20and%20Forms)'%20http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/css/">CSS, href="http://www.smashingmagazine.com/tag/jquery/">jquery

Core-Toons: Field Notes on the 2010 Chicago Auto Show

February 17, 2010 in Design by 8ify.com - Design

1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg
7.jpg
8.jpg
9.jpg

Artist: lunchbreath
More: View all cartoons

(more…)

Group Interview: Expert Advice For Students and Young Web Designers

February 17, 2010 in Design by Brandon Corbin

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Group Interview: Expert Advice For Students and Young Web Designers" border="0"/> /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=56"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=56" border="0" alt=" in Group Interview: Expert Advice For Students and Young Web Designers"/>   href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=63"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=63" border="0" alt=" in Group Interview: Expert Advice For Students and Young Web Designers"/>  href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=64"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=64" border="0" alt=" in Group Interview: Expert Advice For Students and Young Web Designers"/>

Our readers have requested that Smashing Magazine conduct an interview with industry leaders on issues that are relevant to students and those just starting off in their design career. With the help of our panel of 16 designers, we’ll dispense advice that should help new designers get their career off to a promising start. We’ve asked a few different questions to each of the designers; you’ll see all of their responses below. First, here is a list of the designers who participated.

You may be interested in the following related posts:

[By the way, did you know there is a brand new href="http://creatives.commindo-media.de/www/delivery/ck.php?oaparams=2__bannerid=1339__zoneid=0__cb=a279a7c66d__oadest=http%3A%2F%2Fshop.smashingmagazine.com%2Fsmashingbook-dispatcher.php%3Fd%3Dsmashing-wordpress%26utm_source%3DSmashing%252BMagazine%26utm_medium%3Deditorialbox2%26utm_campaign%3DSmashing%252BWordPress%2520-%2520BTW%2520Editorial%2520Box">Smashing Wordpress Book? Push WordPress past its limits!]

1. For students who aspire to work in design, what would you recommend they study?

class="alignnone size-full wp-image-24468" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/books.jpg" alt="Books in Group Interview: Expert Advice For Students and Young Web Designers" width="575" height="372"/>

David Leggett

Finding a good university-level design program that interests you will greatly increase your chance of finding awesome opportunities down the road, but it’s very beneficial to get experience before and outside of the education system. Find projects to help with, start your own, read up and apply as much as you can as you’re learning on the side. The extra experience will never hurt, and at the very least you’ll get to see if design is something you really enjoy.

Just to clarify, I have never taken any higher education courses in design, but I know the knowledge you get in that environment is valuable, as I’m sure others will suggest.

Wolfgang Bartelme

Well, I guess the most important thing is “practice, practice, practice.” To improve the quality of your work, you have to keep pushing yourself further and further. By the way, many great artists are self-taught. But I’m also convinced that a profound education will sharpen your skills and help you be able to judge why and how certain designs work. Personally, I studied “Information Design” at the University of Applied Science in Graz, focusing on all different aspects of design: print and advertising, exhibitions, Web design, usability, photography and film — thus giving students a wide range of knowledge, and making them more generalists than specialists.

2. How does a student determine whether design is for them or they should pursue another career?

class="alignnone size-full wp-image-24469" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/pencils.jpg" alt="Pencils in Group Interview: Expert Advice For Students and Young Web Designers" width="575" height="365"/>

Jacob Gube

This is a question you have to ask yourself. There aren’t any set rules or algorithms to determine whether you should be a designer. The important thing is to have passion for the work. Even mediocre designers will be able to sustain themselves, but they’ll have to work extra hard to compete with more talented and experienced designers. So, it all boils down to how much you want to be a designer and how much you’re willing to work at it and push forward. I won’t sugar-coat the current situation: the truth is that the industry is saturated, and there are a lot more designers than jobs, so you have to be sure that this is the profession you want to invest your time in.

Henry Jones

I think it’s all about passion. If you find yourself up late at night working on design projects just for the fun of it, then that’s a good sign that design is right for you. I think one of the worst situations in life is hating what you do. Loving what you do means you’ll probably be doing it and thinking about it even outside of class or when you’re not being paid to do it. You’ll constantly be honing your skills and staying on top of the latest technologies, which is very important for designers.

David Leggett

Everyone has a unique situation, and I don’t mean to suggest the following is always true: if you’re already a student at a university and have no outside experience, it may be difficult to really pursue a career in design. I say this only because personal friends of mine have struggled to find jobs in this current economic climate. Experience and something to show for your knowledge goes a long way.

Otherwise, be sure you truly enjoy whatever you decide to pursue. Many designers and artists I’ve met thoroughly enjoy their lifestyles, even when they’re struggling to find work. This is not to say that you should undervalue your work, but if you can enjoy your career when you’re not making money, then it’s probably a good match for you.

Wolfgang Bartelme

First and foremost, designing stuff has to be fun: you have to love what you do. If that’s not the case, look for something else. Secondly, you should, of course, have a decent measure of talent and imagination. Even though you will learn many skill in the course of your studies, without talent and imagination your work will be at best mediocre.

Chris Spooner

As with any career, if you’re passionate about the subject, you’re set to succeed. Careers in the design industry can seem exciting; after all, all you do is sit and color things in all day, right? I think this draws in a lot of people who maybe haven’t been particularly creative in the past and see the career as easy. This type of person might then find it difficult to be motivated to learn the required skills and to continue developing those skills throughout their career. That’s not to say that if you’ve weren’t a creative child, you can’t pursue a career in design. We all stumble across different interests throughout our lives, so as long as you feel you have a passion for design, go for it!

3. How do you balance education and work?

class="alignnone size-full wp-image-24470" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/balance.jpg" alt="Balance in Group Interview: Expert Advice For Students and Young Web Designers" width="575" height="431"/>

Zach Dunn

By my last estimate, I spend about 3 to 4 hours on client work for every 1 hour of academic work. I generally learn specialized skills more from client work than from academics. It’s easy to get caught up in client work and blogging. The hard part is making sure you don’t lose touch with the world around you. Interacting with clients and blog community members is certainly social, but you need to take a break and interact with “regular college students” from time to time. I consider it like mental detox.

I’m convinced you must put in extra time on personal projects to truly become competent in the Web design industry. Going through the motions during class and homework hours only leaves you behind. The Internet moves faster than any standard academic schedule. Keeping current and practiced is up to you.

Jacob Cass

Finding the right balance between family, friends, work and all of life’s other misdemeanors will always be a challenge, no matter what your career. You must set priorities and goals relative to what you want to achieve and get out of life. Although I have now finished studying (officially), I could say that my biggest challenge then was finding enough time to give high-quality attention to all projects, whether they were educational, personal or for paying customers. At times, I found this nearly impossible, and to be honest a lot of my university and personal work suffered from my commitments to paying customers. In saying this, I guess a lot of it comes down to having priorities, goals and good time management.

4. How did work outside your studies prepare you for your career?

class="alignnone size-full wp-image-24471" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/clock.jpg" alt="Clock in Group Interview: Expert Advice For Students and Young Web Designers" width="575" height="339"/>

Zach Dunn

Almost all of our “career” success so far has been a direct result of work done outside of studies. College is a great incubator for a number of things other than academics. I value school for reasons that are different than those of the average person. College has helped me socially. Sam recently wrote an article that does a great job of explaining more about our college philosophy in relation to Web design, titled href="http://buildinternet.com/2009/12/the-role-of-college-for-web-designers/">The Role of College for Web Designers.

Certain career paths cannot start before graduation date. Lawyers, for example, can’t have hobby clients while putting themselves through school: it’s all or nothing. Web design isn’t limited by credentials for entry. Web design is largely portfolio-based. When’s the last time a client was more interested in your GPA than in your previous client work? In this industry, we have the luxury of starting early. I like to take advantage of that.

I don’t know what the future holds for Sam and me, but I’m confident that at least some of the projects we start today will have some role in it.

Jacob Cass

To be honest, I learned more in six months of blogging and following other people’s blogs, than studying for three full years at university. Doing extra work outside of the education system is vital.

5. What should students and new designers focus on outside of their course work to advance in their careers?

class="alignnone size-full wp-image-24472" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/laptop.jpg" alt="Laptop in Group Interview: Expert Advice For Students and Young Web Designers" width="575" height="431"/>

Brian Hoff

Students should definitely consider taking many business classes, especially if they want to go freelance or start their own studio one day. I’ve always been passionate enough about design to teach myself, but I wish I took more business and marketing classes. Also, I would recommend collecting designs. Having resources of inspiration and also an idea of good design is essential. I take photos of many types, colors, designs, etc. as I pass them by, and I use LittleSnapper to organize online media. Being a graphic designer is non-stop learning. Here’s an article I wrote that covers more: href="http://www.thedesigncubicle.com/2008/11/16-tips-to-improve-as-a-graphic-designer/">16 Tips to Improve as a Graphic Designer.

Chris Coyier

No individual program is going to cover every single angle of design, especially the most modern technological stuff. Because you are already reading Smashing Magazine, you probably already have a good grasp of what’s going on in modern design. Reading and following tutorials and doing your own experimental projects on the side will definitely help you excel. That being said, your whole life doesn’t have to revolve around career enhancement. A well-rounded life will serve you well. Perhaps some of your other hobbies could benefit from your design talent. I have a friend who used to build coffee tables and decorate the surfaces with patterns of partially burnt matches. If he were looking for a design job, I would absolutely tell him to put that stuff onto an online portfolio.

Elliot Jay Stocks

Build your portfolio. Do free websites for your mates’ bands or your Mum’s friend’s wool shop. It might not be glamorous work, but doing as much as you can builds up your portfolio, and you’ll learn loads on every project. When I left university and got my first job, my portfolio was made up almost entirely of stuff I’d done on an extracurricular basis, not really the course work itself. But also don’t forget that it’s about quality, not quantity, and a good portfolio strikes a balance between variety (showing that you’re versatile) and continuity (showing that you have your own identity as a designer).

Walter Apai

It’s important to expand your knowledge to any areas that are related to design. Most design courses concentrate on the basics or on how to use the various pieces of software that are available. These are just basic tools for new designers, but they won’t make you a great designer.

Learn about art, layout and composition, and try to read at least one new book on design every month, or even one per week. Subscribe to design blogs such as Smashing Magazine and Webdesigner Depot, and never stop learning. Keep updating your knowledge whenever possible by attending conferences, reading books and magazines and becoming involved in the local artistic community. Try to become a well-rounded designer, not just an operator of Photoshop or another design software tool.

George Lois, the real-life inspiration for Don Draper in Mad Men, said it best:

“The computer has played a role in destroying creativity with Photoshop. Everybody thinks they’re a designer.”

While he may be generalizing a bit, I believe what is meant is that you can’t be a proper designer without understanding the fundamentals of art and design.

Jacob Gube

When I was a college student, what truly helped me in my career was proactively attempting to get real-world experience by doing freelance work, part time. The purpose was two-fold: to see what it was like to work with the kind of people who would become your employers once you were out of school, and to apply what you learned in class, which reinforces your education and helps you understand it hands on. You might even end up with a few portfolio pieces to show employers once you’re on the job hunt — and some money to buy those expensive classroom textbooks.

6. What one thing do you wish you knew before starting your career?

class="alignnone size-full wp-image-24473" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/bulb.jpg" alt="Bulb in Group Interview: Expert Advice For Students and Young Web Designers" width="400" height="533"/>

Darren Hoyt

Being in touch with my limitations and skills.

The first few years of designing for the Web (1998 to 2001), I knew being cross-trained was important, so I built my skills in design and front-end code (HTML, CSS) equally. But then I made the mistake of thinking that, if I was to become a more complete designer and developer, I should learn Perl, Flash and Unix commands, too. I sucked at all of those things and kept sucking until they asked me to stop.

Deep down, I knew I wasn’t wired for any of that stuff. And more importantly, I wasn’t actually interested in it, not compared to design anyway. Employers do value someone who is cross-trained, but not if the results are mediocre.

David Leggett

Pleasing everyone is nearly impossible. Be friendly to those who enjoy your work and friendlier to those who attack it.

Jacob Gube

I wished I had realized that quality is more important than quantity. When I started out, I focused on low-cost, high-quantity jobs, which resulted in late hours, not enough pay and nothing really that I could be proud to put in my portfolio. I wanted to work with as many people and on as many projects as I could to jumpstart my experience and resume. But the Project Triangle principle applies here: I did it fast and cheap, and so the outcomes weren’t good. If I had slowed down and focused on getting gigs that were interesting and better quality, I would have progressed more fruitfully.

Paul Boag

That constraints are good. As a Web design student, I was given endless freedom to design how I wanted and what I wanted. However, the real world is not like that. When I joined IBM out of university, my first job was to design 8-bit icons. Very restrictive indeed. When I started on the Web, it allowed only gray backgrounds and text that was justified left, right or centred. The first time I worked on a multimedia CD, it was capable of running video at only 160 x 120 pixels.

At the time, this frustrated me massively. However, in hindsight it was enormously beneficial. It pushed me creatively, and it has also given me a lot more patience with the peculiarities of browsers such as IE6.

7. What job search advice do you have for recent graduates?

class="alignnone size-full wp-image-24474" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/newspaper.jpg" alt="Newspaper in Group Interview: Expert Advice For Students and Young Web Designers" width="575" height="366"/>

Soh Tanaka

First and foremost, get your portfolio up, and make sure it represents your best work. If you lack work samples, start creating projects for yourself (websites for your hobbies, your family or for friends). As a new grad, you need to prove that you are serious and willing; the best way to get that message across is through a robust portfolio.

Secondly, hit the job boards, and send your resumes and cover letters to companies you would like to work for. Doing research and tailoring each cover letter and resume to the company is important. Stick to the job requirements, and follow directions carefully. These employers receive many applications daily, and nothing is worse than seeing a bland and generic introduction to who you are and what you offer. Stand out from the rest.

Thirdly, keep your networks open, and make yourself known! Networking is key.

Darren Hoyt

Obviously, scour the online job boards ( href="http://www.authenticjobs.com/">Authentic Jobs, href="http://jobs.37signals.com/jobs">37 Signals, href="http://www.coroflot.com/public/jobs_browse.asp">Coroflot), but also follow the blogs and Twitter feeds of Web designers who you respect. Studying their methods will give you a clearer picture of the sort of designer you want to be. If you need advice, trying dropping them an email. But remember that not everyone has the free time to answer.

Truthfully, most designers I know didn’t get their job by applying cold to an agency they knew nothing about. Instead, they slowly made relationships with like-minded people until they began to see opportunities and get offers.

But I would stress, don’t “network” compulsively. It can look obvious and obnoxious and make you look needy. Instead, make connections with people you actually think you share interests with, people you could imagine being colleagues and friends, rather than business contacts. The rewards are much greater.

Chris Coyier

Nobody will hire you because you say you have skills. You’ll have to demonstrate your skills, so either work on your current personal website or start building one. Use the website as a portfolio and resume to send to companies. Send it both to companies that say they are hiring and to ones that don’t. Just because a Web company doesn’t hang a “Now hiring” sign on it door doesn’t mean it couldn’t use someone. Pitch them. A little advice for that portfolio: three awesome designs are better than three awesome and six mediocre designs packed in the same space. Showcase only your finest work, what you’re capable of. Quality over quantity.

8. What should new designers consider when deciding between working for an agency and freelancing?

class="alignnone size-full wp-image-24475" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/desk.jpg" alt="Desk in Group Interview: Expert Advice For Students and Young Web Designers" width="575" height="431"/>

Elliot Jay Stocks

Jumping straight into freelancing once you’ve completed your education is really tempting. I very nearly did that myself. But I’m glad I didn’t. You learn valuable lessons working for someone else first, and it’s actually much easier because you don’t have to worry about getting clients for yourself. So, I would recommend working for someone else before going it alone. It’s a great opportunity to build up your portfolio without dealing with any of the boring stuff that goes with freelancing or running your own business. I wrote a post about this a while ago: href="http://elliotjaystocks.com/blog/build-your-profile-to-get-more-freelance-work/">Build Your Profile to Get More Freelance Work.

Soh Tanaka

As a new designer, being at an agency or on a team is great for learning and feeling out the industry. Though you may not be able to set your own hours or work from home, a steady pay check and health insurance are both welcome during a tough economy.

When choosing the freelance route, have some experience under your belt, and be ready to be on your own. The key factor is knowing what your skills are and having discipline. Freelancing has its ups and downs, and you must be self-motivated and determined to overcome the challenges. Working from home and setting your own hours is ideal for most, but young designers should consider the requirements and reality before diving in head first. It may be wise to freelance part time until you build enough confidence and experience and know enough about your strengths and weaknesses to be able to make the right decisions when you strike out on your own.

Chris Spooner

It’s always worth learning the pros and cons of working for an agency and freelancing, because each has its perks! Here are a few that spring to mind.

Agency pros:

  • Working for an agency after your studies can be great for gaining experience in how the industry works and how projects are managed from start to finish.
  • At an agency, you work with like-minded colleagues, who you can learn from and develop with.
  • Large agencies often attract big corporations and established brands.
  • A full-time job guarantees you a monthly wage and set working hours.

Agency cons:

  • You might get stuck working on projects that you don’t find interesting or might have to work on something you don’t agree with.
  • Agencies sometimes have strict policies, rules and guidelines. For instance, browsing the Web, checking Facebook or tweeting might get you a slap on the wrist.
  • Agencies work during the usual 9:00 to 5:00 business hours, so you will have to as well.

Freelance pros:

  • As a freelancer, you have complete control of the projects you take on and the type of work you do.
  • You’re not tied to any particular working hours, so taking a day off is no problem.
  • If you can generate a consistent flow of projects, it can be much easier to earn a decent wage than you would by working at an agency.
  • You can work in your pyjamas!

Freelance cons:

  • You are personally responsible for your own income, a circumstance that can put you at risk.
  • Freelancers need to be able to manage their time in order to avoid distractions.

I would recommend that new designers first seek out employment, which will give you professional experience with and knowledge of design. Then you’ll be able to decide whether you fit better at an agency or working for yourself.

One of the main things to consider before starting out as a freelancer is whether you’ve generated enough industry experience to be able not only to create designs but to source work, manage multiple projects and communicate with clients. These other factors definitely come into play when freelancing, so having at least some knowledge of these processes before diving in is important.

9. How can students and young designers make themselves more valuable to potential employers?

class="alignnone size-full wp-image-24477" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/hire.jpg" alt="Hire in Group Interview: Expert Advice For Students and Young Web Designers" width="575" height="431"/>

Darren Hoyt

Start building a Web presence as early as possible, even before seeking a junior position. Buy a personal domain and set up a simple portfolio, with an “About” page that gives a snapshot of your personality and talents. If haven’t done client work, do pro bono projects for friends until you have work samples to show. Displaying them publicly shows that you have pride in your work.

Be concise. Employers and human resource people are like anyone else: they are busy and have short attention spans. Don’t make them dig to find out who you are. Give your portfolio website just enough text, images and examples to paint an accurate picture. If you can’t give your own content a crisp and concise design, why should employers trust you to do that for clients?

Also, don’t exaggerate the facts when presenting yourself. Our lives are way too public these days to bother. More important than bragging or dazzling anyone with half-truths is finding a team whose needs and interests align with your own. If you get hired under false pretences, you will have wasted everyone’s time. Even experienced designers with great portfolios aren’t the right fit, disposition-wise, for every agency they apply to.

Wolfgang Bartelme

As I mentioned before, I’m a huge fan of the interdisciplinary approach. At most companies, you are unlikely to work exclusively in a single field. In fact, when you do Web design, being able to do some decent-looking icons or cut a simple screencast or promo video is good. This becomes even more important when you are self-employed. Moreover, this variety makes and keeps work interesting… at least that’s the case for me.

Chris Coyier

Just being a nice person and easy to work with is pretty huge. I think employers look for that during the interview process, at least as best they can in that short time. Someone incredibly stiff or stand-offish is unlikely to win the job over someone who is happy and casual. Design studios, in my experience, are pretty friendly and casual. Other random advice: become really good at one thing. You’ll be a lot more valuable as the guy or girl who knows that one thing really well than as a jack of all trades. Being well-rounded is awesome, but having a spike of talent in one particular area will serve you well.

Walter Apai

Social skills are necessary when dealing with potential clients. Designers should know what their clients do and provide them with the best possible service.

I’d encourage all designers to make themselves a one-stop shop for all of their clients’ design needs. That would include Web design, copywriting, printing, etc. If you’re not an expert in these fields, team up with a few peers so that you can help each other as needed.

Designers should focus on making the entire process easy for clients, but involve clients in some design decisions as well, so that they feel that they are part of the project.

I suggest asking the clients a lot of questions and truly aiming to get to the core of their business and what would work for them. The more we understand our clients and their projects, the more successful the projects will be and the better our chances of getting them as repeat clients.

A designer is a human being, too. Become a well-versed designer, understand your medium, get educated and become a well-rounded person who always aims high.

Set high standards for yourself and your work. The right clients will gravitate to someone who holds themselves to high standards.

10. What should new freelancers do during the first few months of their business to succeed?

class="alignnone size-full wp-image-24478" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/start.jpg" alt="Start in Group Interview: Expert Advice For Students and Young Web Designers" width="575" height="383"/>

Paul Andrew

You have to have a personal business plan. I really wish I had a plan when I started out; I really do. I jumped right in, feet first, and landed on my head! And it hurt. Partly, I think it was those first few months of hardship that even now propel me forward. That period not only affected my finances and confidence, it damaged my reputation. That is very hard to regain. I think over the years I have regained it, but it was hard work, and it all could have been avoided with a bit more planning and simply by writing a personal business strategy.

It’s not enough to have a strategy planned out in your head; it has to be on paper. You need to be able to read it and see it to live by it. Every so often you should read it again, just to realign yourself. And then read it again, and only tweak it if you really have to.

Your personal business plan could do the following:

  • Describe your business objectives, business direction and where you hope to be in x number of months.
  • List all potential pitfalls and how to avoid them.
  • Set honest and realistic targets, and allow for a little flexibility.
  • As your business grows, track its efforts and compare them to your business objectives.
  • Set up a financial framework to measure how much your business is making or not making.
  • Describe how you are going to attract new business to meet your financial targets.

Everyone and every business is different. Write down what is correct and achievable for you, and be very honest: it is your business after all.

Stick to the plan!

Brian Hoff

Personally, I worked for nearly three years while preparing to go freelance. I would work my 9:00 to 5:00 job, come home, eat dinner and then market myself (blog), search for new business, advertize and work from around 7:00 pm until 12:00 am. Having a good feel for running your own business is important before you go in head first.

Saving money is also important. Every business, no matter what it is, goes through periods of drought. Having money to back you up for a little while is a must. Freelancing is not for everyone. Part-time freelancing while maintaining a steady-paying job will help you get a feel for things.

Chris Spooner

I think the most important time in freelancing isn’t particularly the first few months, but more so the time leading up to going freelance. As a freelancer, you’ll need a good flow of clients to generate income; you’ll have to get busy promoting and building a name for yourself, so that when you’re ready to leave your job, you’ll be all set to simply flick the switch from employment to self-employment.

During this build-up time, you’ll want to design all of your personal branding, especially your website, to showcase what you can do. Become an active member of the design community by blogging, guest writing and networking via Twitter (or you might want to network offline or locally); and begin taking on projects that you can work on during the nights. It can be hard work managing both your full-time job and one or two freelance projects simultaneously, but when the number of inquiries reaches an optimal level, you can quickly switch from your job to taking on more freelance work — rather than making the decision one day, falling flat on your face and then having to eat beans on toast until you’ve built a profile.

Jon Phillips

I believe the first few months are crucial, especially because it usually means quitting the day job and taking the plunge into the freelancing world. It can be scary at first. Many things need to be done in the first few months, but of course nothing is irreparable. Should you make a bad decision, you can always fix things as you go along. I highly recommend getting a portfolio website up; even if you don’t have a lot to show, you need a place to showcase what you have. Then get a good invoicing system such as href="http://www.freshbooks.com/">Freshbooks or href="http://www.billingsapp.com/">Billings 3, network with other freelancers as much as possible via Twitter, Facebook, design forums and blogs and maybe start a blog of your own.

Elliot Jay Stocks

Work for someone else! For the first few months to be a success, you need to have work lined up, so having that in place before you make the jump is important. I’d also recommend getting a good accountant as soon as you can and some sort of system for keeping track of your money, such as href="http://www.xero.com/">Xero. Also, make sure you have a website set up long before you decide to go solo.

11. Aside from design and technical skills, what aspects of running a business should new freelancers focus on?

class="alignnone size-full wp-image-24494" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/graph.jpg" alt="Graph in Group Interview: Expert Advice For Students and Young Web Designers" width="575" height="325"/>

Paul Andrew

The advice I have been given over the years about freelancing as a business has varied. Some have told me that putting business ahead of design guarantees profit and keeps your head above water. On the other hand, I have also been told not to treat design as a business, to work on what your passion is, and the business side will take care of itself.

These are both great philosophies, but they don’t really work in the real world. The answer is to have a healthy balance between the two. Both need to be kept apart while at the same time working off each other. Think of it as the positive and negative charge of a battery. The battery only works when both charges are connected. (You can decide which is the positive and negative side in relation to business and design).

When meeting potential clients, first impressions really do count, and you really need to present yourself with professionalism. It does not matter how strong your portfolio is or who you are — it is about how professional and business-like you appear to them. You are negotiating a business transaction after all.

Yes, this means breaking away from the designer stereotype of wearing t-shirts and jeans and instead being clean shaven, putting on a business suit and remembering the manners your mother taught you. Carry business cards with you, maybe even a briefcase; do what you have to do to convince the client you mean business.

Some monkeys you should not carry on your back by yourself, and they are the finance side of your business. Let’s be honest: who understands tax and monetary law. I certainly don’t and don’t care to either. Find yourself an accountant. They don’t cost that much — maybe a week’s wage out of the year, and when you weigh the cost of doing your taxes incorrectly and the penalties that might follow, an accountant is a worthwhile investment.

It would be nice if everyone you worked with was honest. Protecting the integrity of your work, yourself and your business should be next on your to-do list. The reality is that at some point, someone will try to shortchange you or, worse, wiggle out of a payment. That is why you need a watertight contract. Every country has its own laws regarding design; make sure you know and understand yours.

Hiring a lawyer to write a standard contract for your small business would be expensive. A way around this would be to write your own, as I did. I asked a few designers for advice and researched the law online and came up with an outline for my own. I then took it to a lawyer and asked them to sanity-check it. Not as expensive as asking them to write it — still, it wasn’t cheap, but it was worth it.

So, to sum up, if you’re dressed smart, your business finances are in safe hands and you are legally protected, you are now free to do what you were trained to do and give your creativity free reign, letting your passion fuel your design. It is a long road to take, but it is necessary.

Brian Hoff

Marketing without a doubt. I receive many emails asking how I get so much freelance business or how do I find clients. My response: You have to work hard for it. Clients won’t come to you. Tell everyone what you do, start a blog, attend networking events and conferences, contact clients directly. Running your own business is hard work. There is no such thing as a 40-hour work week when you run your own business. I work seven days a week. I’ve even gone so far as to strike up new work by chatting with someone at the bar (not recommended). You have to have personality and drive to freelance successfully.

Jon Phillips

Being a freelancer means having to wear many different hats (a ton of different hats!). Spending some time on government websites and meeting with an accountant to learn more about tax laws goes a very long way. Of course, many designers, being creative types, tend to forget that it’s a business (I often forget). You need to spend time on accounting but also on networking and marketing your business. In the first few months results will be small, but your efforts will pay off in the long run. You need to be as good with numbers as you are with Photoshop.

12. What are some of the best ways for new designers to find clients?

class="alignnone size-full wp-image-24495" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/people.jpg" alt="People in Group Interview: Expert Advice For Students and Young Web Designers" width="575" height="431"/>

Henry Jones

I can only speak from experience here. Shortly before I went full-time freelancing, my portfolio was listed on several popular CSS galleries. From that point on, clients found me. I was very surprised to see how many people used the galleries to find designers. Once I had a few clients and projects under my belt, I started to get a lot of referrals. So, work hard on creating a great portfolio, and use the design galleries. This is probably the best and easiest way to get the most exposure. Plenty of design-specific job boards are available, such as href="http://www.authenticjobs.com/">AuthenticJobs, where you can search for projects that are a good fit for you.

Jon Phillips

I think websites such as Twitter are a great place to get started! In fact, I found a lot of my own clients via Twitter. Design forums are also a great place to network, make friends and find work. New freelancers may also be tempted to try design contests and crowd-sourcing, but I personally think they devalue the industry, so I wouldn’t advise doing that. Even if you don’t have much to show in your portfolio, there are others ways to get gigs. There are always job boards, such as href="http://jobs.smashingmagazine.com/">the one on Smashing Magazine and href="http://jobs.freelanceswitch.com/">the one on FreelanceSwitch, which are great for finding clients. You might even consider buying banner ads on design-related websites. But your marketing budget may not allow this at first, so networking websites, job boards and forums would be the places to hang out.

Jacob Cass

Get your name out there. Start blogging. Showcase your work. Look on job boards. Ask friends, family, local charities. Read books and blog posts: the information is out there. Your job is to find it!

Walter Apai

Networking is one of the best ways but often one of the most overlooked ones. I suggest that new designers speak to everyone they know and use every chance they have to talk about their work and what they do for a living.

I found myself just mentioning Web design to someone the other day (not even looking for more work), and immediately they thought of someone they knew who was looking for a website redesign. Opportunities are everywhere; just seize them.

I should also mention that one should not rely on networking alone or any other single “system.” I’d encourage new designers to take a multi-faceted approach to their new career.

There are unlimited ways to get new clients. Posting on bulletin boards, both online and offline, and placing small ads in the newspaper or local magazines are just a few of the media you can use. I also think that starting local is best, and getting experience working on projects with people who you can meet in person in your own city. This is a good starting point to gain more “field” experience.

Paul Boag

It has to start with friends and family. This will help build your initial portfolio. From there, consider doing some discounted work for a local charity to gain experience in working for real clients. After that, the contacts you have made through networking will start to pay off, and hopefully you will get some work through them. Finally and most importantly, make it known that you want work. It is surprising how many freelance websites I visit that don’t state whether they currently accept work or not.

That said, I would suggest that if you are straight out of university, you should probably work for a small agency before jumping into the freelance world. Being a freelancer requires a lot of business skills that they don’t teach you in university.

13. What networking tips do you have for young designers?

Henry Jones

One option is to attend design conferences, but for young designers this can be expensive. So, I would recommend getting involved in the design community. Start reading and leaving comments on popular design blogs. Create a Twitter account, and post useful stuff. Depending on how much time you have, you could even start your own design-related blog. Blogging has been huge for me, and I believe it’s the best way to get your name out there and meet other designers. No matter what route you take, just remember to be helpful and genuine, and you will build lasting relationships.

Paul Andrew

You are young — you cannot change that fact — and you want to be successful. In any business, especially ours, you need friends, you need contacts and most importantly you need to build professional relationships. Bear in mind, though, that networking is not something you can rush; it takes time and patience.

The best time to start networking is right now. Even if you are still in high school or haven’t yet graduated college, reach out now. It is never too early to get your name out there. Your name is your most powerful and memorable asset. Work will follow, I promise.

The most important relationships for any designer are the ones they have built with fellow students. No matter what happens, they are your primary network. You can help each other by sharing knowledge and design contacts and by learning from each other.

The best way to network beyond your inner circle is to get in touch with seasoned designers. For the most part, designers are pretty selfless and love to share and help when they can. With that in mind, put together a list of designers on whom you want to model yourself and someone with a strong body of work. Send them emails, accompanied by your portfolio, stating that you are a young designer starting out and seeking a little advice. Ask them how they got started, and ask for any tips they might be willing to share? Seasoned designers need to build their networks, too, and will welcome your introduction and questions.

When I started out as a designer, I sent a letter (with my portfolio and business card) to a local design agency — certainly not the biggest one or the most prestigious — and introduced myself as a young designer who was eager to learn. I asked if I could come in for a day or two to learn a bit about the design business and gain some work experience. Thankfully, they consented, and I spent three days asking questions, picking up business cards and meeting clients. That was over ten years ago, and I still rely on those contacts now. And to this day, that has been my most productive and successful period of networking.

Not every design agency will be as open as that one was, but I would try. There is no harm in asking.

One thing to remember about networking is that success is determined not by your number of contacts but by the quality of those contacts. Even if the best designer in the world sent you a courtesy email reply, it does not mean that you are in their network or that they are in yours. A quality network contact is someone who gives you a personal reply and genuinely tries to help you. These are the contacts you must maintain. This is your network.

Finally, please don’t think of youth as an impediment. Think of it as a license to ask questions, to learn and expand your personal network.

Paul Boag

Step away from the computer. Meeting people online is great, but nothing beats meeting them face to face. Attend conferences and meet-ups and get to know people. Then follow up on those relationships via Twitter and Facebook.

Also, don’t have an agenda. Or, if you have one, be honest and open about it. Too many people network solely to win work or become a “Web celebrity.” Instead, network because you want to meet like-minded people who will inspire and excite you about your work.

Soh Tanaka

Attend industry events, seminars and any kind of social gatherings. Don’t be shy; get to know the people around you. Be interested and willing to learn from them, and at the right time let them know who you are and what you do. Carry business cards with you at all times, and have your elevator speech ready. You never know when you will run into a potential client or employer. Networking is all about expanding your opportunities, and as a designer this skill is critical.

Related posts

You may be interested in the following related post:

(al)

/>

© stevensnell for href="http://www.smashingmagazine.com">Smashing Magazine, 2010. | href="http://www.smashingmagazine.com/2010/02/17/group-interview-advice-for-students-and-new-designers/">Permalink | href="http://www.smashingmagazine.com/2010/02/17/group-interview-advice-for-students-and-new-designers/#comments">21 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/02/17/group-interview-advice-for-students-and-new-designers/&title=Group%20Interview:%20Expert%20Advice%20For%20Students%20and%20Young%20Web%20Designers">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/02/17/group-interview-advice-for-students-and-new-designers/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/02/17/group-interview-advice-for-students-and-new-designers/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Group%20Interview:%20Expert%20Advice%20For%20Students%20and%20Young%20Web%20Designers'%20http://www.smashingmagazine.com/2010/02/17/group-interview-advice-for-students-and-new-designers/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/02/17/group-interview-advice-for-students-and-new-designers/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/clients/">clients, href="http://www.smashingmagazine.com/tag/designers/">designers, href="http://www.smashingmagazine.com/tag/intrerviews/">intrerviews

Quick Tip: Fully Understanding $.grep()

February 16, 2010 in Design by 8ify.com - Design

The jQuery method $.grep() is one of those methods that isn’t used as often as it should be. This is mostly because, until you understand exactly what it does, it can be a bit confusing. Hopefully, this video quick tip will explain when and why you would use it.

At its core, $.grep is a simple little method that will filter through an array and sift out any items that don’t pass a particular control. For example, if we have an array of the numbers 1-10, and want to filter out any values that are below 5, we can do:

var nums = '1,2,3,4,5,6,7,8,9,10'.split(','); nums = $.grep(nums, function(num, index) { // num = the current value for the item in the array // index = the index of the item in the array return num > 5; // returns a boolean
}); console.log(nums) // 6,7,8,9,10

View live demo on JSBin.

Or let’s say that you have an array of numbers and strings, and you want to sift out all of the strings, leaving just an array of numbers. One way that we can accomplish this task is with $.grep.

var arr = '1,2,3,4,five,six,seven,8,9,ten'.split(','); arr = $.grep(arr, function(item, index) { // simply find if the current item, when passed to the isNaN, // returns true or false. If false, get rid of it! return !isNaN(item);
}); console.log(arr); // 1,2,3,4,8,9

View live demo on JSBin.

For further training, be sure to refer to the jQuery API.



Design in the Face of Disaster

February 16, 2010 in Design by 8ify.com - Design

On February 23rd, the Cooper-Hewitt National Design Museum will host Design in the Face of Disaster, a discussion on how design can aid Haiti in both its rebuilding efforts and preparation for the future. The conversation will be led by Chris Hacker, the Chief Design Officer for Johnson & Johnson.

Panelists include Pierre Fouche, a Haitian earthquake engineer, Anna Muoio, Principal, Design Continuum, Social Innovation, Jean-Cedric Meeus, Emergency Coordinator of UNICEF Supply Division and Gerald Martone, Humanitarian Affairs Director for the International Rescue Committee.

The event is free, but be sure to register online first.

Design in the Face of Disaster
6:30-8:30 pm
February 23, 2010
New York City

(more…)

Smashing Network Update: Add Widget To Your Site and New Members

February 16, 2010 in Design by Brandon Corbin

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Smashing Network Update: Add Widget To Your Site and New Members" border="0"/> /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=56"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=56" border="0" alt=" in Smashing Network Update: Add Widget To Your Site and New Members"/>   href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=63"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=63" border="0" alt=" in Smashing Network Update: Add Widget To Your Site and New Members"/>  href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=64"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=64" border="0" alt=" in Smashing Network Update: Add Widget To Your Site and New Members"/>

In the last few months, you may have noticed some major changes happening on Smashing Magazine’s front page. Since November 2009, when we launched the href="http://www.smashingmagazine.com/the-smashing-network/">Smashing Network, which features manually selected articles from the best design blogs, we’ve been working hard to improve the usability of our website and make the navigation easier to use and the content easier to read.

Indeed, we have been continually looking for a nice clean design that would allow Smashing Magazine’s brand to dominate the website, while boosting the visibility and exposure of our network members. We have considered various solutions, and one seemed to be just perfect. The result (we hope) is a cleaner separation of the magazine’s posts and network’s posts, by way of tabbed navigation at the top of the page.

[Offtopic: by the way, have you already visited href="http://creatives.commindo-media.de/www/delivery/ck.php?oaparams=2__bannerid=1247__zoneid=0__cb=752b87925c__oadest=http%3A%2F%2Fwww.facebook.com%2Fsmashmag">Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]

Magazine And Network Tabs

So, what exactly does this mean? It’s very simple. At the top of the page, you’ll notice two tabs, one for Smashing Magazine’s posts and one for the Smashing Network’s posts. You can now easily switch between the magazine and network’s content without using the scroll bar. You can also visit the href="http://www.smashingmagazine.com/network-posts">network’s content page, which wasn’t possible before, and use Smashing Magazine’s good old front page, which now features only Smashing Magazine’s posts. Also, the tabbed solution is the first step towards something huge that we have planned for 2010.

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/smashing-tabs.jpg" width="517" height="272" alt="Smashing-tabs in Smashing Network Update: Add Widget To Your Site and New Members"/> /> Smashing tabs in use. You can now easily switch between the magazine and network’s content on every single page of Smashing Magazine.

This change obviously means that our network members would get much less traffic from our website to theirs. So, to compensate, we have decided to add the tabbed navigation not only to our front page (as was done earlier) but to all pages on Smashing Magazine. This is why you see the tabbed navigation at the top of this page now. Aside from that, we have come up with a couple of new exciting features that will roll out this year, one of which is the Smashing Network widget.

The Smashing Network Widget

We are pleased to release a simple and customizable widget that displays the latest posts from the Smashing Network. It’s up to you to decide how to style our updates on your website. You can use your own CSS to customize the look of the widget as you wish. The widget is available right now!

href="http://www.smashingmagazine.com/?page_id=25411"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/network-light.gif" width="419" height="379" alt="Network-light in Smashing Network Update: Add Widget To Your Site and New Members"/>

To embed the widget on your website, simply include a JavaScript code. You will find the details, including implementation examples, on our page “ href="http://www.smashingmagazine.com/how-to-add-a-smashing-network-widget-to-your-site/">How to Add the Smashing Network Widget to Your Site“.

We hope many designers and developers will integrate the widget on their websites. The main goal of the widget is to promote high-quality design-related content on the Web. We are confident that the design community will benefit significantly from the mutual support of the network websites, particularly in terms of traffic, so it would be great if you integrated it on your website, too.

Welcome New Members!

We are also very happy to announce that we have accepted new members into the Smashing Network. All applicants were carefully considered and tested for the relevance and quality of their content. In this second round, we have accepted the following websites.

CSS-Tricks

href="http://www.css-tricks.com/"> class="alignnone size-full wp-image-13055" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/css-tricks.jpg" alt="Css-tricks in Smashing Network Update: Add Widget To Your Site and New Members" width="450" height="285"/>

CSS-Tricks is a Web design community curated by CSS ninja Chris Coyier. The website offers a variety of articles, tips, tutorials and screencasts on front-end development, mostly CSS and jQuery. The website also features useful snippets and freebies and has a growing community forum.

Design Informer

href="http://designinformer.com/"> class="alignnone size-full wp-image-13055" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/designinformer.jpg" alt="Designinformer in Smashing Network Update: Add Widget To Your Site and New Members" width="450" height="285"/>

Design Informer is a fresh new blog that brings the latest in Web and graphic design. It has Photoshop tutorials, freebies, resources, inspiration and much more. It is one of the fastest-growing design blogs, and it strives to always deliver high-quality content to readers.

Cats Who Code

href="http://www.catswhocode.com"> class="alignnone size-full wp-image-13055" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/catswhocode-main.jpg" alt="Catswhocode-main in Smashing Network Update: Add Widget To Your Site and New Members" width="450" height="285"/>

Created by Jean-Baptiste Jung in June 2008, Cats Who Code provides practical Web development tutorials and resources for both beginners and advanced developers. With a focus on such topics as WordPress, jQuery and CSS, Cats Who Code helps you build better websites. Meow!

UsabilityPost

href="http://www.usabilitypost.com"> class="alignnone size-full wp-image-13055" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/usability-post.jpg" alt="Usability-post in Smashing Network Update: Add Widget To Your Site and New Members" width="452" height="287"/>

UsabilityPost is a blog about design. Design isn’t about what something looks like but about how it works. Making something usable means understanding what people expect from your product and thinking of ways to make their use of it simple and enjoyable. The aim of UsabilityPost is to provide relevant resources, tips and insights related to good design to help you make great products. UsabilityPost was founded by Dmitry Fadeyev in 2008.

Web Designer Notebook

href="http://webdesignernotebook.com"> class="alignnone size-full wp-image-13055" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/webdes.jpg" alt="Webdes in Smashing Network Update: Add Widget To Your Site and New Members" width="452" height="287"/>

This blog’s purpose is to shed light on CSS and front-end development for those who are starting out, while also going deeper into more complex areas such as CSS3. Created by CSS master Inayaili de León.

Line25

href="http://www.line25.com"> class="alignnone size-full wp-image-13055" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/line25.jpg" alt="Line25 in Smashing Network Update: Add Widget To Your Site and New Members" width="452" height="287"/>

Line25 is the drawing board of creative Web design, a place where ideas and inspiration are drafted into articles, tutorials and round-ups of cutting-edge Web design. Created and updated by Chris Spooner.

UX Magazine

href="http://uxmag.com"> class="alignnone size-full wp-image-13055" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/uxmag.jpg" alt="Uxmag in Smashing Network Update: Add Widget To Your Site and New Members" width="452" height="287"/>

UX Magazine was created to provide a central place to discuss the critical disciplines that enhance user experience. An extraordinary user experience should be the goal of every interaction you deliver to users at any level. All too often, businesses (large and small) get it horribly wrong. It’s painful to watch and even worse when it happens to you.

Impressive Webs

href="http://www.impressivewebs.com"> class="alignnone size-full wp-image-13055" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/impressive.jpg" alt="Impressive in Smashing Network Update: Add Widget To Your Site and New Members" width="452" height="287"/>

Impressive Webs is an article and tutorial website dedicated to providing practical information on and solutions to common front-end Web development problems and issues. Created and updated by Louis Lazaris.

We are very pleased and excited to welcome these new members to the Smashing Network! We will do our best to continue promoting the best stories from the Smashing Network and to spread the word in social media.

Bonus: The Smashing WordPress Book

Aside from the network updates, we have even more exciting news for our friends and fans. In cooperation with Wiley & Sons, we have just released Smashing WordPress: Beyond the Blog, a new book in the Smashing Magazine book series.

The book shows you how to use the power of the WordPress platform, and it offers a creative spark to help you build WordPress–powered websites that go beyond the obvious. You will learn the core concepts needed to build just about anything in WordPress, resulting in faster deployment and greater design flexibility. The book was written by WordPress expert href="http://www.blogherald.com/author/tdh/">Thord Daniel Hedengren and costs $44.99 / €27.90.

href="http://shop.smashingmagazine.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/sm-wp-book.jpg" width="502" height="631" alt="Sm-wp-book in Smashing Network Update: Add Widget To Your Site and New Members"/>

What Do You Think?

Your opinion has always been very important to us. Please let us know what you think of the changes and the widget, and let us know how you see Smashing Magazine and the Smashing Network evolving. We look forward to your constructive criticism and are open to your ideas and suggestions!

Also, we will be adding more exciting features and revealing more exciting projects in the months to come, so please stay tuned for updates. Thank you.

(al)

/>

© Vitaly Friedman for href="http://www.smashingmagazine.com">Smashing Magazine, 2010. | href="http://www.smashingmagazine.com/2010/02/16/smashing-network-widget-and-new-network-members/">Permalink | href="http://www.smashingmagazine.com/2010/02/16/smashing-network-widget-and-new-network-members/#comments">13 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/02/16/smashing-network-widget-and-new-network-members/&title=Smashing%20Network%20Update:%20Add%20Widget%20To%20Your%20Site%20and%20New%20Members">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/02/16/smashing-network-widget-and-new-network-members/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/02/16/smashing-network-widget-and-new-network-members/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Smashing%20Network%20Update:%20Add%20Widget%20To%20Your%20Site%20and%20New%20Members'%20http://www.smashingmagazine.com/2010/02/16/smashing-network-widget-and-new-network-members/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/02/16/smashing-network-widget-and-new-network-members/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/network/">network, href="http://www.smashingmagazine.com/tag/smashing/">smashing

Email Newsletter Design: Guidelines And Examples

February 15, 2010 in Design by Brandon Corbin

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Email Newsletter Design: Guidelines And Examples" border="0"/> /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=56"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=56" border="0" alt=" in Email Newsletter Design: Guidelines And Examples"/>   href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=63"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=63" border="0" alt=" in Email Newsletter Design: Guidelines And Examples"/>  href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=64"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=64" border="0" alt=" in Email Newsletter Design: Guidelines And Examples"/>

The email newsletter is a powerful marketing and communication tool that has various useful functions. It reminds your users about you; it informs users about your products; it tells them what you have been up to; and it helps you build a unique relationship with them. Users like email newsletters if the newsletters bring them value.

The fundamental rule for creating an email newsletter is to give it interesting, relevant and up-to-date information that is enjoyable to read. Users sign up for newsletters hoping be informed about things that they would not otherwise be able to find out about. In this article, we’ll discuss some guidelines for designing and distributing email newsletters. Each point will be accompanied by both good and bad examples.

Please notice: in this post we features both good and bad examples of newsletter design, so you can get a better understanding of the problems to avoid and good design decisions to make.

You may be interested in the following related posts:

[Offtopic: by the way, have you already visited href="http://creatives.commindo-media.de/www/delivery/ck.php?oaparams=2__bannerid=1247__zoneid=0__cb=752b87925c__oadest=http%3A%2F%2Fwww.facebook.com%2Fsmashmag">Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]

Signing Up For A Newsletter

This is an important step in convincing users that your newsletters are interesting and that they would benefit from signing up.

Tell Users What They Will Get

Before asking users for their details, tell them what they will receive, and identify the benefits of signing up. If you mention that the newsletters will include exclusive offers and deals, make sure to keep the promise. In addition, let users know how often they will receive the newsletter: weekly or monthly.

On the href="http://www.mulberry.com/signup/?">Mulberry sign-up page, the company promises to send users exclusive updates and offers. The href="http://ebm.cheetahmail.com/r/regf2?a=0&aid=1577006489&n=6">Marie Claire UK subscription page clearly states that its newsletters include news, beauty buys, competitions and offers.

href="http://ebm.cheetahmail.com/r/regf2?a=0&aid=1577006489&n=6"> alt="Newsletter11 in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/newsletter11.jpg" width="500" height="291"/> />Marie Claire UK subscription page

Reward Users for Signing Up

You may want to consider giving some reward to users for signing up; for example, a free gift, voucher or discount. To encourage users to sign up for his newsletter, href="https://www.jamieoliver.com/sign-up">Jamie Oliver offers a free £25 wine voucher that can be claimed after subscribing (on the condition that users spend £64.99 or more on the wine).

href="https://www.jamieoliver.com/sign-up/"> alt="JamieOliverRewardShot-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/JamieOliverRewardShot-e-mail-newsletter.jpg" width="500" height="89"/> /> Jamie Oliver sign-up page

alt="Newsletter2 in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/newsletter2.jpg" width="500" height="281"/> /> Jamie Oliver reward page

If you will give rewards, let users know as soon as possible in the process. href="http://www.jamesperse.com/index.jsp">James Perse gives users who subscribe to its newsletter a $15 online gift card. However, the reward is not mentioned on the subscription page, and the promotion code is sent via a confirmation email only after the subscription has been received. You would not have known that until you subscribed. The company is clearly missing a great opportunity to get people to sign up for its newsletters.

alt="JamesPerseConfirmation-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/JamesPerseConfirmation-e-mail-newsletter.jpg" width="500" height="522"/> /> James Perse subscription confirmation email

Preview Your Newsletter

One way to let users know what they will get is to give them a preview of your newsletter. href="http://www.hersheys.com/recipes/recipe-box/index-signup.asp">Hershey’s Kitchens has two different newsletters, and it offers examples of both types. The company even gives each newsletter a name and clearly indicates how often it will be sent out.

href="http://www.hersheys.com/recipes/recipe-box/index-signup.asp"> alt="Newsletter3 in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/newsletter3.jpg" width="498" height="323"/> />Hershey’s Kitchen sign-up page

Keep Questions Short and Simple

Users avoid filling out forms and submitting their details if possible. For a newsletter sign-ups, all you need is their email address.

href="http://www.hersheys.com/recipes/recipe-box/index-signup.asp">Hersey’s Kitchens has 10 mandatory fields. href="https://subscribe.hearstmags.com/circulation/shared/email/newsletters/signup/mhb-su01.html">MarieClaire.com has 8 fields, but only the email field is required. We have found from our studies, though, that people often miss the asterisk or do not know what it means. Users who are reluctant to fill in many details may well refuse to sign up in this case.

href="http://www.hersheys.com/recipes/recipe-box/index-signup.asp"> alt="HersheysKitchenFields-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/HersheysKitchenFields-e-mail-newsletter.jpg" width="500" height="347"/> /> Hershey’s Kitchen sign-up page

Content Of Newsletter

Based on our user testing, we found that people look at three things when they receive a newsletter:

  1. The sender, to see if it is from someone they know.
  2. The subject line, to see if it is of interest to them.
  3. The date, to see if the communication is up to date.

Write an Attractive Subject Line

One way to encourage users to open your newsletter is to write a subject line that grabs their attention.

If you are offering some sort of deal in your newsletter, try to avoid generic appeals in your subject line (for instance, Game July newsletter subject line: “Sizzling Summer Deals”). Instead, mention specific offers, such as Dorothy Perkins November Issue: “25% Off Just for You”. Also, be realistic about your offers, and avoid making them sound too good to be true. Users are skeptical about subject lines like “Get 1000 Extra Points” because they know they will often have to spend a lot to get those points.

Provide Useful and Well-Written Content

A newsletter should contain information that users would not normally research on their own. Users take seconds to scan for topics of interest to them before deciding whether to spend more time reading the newsletter. If your newsletter, like href="http://www.forrester.com/rb/tech_marketing">Forrester’s, shows only one or two topics, users would less likely to find something of interest to them.

alt="Forrester-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Forrester-e-mail-newsletter.jpg" width="500" height="373"/> /> Forrester newsletter

Furthermore, including links to your website in the newsletter is crucial.

Make Content Relevant to Your Readers

Make your newsletter’s content as relevant to your readers as possible, whether through offers, products or images. Superfluous content will add no value and simply be ignored. You could also provide customized content. Personalization can be done in one of two ways:

  1. Asking users for more (optional) information when they sign up.
  2. Implicitly recording what they buy and view on your website.

For example, href="http://www.amazon.co.uk/">Amazon sends newsletter with recommendations based on what its users have purchased. Recommendation-based newsletters can be highly useful, provided that your analytics are accurate.

alt="AmazonCustomisedShortern-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/AmazonCustomisedShortern-e-mail-newsletter.jpg" width="500" height="570"/> /> Amazon’s customized newsletter

Offer Exclusive Deals

You could always offer subscribers special deals or freebies. There are a few ways to go about this. href="http://www.hm.com/gb/#/startns/">H&M and href="http://www.photobox.co.uk/">Photobox ask users to present their newsletters at the point of purchase in stores to receive discounts. href="http://www.clinique.co.uk/">Clinique and href="http://www.airparks.co.uk/">Airparks include a promotion code in their newsletters that users can redeem when checking out online.

alt="HAndM-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/HAndM-e-mail-newsletter.jpg" width="500" height="439"/> /> H&M newsletter

alt="PhotoboxBlurred-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/PhotoboxBlurred-e-mail-newsletter.jpg" width="500" height="569"/> /> Photobox newsletter

alt="Airparks-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/airparks-e-mail-newsletter.jpg" width="500" height="474"/> /> Airparks newsletter

Avoid putting these benefits so deep in the newsletter that users miss them. For instance, Clinique (above) puts its code at the bottom of the page, whereas Airparks puts its at the very top of the page.

In addition, make sure the rewards are relevant to your product and target audience. Take href="http://www.inkclub.com/">Inkclub, which gives out a free blusher to customers who shop via its newsletter. Not only does this item have little relevance to Inkclub’s product line, but it may not be very attractive to the company’s target users.

alt="Inkclub-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Inkclub-e-mail-newsletter.jpg" width="500" height="842"/> /> Inkclub newsletter

Newsletter Design

Design your newsletter to suit its chief purpose. If the main objective is to announce a new product or promote a particular service, you may want to focus the newsletter entirely on this product or service. Good examples are href="http://www.apple.com/">Apple in promoting its new iPhone 3GS.

alt="AppleiPhone3GS-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/AppleiPhone3GS-e-mail-newsletter.jpg" width="500" height="499"/> /> Apple newsletter promoting its new iPhone 3GS.

To promote its latest exclusive offers, href="http://www.tedbaker.com">Ted Baker takes an easy and rather lazy approach: the whole newsletter consists merely of one big banner showing offers of 50% off, in the hope that users will click to the website to find out more. By contrast, href="http://www.dabs.com/">Dabs.com showcases a number of its latest deals in its newsletter, giving users a rough idea of its product line and sale prices.

alt="TedBaker-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/TedBaker-e-mail-newsletter.jpg" width="500" height="461"/> /> Ted Baker newsletter

alt="Dabs-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Dabs-e-mail-newsletter.jpg" width="500" height="613"/> /> Dabs newsletter

You could also adopt a catalogue style, like href="http://www.ikea.com/gb/en/">IKEA, or create a summary of your e-commerce website, like href="http://www.audible.com/">Audible, which teases users to visit its website with prices and a clear call-to-action button.

alt="IKEA-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/IKEA-e-mail-newsletter.jpg" width="500" height="890"/> /> IKEA newsletter

alt="Audible-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Audible-e-mail-newsletter.jpg" width="500" height="740"/> /> Audible newsletter

Keep it Simple and Straightforward

As reported by the Nielsen Norman Group in its href="http://www.nngroup.com/reports/newsletters/summary.html">Email Newsletter Usability Report, the average reader skims a newsletter for 51 seconds. People never read: they scan for content that is of interest to them. So, don’t overwhelm them by squeezing too much information on the page. Make sure your content gets straight to the point, and write short paragraphs and bullet points.

The main purpose of href="http://www.flybe.com/home.htm">Flybe’s newsletter is to present an exclusive offer on family trips to Disneyland. The value of this deal is lost among the long paragraphs. The message could be conveyed more effectively in bullet points for quick scanning.

alt="Flybe-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Flybe-e-mail-newsletter.jpg" width="500" height="680"/> /> Flybe newsletter

Make Good Use of Images, Numbers and Colors

Users are drawn first to elements that are visually simulating, such as graphics. Use images to guide users to the most important content and messages.

Numbers also grab attention. Users tend to associate them with prices and savings. Use percentages and dollar values to show concrete offers. For example, href="http://www.pixmania.co.uk/uk/uk/home.html">Pixmania newsletter has a big “49% off,” showing how much savings are available: clear and appealing.

alt="Pixmania-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Pixmania-e-mail-newsletter.jpg" width="500" height="440"/> /> Pixmania newsletter

Color adds interest, too. But be careful, because inappropriate use makes for a messy, confusing newsletter. Take href="http://www.rimmellondon.com/default.aspx">Rimmel London’s newsletter.

alt="RimmelLondon-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/RimmelLondon-e-mail-newsletter.jpg" width="500" height="500"/> /> Rimmel London newsletter

Tailor the Layout to the Content

A newsletter can be designed in a one-column or multi-column layout or a mixture of both. A one-column grid is easier to skim but might take up more space and increase the length of the newsletter. While people do skim email newsletters, that’s no reason to make them overly lengthy. However, some exceptions are the href="http://www.designhotels.com/">Design Hotels newsletter, which is long but well organized. Hotels are shown based on location, with attractive photos and deals.

alt="DesignHotels-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/DesignHotels-e-mail-newsletter.jpg" width="500" height="541"/> /> Design Hotels newsletter

A two-column layout is common for newsletters. Narrower columns is usually used for the table of contents and upcoming events, while the main content is given a wider column. href="http://www.etsy.com/">Etsy uses a two-column design for its newsletter, but both columns contain photos and links, and the sections have no prominent divisions. The design makes the page look messy and it lacks focus, making it hard to figure out where to look on the page. By contrast, href="http://www.istockphoto.com/index.php">iStockphoto’s clear division between sections and grid design help guide the user’s attention to the left or right column.

alt="Etsy-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Etsy-e-mail-newsletter.jpg" width="500" height="432"/> /> Etsy newsletter

alt="IStockphoto-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/iStockphoto-e-mail-newsletter.jpg" width="500" height="618"/> /> iStockphoto newsletter

Be Creative

Creativity in a newsletter is always welcome. Both href="http://www.firstgreatwestern.co.uk/">First Great Western and href="http://www.southernrailway.com/">Southern present their content using fictional characters, Bob and Loco respectively, who users can easily relate to.

alt="FirstGreatWestern-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/FirstGreatWestern-e-mail-newsletter.jpg" width="500" height="562"/> /> First Great Western newsletter

alt="Southern-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Southern-e-mail-newsletter.jpg" width="500" height="550"/> /> Southern newsletter

Giving each edition of your newsletter a different layout or design is okay as long users can easily recognize your brand. Despite href="http://www.statravel.co.uk/">STA Travel using various styles for its weekly newsletter, certain elements follow their branding guidelines, allowing users to quickly identify it.

alt="STATravel254-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/STATravel254-e-mail-newsletter.jpg" width="500" height="557"/> /> STA newsletter, issue #254

alt="STATravel255-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/STATravel255-e-mail-newsletter.jpg" width="500" height="513"/> /> STA newsletter, issue #255

Unlike the rather uninspiring href="http://www.tripadvisor.com/">Tripadvisor newsletter, href="http://www.topgear.com/">Top Gear gets creative with its hand-sketched design, which makes the newsletter fun to read and explore.

alt="Tripadvisor-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Tripadvisor-e-mail-newsletter.jpg" width="500" height="306"/> /> Tripadvisor newsletter

alt="TopGear-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/TopGear-e-mail-newsletter.jpg" width="500" height="456"/> /> Top Gear newsletter

Be Wary of Table of Contents

Some newsletters include a table of contents at the top of the page, which can help users quickly scan for items of interest. A table of contents can be especially helpful in lengthy newsletters that have a lot of content, such as the one from href="http://www.moneysavingexpert.com/">MoneySavingExpert.

alt="MoneySavingExpert-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/MoneySavingExpert-e-mail-newsletter.jpg" width="500" height="325"/> /> MoneySavingExpert newsletter

Previous experience tells us, though, that some users do not understand that the links in the table of contents navigate within the newsletter. Assuming that the links take them to a website, they avoid clicking them altogether. One solution is to avoid placing the links in the left or right columns, as href="http://www.foodepedia.co.uk/">Foodepedia does, which is where external links and ads are often found.

alt="Foodepedia-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Foodepedia-e-mail-newsletter.jpg" width="500" height="549"/> /> Foodepedia newsletter

Be Wary of Ads

If you have to include ads in your newsletter, make sure they blend in with the content. A good example of this is href="http://www.lastminute.com/">Lastminute.com, and a bad example is href="http://www.pcmag.com/">PCMag.com which merely copies Google AdSense code directly into its newsletter, making the page look messy and the content unconvincing.

href="http://www.lastminute.com/lmn/webcourier/en_GB/MSN/email.htm"> alt="Lastminute-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Lastminute-e-mail-newsletter.jpg" width="500" height="470"/> /> Lastminute.com newsletter

alt="PCMag-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/PCMag-e-mail-newsletter.jpg" width="500" height="997"/> /> PCMag.com newsletter

Tools And Features

Make it easy for users to unsubscribe, but don’t remind them how to all the time. Also, tell users how they can change their email address, view the newsletter in a Web browser and quickly share the newsletter with their friends. Other useful features include: “Follow us on Twitter,” “Be Our Fan on Facebook” and “Watch Us on YouTube.”

After Sending Out The Newsletter

After sending out your newsletter, use an email marketing tool and list manager to track, monitor and measure the performance of your campaigns. Many email service providers are out there, such as MailChimp, iContact, Mailvivo, Mailing Manager and Atomic Email Tracker. The majority of them also provide templates to help you create your newsletter if you don’t want to get your hands dirty.

Showcase

MacHeist’s Directorate newsletter grabs its readers’ attention with the price of its iPhone apps (£0.99). Then, it tells them what MacHeist does in a short paragraph and presents its features in a clear and appealing way via icons. Simple, interesting and effective.

alt="MacHeist-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/MacHeist-e-mail-newsletter.jpg" width="500" height="1007"/>

Headscape’s newsletter with large headlines and nice illustrations.

href="http://headscape.co.uk/newsletter/Issue2.html"> alt="Headscape in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/headscape.gif" width="500" height="1370"/>

Muji’s newsletter has a tidy layout that allows for quick scanning. Each section is accompanied by nice product images and prices.

alt="Muji-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Muji-e-mail-newsletter.jpg" width="500" height="1338"/>

Howies might have a bit too much text in its newsletter. However, it organizes the content into different sections with big clear headings.

alt="Howies-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Howies-e-mail-newsletter.jpg" width="500" height="1649"/>

Apple’s Christmas newsletter has a photo-related theme promoting its digital photo organizer software, iPhoto, and its photo books and calendar printing service.

alt="AppleXmas-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/AppleXmas-e-mail-newsletter.jpg" width="500" height="960"/>

HQhair.com gives its users an exclusive offer with a code. It not only emphasizes the word “FREE” but makes good use of the model to draw attention to the offer.

href="http://dotm1.net/cr.asp?i=575993460&CID=149548"> alt="HQHair-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/HQHair-e-mail-newsletter.jpg" width="500" height="936"/>

Bluefly cleverly divides its newsletter into two sections: “Offers” (the main section) and the right navigation section, using beautiful imagery in the process. Also, notice how it emphasizes the 80% offer and word “OFF” (in large font).

href="http://www.newsletterarchive.org/2009/05/19/477591-BLUE+ROOM+SALE%21+Now+Up+To+80%25+Off+-+%27Til+Midnight%21"> alt="Bluefly-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Bluefly-e-mail-newsletter.jpg" width="500" height="926"/>

Ambiance San Francisco takes a creative drawing-based approach to encourage users to shop with it.

alt="AmbianceSF-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/AmbianceSF-e-mail-newsletter.jpg" width="500" height="652"/>

Disney Adventures‘ newsletter is another good example. Its beautiful picture gives users that holiday feeling.

href="http://images.bfi0.com/creative/2008/disney/aug/abdwdig/"> alt="DisneyAdventures-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/DisneyAdventures-e-mail-newsletter.jpg" width="500" height="849"/>

Good Life Garden’s newsletter effectively uses the word “Free” to grab the user’s attention. The design is simple yet visually pleasing. Unfortunately, the content is repeated in the same newsletter.

alt="GoodLifeGarden-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/GoodLifeGarden-e-mail-newsletter.jpg" width="500" height="983"/>

Bite Card’s newsletter has festive background imagery to evoke the winter season. It is simple, with a big banner at the top showing the product price, followed by cocktail choices and ingredients.

href="http://www.bitecard.co.uk/BiTEMe!/bite_email5_xc.html"> alt="Bitecard-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Bitecard-e-mail-newsletter.jpg" width="500" height="650"/>

The Squawk’s newsletter attracts users with the beautiful book cover on promotion for that month.

href="http://news.penguin.com.au/rp//374/process.clsp?EmailId=55471&Token=20E9BD9C9FD8FD033AFBFE795AE898539"> alt="TheSquawk-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/TheSquawk-e-mail-newsletter.jpg" width="500" height="1198"/>

Cauldron’s newsletter also has a tidy layout and clearly defines the purpose of each section. It tells users the subject of its next issue in the “Coming Next Month” section at the bottom, a nice tease.

href="http://cauldronfoods.cmail1.com/T/ViewEmail/y/28430FC2A6B01A14"> alt="Cauldron-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Cauldron-e-mail-newsletter.jpg" width="500" height="1217"/>

Mango’s newsletter makes good use of bright, attractive colors.

href="http://www.mango.com/rcsemail/newsletter/11-06-2008/MNG_086V_NLT1106COLOUR_in.htm"> alt="Mango-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Mango-e-mail-newsletter.jpg" width="500" height="1329"/>

iStockphoto’s uses a gallery to present its top eight photos of the month: neat and easy to scan.

alt="IStock-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/iStock-e-mail-newsletter.jpg" width="500" height="1065"/>

Threadless‘ newsletter offers “$10 per tee” in big clear type at the top of the page.

alt="Threadless-e-mail-newsletter in Email Newsletter Design: Guidelines And Examples" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Threadless-e-mail-newsletter.jpg" width="500" height="1880"/>

Further Resources

You may also be interested in these additional resources:

About the Author

Chui Chui Tan is a User Experience Consultant at href="http://www.cxpartners.co.uk/about/people/chui_chui_tan">cxpartners, UK. She loves being creative. Chui Chui has spent over seven years conducting user evaluations and designing usable and accessible user interfaces. She previously worked as a Mechanical Designer and received her doctorate in Human Computer Interaction. You can href="http://twitter.com/ChuiSquared">follow Chui Chui on Twitter.

(al)

/>

© Chui Chui Tan for href="http://www.smashingmagazine.com">Smashing Magazine, 2010. | href="http://www.smashingmagazine.com/2010/02/15/email-newsletters-guidelines-and-examples/">Permalink | href="http://www.smashingmagazine.com/2010/02/15/email-newsletters-guidelines-and-examples/#comments">30 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/02/15/email-newsletters-guidelines-and-examples/&title=Email%20Newsletter%20Design:%20Guidelines%20And%20Examples">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/02/15/email-newsletters-guidelines-and-examples/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/02/15/email-newsletters-guidelines-and-examples/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Email%20Newsletter%20Design:%20Guidelines%20And%20Examples'%20http://www.smashingmagazine.com/2010/02/15/email-newsletters-guidelines-and-examples/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/02/15/email-newsletters-guidelines-and-examples/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/email/">email, href="http://www.smashingmagazine.com/tag/marketing/">marketing, href="http://www.smashingmagazine.com/tag/newsletter/">newsletter

by Brandon Corbin

Free Medical Icons Set (60 Icons)

February 15, 2010 in Design by Brandon Corbin

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Free Medical Icons Set (60 Icons)" border="0"/> /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=56"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=56" border="0" alt=" in Free Medical Icons Set (60 Icons)"/>   href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=63"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=63" border="0" alt=" in Free Medical Icons Set (60 Icons)"/>  href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=64"> src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=64" border="0" alt=" in Free Medical Icons Set (60 Icons)"/>

Today we are glad to release a Free Medical Icons Set, a set with 60 original medical icons in .png 32 bit in resolutions 32×32px and 128×128px. This set was designed by the user interface design agency href="http://www.centigrade.de">Centigrade and released exclusively for Smashing Magazine and its readers. The icons can serve as great in-app icons for desktop or RIAs in the medical domain. With perspective and reflective effects these can be a real stunner on landing pages or in touch screen application menus.

href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/uploader/images/free-medical-icons-set/full_preview.png"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/uploader/images/free-medical-icons-set/release.png" width="450" height="450" alt="Release in Free Medical Icons Set (60 Icons)"/>

Download the icon set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.

href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/SmashingMagazine-PreviewComplete-500x1300px.jpg"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/SmashingMagazine-PreviewComplete-500x1300px.jpg" alt="SmashingMagazine-PreviewComplete-500x1300px in Free Medical Icons Set (60 Icons)" width="500" height="1300"/>

Behind the design

As always, here are some insights from the designers:

There are a lot of free icon libraries out there, however, only few of them focus mainly on medical icons and we wanted this gap to be closed. Centigrade conducted quite a lot of icon projects in the healthcare sector just recently, for which reason we already had some nice vector shapes on the pile. We distilled the most frequently requested metaphors and wrapped them into a fresh new style. Being modern and concise rather than fancy and playful, they are in line with what we experienced works well in the medical domain.

Thank you very much, guys! We really appreciate your efforts.

/>

© Smashing Editorial for href="http://www.smashingmagazine.com">Smashing Magazine, 2010. | href="http://www.smashingmagazine.com/2010/02/15/free-medical-icons-set-60-icons/">Permalink | href="http://www.smashingmagazine.com/2010/02/15/free-medical-icons-set-60-icons/#comments">19 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/02/15/free-medical-icons-set-60-icons/&title=Free%20Medical%20Icons%20Set%20(60%20Icons)">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/02/15/free-medical-icons-set-60-icons/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/02/15/free-medical-icons-set-60-icons/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Free%20Medical%20Icons%20Set%20(60%20Icons)'%20http://www.smashingmagazine.com/2010/02/15/free-medical-icons-set-60-icons/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/02/15/free-medical-icons-set-60-icons/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/icons/">Icons, href="http://www.smashingmagazine.com/tag/medical/">medical

No Comments »

by 8ify.com - Design

Square Allows Smart Phones to Accept Credit Card Payments

February 14, 2010 in Design by 8ify.com - Design

square.jpg

Imagine being able to use your smart phone to accept credit card payments at your annual yard sale. The Square team has been developing this innovative service since February, 2009, and just launched its beta phase. Their goal is to bring “immediacy, transparency, and approachability to the world of payments: an inherently social interaction each of us participates in daily.” Square’s innovation is a small adapter that plugs into the audio impute jack of any smart phone. After setting up an online account, you can use this adapter to accept credit card payments for anything. Square eliminates receipts, gives rewards and even donates a penny from every purchase to a cause of your choice. Beyond shopping, this little device offers a powerful tool to anyone who needs to raise money. It could be scaled to meet a variety of needs, like increasing community donations for a cause or an emergency. Check out this awesome product intro video to see Square in action.

(more…)

by 8ify.com - Design

Osko+Deichmann’s “Straw” chair at Stockholm Furniture Fair 2010

February 14, 2010 in Design by 8ify.com - Design

OskoDeichmannStrawChair2.jpg

Furniture design duo Osko+Deichmann present a variation on their “Straw” chair in Stockholm this week (the original bauhaus-esque model featured on Core back in Sept). The sharply bent steel chair is now being produced by Blå Station.

We papped the pair getting in some last minute press shots in the nigh knee-deep Swedish show.

OskoDeichmannStrawChair.jpg

OskoDeichmannStrawChair3.jpg

See more shots on the Blå Station site.

(more…)