By Jacob Gube

JavaScript is a powerful client-side scripting language used in many modern websites and Web applications. In the hands of a skilled Web developer, JavaScript can enhance the user’s experience of the website and provide rich interactive components and features. But even though syntactically simple in nature, JavaScript is often difficult to author because of the environment it runs in: the Web browser. JavaScript’s popularity is evident in emerging technologies, such as Adobe AIR, which use it as a supported language for creating desktop-based applications.

Below, you’ll find 50 excellent tools to help you achieve various tasks involved in authoring JavaScript code. You’ll find useful tools to speed up your coding processes, including debugging tools to hunt down places where your scripts break, unit testing and validation tools to test your scripts in various situations, security vulnerability scanners and code optimization tools to make sure your scripts are light as a feather.

You’ll also find a few new and alternative JavaScript and AJAX frameworks to help you explore options beyond the big names (i.e. MooTools, jQuery, YUI, Dojo, Prototype), in addition to useful scripts to help you accomplish a host of design and development tasks related to JavaScript.

Also, be sure to check out the following related posts:

• 75 (Really) Useful JavaScript Techniques
• 60 AJAX- and Javascript Solutions For Professional Coding
• jQuery and JavaScript Coding: Examples and Best Practices
• 50 Extremely Useful And Powerful CSS Tools

JavaScript/AJAX Authoring Tools

• jQuery UI
  The jQuery UI allows you to design custom user interfaces for Web applications using the jQuery library. With jQuery UI, you can reduce the amount of code you write for common rich interactive features and website widgets. Be sure to check out the jQuery UI Demo page, which showcases some of the things you can accomplish using jQuery UI.

  

• Google Web Toolkit
  The Google Web Toolkit (commonly referred to as GWT) is a framework for developing complex and fully featured AJAX-based Web applications. You write front-end code in Java that is later compiled into optimized and cross-browser-friendly JavaScript. GWT puts the focus on Web application development by reducing the need for testing and debugging JavaScript for browser quirks.
• Jx
  Jx is a JavaScript library for creating graphical user interfaces written on top of the MooTools framework. Jx is distributed with an MIT license and is well documented. Numerous examples as well as thorough and well-organized API documentation is available on the website.

  

• Freestyle Webtop Toolkit
  Freestyle aims to reduce the complexity and time involved in deploying Web-based user interfaces by eliminating the separation of client-side and server-side development. With Freestyle, you focus on programming logic and UI design, and it handles the rest (i.e. cross-browser compatibility and DHTML and AJAX development).

  

• Script#
  Script# is an AJAX and JavaScript authoring tool that allows developers to write in C#. It also allows .NET developers to leverage their existing knowledge and provides powerful tools associated with the .NET framework.

  

• Aptana Jaxer
  Aptana Jaxer is the first “AJAX server” that allows developers to use their AJAX, HTML, JavaScript and DOM knowledge to create fully featured server-side-powered Web applications. With Jaxer, you can even write database queries in JavaScript syntax. Jaxer integrates very well with popular JavaScript libraries such as jQuery, Dojo and Ext JS.
• JS Regex Generator
  JS Regex Generator helps JavaScript developers write Regular Expressions for matching strings of text. This is commonly done for text-format validation, such as when checking if inputted text has the correct date and email format.

  

• WaveMaker
  WaveMaker is open-source software for complete Web application development and deployment. You can find a host of demo applications built and deployed using WaveMaker on the Demo Applications page.

  

Documentation Tools

• JSDoc Toolkit
  JSDoc Toolkit makes code documentation a breeze. Written in JavaScript, it helps developers automatically generate templates for JavaScript comments. It’s a great tool for managing large-scale applications developed by teams of developers who have different coding styles.
• jGrouseDoc
  jGrouseDoc is an open-source project distributed through Google Code under a modified BSD license. It lets developers document and manage their code comments using a format similar to Javadoc’s.

  

JavaScript Debugging Tools

• Firebug
  Firebug is an extremely popular and well-regarded front-end debugging tool. It has all the features you’d expect from a JavaScript debugging tool, such as the ability to set breakpoints in your code so that you can step through your script. For people developing outside of Mozilla-based browsers, check out Firebug Lite, which is a JavaScript library you can include in your Web pages to access some of the features of Firebug.

  

