Favorite Tools for Web Design

Written by Amberly Dressler | Jan 18, 2018 9:36:00 PM

Whether it is to create a prototype, manage a project, collaborate with colleagues or peers, organize work or compress images, there is a Web design tool for almost every need.
To develop a comprehensive list of designers' go-to tools, Website Magazine went straight to the source - asking your peers what they use to manage, produce, optimize and evaluate their work.

"I couldn't build a website without these three tools. They're with me through every single project.

Ahrefs - If you're building a website, then SEO is a must. From keyword research, competitor analysis, backlink opportunities, to content exploration, Ahrefs is a must have for me. Without them, my strategy, content, sitemap and even design would miss the mark. Ahrefs is a must have.

Iconfinder - There's not a mockup I touch without visiting iconfinder. Their set of free and premium icons, png, svg - they have everything. Even when I need to create custom icons, I still use iconfinder as a launching pad. The amount of time they've saved me would be shocking if added up. Design would be a much slower process without them.

Hemingway - I started as a designer many years ago, I'll always be a designer. But, I've never created a design that didn't need content. Hemingway is a fantastic tool to check my writing. It's easy to get wordy, overuse adverbs, use a passive voice, or just write long complicated sentences – like this one. Hemingway makes me look smart. I can't write without them."

~ Daniel Davidson, Founder of By Dan Design Co.

"Two resources that I love are: Identity Designed and Typewolf.

Identity Designed is a 'showcase of brand identities from around the world' run by UK-based identity designer David Airey. ID’s posts go in depth about the designer’s process in creating the brand identity and is a great resource for inspiration, especially if you know what you want out of your new design but are having a hard time putting that into words.

Typewolf is an awesome collection of typography resources, including a long running 'Site of the Day' feature. This is a great place to find typefaces you might want to include on your new site or branding, and many of the Site of the Day sites feature great logo design themselves."

~ Brian Dove, Designer at Workshop Digital

"I've used just about every tool out there, but I always find myself using Chrome's Developer Tools. It is one of the most robust and useful tools for day-to-day development and design. I use it to troubleshoot, explore the DOM, see mobile/desktop versions instantly and much, much more."

~ Paul Dessert, Web Developer at Airbus Defense and Space and Founder of
ResumeBeacon.com

"I use SHOWIT 5 and it is an online drag-and-drop interface that connects a WordPress Blog to a commercial website. This solution is for someone who wants the results that you'd see from a seasoned wireframe expert without the expense, someone who is a solo-preneur or a sole-proprietor, like me.

Here is my site, which was built using this technology:
angela-elisabeth.com

I also use another tool (not a design tool in terms of looks, but it does keep hackers from exploiting design on my site) called Wordfence. This tool keeps JavaScript and iframe insertion hacks form occurring and it keeps those hackers from getting at the login pages and admin folders that can be vulnerable in blogs. If you have a WordPress site you simply have to have this tool.

My third go-to is what I use for video, Animoto. Thier tool is EASY to use and the videos can be exported to your YouTube Channel directly from the interface. I embed mine when I do blog, which will be more often now that I have this tool. As a photographer I find it problematic to post a gallery of images online when clients have only purchased 6 or 10. Using videos I can share the gallery without risking theft.

~ Angela Elisabeth, Founder of Angela Elisabeth Portraits

"Slicy is an OS X app that makes it easier for Web designers to export graphic assets from their Photoshop files. By naming your layers and groups using the Slicy naming convention, you can export the various layers in your Photoshop files all at once. This avoids the limitations of Photoshop’s built-in slice tool, which doesn’t allow for layers to be exported independently. With support for automatically generating retina-sized images, this tool has been a godsend for our process.

ImageOptim is a small little utility for OS X that will take most common Web graphic files (GIF, PNG, JPEG), and compress them down to a smaller size. With support for both lossless and lossy compression, the tool allows Web designers to fine tune the compression level of their images. It’s a great way to optimize the file sizes of your image library, either for minimizing disk storage requirements, or for improving page load times of website designs.

BrowserStack, an online service, has been an invaluable tool for our design team, as we use it during the quality assurance phase of all our projects. The service allows you to run and experience any website using any Web browser on any operating system of your choice. It means we can test our work on a wide variety of platforms, without having to maintain multiple virtual machines (with all the different combinations of OS and Web browser versions). It also has great support for real mobile browsers, so we no longer need to rely on inaccurate emulators or constantly purchase the newest iOS and Android hardware devices.

~ Ian Chapman, Principal Consultant at Leaf Design Inc.
"My company uses Moqups to create the initial sitemap and homepage designs. Moqup is an excellent online tool that provides full features including templates, page layouts, stencils, etc. which can then be approved by the client and utilized in an actual Web design. It also allows for collaboration with both clients and partners."

