Ultimate List of Tools for a Web Designer and Developer

“I wanted to project myself forward to age 80 and say, “Okay, now I’m looking back on my life. I want to have minimized the number of regrets I have.” I knew that when I was 80 I was not going to regret having tried this. I was not going to regret trying to participate in this thing called the Internet that I thought was going to be a really big deal. I knew that if I failed I wouldn’t regret that, but I knew the one thing I might regret is not ever having tried. I knew that that would haunt me every day, and so, when I thought about it that way, it was an incredibly easy decision.”

- Jeff Bezos

This post is of great interest if you are building a website or mobile app. For simplicity, I will provide and discuss web design, but all conclusions are qualitatively the same for mobile apps.

Good design is what makes your website feel trustworthy. Most newly launched websites fail because they don’t gain trust from their visitors. User trust positively correlates with a website’s sign up and engagement rates, since it makes users believe that the company behind a website tells the truth about its product. So the biggest take-home lesson is to design for trust and simplicity. Trust is not easily measured, but good web design is a sure way to build trust in many ways.

You can build trust by providing:

- simple navigation with a minimal number of steps

- links to your own or your company’s social profiles

- evidence of users’ activity (comments, upvotes, posts)

- your team’s photo

- testimonials from happy users

- links to press articles (from other trusted sites)

- big font sizes and high-quality images (not standard stock photos)

- little or no advertising

- useful and unique content, such as blog posts

Other factors contributing positively to trust are:

- fast load speed (under 3 sec)

- low number of reloads

- fast on-page updates

While building my own website, I’ve learned over 50 tools which made website development and design an order of magnitude faster. Though it took me months to find, recognize, and finally adopt these tools, you don’t have to go the same way. Here, I put all the shortcuts and tools together for you to build a trustable website quickly.

I used many great resources to teach myself to code. If you are a beginner and do not know where to start, similar to where I was 6 months ago, I suggest to skip reading or taking a class. Instead, start your own big project. This will solve your two biggest problems. First, you will figure out which language and framework to learn in order to build your project. Second, you will do everything (including mistakes) from web design to front-end and back-end coding by yourself. By building your own project, you will develop a better sense of what to build and how to minimize the effort. To learn front-end frameworks, I suggest trying Bootstrap. If you’d like to learn a full-stack real-time framework, then I recommend Meteor. Three other additional sources which helped me a lot: Discover Meteor, Evented Mind, Stack Overflow. I also recommend you get familiar with Github, install open-source apps locally, and try out, break and fix as many things as you can!

Access PC remotely: to access your computer or allow another user to access your computer remotely.

Chrome Remote Desktop, TeamViewer

Add maps to your app: to add map functionality to your app.

Google Maps, Mapbox

Add search as a service: to add a search functionality within your app.

Algolia, Elastic Search

Analyze website with SEO tools: to analyze website with SEO tools.

Small Seo Tools

Build a website by drag-and-drop: to easily create a high-quality website, blog or online store.

Weebly, Squarespace, Webflow

Build a website with CMS: to create a free and customizable website.

Wordpress

Build and test APIs: to build and test APIs faster.

Postman

Build native-like apps with Javascript: to build cross-platform native-like mobile apps.

Cordova

Build your own WordPress theme: to create a custom WP theme with preset layouts and editing tools.

Pinegrow, Layers

Buy an SSL Certificate: to buy an SSL certificate to secure your website.

Namecheap, DigiCert, Godaddy SSL

Check DNS propagation: check your domain name’s current IP address and DNS record propagation around the world.

Whatsmydns.net

Check grammar: to check grammar online.

Grammarly

Check if a webpage is down: to check if a website is working or not.

Down for everyone?

Check text for clarity: to simplify text and check for common errors.

Hemingway App

Check text for plagiarism: to test articles for plagiarism.

Copyscape, Paper Rater

Compress images: to optimize and compress your images online.

Compressor.io, TinyPNG

Connect and automate apps: to automate tasks between web apps.

Zapier, IFTTT

Create mockups: to build interactive prototypes complete with gestures, transitions, and animations.

Invision, Proto.io, Sketch

Deploy popular and open-source apps: to easily deploy apps in the cloud.

Bitnami

Design buttons: to learn about web and app button styles and effects.

Tympanus

Design in 3D: to design and engineer objects in 3D.

Autodesk

Discover free videos: to download royalty free footage and videos.

Videvo, Coverr

Discover mobile user interfaces: to view collections of mobile user interfaces.

Pttrns

Discover web design blogs: to learn from the most popular web design blogs.

Smashing Magazine, WebdesignerDepot

Distribute files by CDN: to serve files over a content delivery network.

Amazon CloudFront, CloudFlare

Edit and share construction blueprints: to manage and share blueprints during construction.

PlanGrid

Edit images: to create, edit, and retouch images.

Gimp, Inkscape, Pixlr

Embed content: to generate an embed code for web and mobile content.

Embedly

Find a WordPress developer: to find a reliable WP expert.