• Venkman JavaScript Debugger
  Venkman is Mozilla’s JavaScript debugger and an add-on for Gecko-based browsers. Venkman is a robust and fully featured JavaScript debugging environment, with a host of useful features and options, such as code profiling to inspect your script’s performance.

  

• Drosera
  Drosera is an excellent debugging tool for Safari and WebKit-based browsers.

  

• Opera Dragonfly
  Opera Dragonfly is a robust debugging environment for the Opera browser. Dragonfly allows you to view and inspect errors, debug your scripts and inspect and edit the DOM and CSS on the fly.
• NitobiBug
  NitobiBug is a browser-based JavaScript object logger and inspector. It runs on numerous browsers, including IE, Safari, Opera and Firefox. It is a powerful tool in helping developers build rich interactive AJAX applications.
• DebugBar
  DebugBar is an in-browser front-end debugger for Internet Explorer. Much like its Firefox counterparts, it has a robust set of features, such as DOM, JavaScript and cookie inspection. Be sure to check out Companion JS, which is a JavaScript debugging library to be used alongside DebugBar.

  

• Internet Explorer Developer Toolbar
  Similar to Firebug, IE Developer Toolbar is an in-browser tool to help you debug front-end code in Internet Explorer. It’s especially handy as a debugging and inspection alternative to Firefox when you’re developing and testing in IE.

JavaScript Testing and Validation Tools

• Test – JavaScriptMVC
  Test is a JavaScriptMVC component for easily setting up automated unit testing for JavaScript code. It lets you effectively test for DOM events (such as a key press or form submission), thereby lessening development time, oversight and errors associated with manual testing.

  

• JsUnit
  JsUnit is a popular unit testing framework for JavaScript code. It’s a JavaScript port from another unit testing framework for Java called JUnit. JsUnit allows you to write test cases and provides tools for automated code execution.
• JSLint
  JSLint is a Web-based tool for verifying your JavaScript code for errors. It has a ton of features and settings that you can use to customize verification algorithms to suit your needs.

  

• Crosscheck
  Crosscheck is an open-source testing framework for JavaScript. Crosscheck is unique because it works independent of environment: you can run tests outside of a Web browser, which avoids discrepancies that occur when testing in various browsers.
• YUI Test
  YUI Test is a suite of testing utilities that’s part of the YUI library developed by Yahoo!. It has numerous features, such as easy creation of test cases through an intuitive syntax, advanced failure detection and the ability to organize test cases by grouping them into test suites.

  

• J3Unit
  J3Unit is an excellent object-oriented unit-testing framework for JavaScript. It gives you a host of options for writing automated test cases and has three modes: Static Mode, Local Browser Mode and Remote Browser Mode.
• Regular Expression Tool
  The Regular Expression Tool is an online utility that allows you to test your RegEx code against a sample test. It’s a handy tool to have around when you want to quickly test the efficacy of your regular expressions in a variety of example texts.

  

• JavaScript Regular Expression Tester
  This is another handy tool for testing regular expressions within the Web browser.

  

• JSLitmus
  JSLitmus is a lightweight tool for creating JavaScript benchmarks and performance tests, using an intuitive API.

  

Security Tools

• AttackAPI
  AttackAPI is a framework for writing test cases of potential JavaScript exploits and vulnerabilities.
• jsfuzzer
  jsfuzzer is a fuzzing tool to help you write (and test for) attack vectors in JavaScript.

New and Alternative JavaScript and Ajax Development Frameworks

• Clean AJAX
  Clean AJAX is an open-source framework for creating AJAX-based applications. Check out the demo page to see it in action.

  

• SAJAX
  SAJAX is an excellent toolkit for developing AJAX-based applications. It supports PHP, Perl and Python.

  

• JavaScriptMVC
  JavaScriptMVC is a Web application framework based on the MVC software architectural pattern. It speeds up Web development processes and lays down best practices, maintainability and standards as principles in a project’s development.
• qooxdoo
  qooxdoo is a simple and intuitive AJAX application framework. Be sure to check out the Demo Browser, a Web-based application that allows you to view demos of qooxdoo at work.

  

• SimpleJS
  SimpleJS is a small and lightweight JavaScript library that provides developers with useful JavaScript functions for working with AJAX.

Image Manipulation and Graphing

• Reflection.js
  Reflection.js automatically adds reflections to your images unobtrusively. Also check out instant.js, a similar script that adds an image border and tilts images on a Web page.

  

