What’s new for designers, May 2013

The May edition of what’s new for web designers and developers includes new web apps, jQuery plugins and JavaScript resources, educational resources, wireframing kits, image tools, Photoshop extensions, web development tools, coding resources, and some really great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

 

LayoutIt!

LayoutIt! simplifies building your front-end code with Bootstrap, complete with a drag-and-drop interface. You get high-quality HTML5 code starting from any of their basic templates.

layoutit

 

Flat UI Colors

Building a flat UI? Flat UI Colors is a tiny app that makes it easy to grab the colors from Flat UI for your project.

flat ui colors

 

Hood.ie

Hood.ie is a platform for quickly building web apps. It’s for frontend-only web apps, and uses an open-source library that’s as simple as jQuery.

hood.ie

 

Little Nimbus

Little Nimbus offers robust web hosting plans starting at just $.99/month. They offer instant activation, CPanel and PHP, and 99.95% uptime. Plus, there’s a 7-day money-back guarantee.

little nimbus

 

Resemble.js

Resemble.js is an HTML5 canvas and JavaScript app that analyzes and compares images. Just drag and drop images into the app and it will highlight their diferences.

resemblejs

 

MixItUp

MixItUp is a CSS3 and jQuery filtering and sorting plugin. It uses jQuery to show, hid, or re-position your elements, and CSS3 for smooth animated transitions. It’s free for person and commercial use.

mixitup

 

Web Colour Data

Web Colour Data makes it simple to pull color data from any URL, complete with charts showing the prevalence of each color used.

web colour data

 

Userium

Userium is an interactive usability checklist that includes categories for user experience, the site’s homepage, accessibility, navigation, links, search, and more.

userium

 

WireKit

WireKit is a set of Photoshop shape layers for wireframing iPhone apps that comes in two unique styles, each of which has over 60 common UI elements.

wirekit

 

Creative Market Photoshop Extension

The Creative Market Photoshop Extension makes it possible to browse, search, and buy Creative Market assets right from inside Photoshop.

creative market

 

The Productivity Manifesto

The Productivity Manifesto is a free ebook filled with tips for becoming way more productive. Just sign up for the free newsletter for a link to download the PDF.

productivity manifesto

 

Froont

Froont is a visual responsive design app with a drag and drop interface. It runs in your browser and even lets you share fully functional HTML and CSS with your developer instead of static images.

froont

 

Billy Madipsum

Billy Madipsum is a lorem ipsum generator that generates random Billy Madison quotes rather than the standard Latin. All you have to do is choose the number of words or characters and click “Call the zoo!”

billy madipsum

 

Nanoc

Nanoc is a static site builder that works for building everything from a small personal site to a large corporate site. It even works for blogs.

nanoc

 

Ruhoh

Ruhoh is a static blogging platform built on a number of existing technologies. It uses Markdown for writing, Mustache for templating, Git for file management, and more. It’s open source and can be hosted or self-hosted.

Ruhoh

 

TowTruck

TowTruck, from Mozilla Labs, makes it easy to collaborate on your website in real-time. It’s implemented in JavaScript, and works with existing web pages.

twotruck

 

Perspective Mockups

Perspective Mockups is a set of Photoshop actions for creating more interesting mockups for presenting your ideas. The results are, apparently, crisp and unique.

perspective mockups

 

Scope

Scope is an easy way to create a web-based version of any email to share with others. It’s free and can be used with any webmail.

scope

 

Packery

Packery is a bin-packing layout library that can be used for a variety of layout types, including masonry-style layouts as well as more meticulous layouts (and even ridiculous ones).

packery

 

Wired 1.0

Wired 1.0 is a wireframe kit for Sketch that also comes in .png and .eps for use with other programs.

wired 1.0

 

Designer School

Designer School is a regularly-updated online course that teaches more than just the basics of web development. You can join the mailing list for updates, or just check the website.

designer school

 

Slid.es

Slid.es is free online presentation creator that makes it easy to share your work. There are some premium paid features, too, including private decks, offline presentations, and more.

slides

 

Shame.css

Shame.css is a special stylesheet reserved just for your CSS hacks, quick fixes, and questionable code, so you can keep it out of your main codebase and hopefully isolate and fix it easier.

shame.css

 

Gallery

Gallery is a pure CSS image gallery that doesn’t use a single script. It even offers autoplay and comes in prefixed and unprefixed build versions.

gallery

 

Magnific Popup

Magnific Popup is a free responsive jQuery lightbox that focuses on performance and user experience. It’s light and includes retina display support.

magnific popup

 

Ghost

Ghost is a free, open source, simple blogging platform. It puts the focus squarely on publishing and your content.

ghost

 

LivIcons

LivIcons is an animated icon pack that includes both animated and static images. It uses brand new animation methods, and of course they’re scalable and customizable.

