The Ultimate Designer's Toolkit: 200 Useful Resources And Tricks For Creating Kick-Ass Websites | Top Design Magazine

Design
The Ultimate Designer’s Toolkit: 200 Useful Resources And Tricks For Creating Kick-Ass Websites

The Ultimate Designer’s Toolkit: 200 Useful Resources And Tricks For Creating Kick-Ass Websites

Writen by Bogdan + / Comments Off on The Ultimate Designer’s Toolkit: 200 Useful Resources And Tricks For Creating Kick-Ass Websites

When creating a website you need a lot of resources, starting with images, fonts, buttons and all the way to intricate coding techniques. Finding all of these resources requires a lot of time so it is better for creating a database in which you should add every interesting thing that you find and it’s related to your work.

In this collection you’ll find 200 stunning resources that will help you create awesome websites.

The resources are divided into:

1. Tools for creating wireframes and mockups;

2. Useful Mozilla Addons for developers;

3. WebDev tricks;

4. Tools for checking your website’s health;

5. Time saving tutorials for web developers;

6. Essential WordPress plugins;

7. Icons;

8. Fonts;

9. CSS/HTML Website templates;

10. PSD Resources;

11. Patterns.

Tools for creating wireframes and mockups

iPlotz

iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications. Create a project, add wireframe pages with design components and discuss your creations with others.

Free Sketching & Wireframing Kit

Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloaded in PDF and EPS formats. The kit is completely free, which means that you are allowed to use it for personal and commercial projects.

Frame Box

You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly by using its very easy to use drag and drop interface.

ProtoShare

For website, mobile and application development, ProtoShare delivers better digital projects in less time. ProtoShare lets you express ideas visually, so the entire team can understand what you’re trying to say. ProtoShare helps your team make good ideas great and ensures that bad ideas will fail early. You can create while ProtoShare automatically manages feedback, documents decisions, and keeps everyone on the same page before money and time are sunk in various development dead ends.

EightShapes Unify

A documentation system to produce wireframes, maps, flows, storyboards, plans, style guides, specs, usability testing reports, and prototypes too!

Cacoo

Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.

Mockingbird

Mockingbird is another web app with a focus on collaboration. It allows you to link multiple mockups together and preview them interactively to get a feel for the flow of your application.

OmniGraffle Wireframe Stencils

This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). It consists of most of the basic elements you’ll need to create user interface specifications. The screenshots below show all of the stencils in this set.

Hotgloo

HotGloo combines all the functionality from a classical desktop software with the comfort and benefits of a web app. From low- to high-fidelity, from wireframes to prototypes – with HotGloo you can finally achieve great concepts in a fast, simple and beautiful way. Mock up an idea, gather feedback, review and improve over time. With just one click you can receive feedback on a particular element or interaction, helping you to adjust accordingly.

Balsamiq Mockups

Using Mockups feels like drawing, but because it’s digital, you can tweak and rearrange easily. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

Pencil Project

The Pencil Project’s unique mission is to build a free and open-source tool for making diagrams and GUI prototyping that everyone can use.

SketchFlow

SketchFlow, a feature of Expression Studio Ultimate, gives you the ability to quickly and effectively map out and iterate the flow of an application UI, the layout of individual screens and perhaps most importantly for modern applications the transition from one application state to another. This ability to explore and test multiple ideas without investing large amounts of time ensures you are able to find the right solutions for your clients.

Useful Mozilla Addons for developers

Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Flagfox

Flagfox is an extension that displays a flag icon indicating the current webserver’s physical location. Knowing where you’re connected to adds an extra layer of awareness to your browsing and can be useful to indicate the native languages and legal jurisdictions that may apply. Additional information can be obtained via a multitude of external lookups and users can add their own custom actions. All actions can be added to the flag icon’s context menu and set to icon click or keyboard shortcuts for quick access.

IE Tab V2