• typeface.js
  typeface.js allows you to embed custom fonts on Web pages, freeing you from having to create images for HTML text.
• CanvasGraph.js
  CanvasGraph.js is a simple JavaScript library that lets you construct bar, line and pie charts using HTML’s canvas element.

  

• flot
  flot is a JavaScript library for plotting data and has been tested to work in most modern Web browsers.

  

• JavaScript Diagram Builder
  The JavaScript Diagram Builder is a JavaScript library that consists of a variety of objects and functions for constructing diagrams.

  

• The Dojo Charting Engine
  The Dojo Charting Engine is a robust utility for creating components for data visualization, written on top of the Dojo Toolkit.

Useful Utilities and JavaScript Scripts

• Processing.js
  Processing.js is a JavaScript port of Processing, the open-source data-visualization programming language. Check out examples that use Processing.js.
• AJAX Libraries API
  Google’s AJAX Libraries API allows you to serve popular JavaScript libraries using its CDN, which reduces the server load on your website.
• DamnIT
  DamnIT is an error-reporting service that allows you to gather feedback from beta testers after they’ve encountered a JavaScript error. This is perfect for live production testing and as a monitoring tool that helps you track errors and weak spots in your Web applications.
• ie7-js
  ie7-js is a JavaScript library that forces Internet Explorer to behave like a standards-based browser (like Firefox or Opera). It automatically fixes IE browser quirks and deviations from Web standards, as in the case of its box model.
• Lazy loader
  Lazy loader is a jQuery plug-in that delays the loading of images so that text content can load first, thereby making image-heavy pages load faster.

JavaScript Code Optimization and Minification Tools

• JS Minifier
  JS Minifier is a Web-based tool for shrinking your JavaScript code to make it as lightweight as possible.

  

• JSMIN
  JSMIN is a popular JavaScript minifier that removes unneeded characters (like spaces and tabs) and comments, thus reducing your script’s file size.
• YUI Compressor
  The YUI Compressor is another well-regarded JavaScript code-optimization tool developed by Yahoo!.
• Scriptalizer
  Scriptalizer is a helpful online tool for combining JavaScript files to reduce HTTP requests.

  

• ShrinkSafe
  ShrinkSafe is a compression tool that reduces JavaScript file sizes.
• SlickSpeed Selectors Test
  SlickSpeed is a Web page for comparing the performance of the DOM object selection of various popular frameworks like MooTools and jQuery.

  

About the Author

Jacob Gube is a Web developer, designer, and founder of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.

(al)

There are many useful Web development tools that integrate in your browser. These in-browser tools are commonly known as add-ons or extensions. Though add-ons and extensions aren’t just for Web development, many of them out there are designed specifically for Web developers. In-browser tools vary greatly in the jobs they perform; for example, some of them help you diagnose issues with CSS, HTML and JavaScript, while others evaluate the accessibility of your website.

In this article, we explore some of the most popular and useful in-browser Web development tools. You’ll find tools for popular Web browsers like Firefox and Internet Explorer. Whether you need to debug and inspect your HTML, inspect HTTP headers, access FTP source files, evaluate accessibility or just figure out what color a Web page element is, you may find a variety of tools discussed here useful.

Firebug

Firebug is an extension for the Mozilla Firefox browser that allows you to debug and inspect HTML, CSS, the Document Object Model (DOM) and JavaScript. Though it has many strong features, it’s most known for revolutionizing the way developers debug and profile JavaScript code.

For example, before Firebug, many developers would use the alert() function to see what a variable contains or to find what line the code breaks. With Firebug enabled, you’re told specifically what the error is and which line it comes from. Firebug is an excellent tool for AJAX application developers because it lets you explore and perform on-the-fly edits on the DOM to see what happens when you manipulate Web page elements after a user action.

Aside from its popular JavaScript and DOM functionalities, Firebug can also log network activity to allow you to see detailed results of HTTP connections, inspect and edit HTML on the fly and debug and visualize your CSS.

Further Reading

• Debug and tune applications on the fly with Firebug
• An In-Depth Look At The Future of JavaScript Debugging With Firebug
• Build Better Pages with Firebug

Web Developer