~ Robyn Ackerman, President of Pop Digital Marketing
"My go-to tool when designing or redesigning our websites is is an oldie but a goodie, Macromedia Fireworks MX 2004. It is the first tool I used to design our websites and still using it today. The vector tools are what makes this an invaluable tool to use for making mock ups and wireframes. Great for quickly making banner ads and main images on our website as well. If there is heavy photo editing I use Photoshop, but then will import the photo into Fireworks for adding call outs, text and other design elements."

~ Mike Lindamood, Founder of Lamood Big Hats and WalletGear

Editor's Note: Now Adobe Fireworks

"The best project management tool that we use for website design is Trello.

Its board-like interface allows you to visually see your tasks, assign those tasks to other team members, and assign due dates on all of those tasks. Its also great for group projects and brainstorming with all teams. Being on the same page with teammates about projects and ideas can certainly help cultivate a positive company culture as well.

Its a very clean way to prioritize things between team members and keep everyone on the same page."

~   Gene Caballero, Co-Founder of GreenPal

"I would say that the number one tool that I'd recommend would be Elementor. It's a freemium plugin that has awesome features to really make your posts look awesome with zero designing skills. I use it to make my blog posts and pages attractive for my users. This little plugin has helped me increase my users' dwell time and reduce the bounce rate of my site."

~ Paul Koger, Founder of Foxy Trades LLC

"Aha: When working on a large project there is a wide selection of tools for laying out your information architecture. Aha is a tool we use to road map a product release by using their Gantt chart feature. It's collaborative and allows for us to set the milestones and communicate as a team on all aspects of the build. This is key to organize multiple projects at one time and ensure that all aspects of the design and development are on time.

The benefit of Aha is that its a platform that goes beyond design, you can build out customer personas, market research and strategy. All of these elements are important when starting a website build.

Invision: We probably won't be the only ones to mention Invision, they are an standard in the industry. We love their platform, which allows for the full range of planning, designing and prototyping..

Sketch: We still use Adobe Photoshop for the majority of our Web design elements, but we suggest Sketch as a tool for those that might be just getting started, and are looking for tools to customize elements of a design.

Sketch is a great tool for creating icons, avatars, user interfaces for apps and web page layouts."

~ Justin Shaw, Founder of One & Zero

"I enjoy using Adobe XD because 1) it is free 2) it's incredibly simple and 3) it gets the job done. I generally use XD when creating quick designs that I can communicate to my team. I am not a pure designer, so when it comes to being able to easily mock something up, this is a great free tool."

~ Dan Salganik, Co-Founder of VisualFizz
"We’ve been working with PageCloud, a visual website builder. Our agency typically serves medium to large website needs using WordPress, but we’ve found this powerful browser-based design tool to be faster and more efficient. It has streamlined the design process to allow us to begin serving smaller websites with lower technical requirements. PageCloud also gives full access to source code in app, so adding advanced functionality is never off the table."

~ Kelso Kennedy, Co-Founder of Redstamp
"Adobe Dreamweaver Creative Cloud is my go-to application for website design. It has all the features you need to design responsive websites and see the results 'live' in preview mode before you upload. Dreamweaver includes Git repository function, but I still use Bitbucket/Atlassian to keep my off site repositories so changes can be tracked and reversed if necessary.

Adobe Dreamweaver FTP works fine whether you use tradition FTP & credentials or SFTP & security keys. No need to leave the application to upload your files and make them live."

~ Randy Downs, Owner of Downs Consulting Services
"Aside from Adobe products and WordPress...

Beaver Builder is the most helpful tool for my Web design process. It simplifies the process of putting page frameworks together and allows me to spend more time on making content clear and conversion oriented.

Beaver Builder Themer is a tool I use with Beaver Builder that makes it easy to build site-wide layouts such as headers, footers, and even custom blog pages. I use this tool to completely customize every aspect of WordPress independent of the particular theme I'm using.

Ultimate Addon for Beaver Builder is my third top Web design tool because it makes it simple for me to put many different interactive elements on my website without a lot of effort.

Each one of the tools I mentioned works with each other very well and doesn't slow down the speed of WordPress any noticeable amount."

~ Nick Leffler, Owner of Exprance

"Web design tools don't necessarily have to be complicated to be good. DudaMobile and Wix are two very high rated tools that offer great features and help build functional and aesthetically pleasing websites."

~ Alexis Zanger, Senior Marketing Manager at Aegis Software Corp.

