My Web Design and Development Toolset

UPDATED 6.10.21

My web design and development toolset includes desktop as well as cloud-based applications. I use the tools for brainstorming, thumbnail sketching, design comprehensives, and implementation of code. I’m always open to trying new things. Sometimes, I’ll explore a new program, love it, and make the switch.

PINTEREST

Visual discovery platform

I use Pinterest to find, store and categorize images and ideas. It serves as a great reference archive for my designs and artwork. It’s part of my brainstorming suite of tools. In the early stages of a design project, I create a private board where I “pin” images that inspire me.

Key Features

• Pins = posts.
• Boards: nice way to categorize.
  • Boards can be made private.
  • Boards can be shared, so teams can upload to them.
• Source for inspirations, ideas, references.
• Analytics > Audience Insights. User engagement is broken down into categories, interests, age, gender, location, and device.

INSTAGRAM

Social media platform

Instagram is an image-sharing, networking application. Users post photos and videos to connect with others, build an audience, express themselves, share information, and explore. As an added measure, I like to pin my bookmarked Instagram posts to my Pinterest boards.

Key Features

• Entirely visual: photo and video sharing.
• Posts = “permanent” items on your feed.
• Stories = 24-hour posts.
• Posts can be bookmarked.
• Descriptions and hashtags can accompany the posts.
• Comments encourage interaction.
• Analytics – available on a Biz Account.

PEN AND PAPER

Traditional design tools

Sketchbooks are a cornerstone to my toolset. I use them, because I like to write out my brainstorms and draw my ideas. It feels more spontaneous and less restrictive than using a digital tool. In fact, I always have my sketchbook ready whenever I’m brainstorming on Pinterest and Instagram.

Key Features

• Low-cost.
• Portable: available in different sizes.
• Easy.
• Flexible.

BALSAMIQ MOCKUPS 3

Wireframes application

I actually won a licensed copy of Balsamiq at a WordPress MeetUp in Boston! This is a streamlined tool for creating wireframes, which are skeletal layouts of a website. I use it for large, complicated sites or when a client requests wireframes. More often, I go directly from thumbnails to design comps. Support for Mockups 3 will end in 2021; it’s been replaced by a completely updated Balsamiq Wireframes for Desktop. You can, however, still download Mockups 3.

Key Features

• Starts at $89/single user. Prices increase as you add more users to the license.
• Easy to use.
• Great UI library of hand-drawn layout and markup elements, ranging from buttons, contains, and forms to icons, markup, symbols and text.
• Import assets, projects, and mockups.
• Projects can be exported to PNG and PDF.

ADOBE PHOTOSHOP

Design and raster image application

My design life began in the print world, where precision rules. During that time, I designed websites in Adobe Illustrator because I liked its exactness. However, I’d have to export the AI file to Photoshop to rasterize the images. Eventually, I decided to eliminate the extra step from vector to raster by designing in Photoshop. This program is the gold standard for image editing and is a key component in my toolset.

Key Features

• Different payment plans, ranging from $9.99/month to $52.99/month.
• Educator discounts.
• Adobe fonts automatically activate.
• Web-optimized image options:
  (1) Save for web for individual images
  (2) Generate image assets option for all images
• Desktop and iPad platforms.
• Layers.
• Tools for selecting, drawing, and adjusting.
• Masks.
• Retouching.
• Smart objects.

ADOBE ILLUSTRATOR

Design and vector graphics application

Vector images are resolution-independent and do not lose quality when scaled up or down in size. Illustrator’s precision is a welcomed attribute when designing logos, icons, patterns, and single-page print materials. For multi-page print materials, I use Adobe InDesign.

Key Features

• Different payment plans, ranging from $20.99/month to $52.99/month.
• Educator discounts.
• Adobe fonts automatically activate.
• Web-optimized image options:
  (1) Individual images can be saved for web
  (2) Generate image assets option for all images
• Desktop platform (iPad platform coming soon).
• Layers.
• Masks.
• Convert type to outlines.
• Rasterize objects.
• Export as PNG, JPG, PDF, and SVG.
• Edit PDFs as AI files.