livicons

 

Cylburn (name your price)

Cylburn, from Lost Type Co-Op, is a semi-connected script font based structurally on Roundhand, but with a pointed brush and restrained tension.

cylburn

 

Fairview (name your price)

Fairview is a condensed sans serif that comes complete with small cap alternates. It was inspired by 20th century industrial typography.

fairview

 

Style Script ($69)

Style Script is an upright script type family with a variety of looks ranging from casual to formal. It includes over 1275 glyphs, with eight weights and styles.

style script

 

Trend Hand Made ($19)

Trend Hand Made is a layered font with a basis in sans and slab fonts. It comes in over twenty weights and styles, for a huge variety of design possibilities.

trend hand made

 

Benito ($20)

Benito is a proportional, geometric woodtype-style font family in six styles with italics.

benito

 

Tomahawk (free)

Tomahawk is a free display typeface that’s free for personal use. It includes standard Latin characters, as well as a selection of Norwegian characters.

tomahawk

 

Valkyrie (free)

Valkyrie is a free type family designed for fashion brands and designers. It’s a set of serif fonts with geometric elements in a modern style.

valkyrie

 

Red Dawn (free)

Red Dawn is a free typeface based on camping and trailblazing marks. It’s an all caps display font, with a very bold look.

red dawn

 

Agilis (free)

Agilis is a stylized serif typeface that includes 394 glyphs, ligatures, and automatic arrows.

agilis

 

Idealist Sans (free)

Idealist Sans is a free type family that includes regular and light weights. It was designed by Elena Kowalski.

idealist sans

Know of a new app or resource that should have been included but wasn’t? Let us know in the comments.

  • http://twitter.com/CSSMatter CSS Matter

    Thanks for awesome list!

  • http://profiles.google.com/lightamatch LIGHTAMATCH

    This might be my favourite list to date. Great post!!!

    Although ‘Billy Madipsum’ site has a better layout, it doesn’t beat ‘Samuel L Ipsum’ (http://slipsum.com) :-) Too funny.

  • http://twitter.com/evadeboncoeur Eric Vadeboncoeur

    Wow nice roundup, thanks!

  • leighjeffery

    Fabulous list…. spent 2 hours on it, feel much smarter now;) I have 2 quick questions if someone might help me out? 1. What kind of script is running that cool link roll over you have on here? and where can i get it? 2. Your external links don’t open a new tab in my browser(chrome) i have to right click to get one.. super annoying.<– that is not a question.. sorry.

    Thanks again for all the great resources!! LOve:)

  • Amish Sharma

    Wow Fabulous list… Thanks for the Awesome informative information post… Really it’s very useful…

  • http://www.337design.com/ Kiesha Canori

    Really nice one thanks for providing list of news related to designers !!!

  • Ranish Chirayil

    Thanks for the Great list!!!

  • http://twitter.com/TechWenchCOM TechWench.com

    Thanks for the great list. Looking forward to more of these!

  • http://twitter.com/SentivaWeb Sentiva

    Wow – what an amazing list – my only problem is that there’s so many things it’s going to take ages to check them all our properly. My faves are the wirekit and designer school, but am still dubious of cheap hosting and automatically generated code of any kind…

  • http://www.designfacet.com/ Sean

    Great collection and resource. Thanks for sharing.

  • http://www.gathercontent.com/ James Deer

    Great list but you forgot GatherContent! :)

    http://www.gathercontent.com — It’s a great way to gather content from clients.

  • Alastair Brian

    Most of them are using white color which makes them creative. Its really hard to use white without giving an empty look.
    My page – http://www.fmemodules.com/9-prestashop-custom-development.html

  • http://themedia3.com/ Media3

    cool that is a good and huge list..

  • http://www.blackbookoperations.com/ Black Book Operations

    That is a whole lot of goodies this time, nice!

  • http://twitter.com/tbadaczewski Tim Badaczewski

    http://xoxco.com/packagr/ just started accepting sign-ups I think that product is pretty cutting edge and worth a mention!

  • http://twitter.com/adamfathony adam fathony haris

    Thanks !! supebbbb list

  • http://www.facebook.com/nasirift Nasir Iftekhar

    what a beautiful and elegant design you have on your website. I am very glad to see something so sleek especially you post title image and its heading style on image is so well designed…Just so smashing I really don’t wana say anything about the post. Its all about your design is in my mind right now. Congrats.

    Nasir Iftekhar
    C.E.O

    Blog of The World

  • http://www.ivlivs.com/ ivlivs

    Fantastic list! Thank you very very much…

  • http://designpin.co/ The DesignPin Blog

    Interesting list from which I personally appreciate the perspective mockup.

  • http://janbarborik.cz/ Jan Barbořík

    Thanx for tips!