Codeable, WP Curve

Find a Wordpress Theme: to browse hundreds of WP themes and templates.

Theme Forest

Find a hosting service: to host your app.

Digital Ocean, Amazon AWS

Find alternative or similar software: to find similar apps and software.

AlternativeTo

Find and buy domain names: to find and buy domain names for websites.

InstantDomainSearch, Godaddy, NameMesh

Find answers about programming: to browse, ask and answer programming-related questions.

Stack Overflow

Find cinematographs: to view a collection of cinematographs, or living photographs.

Reddit Cinemagraphs

Find free images: to find free images for your project.

Pixabay, Freepik, Pexels, Unsplash

Find jQuery plugin: to pick and download jQuery.

Unheap

Find wallpapers: to get free high-resolution wallpapers for desktop.

WallpapersWide, Reddit Wallpapers

Generate .htaccess file: to quickly generate an htaccess file for many functions.

.htaccess generator

Generate dummy text: to generate Lorem Ipsum dummy text.

Lorem Ipsum, BlindTextGenerator

Get a fast WordPress theme: to get the fastest-loading WP themes.

Schema, Frank

Get a micro-computer: to explore computing and learn how to program with a micro-computer.

Raspberry Pi

Get advice from developers: to get micro-consultations from developers.

AirPair

Get advice on good user interface: to discover actionable tips on good user interface design.

GoodUI

Get design advice: to learn about good web design.

Google’s Material design, Designmodo, Dribbble, Google’s Web Design, Smashing Magazine UX

Get free software: to see a list of available free software.

Best Free Software List

Get your website reviewed: to review visibility and usability of your website.

WooRank

Get antivirus software: to get full-featured antivirus for free.

Avast

Hire a designer: to hire a graphic and or web designer online.

99designs, Dribbble

Hire a video producer: to find and hire talented video creators.

Videopixie, Videobrewery

Host a Wordpress website: to host a WP website and keep it fast, scalable, and secure.

WP Engine, FlyWheel

Host a wiki-like website: to start your own wiki on a specific topic.

Wikia

Host static website: to host your static website.

Amazon S3, Github Pages

Improve page load speed: to measure speed load score and get actionable tips.

Google Developers

Improve SEO: to improve your website’s Google rank with search engine optimization.

Google Webmasters, Google SEO Guide, Moz, Moz Guide

Install BitTorrent client: to get a free torrent client.

uTorrent

Install a video player: to get an open-source video player for your computer.

VLC media player

Install code editor: to write and edit code on your computer.

Sublime Text, Notepad++

Learn Chrome’s shortcuts: to learn tab and window shortcuts for Chrome.

Chrome Help

Learn color rules: to learn color combinations.

Adobe Color CC

Learn front-end framework: to learn simple mobile-first front-end framework.

Bootstrap

Learn typography: to use a glossary and learn about the structure of type.

TypeDecon

Learn web design: to learn design from tutorials.

Codrops SitePoint

Load test your app: to test your app’s connection and response time for free.

Loader

Look up website stats: to look up any website’s traffic statistics.

SimilarWeb, Alexa

Make a website status page: to show users a status page with updates when your website is down.

StatusPage.io

Make favicons: to generate responsive favicons.

RealFaviconGenerator

Manage property online: to manage rental property in your browser.

AppFolio

Measure connection speed: to test internet connection bandwidth.

Speedtest

Measure page load time: to measure a web page’s load time.

Page load time, Chrome -> Network

Organize code: to share code and build software together.

GitHub, Bitbucket

Pick a font: to pick a font for your app.

Google Fonts, Adobe Typekit

Pick an icon collection: to find icons for applications, software, websites, etc.

Flaticon, Font awesome, Streamline

Pick color palettes: to choose the right color scheme.

Digital Telepathy, Google Design

Read and edit pdfs: to view, edit, sign, and fill out PDF files.

Adobe, PDF Escape

Remove background from images: to generate image mask online.

Clipping Magic, Background Burner

Search for available APIs: to search and access public and private APIs.

Mashape

See the history of website’s homepage: to see how a website’s homepage appearance has changed over time.

Internet Archive

Shorten URLs: to shorten, share and track links.

Google URL shortener, Bitly

Test website in different browsers: to test your website for cross-browser compatibility.

BrowserStack

Unlock pdf: to remove passwords from pdf files.

Smallpdf

Use a developer checklist: to check your web app against a checklist of features and capabilities.

Web Developer Checklist

Use a micro-controller: to use an open-source micro-controller to create interactive electronic devices.

Arduino

Use browser for web development: to use web authoring and debugging tools built into Chrome.

Chrome DevTools

Use code editor in browser: to edit and preview HTML, CSS, JS code in your browser.

Codepen, JSFiddle

Use developer cheat sheets: to see collections of all cheat sheets for a developer.

OverAPI, Top Design Magazine

Visualize data: to make charts and infographics with data.

Piktochart, Infogr.am, Visually

By Timur