The Web Developer extension (for the Firefox, Flock and SeaMonkey Web browsers) is an add-on that adds a tool bar with a menu of options for debugging and inspecting Web pages. It has a ton of features, my favorite being the View CSS Information option (CSS >> View Style Information, or Control + Shift + Y on Windows) which makes a page element clickable and shows you CSS selectors that affect that particular page element. It’s helpful for exploring and understanding large CSS files and projects that you’re unfamiliar with (such as a new open-source content management system).

It has built-in options for syntax validation for popular Web services, such as W3C’s CSS Validator and HiSoftware’s Web Content Accessibility Report, for your convenience. It has many other useful features, such as disable options for CSS, JavaScript and images, to test for degradation and progressive enhancement; a Forms menu with options for working with Web forms; Display Div Order and Display Block Size options to help you visualize the layout; and so much more.

YSlow

YSlow is a Firefox extension created by Yahoo! developers that integrates with Firebug (therefore you need to have Firebug enabled for it to work). YSlow analyzes a Web page for front-end performance and, in its simplest usage, gives you a letter grade (A being the best and F being the poorest) for each of the best practices for speeding up  your website.

YSlow also allows you to inspect in detail things that are essential for a high-performance website. For example, the Stats view gives you the total size of a Web page and a summary of items that are loaded when the Web page is requested (i.e. style sheets, JavaScript files, Flash objects and images), so that you can hunt down the bottlenecks that cause a Web page to load slowly.

The Components view outlines every single component of a Web page in tabular format and allows you to inspect it to see attributes such as size, expiration date (for cached files), whether it uses server-side compression (Gzip) and response time (how long the component took to load).

Further Reading

• What the 80/20 Rule Tells Us about Reducing HTTP Requests
• Maximizing Parallel Downloads in the Carpool Lane
• AJAX performance analysis
• Yahoo’s Problems Are Not Your Problems: counter-arguments for some of the rules developed by Yahoo!, such as penalizing you for not having a Content Delivery Network.

Internet Explorer Web Developer Toolbar

If you need similar functionality to that of Firebug and Web Developer for Firefox, but want to debug, inspect and tune your Web pages and applications on the Internet Explorer browser, check out the Internet Explorer Web Developer Toolbar. The IE Web Developer Toolbar, when enabled, opens a toggle-able pane located at the bottom of the Web browser, giving you access to many helpful options for exploring Web page components.

For example, you can experiment to see how page elements work by editing the Web page’s DOM and HTML directly in the browser, allowing you to quickly change and edit DOM elements to see what happens when you perform certain actions or modify certain parts of the code. You can also debug, test and inspect JavaScript with the IE Web Developer Toolbar, giving you options for setting breakpoints, seeing the call stack and exploring variable attributes.

It has a ton of other helpful features, such as selectively disabling IE settings (to see how your Web pages degrade in IE); the ability to view the HTML and CSS source of any Web page with syntax-highlighting; and an in-browser ruler to help you measure things on a Web page.

Further Reading

• 15 Seconds: An Introduction to the Internet Explorer Developer Toolbar

Fiddler Web Debugger

Fiddler is an Internet Explorer extension that analyzes and profiles a Web page’s HTTP traffic. If you’ve ever wanted to know exactly what happens when a client requests a Web page, Fiddler is the tool that’ll help you do the job. The HTTP Statistics view exposes all components and files required to generate a particular page, giving you details such as the total number of HTTP requests, total page weight, HTTP response headers and cache expiration.

Fiddler permits you to set up breakpoints, allowing you to step through and edit HTTP traffic (to see how it would affect your Web page), a useful feature for analyzing AJAX-based interaction and potential security flaws in a Web application. Perhaps what makes Fiddler so powerful is its extensibility, allowing you to create your own scripts (or import other developers’ scripts) to perform certain tasks or make interface modifications to the extension itself.

Further Reading

• Fiddler PowerToy – Part 1: HTTP Debugging
• The Fiddler User Interface
• Fiddler Demonstration Videos
• Using Fiddler with non-Internet Explorer Browsers

DebugBar

DebugBar is a debugging in-browser extension for the Internet Explorer browser. It has many helpful features, such as the ability to send a Web page screenshot via email, a color picker, the ability to view both the original and interpreted code (i.e. if you use JavaScript to manipulate the styles of a DOM object, then you can see the interpreted HTML source code of that manipulation) and a Console API (after installing Companion.JS) to help you gain information through a command-line interface about particular components of a Web page.

DebugBar is free for personal and educational use, but you are required to buy a license if you use it for commercial purposes.

