Web Toolkit

The Must Have Tools for Web Designers

Posted on December 5, 2013 · Posted in Web Design, Websites, Workload

Designing websites isn’t just about drawing pretty pictures; as a web designer you’ll probably find 50 percent of your time is spent planning, testing and promoting, not to mention the paper work! being multi-skilled is an accepted part of the job, but it can be frustrating when you’re called away from the work you love to conduct tasks you don’t enjoy. Thankfully there is a simple way to reduce this effect, and you can get started today!

Having an effective and well-organised work flow is a crucial part of any job, but this is especially true in the web design industry. There are so many facets to the role: you might be wire-framing a website one minute, and testing an entirely different website the next. between these crucial roles, and even after, there are a host of processes to add tot he web design/development life-cycle. there’s also planning, development, promotion and of course, what most consider the most important part, the actual designing itself.

GETTING THE RIGHT TOOLS FOR THE JOB

Whether or not you enjoy these tasks, it’s certainly a truism to say that a lot of the time while you work as a web designer, you’re not actually actively designing websites! There is so much more that needs to be done before a website gets finished. Of course this can be helped by having an effective set of tools at your disposal to help you get the most out of your time and effort, regardless of whether your preference lies with developing user interactions or designing user controls. remember the more time you save optimising your work flow and reducing unnecessary manual work, the more time you can spend on designing amazing websites.

CHOOSING YOUR TOOLS WISELY

The better your set of tools is, the more time you can dedicate to the designing aspect of the role, and to creating a framework and solid foundation for robust designs that deliver content in appropriately contemporary formats. the difficulty is that there are just so many different tools and services available, it’s a minefield trying to keep up to date with the various options. get your choice right and you have an arsenal of tools that will save you loads of time and effort. Get it wrong and you could end up wasting more of your precious time and effort.

This is why I have gathered together some of the best tools for web designers that will help you in eight key areas:

Within my list I’ve got full scale desktop tools, online options, web services, frameworks and utilities. The common feature among them all is that they’ll help you save precious time, as well as ensuring the best of results. When used in combination as part of your work flow, these tools form a complete suite that will help you build a website from conception to completion.

PLANNING

Get your web project off to the right start with the right selection of must have planning and wire framing tools.

BASECAMP

URL: https://basecamp.com

Basecamp is an online project management system that’s the ideal planning and project collaboration platform. As well as offering built in user control and management. Basecamp allows you to work easily with colleagues, assign tasks and track progress against these easily. The system provides to do lists, discussion areas, asset storage and a shared calender.

Basecamp is part of a suite of online applications including Highrise, Backpack and Campfire, which together provide a complete set of project management tools. While the application isn’t free, it does offer good value for money with plans starting at £25 a month for which you will be able to plan and manage up to 15 concurrent projects. it’s certainly worth checking out if you are running multiple projects that would benefit from such a framework.

DROPBOX

URL: http://www.dropbox.com

Dropbox is a simple way to share and backup files across a number of different devices. It works as an extension to your hard-drive, offering cloud-based storage and automatic syncing between your computers and devices. It also works seamlessly as a collaboration tool by allowing folders to be shared between different users.

The basic version is available completely free, with the option to pay for addition storage – although it is possible to build up your free storage by recommending the service to your friends and colleagues.

MOQUPS

URL: https://moqups.com

Moqups is a fantastic free online wire-framing tool that allows you to create interactive mock-ups that you can share with colleagues and clients. Individual ‘pages’ can be linked to create a fully connected user journey through your proposed website, before you’ve created any of the user interface.

Completed mock-ups can be exported in PDF and PNG format, making it easy to include your wire-frames in project documentation. Crucially the entire system works in the browser using HTML5, making it accessible across a range of devices – idea for web designers who face a daily commute in the morning.

YUUGUU

URL: http://www.yuuguu.com