Just like the classic IE Tab, this updated version of IE Tab allows you to use IE to display web pages in a tab within FireFox. This updated version includes support for FireFox 3.6 and will continue to be updated with new features and enhancements.

ColorZilla

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. The powerful CSS gradient generator allows quick and easy creation of beautiful gradients.

DOM Inspector

Inspects the structure and properties of a window and its contents with a variety of views.

YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset.

Html Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.

Illuminations for Developers for Firebug

A set of tools to help you develop web applications by investing Firebug with the knowledge of the JS framework you are working with. Supports ExtJS and Sencha Touch, with beta-level support for Dojo Toolkit, SproutCore, qooxdoo, YUI, Google Closure Library, and jQuery UI. Trial version.

Pixel Perfect

By toggling the composition on and off, the developer can visually see how many pixels they are off in development. Pixel Perfect also has an opacity option so that you can view the HTML below the composition. By being able to see both the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action.

Greasefire

When you visit a web page that has compatible user scripts on Userscripts.org, this extension will highlight the Greasemonkey/Scriptish icon in the toolbar button (or status bar icon for older versions of Greasemonkey). Right click the icon and choose the “X scripts available” menu item to see and install the scripts available for the current page.

TrashMail.net for Mozilla Firefox

Create disposable email addresses. This plugin uses the free TrashMail.net DEA service. Guide to use this extension: Click the right mouse button in an editable field. A menu will appear with the option to paste a disposable email address (see screenshot).

HackBar

This toolbar will help you in testing sql injections, XSS holes and site security. It is NOT a tool for executing standard exploits and it will NOT teach you how to hack a site. Its main purpose is to help a developer do security audits on his code. If you know what your doing, this toolbar will help you do it faster. If you want to learn to find security holes, you can also use this toolbar, but you will probably also need a book, a lot of Google and a brain :)

Font Finder

FontFinder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.

PHP Developer Toolbar

A Tool Bar developed for PHP programmers. Allows you to search in multiple websites, access communities of developers and projects.
With shortcuts you can quickly see function descriptions or search into official websites. It also provides you links to many interesting tools, all made in PHP or for PHP, and access to PHP User Groups all around the world.You can also generate classes and HTML forms easily, with the native PHP Generator Tool, added to this add-on.

Cookie Importer

Imports cookies from a textfile, that has the Netscape standard format as used by IE and others. Very useful in combination with the Cookie Exporter add-on.

Scroll Up Folder

Goes up a folder of a website. Usage: place mouse over urlbar, scroll wheel up or down. Middle click bar to go. If you prefer use your keyboard, go to urlbar (CTRL+L shortcut or click onto) then press ALT. A window will display available urls. Press UP or DOWN to navigate then valid with ALT. Note: you can still type your url.

UnicodetoHTML

Converts selected unicode text to HTML character codes with right-click. Automatically copies HTML character codes to the clipboard. I plan on only updating compatibility with new Firefox versions. I don’t intend to add functionality. One issue that exists is related to frames. If text is selected within a frame, UnicodetoHTML returns a blank popup and doesn’t copy anything to the clipboard. I’m not going to address this, but if someone else wants to, they are welcome to help.

JavaScript Deobfuscator

The code displayed comes straight from the JavaScript engine of the browser. Whenever the JavaScript engine compiles or executes a script it is added to the corresponding list. The rules at the bottom of the Deobfuscator window define which scripts should show up. By default, browser’s own scripts and extensions are excluded but the filters can be adjusted to show those as well. The JavaScript engine reformats the source code so that it is easier to read – there are also some artifacts however like some functions appearing twice.

HeadingsMap

The extension generates an index (or map) of any web document structured with headings (you can access directly to the content by clicking on any of its items).

SQLite Manager

WebDev tricks

Replicate Windows 8’s Metro interface on the Internet

TopUp

Nifty jQuery Corner

Paperfold CSS

Create radically stylized layouts

