Jim Nielsen
Jim Nielsen currently lives in NYC working as the lead designer for an enterprise software startup. As much as he loves the city, he misses the red rocks of his boyhood home and the beauty of the desert southwest. He loves to ski, golf, fish, read, eat street tacos, learn new things (currently he's into calligraphy), and take road trips immersed in the music of Bob Dylan. However, his true passion is to analyze complexity and transform it into simplicity.
Tutorials
  • Web Design
    Getting the Hang of Hanging PunctuationGrand motel text effect
    430 shares
    Hanging Punctuation is a powerful typographic tool for creating optically aligned bodies of text. Unfortunately, it has been largely forgotten on the web... until now. We’ll take a look at the value of hanging punctuation and how you can partially implement it using a little JavaScript and a CSS rule which has been around for years.Read More…
  • Web Design
    Implementing the Float Label Form PatternForm float input retina
    185 shares
    Using Matt Smith’s mobile form interaction design as a guide, we will create a stunning form interaction for the web that’s both beautiful and accessible using HTML, CSS and JavaScript.Read More…
  • Web Design
    Quick Tip: Name Your SASS Variables ModularlyVar retina
    13 shares
    When working with CSS preprocessors like Sass, Less (or any other programming language for that matter) you're going be leveraging the power of variables. However, if you spontaneously create your variable names as you code, the odds are your naming convention will lack cohesiveness. You should think about organizing your variable names (and project for that matter) modularly. This will bring structure and unity to your project as a whole, making it easier to understand and navigate the whole thing.Read More…
  • Web Design
    Filler Content: Tools, Tips and a Dynamic ExampleFiller retina
    9 shares
    As designing in the browser becomes more popular (and convenient), the need for helpful design tools is increasing. One set of tools that is becoming quite helpful revolves around filler content. Currently, a variety of resources exist to aid designers who need filler content, whether it be text or images. Because a lot of website design used to take place in Photoshop, manually copying/pasting text from the web was the best method for 'filling in' a design with dummy content. However, now that a lot of website design takes place in the browser, why not have the computer do all 'filling in' work for you? We'll cover your options for filler content in this tutorial. Everything from copying/pasting static text and images to dynamically generating them.Read More…
  • Web Design
    Build a Responsive, Single Page Portfolio with Sass and CompassWeb design
    25 shares
    There's a lot that goes into creating a web site these days. We're now building websites using HTML5, CSS preprocessors, APIs, custom typography and more. Our design challenges include responsive architecture, resolution independence and multi-device interaction support. In this article, we'll build a single page portfolio that covers aspects of all these techniques.Read More…
  • Web Design
    Bring Your Forms Up to Date With CSS3 and HTML5 ValidationForm
    321 shares
    Let's look at how to create a functional form which validates users' data, client-side. With that done, we'll cover prettying it up using CSS, including some CSS3!Read More…
  • Web Design
    Quick Tip: Don’t Forget the “optgroup” ElementPreview optgroup
    49 shares
    One popular navigation design pattern for the responsive web is collapsing your website's navigation into a select menu. However, representing hierarchy or categorical distinctions in select elements often leads to butchered HTML with manual hyphens and lots of   spaces. In this tutorial we'll introduce you to a somehwat obscure HTML tag called optgroup which will provide you with an easy (and semantic) way of grouping related content in select menus.Read More…
  • Web Design
    Everything You Need to Know About the CSS Cursor RulePreview2
    60 shares
    While the world's going bonkers for touch-controlled interfaces, this article will focus on the more traditional input method of the mouse. I'll suggest an approach of progressive enhancement for handling interaction design; more specifically, an overview of the CSS cursor rule.Read More…
  • Web Design
    Quick Tip: Creating Crisp, Pixel Perfect Circles in PhotoshopPreview2
    59 shares
    Achieving pixel perfection when designing UI elements can be simple thanks to Photoshop's "snap to pixels" feature. Unfortunately, this feature is not available for the ellipse tool - creating crisp, pixel-perfect circles can therefore require additional attention to detail. I'm going to let you in on a little secret which will make "snap to pixels" available when creating circles..Read More…
  • Web Design
    Quick Tip: Using Web Inspector to Debug Mobile SafariPreview
    103 shares
    Building and debugging websites and web applications for mobile devices can be a hassle. On the desktop we have powerful debugging tools; most browsers have a web inspector of some kind. But we don't have those tools for devices like the iPhone and iPad … that is, until now!Read More…
  • Web Design
    Harnessing the Power of Icon StandardsIcons preview
    20 shares
    As effective as an icon's metaphor may be, truly powerful icons get strength from their universal recognizability and conventional usage — a standardization of sorts. We'll discuss icon standardization more in this article and then provide suggestions to a few current icon standardization movements which you can explore and incorporate into your own projects.Read More…
  • Web Design
    Super Simple Lightbox with CSS and jQueryPreview
    88 shares
    Rather than using a bloated plugin that has features you'll never use, this tutorial shows you how to create a super simple lightbox for handling images. It's perfect for image galleries, portfolios, and more!Read More…