YuuGuu is a screen sharing and desktop collaboration tool that makes it easy to quickly see what’s on your colleague’s desktop, conduct interactive demonstrations and host online meetings.

The service integrates with your existing software without the need to download addition plug-ins, so that you can host meetings as if everybody was sitting in the same room. Pricing starts from £70 a year for unlimited meetings including screen sharing, web conferencing and audio phone-in services.

DIA

URL: https://wiki.gnome.org/Apps/Dia

Dia is a free desktop tool for generating diagrams, available for both Mac and Windows. It is broadly the equivalent to Microsoft’s Visio, it offers a range of different ways to generate relationship diagrams and is a great solution for mapping out your website before you start designing and coding it.

As well as offering a lage library of pre-built shapes for creating diagrams, it allows you to generate your own using SVG and XML, making it flexible enough to fit any workflow and presentation style.

TESTING

Testing is often overlooked, but it is arguably the most important stage of a web project. As it offers you the opportunity to ensure that users experience your design as intended.

W3C VALIDATORS

URL: https://validator-suite.w3.org

The W3C which is the body responsible for developinh ad maintaining web standards including HTML5 and CSS3, offers a variety of validation tools that can be used to test the validity of your code.

While this may seem arbitary, and doesn’t necessarily reflect the way a particular browser will render your page, it’s important to strive towards standards compliant code to ensure future compatibility, as well as meet your obligations under accessibility legislation such as the Diability Discrimination Act.

As well as the HTML Validator, the W3C offers tools for CSS validation, Javascript and Accessibility.

FIREBUG

URL: http://getfirebug.com

Firebug is perhaps the best know web page interrogation tool, and is based on the Firefox web browser platform, although there are versions or equivalents for all major browsers. Firebug is very useful because of the way it allows you to directly interact with elements within the DOM, interrupt and place code break points, and override CSS settings on a page.

This combination of tools, along with useful network analysis and a handy console, makes it an absoloutely esstenial tool for any web designer or developer to fully test and evaluate their own webpages. It’s also pretty useful for seeing how other developers have implemented features, so is worth using throughout the development process – not just during testing.

RESPONSIVE DESIGN TESTING

URL: http://mattkersley.com/responsive

As the web moves towards a more responsive approach to user interface design, a range of tools for testing responsiveness have been developed. One of the more simple, but therefore more effective tools is this simple website from Matt Kersley.

Enter the URL you’d like to test, and the page will render content inside a series of different-sized windows to emulate small screens found on smartphones, medium sized screens found on tablets and full size desktop style windows.

By comparing the layout and testing in this tool, it’s possible to test that your responsive design approach is working correctly, without any of the fluff associated with more indepth tools.

JSLINT

URL: http://www.jslint.com

JSLint is a JavaScript testing and optimisation platform which allows you to conduct robust testing and evaluation of your scripts. A bit like running the W3C HTML validator, the output shows you where you have problems in your JavaScript, and provides pointers to help you address the issues and rectify problems.

JSLint describes itself as a code quality tool, which means that it will reject (or identify) code that would run happily within the browser, but that could be better written. This promotion of best practice approaches ensures you will write tighter, better optimised code that will use few resources and run more efficiently.

SAUCELABS

URL: https://saucelabs.com

Testing across multiple browsers is essential for all web designers. It’s commonly understood that different web browsers redering engines produce slightly (or dramatically) different results. Rather than manually test across the plethora of different configuartions and versions, use a hosted solution such as that offered by SauceLabs.

This paid for service allows you to fully test both the visual rendering and the interactive elements of your page designs without having gto maintain a testing platform yourself. While there are free options available that will give you a simple browser screen shot. SauceLabs product goes several steps further by allowing you to view videos of each testing session.

DESIGN

Make your design work flow quicker and more effective with these essential tools to help you get the job done.

ADOBE DREAMWEAVER

URL: http://www.adobe.com/uk/products/dreamweaver.html