An open-source alternative to proprietary media players

Gorgeous full-screen slideshows

Stretch or shrink text dynamically to fit any screen size

LiveValidation

Check password strength using JQuery

Multiple file upload using JQuery

Detect Orientation Change on Mobile Devices

Lake.js

Blur text effect

gmaps.js

Unzip zip files

Parallax scrolling

Twitter Fan Box

chronoline.js

3D Thumbnail hover effect

Delayed message with CSS3

CSS3 stopwatch without javascript

Tools For Checking Your Website’s Health

Browser Shots

Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to our central dedicated server for your review.

IETester

This is a free downloadable windows program that is still in the early stages of development. That being said, it is a single free resource that will allow you to fully test all of the relevant versions of Internet Explorer.

WebPage Speed Test

Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

Mobile testing

Using this tool you can check out how your site looks on a mobile device. Beside this, you can setup what kind of device, enable video capture and also making the results private.

Feed validator

This is the W3C Feed Validation Service, a free service that checks the syntax of Atom or RSS feeds.

Instant Website Test

Free instant website performance test to find out how fast your website loads from multiple locations around the globe. See which objects on the page are slowing down your performance.

Pingdom

Enter a URL to test the load time of that page, analyze it and find bottlenecks.

Link Checker

DNS Health Checker

Correct DNS settings are vital for a website to work properly. The DNS Health test in Pingdom Tools will help you find errors in your DNS settings, and verify that your domain name has been set up correctly. The test will automatically find out which DNS servers are used by the domain name you specify, then perform a number of tests on them to make sure that the domain name is properly set up and that those DNS servers are responding in a consistent and correct manner.

Load impact

Using this service you can load test your website and see how it responds on a increased number of connections.

Google web page tester

Page Speed Online analyzes the content of a web page, then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates.

Validate you HTML code

This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.

Website vulnerability tool

Using this online tool, you can see if you website it’s not contaminated with malware.

Time saving tutorials for web developers

Capturing Audio & Video in HTML5

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

Writing Augmented Reality Applications using JSARToolKit

Measuring Page Load Speed with Navigation Timing

Multi-touch Web Development

Native HTML5 Drag and Drop

Quick guide to webfonts via @font-face

Perfectly Positioned Plusses

A Beginner’s Guide to Using the Application Cache

CSS3 Transitions And Transforms From Scratch

Best Practices for a Faster Web App with HTML5

Creating a Mobile-First Responsive Web Design

CSS3 Animations: the Hiccups and Bugs You’ll Want to Avoid

Improving HTML5 Canvas Performance

Menu Notification Badges Using HTML5 Data-Attributes

Essential WordPress plugins

WP DB Backup
WP DB Backup is an easy to use plugin which lets you backup your core WordPress database tables just by a few clicks. Besides it is so easy, it has also been one of the most used plugin to secure your WP-powered website.

User Spam Remover

Automatically removes spam user registrations and other old, unused user accounts. Blocks annoying e-mail to administrator after new registrations.

Exploit Scanner

Search the files and database of your WordPress install for signs that may indicate that it has fallen victim to malicious hackers.

WP Security Scan

Scans your WordPress installation for security vulnerabilities.

Stealth Login

The Stealth Login plugin will help you to create custom URL addresses for login, registering and logout of WordPress.

Admin SSL Secure Plugin

Secures any WordPress URL using Private SSL. Once the plugin is activated go to the Admin SSL config page to enable SSL and read the installation inst

Limit Login Attempts

Limit rate of login attempts, including by way of cookies, for each IP. Fully customizable.

Antivirus

AntiVirus for WordPress is a smart and effective solution to protect your blog against exploits and spam injections.

One Time Password

This simple to use plugin enables you to login to your WordPress weblog using passwords which are valid for one session only.

Admin SSL Secure Plugin

