• Website Home
  • About
  • Services
  • Portfolio
    • Recent
    • Archives
  • Shop
    • Catalog
    • Order

ASK Design Blog

Designer | Artist | Teacher

  •  
    • Blog Home
    • Web Design
    • Graphic Design
    • Art
      • Licensed Art
    • Links
    • Calendar
    • Contact
      • Privacy Policy
      • Cookie Policy

    My Web Design and Development Toolset

    June 5, 2020 by ProfK 34 Comments

    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.

    brainstorming toolset: using social media Pinterest-ASK
    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.
    inspiration tool: using social media Instagram-ASK PopularPost WebDesign
    Another popular post: screengrab of html code.
    Thumbnail ideas for a website.

    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.

    Balsamiq wireframe app in suite of tools
    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 component in toolset: Photoshop - home page of Paul Katzeff's website.
    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.

    Envelope Distort function in Adobe Illustrator.
    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.

    Using the Wacom tablet to draw graphics.
    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.

    Adboe Color - color wheel page
    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.

    Bootstrap: important part of my toolset - code for client's home page.
    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.

    WordPress: indispensable part of my toolset - BGA About Us page
    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.

    Toolset would be incomplete without Chrome DevTools: coloremeperfect.com
    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.

    A wonderful addition to my toolset: Local by Flywheel
    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).

    VS Code landing page
    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.

    Select the code editor you prefer for your toolset: Sublime Text 3 or Dreamweaver
    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.)
    Filezilla: ftp client

    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.

    Cacher: code snippets tool
    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

    Filed Under: Software Tips, Web Design Tagged With: Adobe Color CC, Adobe Illustrator, Adobe Photoshop, Balsamiq, Bootstrap, Cacher, Chrome DevTools, Dreamweaver, Filezilla, Instagram, Intuos Tablet, Local by Flywheel, Pinterest, Sublime Text 3, WordPress

    Reader Interactions

    Comments

    1. Sal says

      October 4, 2020 at 5:35 am

      Great content, really informative and useful, appreciate you enlightening us with this! Thanks.

    2. JamesFL says

      November 5, 2020 at 11:04 am

      This article is really interesting, Thank you for sharing this great information to us! Keep it up!

    3. Praveen Kumar says

      November 18, 2020 at 8:20 am

      Great compilation of tools! I appreciate the level of effort you have put in this blog. It was very informative and these tools can be a great source for beginners. Thanks for sharing!

    4. Dcube Technologies says

      November 22, 2020 at 6:57 pm

      Thank You for this Blog

    5. Quad Que says

      November 24, 2020 at 7:13 am

      interesting article. It will help me in future web building projects. Thank you very much.

    6. Dodeline Design says

      January 9, 2021 at 11:05 am

      Content is really interesting, Thank you for sharing this great information to us!!

    7. scott lucas says

      January 11, 2021 at 10:51 am

      Thanks for sharing this info it’s really helpful for me. Good job keep it up.

    8. Technians says

      January 27, 2021 at 10:21 am

      Nice Blog. Thanks for sharing interesting content.

    9. Nylon James says

      February 3, 2021 at 11:05 pm

      Great Blog! Thanks for sharing.

    10. Web Theory Digital says

      March 19, 2021 at 6:56 am

      Thanks for an informative blog

    11. Fexle Services says

      March 24, 2021 at 11:31 am

      It is very rich content that you wrote. Seriously, what a great reference for beginners. Thank you for sharing the web design & development tools.

    12. ProfK says

      March 24, 2021 at 3:30 pm

      Great to hear that this is a useful reference! Thank you.

    13. leena john says

      April 2, 2021 at 9:26 am

      Web design usually involves many varied disciplines and skills in the maintenance and production of websites. Website Development

    14. Visual Prduct Configurator Services says

      April 7, 2021 at 9:34 am

      A cool post right there mate ! Cheers for the post .

    15. Technians Softech Pvt Ltd says

      April 12, 2021 at 7:40 am

      Nice blog of toolset. I am going to bookmark this link. Thanks for the blog.

    16. Webnotics Solutions says

      April 13, 2021 at 12:05 pm

      Thanks for sharing valuable post. This content is very helpful and informative.

    17. george marshal says

      April 21, 2021 at 7:45 am

      This is a very informative post. I really loved reading it. Thanks for sharing.

    18. ThinkStart Private Limited says

      April 28, 2021 at 9:08 am

      Really good post. I am always looking for good blog sites with useful information.

    19. osolink says

      May 21, 2021 at 4:38 am

      Great Information and I find it truly helpful. Thanks for Sharing

    20. xasadad says

      June 24, 2021 at 6:50 am

      Awesome article! I want people to know just how good this information is in your article. It’s interesting, compelling content. Your views are much like my own concerning this subject.

    21. Emma says

      July 7, 2021 at 10:31 am

      Really helpful tips! Agree with all your points. Web design tools helps you to provide your customers with a consistent personalization experience and saves you a lot of time and resources.

      Thanks

    22. nakesheer says

      August 6, 2021 at 6:20 pm

      what a good article. very helpful website

    23. Kulkarni G. says

      August 27, 2021 at 7:49 am

      Great content. I really like the tools! For Web design, I use Sublime, Bootstrap, and Adobe Illustrator!

    24. vamshi reddy says

      September 14, 2021 at 5:05 am

      Thank you for the very useful information about web development and your development toolset, I learned a lot of information in the blog thank you for sharing once again.

    25. ProfK says

      September 14, 2021 at 5:39 pm

      Glad to hear you learned some things. Thank you for your feedback!

    26. Wilton Tan says

      October 8, 2021 at 5:34 pm

      This is a fabulous post.

    27. house demolition wellington says

      February 15, 2022 at 5:37 pm

      This is a great article.

    28. Jason says

      March 1, 2022 at 11:23 am

      This is a great inspiring article. I am pretty much pleased with your good work. You provide really very helpful information.

    29. nummero says

      April 7, 2022 at 11:44 am

      Thank you for sharing your blog, seems to be useful information can’t wait to dig deep!

    30. Trademark Registration says

      July 14, 2022 at 12:18 pm

      Hi, Nice to meet you, I am Aanand
      The information provided in the blog is very nice and knowledgeable.

    31. Balimi Corp says

      March 6, 2023 at 5:02 am

      Thank you for sharing the Valuable information of the tools for web design and development.

    32. Shovon Joarder says

      July 19, 2023 at 2:37 pm

      Thank you for sharing these ideas.

    33. Warn Kale says

      September 8, 2023 at 2:23 pm

      With CapCut, you can efficiently edit your images, unlocking a wide range of creative possibilities. CapCut

    34. ProfK says

      September 10, 2023 at 12:06 pm

      Thank you for the resource. I’ll check it out.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Primary Sidebar

    Affiliate Disclosure

    This website contains affiliate links, which means I may get a small commission (at no cost to you) if you use these links to make a purchase.

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Looking for Something on this Site?

    Search the Web

    New Book Published!

    Kornegger book: Inside the Rainbow

    Art and design for book cover and interior

    Inside the Rainbow: Soul Connection in Nature, by Peggy Kornegger

    BUY THE BOOK!

    Peggy and I have completed our 3rd book together! This one is about soul connection in nature. Peggy is the writer, I'm the designer and artist. I think it's pretty darn special and hope you agree 🙂. Printed book and eBook are both available on Amazon.

     
    kornegger loseyourmind front cover
    Several of my paintings are in this book (including the cover)
    BUY THE BOOK!
     
    Check out my blog post about designing books: Self-Publishing Adventures

    Amazon Affiliate

    As an Amazon Associate I earn from qualifying purchases.

    Photo, Video & Design Software

    Affiliate Partners

    We receive compensation when you purchase a service or product via the links on this blog.

    Web Hosting

    WP Engine
     
    Bluehost Website Hosting

    Testimonials

    I received the notecards on Friday and it was on my to do list today to email you my deep appreciation for them. They are amazing and I am so glad to have them to share. I am sure I will order more in the future. You are such a gifted artist and I thank you for sharing in a way others can use the art.

    — Shari Spokes

    Your new pastel "Lettuce Lake” is really beautiful. Very, very nice.

    — Tony from Belmont, MA

    My dear sweet sister. I can’t tell you how much I love your pictures. I so much wanted something and was so sorry that I couldn’t pick something out at your sale. On the other hand, I so much wanted something that you had chosen for me. Its been on my mind and suddenly, your beautiful pictures arrived. They are beyond beautiful and I cried when I saw them. Sending you love and my bestness.

    — Marti from Reno, NV

    Copyright

    © 2000-2023 Anne S. Katzeff. All rights reserved. Unless noted, all artwork and text are copyrighted by the artist. Images may not be reproduced, manipulated, or used in any way without Anne’s written permission.

    Categories

    Graphic Design

    • AIGA
    • Design Is History
    • Janice Moore
    • Mass. Contractors

    Web Design

    • A List Apart
    • Adobe Color Tools (formerly Kuler)
    • AWWWards
    • Smashing Magazine
    • underthesite
    • www schools

    Tech-Computer

    • Adobe TV
    • Orramac
    • Teknoziz

    Comments

    In an effort to reduce spam, comments are restricted. Please email Anne if you have a comment or question that you are unable to post. Thanks for understanding.


    Archives

    Typography

    • 1001fonts
    • Adobe Type
    • Adobe Web Type
    • Bitstream
    • Dafont.com
    • Emigre
    • Font converter (free)
    • Font Spring
    • Font Squirrel
    • Google Fonts
    • I Love Typography
    • identifont
    • Typeinspire
    • Typewolf
    • Typoretum

    Photography

    • Creative Commons

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Contact

    Website
    Email

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Connect and Share

  •  
  • Legal

    Privacy Policy
    Cookie Policy

    Copyright © 2023 · Built on the WordPress Genesis Framework · Customization and design by ASK Design