WACOM INTUOS TABLET

Digital drawing device

Using a tablet enables you to hand-draw with a pen-like stylus. Tilting and moving the stylus is much more natural and comfortable than drawing with a mouse. The tablet is the surface on which you draw. My tablet (the Intuos) is synchronized with my computer monitor. I draw on the tablet and see the results on my screen. It’s a bit of a disconnect, but I adjusted.

Other, more expensive tablets, serve as the surface and the display, which offers a much nicer experience. You are drawing on the same surface that renders the results. It’s more interconnected.

Key Features

• Prices vary, depending on the product type, size and features. The most affordable is the pen tablet, starting at $69.95. The most expensive is the Mobile Studio Pro, for $3,499.95;
• You can do everything with the stylus and tablet that you can do with a mouse and a computer monitor.
• Can use in Photoshop, Illustrator.
• Easy to set up.
• Wireless and/or USB-connected.
• Hand-drawing with more control over the strokes.
• Excellent for creating masks.
• Pressure-sensitive.
• Different tablet size options.
• Different kinds of stylus nibs.
• Comfortable, ergonomic stylus design.

ADOBE COLOR CC

Color palette app

Formerly known as Kuler, this is a visually-intuitive interface for selecting hues and generating palettes. It allows you to select up to 5 colors and save them as a “theme”. If you need more colors, create additional themes. These themes can then be used in your Adobe product files.

Key Features

• Free.
• Several color wheel options: Analogous, Monochromatic, Triad, Complementary, Split Complementary, Custom, and more.
• Build palettes from scratch using the color wheel.
• Extract palettes and gradients from images.
• Accessibility tool to test color-blindness and contrast issues.
• 4 Color Modes: RGB, CMYK, HSV, and LAB.
• Explore existing palettes created by others.

BOOTSTRAP

Framework for building mobile-responsive websites

I started using Bootstrap about 5 years ago. My first framework was Gumby 960. I liked it a lot for a long time, but its two glaring limitations (960 pixel width and non-responsiveness) forced me to switch. Bootstrap is now an important part of my toolset. My website is built with Bootstrap, while my blog runs on WordPress. I like to keep current in both platforms.

Key Features

• Free, open-source.
• Easy to install.
• Starter templates and excellent documentation.
• Compiled code for CSS and JS.
• Source files for SASS and JS, if you prefer to compile your CSS.
• Bootstrap CDN.
• Theming with SASS.

WORDPRESS

Content Management System

WordPress is a free, open-source software that powers 35% of the web. Most of my clients’ sites use it, and most new clients request it, so it’s another indispensable part of my toolset. WordPress enables people to build websites and blogs with little or minimal knowledge of web coding.

There are 2 platforms to choose from: WordPress.org and WordPress.com. Both platforms use the same software. WordPress.org is self-hosted (you pay for hosting), while WordPress.com is a managed hosting platform. For more information about the differences, read my post: WordPress.org vs. WordPress.com: compare and choose.

Key Features

• Free, open-source.
• Thousands of templates (themes) for layout. Some are free, some are premium ($).
• Over 50,000 plugins available to enhance functionality (free and premium).
• Very active community support.
• User can type and edit text.
• User can upload images.
• Customizable.
• Mobile-responsive.
• SEO friendly.

CHROME DEVELOPER TOOLS

Web development tools

Built directly into the Google Chrome browser, these tools are used to diagnose problems and modify code. Firefox and Safari also have developer tools, but I prefer Google Chrome. My toolset would be incomplete without DevTools, which allow you to fearlessly experiment with the code. Any changes you make using DevTools has no effect on the live site until you copy and paste those changes into the actual CSS file.