I know its pretty obvious but Dreamweaver is best know web design and development tool, now part of the Adobe Creative Suite. It includes a complete design and development environment allowing you to create websites in code or design view, integrating server-side and client-side languages, preview and test within the application and implement advanced user interactions directly with the editor.

Although it is available as a standalone product, the best value can be found via the Creative Cloud service which costs from £47 a month. As well as Dreamweaver you will also get Adobe’s other creative tool including Photoshop, Illustrator, Fireworks and a series of task specific apps such as Muse (for wireframing, planning and implementing code free website designs), Typekit (for intergration of fonts into your website) and phoneGap for generating native mobile apps using HTML5.

INKSCAPE

URL: http://inkscape.org

Inkscape is a open source Scalable vector Graphics (SVG) editor that offers and idea environment for creating website mock-ups. Using a tool-set similar to those found in Adobe’s Illustrator package, Inkscape is a vector-only application that allows you to create artwork in a resolution independant format perfect for the modern responsive web design methodology.

WORDPRESS

URL: http://wordpress.org

WordPress is probably the world’s most popular CMS, but it started off as a blogging platform designed to make it easy to create a blog and share your views with the world. These days this free software has matured into a fully customisable and extensible solution for creating and managing content, including audio and video integration through the use of plug-ins, making it a great contender for your website’s management and deployment.

A vibrant community of developers has developed thousands of plugins, both free and commericial, that extended the core functionality to include options for eCommerce,eLearning and portal websites, plus a host of other applications.

BOOTSTRAP

URL: http://getbootstrap.com

Bootstrap is a rapid application development tool which will save you lots of time. It provides boilerplate functionality including JavaScript, CSS and mark-up that outputs responsive code optimised to work across multiple devices, including tables and smart phones, without the need to manually assemble and plumb all typical code required to make a rich application or website work.

As well as a series of useful templates that provide a great jumping-off point, it includes a grid system, typorgraphy orientated features, advanced JavaScript widgets and CSS components.

FILEZILLA

URL: https://filezilla-project.org

FileZilla is an open source FTP client that works across Windows and Mac. Despite its free price tag, it supports all the common standards that you would expect in commercial equivalents including FTP, FTP over SSL/TLS, and SSH.

There are numerous handy features that make FileZilla a real-time saver, including the likes of pause/resume transfers, remote file search and a transfer queue. Multiple FTP servers can be connected simultaneously, and it’s easy to bookmark your favourite servers for later one-click access.

An FTP client is pretty essential for any web designers and FileZilla is up there with the best.

HANDBRAKE

URL: http://handbrake.fr

HandBrake lets you convert video quickly and easily for free. Simply select a video from your hard drive and choose output settings (including all the usual web-specific options), before adding the job to your queue. Select the same video multiple times to output different formats as required, then run the queue while you get on with you other work.

GOOGLE DOCS

URL: http://docs.google.com

Google Docs is a free cloud based alternative to Microsoft’s Word, Excel and PowerPoint. Google Docs provides an excellent place to develop and store content before deployment to your website.

Using a WYSIWYG (What You See Is What You Get) interface within a web browser, it is alos an ideal choice where collaboration is required between users (e.g. a client and yourself), as it allows all parties to view content and make changes simultaneously.

There is a paid for upgrade available, but the basic free version is sufficient for almost all standard needs and is a great example of now traditional desktop applications can be successfully migrated to the cloud.

GOOGLE WEB FONTS

URL: http://www.google.com/fonts

Like many other free and commericial services, Google Web Fonts has developed over the past few years to offer a reliable alternative to the old ‘web safe’ fonts that caused a generation of websites to appear homogenised.

Google Web Fonts includes over 600 plus font families that are free to use – and with a very simple installation routine, it’s easy to start implementing them on your websites.

Not every font is of quite the same quality you might find in commercial alternatives, But Google’s free offering is a winner that every web designer needs tucked away in their toolbox.

