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.
  • Web Design
    Connecting an API-Driven Web App with JavascriptPre 4
    We have our little app looking just the way we want, but it doesn’t actually do anything yet. So, let’s work on adding some JavaScript to make the app interactive.Read More…
  • Web Design
    Building an API-Driven Web App With HTML and CSSPre 3
    Having designed some visual mocks to help guide us in building our little app for the browser, let’s get to the exciting part and start building!Read More…
  • Web Design
    Designing an API-Driven Web App in SketchPre 5
    Now that we’ve accounted for all the elements of our little app, including its different states, we can confidently begin creating visual mockups for each element and its corresponding state.Read More…
  • Web Design
    Planning a Basic API-Driven Web AppPre 2
    APIs are a big part of web design and development these days. They help power rich, dynamic experiences in the browser. In this tutorial, you’ll learn the basics of how to work with a third-party API to render content in the browser. Using the iTunes API, we will take the URL of any iOS or Mac app, retrieve its high resolution icon artwork, and render it directly into the browser.Read More…
  • Web Design
    Undress to Impress; Check Your Websites Without CSSClothes
    HTML is at the core of the web. Sometimes, in the pursuit to make things look beautiful using CSS, we forget that. If you’ve ever used Sass (or a CSS compiler in general) , you’ve probably seen your site’s styles break due to a compile error. But before you rush to fix the error you just introduced, take this as an opportunity to analyze and enhance the core of your site: the HTML.Read More…
  • Web Design
    Getting the Hang of Hanging PunctuationGrand motel text effect
    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
    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
    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
    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
    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
    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 tag optgroup
    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…