• 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

    My Web Design and Development Toolset

    June 5, 2020 by ProfK 9 Comments

    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.

    ADOBE DREAMWEAVER

    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 still use it, but find it sluggish compared with others, like Sublime Text 3 (reviewed below).

    Dreamweaver: askdesign.biz homepage
    Key Features
    • Different payment plans, ranging from $20.99/month to $52.99/month.
    • Educator discounts.
    • Cross-platform.
    • WYSIWYG (What You See Is What You Get) interface.
    • Easily switch views from code only to preview to split (both code and preview).
    • Supports many markup languages, including HTML, XML, CSS, and JavaScript.
    • Color syntax highlighting.
    • Starter templates available; new templates can be created.
    • Built-in FTP.
    • Bootstrap integration.
    • Git integration.
    • Adobe Edge Fonts integration.

    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. Visual Studio Code is another editor I’d like to explore.

    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

    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

    Introduction to Web Design

    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.

    Leave a Reply Cancel reply

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

    Primary Sidebar

    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?

    My Art in a Book!

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

    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

    Affiliate Partners

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

    Web Hosting

    ThemeOfMonth

    Great Software Deals!

    MacUpdate Logo

    themeforest banner

    Photo, Video & Design Software

    Copyright

    © 2000-2020 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

    • 978 Grid System
    • A List Apart
    • 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.

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Contact

    Website
    Email

    Connect and Share

  •  
  • Copyright © 2021 · Optimal Theme · Built on the WordPress Genesis Framework· Customization and design by ASK Design