HttpWatch

HttpWatch is another HTTP traffic viewer and debugger for Firefox and Internet Explorer that is similar to Fiddler. It has many unique features and a more intuitive, less intimidating interface than Fiddler. Some notable features are the ability to generate request-level time charts (useful for documentation and presentation purposes); decryption of HTTPS traffic to help you debug, inspect and tweak your secure SSL-based connections; and the ability to export captured data to XML and CSV formats for importing into spreadsheet applications such as Microsoft Excel or Google Spreadsheets.

HTTPWatch has a Basic edition, which is free, and a Professional edition, which has more options. Check out the comparison table between the two editions to see the exact differences.

Live HTTP Headers

Live HTTP Headers is a Firefox extension that allows you to inspect HTTP request and response headers. Exploring HTTP headers allows you to debug Web applications, glean some information about the website’s server and inspect cookies sent to the client requesting the page.

For example, the Server response header gives you a website’s HTTP server type (Apache, IIS, nginx, etc.), the HTTP server version and the operating system (though server administrators can remove or limit the information you see for security purposes).

Web Accessibility Toolbar

The Web Accessibility Toolbar is a freeware extension for Internet Explorer and Opera that gives you a slew of options for quickly evaluating and analyzing your Web content’s accessibility. It has validation options for submitting your URL to content accessibility web services such as Juicy Studio tools, a grayscale converter to simulate the user experience of individuals with color-blindness and poor eyesight, and a search function for particular page structures (e.g. finding list objects and unordered lists).

Other useful tools released by Vision Australia are the Colour Contrast Analyser, which analyzes the contrast of foreground and background colors for readability, and the Complex Table Mark-Up (or Com Tab) Toolbar, which can help you understand (and construct) complex tables that are usable by non-traditional Web browsers (such as screen readers).

Further Reading

• WebAIM: Using the AIS Web Accessibility Toolbar
• The Web Accessibility Toolbar and the Web Content Accessibility Guidelines

Fangs

Fangs is an in-browser tool for Firefox that emulates what a screen reader “sees” when visiting a Web page. Its function is simple: to output a transcript of what a screen reader will read out to a user when a Web page is visited. It’s a helpful tool for quickly analyzing if you’ve structured your content effectively so that it’s understandable and usable by vision-impaired individuals, without forcing you to learn to use (and purchase) a screen-reader application such as JAWS or Windows Eyes.

Further Reading

• Bringing Accessibility into the Development Process
• Search Accessibility Guidelines for Websites

Venkman JavaScript Debugger

Venkman is the codename for Mozilla’s very own JavaScript debugging environment. It is available as an add-on that can be used to extend browsers such as Firefox, Netscape, and SeaMonkey. It is a robust environment for doing complex JavaScript debugging and troubleshooting. The Console view gives you a command-line interface for interacting with the debugger. It has an excellent Stack view feature that allows you to step through active functions when it reaches breakpoints.

Further Reading

• Venkman Walkthrough
• Debugging JavaScript Using Venkman, Part 1
• Venkman 0.9.x Frequently Asked Questions

ColorZilla

ColorZilla is an incredibly simple — but very useful — extension for Firefox. If you’ve ever wanted to determine what colors are used on a Web page, ColorZilla is the tool for the job. It adds an eyedropper icon to the bottom-left corner of Firefox.

Clicking on the eyedropper icon makes objects on the Web page clickable, and upon clicking a particular section of a Web page, it outputs the hexadecimal, RGB and hue/saturation values of that area . Before ColorZilla, you might have pasted a screen capture of a Web page into a graphics editor like Photoshop and then used the eyedropper tool in the editor to sample colors. ColorZilla saves you time and streamlines color-sampling processes.

FireShot

FireShot is an in-browser tool for Firefox and Internet Explorer that allows you to take screenshots and then annotate, edit, organize and export them. Screen-grabbing is a common activity for Web developers to document previews of Web application prototypes and share them with clients, and FireShot gives you a feature-packed in-browser option to manage and streamline your screenshot needs.

Web Inspector

Web Inspector is part of the Webkit open-source browser engine project. It’s an ultra-sleek tool for inspecting the DOM hierarchy in a separate, compact HUD-style window. You can easily search the DOM, explore the DOM tree (hierarchy) and have a useful interface for isolating DOM sub-trees and nodes so that you can focus on particular sections of a Web page. The Web Inspector also provides you with a Style pane to explore CSS rules applied to particular page elements.

