Probably not unlike you, we use a cadre of different tools to help us create websites and products we’re proud of. Every year it seems that this list morphs, evolves, shrinks and grows. So we thought, ‘Hey, it might be valuable to some people to get a look at how we build things and the tools that we use to get the job done.’ We looked at every step of our development process and highlighted our favorite technologies every step of the way. These divisions aren’t meant as hard and fast rules; but rather groupings that can help you if you’re looking for a tool to find efficiencies, process improvements or work product for a particular phase.
39 Web Apps and Tools We Use to Create Websites
Meeting, Brainstorming, Strategy
Our initial planning phases are all about collaboration. Here’s what we use to communicate, ideate and put the plan together.
Skype – Like many of you, our clients are in far-flung places. Jumping on a plane to review every comp or brainstorm every feature just isn’t efficient. Skype is the perfect way to get face-to-face with clients and review mockups in real time. It’s our default mode of communication when we need to screen share something.
Whiteboard – It’s not digital, but there’s nothing more valuable than being able to sketch out quick flows, wire concepts and architectures. We try to put one on every available wall surface. And now that we’ve run out of wall space we’ve taken to sketching on our glass conference room table as well.
Google Docs – Emailing files back and forth, buying Microsoft Office and dealing with version control just isn’t for us. If you’re over it too, we’ve found that Google Docs has come so far so fast that it is now our primary office suite for business docs. Plus docs make for perfect repositories for brainstorming notes, business requirements, to-do lists, timelines, and more.
Google+ – We use Google+ in the office in a number of ways, but it’s a great resource in helping us share and track innovative and interesting projects we find on the Web. It’s a great source of idea fodder to help in this phase of the project.
Basecamp – If your job is to ship, Basecamp is the lightweight tool to help you do that. We use Basecamp to track milestones, to-dos, team availability, project correspondence, files and more. If you’re in an Agile environment you might like JIRA or Pivotal Tracker for software built for that workflow.
Dropbox – Collecting and managing images, client files, presentations, comps and any other project file just works better on Dropbox. The desktop app makes it easy to add and access files stored on Dropbox and features such as folder sharing, public links and photo galleries make it a handy tool for working with clients and team members no matter where they are. Plus it’s great for version control because it saves past instances of uploaded files.
They’re our go-to tools as we start to determine user flows, information architecture, prototypes, and user experience wireframe concepts.
Axure – A powerful wireframing tool that helps us build wireframes and emulate user experience and flows with interactive linking between wireframed pages. Axure lets us do quick and dirty wires for internal review and then lets us polish them up and annotate them for client delivery. If you’re looking for a less-expensive wireframe solution, we’re also fans of Balsamiq mockups and Mockingbird — especially for lower fidelity wireframe sketches.
Omnigraffle – A great tool for vector-based user flows, site maps, customer experience touchpoints and more. Omnigraffle is a great tool to help show overall user experience and the system interactions or information architecture.
Whiteboard – If we had a nickel for every time we went to a whiteboard in this phase we wouldn’t need to charge for our services. Again, it’s invaluable for ideating, trying out ideas and collaborating on solutions to business requirements.
Design, Presentation, and Iteration
When it’s time to bring the idea to life with design, there are the tools we turn to.
Adobe Photoshop / Adobe Illustrator – This is where the heavy design lifting is done. This isn’t news to any of you in the field; but these are the workhorses of the design phase, noway around it. Sure, there are other programs out there, but Adobe is still the best for everything from page layouts, logo development, custom art and production graphics. If you don’t love Photoshop, Fireworks also gets the job done if you’re doing mostly Web-based work.
Join.me – Why pay for WebEx or GoToMeeting when you can use join.me for easy screen sharing and client presentation. It’s dead-simple, and you can either pay for a recurring username and meeting room, or use a one-time code for free. It’s a great way to walk a client or colleague through a design.
GoToMeeting – If you need more from your screen sharing software, such as passing control of the screen between parties, conference call chat and recording, then paying for GoToMeeting may be a better option for you than Join.me.
Getty Images/iStockPhoto – We try to stay away from stock imagery whenever possible; but sometimes you need it. These libraries are deep and provide a wide range of options for finding that perfect shot of a hand shake for your contact page (I kid!)
Notable – Notable is a collaborative tool for sharing and tracking group feedback on creative comps. The ability to highlight and comment on particular areas of the comp make it easier to focus the conversation and communicate questions and changes even with remote teams.
Cloud – CloudApp is a simple desktop client for Mac that lets you instantly create hosted files by dragging local files to their app icon. Cloud immediately puts a short-link URL on your clipboard linking to a hosted version of the file. Great for avoiding those nasty 5MB Microsoft Exchange email size limits.
Skitch – A great, fast way to grab screen captures and share them with others via a hosted version of the capture. Their annotation tools make it easy to point to a particular element of the image for discussion. Plus, Skitch’s sets feature lets you put multiple related shots in one place for easy viewing.
Verify – Verify lets you show comps and concepts to an anonymous audience. The audience members have five seconds to review your designs and then answer a question you specify. From A/B tests on which creative they like better, to answering what they think the business does based on the design, it’s a great way to get quick, inexpensive feedback when trying to decide on a direction.
UserTesting – Want a more in-depth user experience review? UserTesting can provide panels of user testers based on information you provide. The sessions are task-based and the user’s screen is recorded. A survey can also be included. If you want to user test your new app or new site, it’s a great way to validate your assumptions or identify hidden usability problems.
Basecamp – This phase is all about back and forth, and Basecamp is a great tool to manage the iterations and make sure we’re all on the same page and working from the latest version.
With design locked it’s time to build the engine that is going to get this project up and out to the public. Here’s our list of tools to get ‘er done.
TextMate/Notepad++ – The best, lightweight desktop code editors. If you’re a Mac you’re probably TextMate. PC? Notepad++. The built-in templates, auto-complete features and overall polish make them the gold standard when it comes to Website development. They’re perfect for coding out a website, or a WordPress install.
PuTTY/Terminal – Server configuration, crons, software and database setup, maintenance, etc. It’s still the easiest and best way to efficiently manage servers.
Aptana – A robust IDE (Integrated Development Environment), Apatana lets you build applications right on your desktop. Pick your language and get bring your app to life with everything you need to dev and QA your web app right on your desktop.
Coda – Coda bills itself as one-window web development for OSX, and that’s a pretty accurate statement. Coda provides a text editor, FTP, Subversion control and more rolled into one pretty package. Some people swear by Coda, we’re those people.
Beanstalk – Hosted subversion and Git version control. Beanstalk lets you easily manage your deployments by doing the complicated merging, updating and logging changes while providing collaboration and communication tools to help your team more effectively manage deployments. A nice tool if you don’t have a full-blown deployment team for rolling out new builds.
Firebug – If you do any front-end Web dev you live with Firebug open on a regular basis. It’s great for identifying styling issues, trying out new CSS in your browser and pushing and nudging items into place with minor CSS tweaks. The copy styles makes it easy to take those tweaks and build them into your primary CSS files.
Border-radius.com – Need the CSS for a rounded button? Enter the values and this handy tool cranks out the style information you need to get your rounded button on.
jshint.com – Have a pesky JS bug you’re trying to squash or looking to validate your existing code for any potential issues? Paste your JS into the site and it will spit out a list of errors and potential issues.
Papercut – Email notifications are a way of life with any Web app. But sometimes you don’t want to go through the headache of connecting your app to an SMTP server just to test and see if it can send email. So Papercut lets you set up a simple SMTP server and GUI so you can receive test emails from your app and validate their content and creative.
ColorZilla – If you’re using gradients in buttons and other UI elements this handy tool will let you specify gradient settings and then generate the CSS style information you need. Next time don’t skip the gradient because the code is too complicated, use the gradient and get the code with ColorZilla.
Visual Event — Need to debug a website or app and are having a hard time tracking back the JS function tied to the event and page element? You’re not alone, which is why Visual Event exists. Visual event makes it easy to debug by displaying the event and corresponding subscribed JS function. Now you can hunt down and squash JS bugs in a fraction of the time. You’re welcome!
Shipping a product doesn’t mean our work is done. Iteration is key to improving performance and learning from real user feedback and data. Here’s how we collect that data.
Google Analytics — The gold standard of free data. With properly configured goals, user segments and ecommerce tracking, Google Analytics will give you every Web metric you need to see how your site is performing.
KISS Metrics – Want to see individual-level performance? Google Analytics can’t do that. Want cohort analysis? Google Analytics misses again. But KISS Metrics gives you both, plus detailed funnel analysis that help you identify weak spots in your conversion funnels that you can prioritize in your product iterations.
KISS Insights – Hard data is great, but it can’t tell you what the user was looking for or if they enjoy using your website or app. KISS Insights lets you deploy a simple, single-question survey widget to your website. It’s a great way to solicit qualitative feedback that can uncover insights about your user experience that can’t be gleaned from analytic packages.
Optimizely – On the Web there’s no excuse not to always be testing. Optimizely lets you test page elements quickly and easily. A/B tests or multi-variate, Optimizely’s visual editor and test setup makes it easy to run new experiments and collect data for continuous conversion improvement. Visual Website Optimizer or Google Website Optimizer are also good options for on-site A/B testing.
CrazyEgg – Get detailed click maps and scroll maps that help you understand where your user attention is going and where it wains. It’s a great way to visualize what page elements are being seen and capturing attention. You may find that a design element is getting all the user attention, while your call to action is missed by the majority of users who give up scrolling before they get there.
Survey Monkey – Surveys are a great way to get detailed feedback from your users. From their overall satisfaction, net promoter score, demographic insight and feedback on features and functionality, you can’t beat a detailed survey. Survey Monkey makes it easy to create surveys with different questions types, branching based on previous responses and deployment via web, email or social channels.
That’s our list. Have a favorite that we didn’t cover? We’d love to hear about it in the comments. We hope this list of tools and apps introduced you to a resource or two that will make your web development efforts easier and more efficient. We’re constantly evaluating new technologies and tools to help us do our job better. We’ll do our best to report back in a year’s time with our latest list of development technologies. Until then, be sure to share with us any new gems you find that help you do more quality work.