DevTools are accessed via the 3 vertical dots at the top of the browser window (dots > More Tools > Developer Tools) or a keyboard shortcut (Ctrl Shift J (Windows) or Ctrl Option J (Mac). You can change the panel’s position to dock on either the left or right side, top, or a completely separate window. At the top of the browser window will be the mobile-responsive area, where you can select different device widths. You can also change the widths manually.

Key Features

• Free.
• Interact with HTML, CSS, and Javascript.
• Select HTML element and identify associated CSS styles.
• Make code changes and preview immediately.
• Copy and paste the changed code into the actual CSS file.
• Mobile-responsive emulator.
• Javascript console for debugging.
• Lighthouse for generating site performance reports.

LOCAL BY FLYWHEEL

Local development application

I recently switched from MAMP Pro to Desktop Server to Local by Flywheel for local development. MAMP Pro started to give me some headaches and Desktop Server (free version) couldn’t do everything I wanted it to do. Local by Flywheel passed all of my tests! It is a wonderful addition to my toolset.

Key Features / Free version

• Easy to install.
• Use for static html sites, as well as content-management systems, like WordPress (files and database).
• Add a new site or clone an existing one.
• Create Blueprints as templates for future sites.
• Use a standard development environment or create a custom one, with varying settings for PHP, Web Server, and MySQL.
• Install an SSL certificate.
• Pro version has additional features like Magic Sync and Deploying to Staging.

VISUAL STUDIO CODE

Code editor

All websites are built with code: HTML, CSS, and Javascript. Code can be written in any text editor, but code editors are designed specifically for web design and development. Their features ease and enhance the writing, editing, and programming tasks.

My first code editor was BBEdit. I started using Dreamweaver when I began using the Adobe Creative Cloud suite. I now find it sluggish compared with others, like Visual Studio Code and Sublime Text 3 (reviewed below).

Key Features

• Free, open-source.
• Cross-platform.
• Supports many markup languages, including HTML, XML, CSS, and JavaScript.
• Color syntax highlighting.
• Pre-installed snippets; new ones can also be created.
• Bootstrap integration.
• Git and Github integration and Source control.
• Integrated Terminal.
• Huge library of extensions.

SUBLIME TEXT 3

Code editor

A free, streamlined, sophisticated code editor. There are plenty of options out there, so it’s really a matter of exploring some of them and selecting the one you prefer for your toolset. I’ve also tried Atom and like it very much.

Key Features / Free version

• Cross-platform.
• Supports many markup languages, including HTML, XML, CSS, and JavaScript.
• Color syntax highlighting.
• Pre-installed snippets; new ones can also be created.
• Keyboard shortcuts.
• Many plugins available, including Bootstrap integrations.
• Color picker.
• Git integration.

FILEZILLA

FTP client

A fast, reliable File Transfer Protocol application for uploading and downloading files to/from web servers. I had been using Transmit for a while, but a tech support person recommended Filezilla and I’ve never looked back. Learning how to use it is easy due to its intuitive graphical user interface.

Key Features / Free version

• Supports FTP, FTP over SSL/TLS (FTPS) and SSH File Transfer Protocol (SFTP)
• Cross-platform.
• Supports large file transfer.
• Site Manager and transfer queue.
• Drag & drop support.
• Synchronized browsing.
• Directory comparison.
• Pro version has additional features, such as integration with cloud storage venues (Dropbox, Amazon S3, Google Drive, Microsoft OneDrive, etc.)

CACHER

Code snippets tool

This terrific application enables you to save and organize code snippets in a library for easy retrieval. All of the major programming languages are supported. When you name the snippet with its associated suffix (.css, .php, .js, etc.), the language’s color and indenting syntax is activated.

Key Features / Free version

• Free online and downloaded application.
• Cross-platform.
• Integrated with Github, Slack, and Chrome/Firefox.
• Flexible labeling system for organization.
• Pro versions ($6 – $20 / month) have additional features, such as integration with editor plugins and teams.

What do you use for design and development?

I’m always on the lookout for great tools. Please share your favorites in the comments below!

Related Posts

Front-end Development Workflow Adjustments
Best Alternatives to Photoshop
A Guide to Incorporating Social Media with Your Website – part 1
A Guide to Incorporating Social Media with Your Website – part 2
My Core Set of WordPress Plugins