FireFTP

FireFTP is a free, cross-platform Firefox extension for FTP’ing files. It offers several advantages to stand-alone FTP applications, such as its operating system-independent requirements. What’s exceptional about FireFTP is that even though it is an in-browser (and free!) application, it has all the features you would expect from a standalone FTP application, such as support for secure (SSL, TLS, SFTP) protocols, a synchronization feature to sync up local and remote files, and directory comparison to help you see what files are missing or different between two directories and much more.

What’s your favorite in-browser tool?

There is an overwhelming amount of in-browser tools for Web development out there. Some are specific to particular Web technologies and set-ups (such as FirePHP for PHP developers, SQLite Manager for developers using SQLite databases, and Opera Dragonfly for developers who prefer using the Opera browser). If your favorite tool isn’t on the list, let us know in the comments section why it’s your favorite and why we should check it out.

About the Author

Jacob Gube is a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.

(al)

By Jacob Gube and Smashing Editorial Team

Minimalism, in the context of design, refers to simple, unadorned designs that embody only the most basic and fundamental needs. In art, it is a movement that has its roots in the post-World War II era, started by highly regarded minimalist artists such as Donald Judd, Carl Andre, and Robert Morris. Minimalism today refers to a certain style (or even a certain attitude or way of life) that transcends different fields, such as architecture, philosophy, law and, of course, Web design.

In this article, we explore the meaning of minimalism in the context of Web design. First, we’ll look at some features of a minimalist Web design in the hope of learning by way of deconstruction. Then, we’ll see a showcase of minimalist designs. Finally, you’ll find some useful resources on the topic of minimalism in Web design.

Showcase of clean and minimalist designs

Though there are different ways to achieve a minimalist Web design, and designers have varying definitions and interpretations of what minimalist Web design truly is, there are certainly some commonalities among what we can consider minimalist designs.

In the review below we’ll consider some common features and attribues of a minimalist Web design. However, let’s first take a look at some truly outstanding examples of excellent minimalist and clean web design.

Jan Reichle

HUGE

Markenpersonal.de

Rodrigo Galindez

BrynnShepherd.com

SpiekermannPartners

MaximNew

Muller

FLOWmarket

Rbg6.se

80/20

Minus.dk

Cubic

Vitor Lourenco

Deep.co.uk

fellswoop

3rings

AIGA New York

Kalle Gustafsson

Clagnut

BetterInteractive.com

Concentric-Studio.com

Clandrei.de

Ab-c.com.au

Forgetfoo

MAYØ

Berit Sømme

Poccuo

SMeltery

kraaft

Hermes.com

Sitening

bora aksu

hillmancurtis

BuuHouse Interactive

Theme

Marek Levák

Mark Wieman

Rogier Bikker

Razvan Stavila

Lovecreative.com

1. Design is focused on the content

In minimalist designs the focus lies not on the visual presentation, but on the content — the information presented in a “naked”, clean and intuitive way. The property of being minimal refers to the structure of the layout; but it is the main task of every simple design to keep its functionality and communicate the information it is supposed to present.

The content is the focal point of the Web page, whether that content is a showcase of photography, Web designs, or writing. The design provides little to no distraction.

Autumn Whitehurst Illustration
In this Web design, the use of a plain white background and de-emphasized text makes your eyes gravitate towards the artwork.

Frieze Magazine
When viewing this design, note where your eyes look first. Probably, you would have looked at either the large image or the “frieze” logo first.

2. Whitespace is the king…

To make it easy for readers to scan and read the content, minimal designs usually need a lot of whitespace to breathe. In some cases whitespace dominates in the design, taking 60-70% of the whole layout space. In such designs whitespace, while remaining passive, strongly bundles user’s attention on very few site elements and thus effectively influences users’ perception of the overall design.

Rule of thumbs: the fewer elements you have and the more whitespace you have, the more attention will each element in your design get.

Cameron.io uses whitespace as the primary element. Notice how little space is used by content and how strongly your attention is focused on the navigation menu and the blog posts. Please also notice that very calm, neutral and subtle colors are used.

3. Typography is the queen

Typography is used to convey messages to the user. Larger, bold text draws the user’s attention to the intended area. Careful use of color, size and style of text is used in the design phase to underscore important elements and make others less prominent.