Secures any WordPress URL using Private SSL. Once the plugin is activated go to the Admin SSL config page to enable SSL and read the installation inst

Chat

Start communicating! Bring live, two-way chat to your site. Host your own live chat sessions, interact with your visitors and boost your sales without needing any third party javascript or other code – works great with BuddyPress and Multisite too.

Twitter Goodies

Official Tweet Button + Twitter Goodies Profile & Search Widget. Plugin shows your tweets on Page/Post/Widget area.

Skype Online Status

The plugin Skype Online Status allows you to add one or multiple, highly customizable and accessible (!) Skype buttons to your blog. You can pick any of the available Skype button themes that will show your online status and place them in your pages and posts content (with a neat little Skype quicktag button in the WYSIWYG editor), in your sidebar via widgets (unlimited number) or anywhere in your theme template files.

Facebook Tab Manager

Makes WordPress function as an editor for tabs you can embed in a Facebook page for your business, campaign, or organization.

BuddyPress Private Community

This plugin makes your BuddyPress community private. Only logged in members can view the social areas in full. You can configure the default settings.

FV Community News

Give the visitors of your site the ability to submit their news to you, and list it in a nice news feed.

Alkivia Open Community

A plugin to build user communities all around WordPress, mainly it’s around having a well integrated profiles system. This plugin will provide all needed functions and widgets to make it easy and flexible the ways to show all information about a user. Also, there is some user privacy settings to permit which information to show in the profile page.

Disqus Comment System

Disqus, pronounced “discuss”, is a service and tool for web comments and discussions. Disqus makes commenting easier and more interactive, while connecting websites and commenters across a thriving discussion community.

WordPress Advanced Ticket System

This plugin adds to WordPress the features of a complete ticket system. This allows users to submit tickets to report problems or get support on whatever you want. Users can set the status, priority, product and type of each ticket.

The WordPress Bar

Seen the DiggBar on Digg.com? Add a similar feature to your WordPress blog by creating a navigation bar for all external links outside of blog.

Ad Inserter

An elegant solution to put any ad into WordPress. Perfect for AdSense or contextual Amazon ads. It can also be used to display various versions of AdSense ads using channels to test which format or color combination performs best. Simply enter any HTML code and select where and how you want to display it (including widgets).

Max Banner Ads

Max Banner Ads is a banner ad management plugin which boasts many features. It allows you to create an infinite number of ad zones, it tracks impressions and click throughs and it lets you add banner zones in widget areas too. It also lets you add banner areas directly to blog posts.

Ad Code Manager

Ad Code Manager gives non-developers an interface in the WordPress admin for configuring your complex set of ad codes. Ad Code Manager currently works with Doubleclick for Publishers by default. However, all logic is abstracted which means that you can configure ACM for any ad provider relatively easy.

Ad Injection

This plugin injects any kind of advert or other content (e.g. Google AdSense, Amazon Associates, ClickBank, TradeDoubler, etc) into the existing content of your WordPress posts and pages. You can control the number of adverts based on the post length, and it can restrict who sees adverts by post age, visitor referrer and IP address. Adverts can be configured in the post (random, top, and bottom positions) or in any widget/sidebar area. There’s support for A:B split testing / ad rotation. And the dynamic restrictions (by IP and referrer) work with WP Super Cache, W3 Total Cache and WP Cache.

WP Bannerize

WP Bannerize is an Amazing Banner Manager. With WP Bannerize you can manage all your advertising stuff through widgets, shortcodes or directly from your template.

Text Link Ads

This plugin is a service offered by a company which sells link ads. It is an easy way to earn some money by adding some links inside your articles.

Advertisement Management

With the Advertisement Management plugin you can add advertisements to your blog directly from the backend.

AdServe

AdServe is the advertising server for WordPress. You could setup your banner campaigns using different sized banners, set available impressions and count resulting clicks! Optionally AdServe links ads to blog users so that one could check the campaign results within the Dashboard.