WEB FONT SPECIMEN

URL: http://webfontspecimen.com

Web Font Specimen is a free service which allows you to preview how fonts will appear on the web. The specimen rendering includes full paragraphs with a range of line heights and font sizes, plus a selection of headings styles (bold and italic) and individual glyphs. This makes it ideal for getting a fully accurate sense of what a web font is going to look like in the browser.

MAGENTO

URL: http://magento.com

Magento offers a highly flexible environment for developing enterprise level online web stores. Although renowned for being complex and difficult to master, it’s a reliable, secure platform.

Features include built-in support for multiple web stores, multiple product types and integration with hundreds of payment service providers (PSPs).

CODE

These handy tools will help speed up your coding and keep it standards compliant and accessible.

ECSSTENDER

URL: http://ecsstender.org

eCSStender is a handy tool which allows you to write a single, standards compliant set of CSS without having to worry about the different prefixes, browser specific workarounds and hacks. eCSStender will then automatically expand your code to deal with all the specifics of making your code work cross browser.

COFFEESCRIPT

URL: http://jashkenas.github.io/coffee-script

CoffeeScript is a small interpreted language that complies into JavaScript. the idea is that CoffeeScript makes it quicker and easier to code complicated routines, without the need to deal with the (sometimes) inaccessible syntax of JavaScript.

This one is for the purists and offers a great way to rapidly develop functionality without getting too bogged down in the code itself.

#GRID

URL: http://hashgrid.com

#grid is a simple tool that inserts a layout grip into your web page, allowing you to create a pixel perfect layout and test it across different browsers.

Activated with a keyboard shortcut, the jQuery plug-in is adaptable to work with your preferred grid size, including gutters and multiple columns.

PRIMER CSS

URL: http://www.primercss.com

PrimerCSS is a simple and elegant little tool which converts your pasted HTML into an empty CSS stylesheet ready for your visual styles.

Copy and paste your mark-up into the box on-screen and PrimerCSS will output an empty set of CSS nodes based on the IDs and Classes within your HTML, ready for the styles to be applied.

Ideal for designers who like to code the structure of their websites before applying the styles

JS BIN

URL: http://jsbin.com

JS Bin is an online JavaScript, HTML and CSS development and testing suite, allowing you to quickly prototype and develop functionality without having to generate standard mark-up, or download and include libraries manually.

It allows you to save your prototypes, convert them to a variety of formats and quickly implement different libraries – all within the click of your mouse.

DEVELOPMENT

Get your hands on a host of ready-made tools, languages and frameworks to ensure that development process runs smoothly.

HTML5 BOILERPLATE

URL: http://html5boilerplate.com

This simple template allows you to quickly develop an HTML5 compliant page design. As well as including standard page elements such as <head> and <body> sections, it offers pre-built support for responsive layout, smart phone touch icons and Google Analytics, and comes with the most common libraries for quick development – including jQuery, Modernizr and Normalize.css.

Any ideal starting point for any new HTML5 project, it’ll save you a massive amount of time.

VIDEO JS

URL: http://www.videojs.com

The premise of Video JS is simple: create video elements on your page using standard compliant code and the Video JS library will automatically create fall-back code for non HTML5 capable browsers using Adobe Flash.

The fall-back works across browsers that don’t support the available codecs for your video too – allowing you to render HTML5 video using H.264, say – but falling back to Flash where this codec isn’t available.

Video JS is great to work with and removes all the headaches associated with deploying video to the web.

JUICER

URL: http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

Juicer is a command line tool which combines, merges and shrinks JavaScript and CSS files, reducing the number of dependencies for your website, speeding up loading times. Crucially it allows you to continue to develop in separate files for differentiation of logic and levels of presentation to your preference, but outputting a single CSS file and a single JS file at the end for production use.

ANIMATE.CSS

URL: https://daneden.me/animate