i love typography
Notice how the large bold, centered logo on the page manages to grab your attention.

Astheria
This design directs the user’s focus straight to the “featured” content (in this case, the most recent article of the author). Notice how your focus bypasses the logo, even though it appears before the “featured” content; completely the opposite of i love typography’s design, which directs you to the logo/website name.

Corporate Risk Watch

4. Color palette consists of solid colors

The in-your-face, flashy, loud color schemes associated with Web 2.0 and vintage/retro design trends are avoided. Usually, designers pick one vibrant color and use it effectively to communicate the most important information presented on the site. Such elements are usually clickable; the number of these elements rarely exceeds 5-7.

Behance

Alltop

5. Plain, solid white/gray or solid dark backgrounds are common

Solid backgrounds are effective especially when the content is vibrant and colorful (such as in design showcases). Plain colors doesn’t fight for users attention; instead, they support the readers and make it easy to actually scan the page when looking for the content. “Minimal” designg almost never have vibrant background images — patterns, textures and vivid colors are used very rarely.

kind company
The thumbnail project images really stand out from the solid white background.

The Consultâ„¢
The same concept applies to dark backgrounds.

6. A minimal number of colors

Many minimalist Web designs use only one to three colors, and page elements outside the content are often monochromatic. This again reduces distraction from the Web page content.

Rikcat Industries
This design showcases a monochromatic color palette in the foreground.

Cameron Moll
In this design, page elements such as the logo, navigation bar and sidebar use different hues of gray.

7. Text-based logos instead of illustrative, iconic logos

Again, to uphold the concept of minimalism whereby you strip down the design to the bare, unadorned minimum, the logos of minimalist websites are plain and simple.

The Idiot Behind the Iron Mask

8. Clean right angles and lines in use

Very often clean right angles and lines are used instead of rounded and uneven edges. Rounded graphic elements, the main clichée of Web 2.0, and the uneven edges seen in grunge style are avoided in minimalist Web designs.

Monty Lounge

Builtbybuffalo.com

Antonio Carusone

SIGMA6

9. Minimal ? white, gray and black colors

White/black (or dark gray) is the typical color scheme of minimalist Web designs, but others use different colors to achieve the same goals.

Soulellis Studio

Emigre

10. Use of vibrant, colorful images

The use of colorful, bold images can enrich the visual impact of the design by providing a stark contrast to the muted, solid colors of the minimalist design elements.

Coptix

11. Use of grid-based designs

Many minimalist designs use a grid-based layout to reflect the structured, right-angled, rigid nature of minimalism.

Jamie Gregory

Resources

• New Minimalist in Web Design
  A discussion of the “new minimalist” trend in Web design.
• Minimalist in Fashion Web Design
  A discussion of minimalist Web designs in the fashion industry and possible reasons for choosing this style of design.
• Design 2.0: Minimalism, Transparency, and You
  Learn the reasoning behind a design company’s choice of minimalism for its designs.
• The Anatomy of a Minimalistic Web Design
  Steven Snell breaks down the different parts of a minimalist Web design.
• Is Minimalistic Design More Effective?
  A showcase of minimalist designs by Adelle L. Charles.
• Administrative Debris
  Ryan Tomayko talks about his journey into a minimalist design.
• Minimal Sites
  A showcase of minimalistic web designs.

About the Author

Jacob Gube is a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter. (al)

Saving repetitive tasks as Photoshop actions can save you a lot of time, allowing you to automate your work and improve workflow efficiency. A Photoshop action is a recording of a sequence of commands and operations that you can save and access later on.

We’ve searched for the best downloadable Photoshop actions that can help you improve your workflow and perform complex techniques with the push of a button. In this collection, you’ll find more than 350 free hand-picked Photoshop actions that you can use to speed up your graphics creation.

Note: It’s important to check the license of each action set you download and use.

Quick Introduction to Photoshop Actions

For those unfamiliar with Photoshop actions, they’re simply pre-recorded tasks that you can save and reuse anytime. Photoshop actions commonly have an .atn file extension. Installing a Photoshop action for more recent versions of Photoshop is easy: simply drag the .atn file onto the Actions palette or place it directly inside your Adobe Photoshop\Presets\Photoshop Actions folder. For a more comprehensive discussion of Photoshop actions, check out this complete guide to Photoshop actions.

Image Effects and Graphic Creation Actions

