Use your < > keys to browse more stories

12 tools for the modern web designer

Adam is the co-founder and CTO of DesignCrowd.com, a logo, web and graphic design marketplace. Follow him on Twitter.

1

As web pages take on greater importance as the ‘face’ of many businesses, more sophisticated and powerful developer tools are being created to serve this growing demand. Building a website that maintains customer interest and has 100 percent uptime has become a challenge for many small businesses. Here are a few of the best web design tools that are easy to use and powerful.

Duo

Duo

Testing a responsive web design can be cumbersome. Duo makes it a little bit easier. It’s a browser that concurrently displays both desktop and mobile views. The widths can be easily adjusted.

Atom

atom

Atom is a text editor, but unlike others that require arcane knowledge to customize, Atom is built on Javascript, HTML, and CSS. This means that designers and front-end developers can tweak to their heart’s content, in a language they already speak.

Webydo

webydo

WYSIWYG has come a long way since the days of high school students selling horrible Dreamweaver sites to the local fish and chips joint. Webydo is one of the more recent offerings in this space, and claims to help designers work with a powerful engine to produce production-quality work without having to get too deep into front-end development.

Myth

myth

Myth is a Casting Style Sheet (CSS) preprocessor. CSS is a language used for describing the look and feel of a document. Myth lets you write CSS without worrying about browser and engine inconsistencies. It even helps you fill in browser prefixes. Very simple but powerful.

Glyphr

Glyphr

Pro font design apps are generally pricey. Glyphr Studio is a solution for the hobbyist or beginner, providing a free and accessible alternative with enough power to do some cool things. You can run it online or download the app — which is just an HTML file.

Dewey

Dewey

Dewey builds on other Chrome extensions that help you tag and search your bookmarks better. It is suited to the way designers think by letting you add screenshots to bookmarks - useful for searching for the specific font out of 326 you bookmarked last week.

Layrs

Layrs

Photoshop might be the seminal tool of the trade for most, but it isn’t without issues. Layrs adds some of those quality-of-life layer management features that help tame the garden of weeds that is Photoshop’s Layer section. It makes renaming easier, removes unused layer effects, deletes empty layers, rasterizes all smart objects, and so on.

Viewflux

Viewflux

Viewflux is a very cool feedback, prototyping and collaboration platform out of Romania. It helps you organize your projects, work on them with your teammates, create interactive prototypes, get feedback from your clients and iterate until the design is ready for developers. Viewflux is free while it’s in beta, and the release price is said to be low.

Stylify Me

Stylify Me

Stylify Me scans a webpage and generates a style guide based on it. It includes backgrounds and text colors, a rundown of the typefaces and font settings used, and even a rundown of dimensions for images on the page. This is great if you want to generate a quick and handy style guide for one of your own projects or quick projects for a friend.

Type-Finder

Type-Finder

We all know that selecting typefaces is part of the fun of design, but sometimes you just want to knock a page together quickly. Type-Finder asks five quick questions and spits out a list of potential fonts for each purpose.

Tiff

Tiff

When you’re choosing between two really similar fonts but want to make sure you’re choosing the one that’s most suited to the project, Tiff might come in handy. It’s a cool, quick solution that lets you compare any font in the Google Web Fonts library or those on your system.

Ink

Ink

Ink is a plugin for Photoshop that allows you to provide better documentation for developers. Ink helps you include all the information developers need to get started on their work.

Editing by Terence Lee

Facebook Conversation

comments