Jim Nielsen: designer, developer, problem solver.
Currently: Director of Design & UI Architecture @ SageSure.
Who are you? The answer you’re probably looking for is “I am a designer who codes.” But what I really do is solve problems and add value to the projects I work on. And that’s probably one of the less intersting facts about me, but you know, this is a website where I talk about myself professionally, so I have to say these things.
What are your skills? My practical skills aren’t what’s interesting about me. Yes, I design visual interfaces and leverage principles of design, color theory, and typography. I write code and intimately understand HTML, CSS, and JavaScript. But my skills are tools to and end: to solve problems and provide value.
What’s your expertise? My expertise lies in synthensizing knowledge across perceivedly disparate boundaries. “Visual designer”, “Front-end Developer”, and “Product Manager”, I assume all those responsibilities in order to add value to a business, to enhance a company’s culture, to bring clarity to a project, or to just get along with humans (something often perceived as a difficult task for people who write instructions for machines).
How are you, you know, as a human? Don’t take it from me, here are the words of a peer when I was departing a previous employer:
Gonna be a real bummer here w/o you. You bring a lot of great design, and a lot of not-being-an-asshole-ness.
Do you have anything else to say? Yes, in fact, I’m glad you asked. Everything I am as a designer, developer, and just human in general is a result of the wonderful people who I’ve crossed paths with in my life. In technology in particular, I’ve worked with some of the most inpsiring, charismatic, curious, endearing, introspective, wise, unassuming, artistic, amiable, selfless, and sincere people you’ll ever meet (and I didn’t use the word “talented” because they all are). More than any project I’ve worked on, I’m proud of the people I’ve worked with and learned from. I’m sure you, dear reader, would be a wonderful person I could learn from as well.
— Jim Nielsen on Aug 2, 2018
Dribbble
-
Netlibox
Graphic I created to illustrate the Netlify + Dropbox process described in my guest post on Netlify’s blog. -
404 page
Working on ideas for a 404 page for iosicongallery.com -
Invitations
Been playing with some simple black and white invitations. -
About page
Playing around with some design possibilities for an “about” page. -
Login screens
Working through ideas around brand hierarchies and configurable content for a unified, multi-application approach to login screens. -
Modal zero state
Working through ideas for a new feature which provides two pathways for accomplishing a related task. Trying to provide education for each action. -
Logo grid
Working on bringing cohesion and unity to family of branded glyphs. -
Google Sheets to JSON
Playing around with visualizing data from a Google excel sheet pulled as JSON. -
Search auto suggest design
Redesigned the existing search autosuggest. Previously, results were merely concatenated into a big string of results. Now the results have a structured IA with helpful UI labels. Wrote a post about the process on my blog. -
SassMe v2.0
Designed, built, and launched version 2.0 of SassMe: a tool to dynamically visualize the results of Sass color functions. Read more about it in my blog post. -
Step Wizard
Building the front-end for this stepper/wizard UI I designed around sending event messages. -
App login
Working on a new pattern and layout for views where users are unauthenticated (including this one, the login page). - View more at https://dribbble.com/jimniels ›
Blog
Personal Projects
-
SassMe
Visualize the result of Sass color functions in real-time.
-
@happycog
Check out SassMe, a tool for visualizing Sass color functions: http://cog.gd/5xy
-
@vlh
Super helpful tool for visualizing Sass colour functions. Much easier than trying to do them in your head! http://sassme.arc90.com/
-
@smashingmag
A little helpful tool to visualize SASS color functions in real-time without compiling. http://sassme.arc90.com
-
@elijahmanor
We use a tool to help designers create variations of main set of colors http://sassme.arc90.com/ & then we name them http://name-of-color.com
-
@sarah_edo
my new favorite toy. most of this is pretty easy to do in your head, but sometimes it's nice to have a visualization: http://sassme.arc90.com/
-
@happycog
-
Gimmie Dat Icon
Retrieve full-sized icon artwork for any app in Apple’s ecosystem, based on a tutorial published for Web Design Tuts+.
-
iOS Icon Gallery
A gallery showcasing great icon designs from the iOS ecosystem.
- Detective Work for the App Icon Book
- URL Design and Automated Redirects in Jekyll
- Creating iOS Icon Masks in the Browser
- Calculate the Border Radius for iOS-Style Icons Using a Simple Ratio
-
@smashingmag
Not a fan of showcases, but iOS icon gallery looks great: a gallery showcasing icon designs within the iOS ecosystem - http://iosicongallery.com/
-
@iamFinch
Good reference site for icon inspiration http://iosicongallery.com/
-
@dresouzax
Mac Icon Gallery http://macicongallery.com and iOS Icon Gallery http://iosicongallery.com are indeed nice showcases. Nice initiative by @jimniels.
-
macOS Icon Gallery
A gallery showcasing great icon designs from the macOS App Store.
-
watchOS Icon Gallery
A gallery showcasing great icon designs from the watchOS ecosystem.
-
Team Colors
A color reference of your favorite major league sports teams.
-
@jongold
http://teamcolors.arc90.com/ — list of loads of sports team hex colours & SVG logos, by @jimniels. So so useful.
-
@DrBDT
HT to @jimniels, whose team colors site is a gift to the internet. (& to sports researchers wanting accurate charts http://teamcolors.arc90.com/
-
@JoeyMFaulkner
Thanks to @jimniels for this cool team logo colour finder, turned a 20 minute job into a 2 minute one! http://teamcolors.arc90.com/
-
@jongold
-
Logo Integrity in Focus
An experiment in analyzing the integrity of iconic logos. How well would you recognize a logo out of focus?
-
@designernewsbot
Logo Integrity
-
@WalterStephanie
Weekly Web Design, UX & Front-End links not to miss: Isometric illustration tutorial, iphoneX design & gestures, Web Designer starter tips, inclusive design, logo integrity game, Front-end development in 2017, debugging CSS Grid Layout, iOS Sketch template
-
@designernewsbot
-
CSS Off 2012
Finalist in the global web design competition where entries were judged by industry-renowned experts on code, UX, browser support, responsiveness, and more.
Employment
-
Director of Design and UI Architecture @ SageSure
More info to come...
-
Project: Agent Portal
Web application allowing agents to quote and bind insurance policies via Insight’s platform. Initial work has included redesigning exisiting problematic UI interfaces and simplifying front-end implementation approaches. Tools: Sketch, Sass.
-
-
UI Engineer @ Timshel
Worked on the front-end team doing engineering, design, and product management for a variety of web applicaitons and services. In other words, when stuff needed to be built, we built and shipped it.
-
Project: Admin
Web interface for clients administering their account on The Groundwork platform. Handled creating, designing, and engineering various features for the application’s view layer. Tools: Sketch, Sass, CSS Modules, Radium, Javascript, React.js, Redux, Bootstrap, Material UI, Git.
-
-
Designer & Front-end Developer @ Postlight
Succeeded in consulting, designing, and building internal web applications (on tight deadlines) for one of Postlight’s biggest clients: Time Inc.
-
Project: Assignment Desk
Part one in a series of internal web applications for Time Inc. Handled sketching, wireframeing, and mocking the UI/UX of the application while simultaneously engineering the view layer. Tools: Sketch, Sass, Javascript, React.js, Redux, Bootstrap, Git.
-
Project: Digital Content Production
Designed and built based on the Assignment Desk application framework. Handled everything from UI/UX to product management to front-end development. Tools: Sketch, Invision, Sass, Javascript, React.js, Redux, Bootstrap, Git.
-
-
Lead Designer, Front-end Developer @ Kindling
Led this startup’s design vision (product, brand and identity, marketing). Wrote code. Wore lots of hats. Built software people enjoyed using.
-
Project: Kindling the Application
A fully-responsive web application used to discover, discuss, evaluate, and decide on great ideas. Handled 100% of the app’s UI/UX: from ideation on paper to digital wireframes/mocks to browser code to cross-device testing and more. Tools: Sketch, Photoshop, PHP, Sass, Git, Invision, Asana, Trac.
-
Project: Kindling the Marketing Site
Designed and built two different versions of this site: the first powered by Wordpress, the second by a static site generator. Hands were full with conceptualization, UI/UX, code, and everything in-between. Tools: Photoshop, PHP, Wordpress, Sass, Javascript, Metalsmith, Node, Git, Hubspot & Google Analytics, Asana, Mailchimp.
-
Project: Kindling the Brand
Owned the Kindling brand and identity, which encompassed everything from business cards to company-wide email signatures, as well as a guidebook which fostered internal standards and awareness around maintaing brand integrity. Tools: Photoshop, Illustrator, InDesign.
-
Project: Kindling Loves Startups
Designed and developed this responsive website as the central piece of a marketing campaign. It employed a few (at the time) cutting-edge tricks, including a progressively-enhanced pulse animation. Tools: Photoshop, PHP, Sass, Javascript, jQuery.
-
-
Web Designer @ Arc90
Solved problems for clients with design and code. Updated and enhanced the agency’s website. Hacked cool (and useful) side projects.
-
Project: Knovel
Worked on designing product landing pages and diving into application code – right before the client’s contract was cut short. Tools: Photoshop, Javascript, jQuery, Backbone.js.
-
Project: arc90.com
Created new artwork and assets for Arc’s exisiting website, then implemented them in code. Tools: Photoshop, Wordpress, PHP, CSS.
-
-
Marketing & Multimedia Designer @ Dixie State University
Raised design bar 110% on every public-facing widget I could get my cursor on: web design and development, graphic design, page layout, marketing campaigns, social media promotion, annual reports, brand identity, and more.
-
Multimedia Development Intern @ SkyWest Airlines
Interface design, logo creation, web maintenance, layout design, product photography, and more.
Publishings
-
-
-
-
-
-
-
Getting the Hang of Hanging Punctuation
-
@HugoGiraudel
What a delightful article on hanging punctuation: http://webdesign.tutsplus.com/articles/getting-the-hang…. Full of interesting bites to start the day.
-
@smashingmag
Getting the hang of hanging punctuation with the help of a little JS and CSS: http://webdesign.tutsplus.com/articles/getting-the-hang… by @jimniels
-
@designerdepot
This is what "hanging punctuation" is http://depot.ly/uCilX
-
@HugoGiraudel
-
-
-
Quick Tip: Name Your SASS Variables Modularly
-
@csswizardry
@robinrendle This is a pretty decent article http://t.co/0V5aYLkMDO :)
-
@chriscoyier
general -> specific $border-blue-light http://webdesign.tutsplus.com/tutorials/html…
-
@stefsull
Nice little tip on naming your Sass variables. http://t.co/1UYc5kmiLX Much of it is similar to what I do. Good ideas.
-
@joshbroton
I agree with this @nettuts article 100%. Name your Sass variables general -> specific. http://bit.ly/128yjaq #maintainability
-
@csswizardry
-
-
-
Bring Your Forms Up to Date with CSS3 and HTML5 Validation
-
@DesignerDepot
Bring Your Forms Up to Date With CSS3 and #HTML5 Validation - http://ow.ly/7wgur
-
@Jack_Franklin
Newly bookmarked: Bring Your Forms Up to Date With CSS3 and HTML5 Validation http://bit.ly/vzlYeF
-
@Twikito
Useful! — Bring Your Forms Up to Date With CSS3 and HTML5 Validation http://bit.ly/tbYEyA #HTML5 #CSS3
-
@DesignerDepot
-
-
-
-
Quick Tip: Using Web Inspector to Debug Mobile Safari
-
@SachaGreif
It’s high time I discovered you can inspect sites even inside the XCode simulator: http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip…
-
@chriscoyier
I didn't realize how easy it is to use Safari's (desktop) web inspector on real iOS devices. http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip…
-
@SachaGreif
-
-
-
-
-
-
-
-