Animate.css is a library of preset CSS animations rendered entirely using standard compliance CSS3, but designed to work across all CSS3 capable browsers.

The library is a genuine time saver especially when you want to add a little sparkle without resorting to rolling your own effects. The library is simple to use, with a basic configuration possible to minimise the amount of code required such that only the features you need are including.

CAKEPHP

URL: http://cakephp.org

CakePHP is one of several rapid development tools that provide a basis for server-sided development without the need to create all the standard plumbing from scratch.

off the shelf support for database access, validation, authentication and translation are all included, and a series of boilerplate ‘scaffolding’ features allow you to develop application prototypes quickly without having to worry about how to structure your system.

JQUERY

URL: http://jquery.com

jQuery is a JavaScript framework and library that heralded the arrival of rich user interfaces and advanced user interaction on the web, without the need for plug-ins.

The library makes it so easy and simple to create animations, validation and UI controls with the minimum if code. As well as being extremely utilitarian, it also helpfully abstracts the differences between browser implementations of JavaScript and the DOM making it much quicker.

CHART.JS

URL: http://www.chartjs.org

It’s becoming more important to be able to generate graphics inside the browser, using live data sources to interpret and present data in a visual manner.

Chart.js is one of many libraries that make this process easier for web developers by providing a structured framework to develop rich, interactive <canvas> graphics.

A number of features make it stand out from the competition.

GIT

URL: http://git-scm.com

Git is a free open source version control system that allows you to take control of your website assets. It supports local branching, staging and deployment. When combined with the online repository GitHub, Git provides an extremely reliable and effective way to keep track of code changes, control access and publication – surpassing many commercial alternatives.

Some designers don’t bother with version control, but if you find yourself saving files with names such as ‘home_v2’ you’ll immediately benefit from the control Git offers.

SENCHA TOUCH

URL: http://www.sencha.com/products/touch

Sencha Touch helps you to develop mobile optimised websites that look and feel like native apps. It offers a full development environment – including support for smart phone only features such as touch screen and accelerometer. Although it uses a bespoke method for generating views, requiring a good understanding of JavaScript, it’s a powerful platform.

THREE.JS

URL: http://mrdoob.github.io/three.js

For advanced 3D visualisations rendered in the browser, it’s much quicker and easier to use a library such as three.js. This powerful framework deals with a lot of the more complex aspects of the WebGL language, making it straightforward to generate simple (or complex) 3D scenes using cameras, lights and primitive shapes. And it works across different devices and rendering engines.

STYLE

This selection of tools will help you get the style of your websites just right.

ADOBE KULER

URL: https://kuler.adobe.com/create/color-wheel

Kuler is a great freebie from Adobe that offers an intuitive way to browse and select colour schemes for your web projects. Kuler includes the option to upload a photo and sample colours from within it, as well as a neat integration into the standard Adobe design tools for ease of work flow.

LAYER STYLES

URL: http://www.layerstyles.org/

Layer Styles is a simple online tool that looks and feels like Photoshop’s layer style dialogue box. But instead of generating styles for layers within Photoshop it generates CSS3 code that you an apply to any <div> on your website.

No registration is required – just bookmark it and visit it when you need to visually generate your layer style code.

SPRITEBOX

URL: www.spritebox.net

Spritebox is a simple online application which allows you to upload a CSS sprite and draw over the top of it, defining different regions that will be used in your CSS. The tool then outputs CSS code to match your regions, simplifying the process of generating pixel-perfect sprite layouts.

PROMOTION

Once you have a website setup, you’ve still got some work to get users browsing and experiencing your work. These tools will help you do just that!

HOOTSUITE

URL: https://hootsuite.com

HootSuite offers a single platform from which you can manage and maintain your social media accounts. As social networking becomes increasingly important in the marketing and promotion of online businesses, it’s now crucial to both have a presence and actively leverage the networks to help provide good customer service, update your visitors/customers and promote your website.

