We utilize numerous tools and services on Tuts+, as well as teach how to use them through regularly published educational material on this site. Here are our top recommended resources for web design professionals, which is put together by our editorial staff.
Note that some of the links below are affiliate links. This means we'll earn a small commission if you purchase that particular tool or service. If you do, we thank you for supporting Tuts+.
Adobe Creative Cloud is an ongoing membership that lets you download and install any of the Adobe Creative Suite applications. You also get online services for file sharing, collaboration, and publishing. Over time the cost of membership adds up, but it’s a great way to get all your needed tools for a low initial investment cost. With this service you’ll always have the most recent release of Adobe’s top design software. Learn more over at Adobe.
With this Photoshop plugin you can create accurate columns, rows, midpoints, and baselines. This is a great tool for setting up your design grids in Photoshop. Grids can use multiple types of measurements. Best of all it’s free. Learn more over at GuideGuide.
CSS Hat will accelerate your web design workflow. With this highly useful Photoshop plugin you can generate CSS3 based on your Photoshop layer styles. It generates valid, nicely coded CSS directly from your PSD layers in Photoshop. This plugin makes it super simple to translate your design from Photoshop to your browser quickly. Learn more over at CSS Hat.
Get started with our Fireworks Pro Series. Adobe Fireworks CS6 software helps you create beautiful designs for websites and mobile apps in a snap. Produce wireframes, mockup your designs, deliver vector and bitmap images, and interactive content for popular tablets, smartphones, and websites. Learn more over at Adobe.
Balsamiq is a wireframing app that lets you create web and screen layouts with a hand drawn feel. By presenting wireframes in a sketchy style it doesn’t intimidate clients. This allows them to focus on the placement of key items in the design. It’s quick to work with and easy to implement changes in. Learn more over at Balsamiq.
Coda is one of the favorite code editors of many professional web designers. It has a familiar Mac app feel for visual creatives, while providing robust code editing features. Coda 2 has added exciting new features, such as: code folding, smart complete, better file management, and more. Learn more over at iTunes.
Transmit 4 is the ultimate FTP, SFTP, WebDAV, Amazon S3 file transfer client on the Mac. It’s fast, has a handy two-pane view, which is easy to work with, and allows for multiple-connection transfers. Learn more over at iTunes.
Sublime Text is a sophisticated text editor for code, markup and prose. It boasts a slick user interface and amazing performance. It’s feature set is robust, with split editing, the ability to go to anything, and distraction free mode. Learn more over at Sublime Text.
TextExpander will save you time, massive amounts of time. With this helpful app you can save your most used code snippets to quickly drop into your latest client project. Also, save whole email templates, signatures, or snippets of frequently used text. TextExpander can drop any text you set up into any program you’re working on. Learn more over at iTunes.
Gradient helps streamline the creation of CSS3 Gradients. It takes the tedious process of creating CSS3 gradients, which makes most web designers cringe, and makes it easy. Learn more over at iTunes.
With Typekit you can add a line of code to your pages and choose from hundreds of web fonts. Simple, bulletproof, standards compliant, accessible, and totally legal. With Typekit you can expand your web design font choices dramatically. Learn more over at Typekit.
With typecast you can create better web typography with less hassle. Quickly style type in the browser and check for readability, rendering and beauty as you work. While you design intuitively, the browser makes things semantic, by creating code that matches every design decision. Learn more over at Typecast.
If you’re working as a freelance graphic creative, then your business will benefit from ConceptShare. This cloud service helps creatives get client feedback on visual assets. It improves the client approval process and allows you to deliver polished results on time and on spec. Learn more over at ConceptShare.
BrowserStack helps cut down development time. It offers live testing of other browsers through your browser. You get instant access to all browsers across platforms. Forget clumsy virtual machine and mobile setup. Learn more over at BrowserStack.
With FormStack you can create forms online intuitively and with ease. Collect data through signup forms, surveys, order forms, event registrations, and more. With FormStack your collected data can integrate with popular web applications. Sign up now to start building your own forms. Learn more over at FormStack.
With Polldaddy you can create surveys, polls, and quizzes in minutes. Get to know your audiences opinions. Collect responses via your website, e-mail, iPad, Facebook, and Twitter. Generate and share easy-to-read reports. Learn more over at Polldaddy.
Content Management Systems
ExpressionEngine is an elegant content management system. It’s flexibility and security, combined with its world-class support, is a recipe for online success. It combines powerful CMS tools with quality support. Learn more over at ExpressionEngine.
LightCMS is designer friendly, easy to use, and work with. Top-tier hosting is built into LightCMS so there is nothing to install, upgrade or maintain. They also have eCommerce functions built in. Learn more over at LightCMS.
Squarespace 6 is the most recent update of this content management system and inclusive hosting solution. This is an optimal solution for clients that want to run their websites with little support needed. They have excellent template options and a layout engine that allows you to create custom page setups with ease. All their themes are mobile friendly. Learn more over at Squarespace.
WordPress is web software you can use to create blogs and full websites. It’s a free and extremely popular content management system solution. There are truckloads of quality WordPress themes to choose from, both free and Premium options. Learn more over at WordPress.
Media Temple provides reliable, scalable web hosting and 24/7 live support. They are known for having a rock solid technical setup and have an excellent reputation. Learn more over at Media Temple.
WpEngine provides hassle-free WordPress hosting. It’s fast, scalable, secure and offers fully managed support. If you’re setting up a WordPress site for your clients, then WpEngine is an industry leading choice for hosting. Learn more over at WpEngine.
Stock Themes, Fonts and Graphics
Placeit is a mockup generator; an online tool which allows you to embed your own designs (be they UI designs, logos, other branding assets) into presentation environments. For example, you might have an app design which you’d like to place within an iPhone on a coffee table, or superimpose your logo onto a model’s shirt. Perhaps you’d even like to see your designs embedded into stock videos (seriously, you have to take a look at the videos). With almost 3,000 templates and counting, Placeit is sure to have what you’re looking for.
At ThemeForest you can buy and sell HTML templates as well as themes for popular CMS products like WordPress, Joomla and Drupal with prices ranging from just $5 up to $40. GraphicRiver is an Envato Marketplace and sister site to Webdesigntuts+. It’s our largest, most active marketplace and a great community to get involved with. Learn more over at ThemeForest.
At GraphicRiver you can buy and sell royalty-free, layered Photoshop files, vectors, icon packs, Adobe add-ons and design templates for just a few dollars. GraphicRiver is an Envato Marketplace and sister site to Webdesigntuts+. The site is home to a passionate community of graphic designers and illustrators. Learn more about GraphicRiver.
At PhotoDune you can buy and sell royalty-free photographs and images starting at just $1. PhotoDune is an Envato Marketplace and sister site to Webdesigntuts+. Items are priced on the size/megapixels of each file. If you need quality, affordable stock photos for your next web design project, then this is a great resource to tap into. Learn more about PhotoDune.
MyFonts is the world’s largest font collection available on one easy-to-use website. They pull together fonts from both large font companies and boutique outfits. Quality fonts are added daily. If you’re looking for a new font for your next client project, this is the site to find it on. Learn more over at MyFonts.
The Fonts.com store from Monotype Imaging offers more than 150,000 font products for you to preview, purchase and download. Monotype has been around for ages and is a leading font producer. You can also learn about new typeface releases and discover typographic tips and techniques on their site. Learn more over at Fonts.com.
Tools & Gear
These French orange notebooks have a cult following, yes creatives do fall in love with their tools. These economical pads are one of our favorites. We love to run our fingers across their grids, smooth paper and uniquely scored covers. Rhodia has been carried by artists since the 1930s, so using these feels like you’re taping into a rich creative legacy. Learn more about these notebooks over at Amazon.
We wouldn’t go so far as to say you need a stylish backpack or case, but who doesn’t want one. Incase makes some of our favorites. They make trend setting bags and cases that are perfect for carting your MacBook laptop, storing your creative gear, iPad, or iPhone. Learn more over on Amazon.
Adobe Ideas is your mobile digital sketchbook, letting you capture and explore ideas anywhere you go. This mobile app lets you easily sketch using vectors, re-use specific colors using the Eyedropper tool, save and use multiple color themes. Adjust layer opacity, move, rotate and scale each layer independently. Learn more about this mobile app at iTunes.
Procreate is a great sketchbook and drawing app for your iPad. It’s fast to work with so you can get your ideas down quickly. It has a wide array of brushes to choose from, studio grade tools, and feels intuitive to draw with. Learn more about this app at iTunes.
Autodesk SketchBook Pro for iPad is a professional-grade paint and drawing application. Using the same paint engine as its desktop counterpart, SketchBook Pro delivers a complete set of sketching and painting tools. This popular sketching app has lots of fans. It’s a great choice for drawing on your iPad. Learn more about this app at iTunes.
If you own an iPad and are a graphic designer, then you’ll love this beautiful reference app. FontBook is the world’s most comprehensive reference on digital typography. It documents the work of 118 renowned international type foundries, representing close to 1650 type designers, constituting 35,000 fonts from 8050 font families. The FontBook app presents this selection through 700,000 typeface samples which can be intuitively spread out, searched, layered, moved, scrolled and combined like a collection of maps – truly awesome. Learn more about this app at iTunes.
Transform your images with core Adobe Photoshop features in this app designed for tablets. You can combine images, apply professional effects, and share results from the convenience of your iPad. Use popular Photoshop features designed for the tablet such as layers, selection tools, adjustments, and filters to create professional images. Learn more about this app at iTunes.
iA Writer is a stripped down writing app that keeps your focus solely on your thoughts. It’s developed by typography hero Oliver Reichenstein. This app has sold well over 400,000 copies and has helped students, journalists, and bestselling authors to find more pleasure in working with text. It’s freakin’ awesome. Learn more about this app at iTunes.
Diet Coda is a funky iPad version of popular code editor. There are some limitations with the app, but it works well for implementing quick live code changes to your sites while on the go. There are some nice features built in such as AirPreview which allows you to use the iPad to preview your Coda work from your laptop. Learn more about this app at iTunes.
The wireframing king on the iPad. Using simple multitouch gestures, draw shapes, drag in objects, and style everything until it’s just right. This app is loaded with functionality for planning the presentation of information clearly and beautifully. Learn more about this app at iTunes.
Gusto is a code editor and FTP client for the iPad. Gusto allows you to open multiple documents in tabs for faster navigation. After editing, preview your document locally to quickly see your updates and then publish them live. Learn more about this app at iTunes.
Textastic boasts a fast, versatile code editor supporting syntax highlighting of over 80 programming and markup languages. It can connect via FTP, FTPS (FTP over SSL), SFTP (SSH connection), WebDAV and Dropbox clients. It offers code completion, find and replace, as well as many more features. Learn more about this app at iTunes.
Koder is a code editor for the iPad with a simple, efficient interface. It sports many features including syntax highlighting, snippet manager, tabbed editing, find and replace code, editor theme, remote and local files connections, and many more. Learn more about this app at iTunes.
Adobe Proto is an iPad app for designing interactive wireframes, prototypes for websites, and mobile apps. Insert interactive wireframe components from the component toolbox, including menus, tabs, accordions, and more. This app allows you to quickly capture your design idea and test out basic design usability. Learn more about this app at iTunes.
Jot! is a simple, whiteboard app that let’s you draw your ideas, take quick notes, and create rough wireframe plans on your iPad. You can collaborate in real time, share ideas via email, or save them as photos for future reference. Learn more about this app at iTunes.
Penultimate gives the feel and look of writing on paper with a bold gel pen as you capture your next visual idea. It’s fast, tactile, and offers an infinite number of pages. You can store pages in notebooks, share them as exported PDF’s, and back through Dropbox or Evernote. Learn more about this app at iTunes.
SketchyPad is a wireframing app that will assist you with website sketching and app interface making. It comes with handing stencils to quickly build your wireframe and interface features. You can link between your mockups and export to Balsamiq format. Learn more about this app at iTunes.
Mocking Pad is a feature packed wireframe sketching app for the iPad. It’s made for collaboration, allowing files to be shared via email, Dropbox, or shared via a WiFi connection. It includes a large selection of prebuilt stencils for web, desktop and mobile. Learn more about this app at iTunes.
Live Wires is a simple, fast way to wireframe and prototype your iPhone and iPad app concepts. Create useable experiences for your users. Get a real feel for whether your concept works before development begins. Create interactive interfaces for both iPad and iPhone, utilize a huge glyph library, make use of scrollable view controls, and more. Learn more about this app at iTunes.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post