Cross-processing ATN
Simulate the Cross-processing (Xpro) photography technique using this Photoshop action.

1 action – Download

Lomo
Give your images a “Lomo” look and feel with this excellent Photoshop action.

1 action – Download

Lomo Cross-processing
This Photoshop action is a combination of two popular photography effects: Lomo and Cross-processing.

1 action – Download

Polaroid Generator
Automatically frame an image in a Polaroid border with this set of Photoshop actions.

5 actions - Download

Hand-Colored Vintage Photo
This is a handy Photoshop action set for giving images aged, dirty effects.

4 actions – Download

Vintage
Aly’s Vintage action set is a nice collection of six vintage image effects that you can use on modern digital photos.

6 Actions – Download

Vintage Wash
Give your images an old, vintage effect with this set of ten different actions.

10 actions – Download

Old Parchment
Easily create aged paper with this free Photoshop action.

1 action – Download

Simple Stamp Generator
Automatically create a stamp graphic with this action.

1 action – Download

Pseudo HDR
Mimic the “HDR” photo effect without having to use multiple exposures of the subject.

1 action – Download

HDR For Dummies
Here’s another easy-to-use Photoshop action set for giving photos the “HDR” effect.

3 actions – Download

IR Actions
Give your photos the popular infrared effect using Dave’s IR Photoshop action.

1 action – Download

IR Effect
Here is another method for faking the infrared photographic effect using a Photoshop action.

1 action – Download

Photo Effect Action
This Photoshop action can be used for grunge designs.

1 action - Download

Comics Photoshop Action
Give your image a comic book look and feel using this Photoshop action.

1 action - Download

Retro Love
Achieve a retro-colored image effect using the Retro Love action.

1 action – Download

Soften Skin Effect
Smoothen skin and remove blemishes with the Soften Skin Effect action.

1 action – Download

Burnt Edges Vignette
This action gives your photos burnt and high-key effects (available for low- and high-resolution images, see the “Try Me”-section).

4 actions – Download site, check the “Try Me”-section

Edge Effects
This set of actions allows you to give your images different types of edge effects.

8 actions – Download

B & Big Picture
Create a three-dimensional collage effect using one source image with the B & Big Picture action.

4 actions – Download

Photo Enhancement and Processing Actions

Black and White Photoshop Actions
This is a set of useful actions for processing black and white images.

8 actions – Download

TLR B&W Toning
TLR B&W Toning is a large action set for enhancing and processing black and white images.

30 actions – Download

Photoshop Postwork Actions
Here is a ton of excellent post-work Photoshop actions.

25 actions – Download

TLR Sharpening Toolkit
This is a useful Photoshop action pack for sharpening RGB, CMYK and monochrome photos.

33 actions – Download

TLR Tone Enhance
Enhance the tone and color of your images using this Photoshop action set.

30 actions – Download

Color Enhancing Actions
Here is a variety of actions, such as “colorboost,” “softlight,” and “contrastboost.”

10 actions – Download

Photoshop Color Actions
A nice collection of color actions to process and enhance your photographs.

10 actions – Download

Cross Coloring Tools
Here is a set of actions for dark, mid-range, and light cross-coloring of image tone.

4 actions – Download

Image Enhancing PS Actions
These are ten brilliant image-enhancing Photoshop actions.

10 actions – Download

Watermark Photoshop Action
Automate the watermarking of your images with this set of Photoshop actions.

9 actions – Download

Photographers Toolkit
A wonderful set of actions for photographers to enhance photos.

9 actions – Download

Assorted Sets of Actions

Photoshop Actions – 53
This is the 53rd set of Photoshop actions by =night-fate of deviantART.

9 actions – Download

Productions Action
This is a set of useful actions that will simplify your workflow for common Photoshop tasks.

20 actions - Download

Photoshop Automator Actions
This is one of the biggest sets of useful actions to cut down on repetitive tasks such as watermarking images, scaling images, and fitting images in the canvas. You need to register before being able to download the set.
90 actions – Download

Photography Action Set
This is an excellent collection of popular photo effects, such as HDR, Lomo, Velvia, Xpro and more.

8 actions – Download

Rather Large Set of Actions
This is a large collection of useful Photoshop actions.

40 actions – Download

Photoshop Actions – 62
Another beautiful set of assorted Photoshop actions by =night-fate.

8 actions – Download

About the Author

Jacob Gube is a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter. (al)