HootSuite is especially useful in this regard as it brings together all the main networks into a single interface which allows you to monitor and track interactions, push out status updates and service messages and maintain customer relationships easily.

GOOGLE ANALYTICS

URL: http://www.google.co.uk/analytics

For free website intelligence, there’s not much available to beat Google Analytics. this tool offers a full suite of analysis and optimisation data, helping you track and monitor usage, manage conversions and goals, and improve you users’ experience.

As well as the standard tool-set common to all website statistics packages, Google Analytics also allows you to view real-time data as visitors hit your website, track what keywords lead to the most engaged victors, and where money spent on Google AdWords offers the best return on investment.

FACEBOOK DEVELOPERS

URL: https://developers.facebook.com

Facebook has become a destination on the web rather than just another social network. Increasingly consumer orientated websites are producing Facebook applications – effectively a version of their website designed to sit inside the Facebook environment and integrate with the built-in authentication and user account systems.

By re-purposing your web content to be served through the Facebook platform, you’ll open your content up to easier sharing and an entirely new marketplace that you might otherwise struggle to address.

So it’s well worth registering for the Facebook developer programme and using the platform as another channel through which to engage web users.

SEO DOCTOR

URL: https://addons.mozilla.org/en-us/firefox/addon/seo-doctor

This Firefox plug-in is typical of a number of different SEO browser add-ons, each of which broadly offers the same level of functionality. The premise is that by handling the common Search Engine Optimisation (SEO) mistakes and errors, you can improve website’s performance in search engines such as Google and Bing, thereby increasing traffic to your website.

SEO Doctor has a number of handy features including the ability yo track non-indexable content, link statistics, and a health report on the status of basic SEO relevant features in your HTML coding.

Overall, this is a great entry level tool that can help you ensure you’ve avoided the most common obstacles

 ADD THIS

URL: http://www.addthis.com

As the web has become more social network orientated, it’s become increasingly important that help visitors to spread the word about your website. Add This offers a customisable suite of tools that you can integrate into your website design with exactly this purpose in mind. There is no better recommendation than a personal one! Simply choose the buttons, functionality and style you’d like to use, and copy/paste the code into place.

You can also access basic analytics and usage statistics to help you improve the performance of your website on social networks, making this an invaluable promotion tool.

 APPS

Applications are always being created to make your life simpler as a web designer and help us with everyday tasks. Here are a selection of the best.

ADOBE AIR

URL: http://www.adobe.com/products/air.html

Adobe Integrated Runtime (AIR) allows developers to package applications written in standard web technologies into native applications for use across different browsers, including desktop machines (both Windows and Mac) as well as app stores for Android, Kindle, iPhone and iPad.

This allows web designers to use their existing skills to create sophisticated desktop and mobile applications, and access new revenue streams and selling opportunities, without having to re-skill.

DOCHUB

URL: http://dochub.io

DocHub is a simple reference library of documentation for a raft of common web technologies including CSS, HTML, JavaScript, the Document Object Model (DOM), jQuery and PHP.

Simply select a technology, then enter a search term to filter the list of documentation and access clear explanations and example code.

EVERNOTE

URL: http://evernote.com

Evernote is an online scrap-booking service that allows you to store, annotate and retrieve snippets from a wide range of sources. it’s an ideal planning and preparation tool when researching a particular project, but it’s also great as a solution for recording and referring to inspirational material during the design stage of a website build.

WEB DEVELOPER TOOLBAR

URL: http://chrispederick.com/work/web-developer

The ever popular web developer toolbar extension for Chrome and Firefox is still worthy of being in every developer’s toolbox as it offers a wide range of tools to help interrogate and analyse web pages in the browser. This tool includes useful functionality to outline and identify DOM elements, edit styles directly on the page and control scripting.

Are there any tools, applications or websites you would like to share? Then let everybody know by leaving a comment below.