Here Are The Hard Skills You Need To Succeed As A New Designer

Need HTML Prototyping Resources? Here’s My List.

Many UX Designers are prototyping their designs using frameworks like Twitter Bootstrap, and building these prototypes has never been faster. The frameworks support responsive design, so you can develop for different breakpoints without breaking your head on the table.

Ideally, these frameworks should speed up front-end development if teams figure out out the right workflow. I’ve found these tools to be invaluable to speed development, and illustrate concepts to developers.

Here’s the list I have compiled, with descriptions from Wikipedia. It’s my list, so don’t be offended if you aren’t on it.

Twitter Bootstrap

A free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates font typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions. It is the most popular project in GitHub and is used by NASA and MSNBC among others.

Resources

LESS

A dynamic stylesheet language designed by Alexis Sellier. It is influenced by Sass and has influenced the newer “SCSS” syntax of Sass, which adapted its CSS-like block formatting syntax.

Resources

  • LESS
    The downloadable code.
  • LESSHat
    LESS components (called Mixins) that make CSS development easier.
  • CodeKit
    An application that turns LESS into compiled CSS.

Open Web Fonts

Fonts that you can declare in CSS3 and are free to use. They include icons that look terrific on Apple Retina displays. Here are my favorites.

D3 JS

A data display framework can be used in conjunction with other extensions to create flexible charts that can be updated dynamically. The language shares a lot of similar elements with jQuery.

Resources

  • D3
    The initial framework.
  • NVD3
    A list of functions that creates some of the most common data visualizations.
  • Rickshaw
    A list of functions that creates some time-based data visualizations.

Angular JS

An open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

Resources