"Wix is a great website building tool that works from a cloud platform. It's got a lot of nice features such as the header tag override, which allows SEO bots to navigate and understand the content of your site. You get to choose which header tag will appear with each paragraph of text on your website. This feature really boosts your site’s accessibility by helping those users who are utilizing assisted technology to navigate your site quickly and find the content their looking for."

~ Tyler Riddell, Vice President of Marketing for eSUB Construction Software

"OutSystems has a free version for you to visually developer your Web, and mobile apps in a visual way - called Visual programming, or rapid application development (RAD).

OutSystems is an application platform as a service, or aPaaS. And that means the platform goes beyond enabling rapid application development by including hosting, dynamic scaling, release automation, performance monitoring, user management, version control and much more."

~ Alexandra Bowen, Global Head of Social and Community Marketing at OutSystems
"Adobe XD has become my go-to design tool because it makes communicating concepts with team members, stakeholders and customers faster and easier. At Polaris, we recently switched to XD because it allows us to create wireframes, mockups, and clickable prototypes using a single tool. In an environment as fast-paced as the powersports industry this allows to gain alignment and validate solutions, while iterating and increasing in fidelity. It scales beyond Web and mobile as my previous team at 3M adopted XD from the beginning, using it in a similar fashion for complex enterprise healthcare applications."

~ Andy Vitale, Director of User Experience at Polaris Industries
"Sympli: Publishing designs to provide specs and assets when handing off to engineering partners.

Sketch: Defining and managing our evolving design language and creating designs.

InVision: Lightweight prototyping for user or stakeholder feedback."

~ Carla Casariego, Director of Digital Experience Producer at Express Scripts

"Although my go-to tools are Adobe and UxPin, I would like to share two great front-end visual tools that I use, especially when I face a creative block in Web design. When stuck for inspiration or motivation, Land-book’s curated library of great website designs gives me enough spark to get the creativity flowing once again. On days when I face a dilemma narrowing down colors that work together, Palettable helps me discover visually compatible colors for use in my work, while having fun selecting them.

~ Aditi Tandon, Co-Founder of Maroon Oak

"Sketch is a must for Web designers. I use it for making simple raster graphics, vector art, basic screen designs, and building out complex design systems. It’s an open platform that allows third-party developers to create all sorts of amazing plugins that have made Sketch one of the best design tools you can find.

Principle is a prototyping tool that makes it easy for designers to create mockups of user interactions—helping developers and product managers see the designers vision for an experience. It functions similar to, and integrates well with Sketch, making rapid prototyping a breeze.

Dropbox is my file storage product of choice. Its integration with Mac OS makes it seamless backup and sharing service for Mac users, and I believe it’s the same story for PC folks. There aren’t too many bells and whistles—it’s just a great product that does what it’s supposed to do, and does it really well."

~ Kurtis Hansen, Senior Web Designer at Clearlink

"Our entire staff is remote so for working on the various aspects of a Web design we have different solutions.

One of the most regularly used, to track tasks, the status of the project, milestones, etc., is teamwork. All AmDee staff have access and varying levels of permissions, which means they only need to see the projects that are relevant to them.

We also use InVision for showcasing designs to the client. Often times just sending them a PDF causes confusion, but having them in a mock-website helps them understand how everything looks much more accurately."

We of course also use InDesign, Photoshop, Sketch, Zeplin and Github."

~ Elyssa Respaut, Project Manager at AmDee
“Pencil and paper: It’s always first before I even think about using any digital tools. There is always that creative feeling when you are holding a pencil. It gives you more freedom. It’s also more fluid when working on conceptual pieces.

Adobe Illustrator: Illustrator is my go-to for creating high-fidelity wireframes, user flows, and other UX components.

Adobe Photoshop: I use Photoshop to bring my concepts and sketches to life. Photoshop helps me craft pixel perfect designs that are aesthetically and strategically on target for clients.”

~ Joe Tucker, Creative Director at Solodev / DigitalUS
Adobe Photoshop: As I work for a digital marketing and Web design agency, we have a template that we start with for all new websites. This is stored in Photoshop so we can edit it to suit the client's brief. This gives the client a great website, and it means we can get the work done to a higher standard than most.

Google Analytics: Once a website is live, we will always analyze the marketing performance for the website if the client chooses this package. Google Analytics is absolutely fantastic for this as it gives us a comprehensive overview of all the statistics surrounding the website.

Active Collab: Building a website as an agency means there is a lot of moving parts, and Active Collab allows us to keep this all nicely organized so no work is left uncompleted. It also helps us as a company stay on top of all Web design deadlines."

~ Ryan Jones, Digital Marketing Executive at Imaginaire Digital
"Webflow is a great tool because it puts design, hosting and content management of the website on just one platform. Thanks to the responsive editor of Webflow, designers can create interactions and animations that use JavaScript and CSS to make the design process dynamic and not just a static mock.

For design feedback and collaboration, zipBoard is a useful resource. It allows everyone involved in the design and development of the website - whether designer, developer, manager or client - to share reviews and feedback on the project from start to finish. You can simply upload your mock images, HTML prototypes or even a live website URL to work on. Team members can then annotate, leave comments and track changes as tasks for better collaboration, on the project itself.

Zeplin: The simplest way to hand off design resources between designers and developers. The design hand off stage can often be tedious and confusing because there are so many assets and details involved. Zeplin helps organize all that and manage it effectively. Specifications for each design asset are automatically stored in Zeplin, right from hex codes for colors to axis coordinates that specify position."

~ Rishabh Saxena Marketing at zipBoardco
"The Web design tool I would recommend would be Snappa. I recommend this tool because it is extremely user friendly. If you're not well versed in graphic design or you're on a tight budget, you can easily use Snappa to create the necessary imagery for your website for either free with limited features or on a $10 a month plan. Snappa is also great for compressing your images so that your website is optimized with small image files making for a better user experience.

Another design tool I would recommend is Affinity Designer. This one I would recommend for those who have experience doing graphic design and can work with layers. Affinity for one is very cost-effective since it's a one time payment and I find it much easier to use than the Adobe alternatives. You can achieve almost everything you need to create incredible designs."

~ Nick Le, Founder of Gridfiti
"FileZilla is essential for any Web developer. There's no better way to transfer files than connecting via FTP. It's just so much easier than using cPanel or some other Web-based application.

Believe it or not, GIMP is an excellent open source and lightweight graphics editor that allows for creating quick and easy graphics. It's a much more practical option for Web designers than the more expensive and elaborate options."

~ Nick Saporito, Graphic Designer at Logos By Nick LLC
"ColorZilla (or some other point and click color selection tool) - Using the right colors can make or break a website. Find a site with a color that you like and select it using the tool. Now you can make slight changes to the color until its exactly right and then easy paste the color code into your project. I find myself using this constantly when working on a new site.

Awesome Screenshot (Pro) - This is a bit different than a typical utility tool, but it is so useful it is hard not to include. The person that knows best what they want is your client! Sometimes you just need a quick bit of advice to see if what you're working on is moving in the right direction. Take a quick screenshot, blur out irrelevant sections, circle important elements, markup and write on the page and then quickly export or send. I find this very useful when working with a WordPress site that is not quite yet ready to send to a client.

CSS Viewer - This addon is incredible. This extension will allow you to hover over any element on an existing site and see all of its CSS properties. Very useful for copying colors, sizes, fonts, positioning, and other useful tidbits."

~ Daniel Ali, Vice President, Project Manager at My Quick Startup
"One of my favorite tools is DRUD Tech's DDEV, which simplifies development processes and saves our agency countless hours of developer time. Using a command line interface, DDEV manages a complex array of technologies including Drupal, phpMyAdmin, WordPress, Docker, NGINX, and more. It gives my Drupal and WordPress developers a pluggable architecture, so we can keep using the tools and services we find useful while easily replacing others that are not. DDEV also offers a locally-hosted live preview so we can fully test and solicit client feedback without requiring external hosting."

~ Steve Morris, CEO, NEWMEDIA

"If you only have one designer, a tool like Sketch is better, but if you have to collaborate with other designers (or other teams that need early input) on the same project, Figma is the better choice. It's also easy to churn out responsive wireframes, which makes passing finished products to the development team that much smoother."

~ Mike Catania, Chief Technology Officer of PromotionCode.org

"Adobe Photoshop is my classic go-to. I’m able to create wireframes, mockups, graphics and edit photos, all in one powerful tool.

Adobe Experience Design (XD) has recently been taken out of beta. I’ve been working toward utilizing it for our growing design team. I can create and share interactive wireframes with stakeholders, which has helped tremendously in showing a concept. Adobe XD also helps us save time by easily exporting assets and specs for developers.

Adobe encourages feedback from the design community, which is great. You can submit feature requests on their forum, and the community can vote on which issue Adobe tackles in their next release."

~ Alanna Murphy, Senior Web/UX Designer at The Penny Hoarder
"I use ColorZilla daily to obtain an accurate color reading from within my browser. Think of it as a handy advanced eyedropper or color picker. One cool feature is that no matter the zoom level, it is able to select a color.

The most significant advantage is that it is readily available in the browser window, and saves time with available keyboard shortcuts."

~ Brad M. Shaw, President and CEO of Dallas Web Design Inc.

View full post