Intro to Design Software

Back to: Intro to UI/UX Software

Quick Overview of Digital Media Software Applications

There are many different software applications used to create digital designs for things like user interfaces for web sites. There is no one software application that can do it all and in most cases, there are several different applications that can be used to do the exact same thing (e.g. crop or resize a digital image). In this lesson, we’ll get a brief overview of the major digital media and design software applications out there, with a priority focus on the most commonly known applications used by professional designers.

A Brief Intro to Computer Graphics (CG)

Computer graphics are pictures and films created using computers. 

– Wikipedia

There are several different types of computer graphics (e.g. 2D, 3D etc.), but when it comes to digital imaging software, there are two primary CG formats to keep in mind:

1. Raster – raster graphics, also referred to as “bitmap” images, are generally a rectangular grid of pixels stored in an image file. Examples include Jpegs (.jpg), Gifs (.gif) and Pngs (.png).
   • Example software used to edit raster graphics: Photoshop.
2. Vector – vector graphics are defined in terms of points, which are connected by lines and curves to form lines and shapes. Examples include SVG (.svg).
   • Example software used to edit vector graphics: Illustrator.

Digital Media Software

Primary Digital Imaging (Computer Graphics) Software Applications:

• Adobe Photoshop
  • Raster Graphics
    • Web-specific file formats exported: jpg, gif, png
    • Free alternatives: Gimp, Pixlr (Free, Browser-based)
• Adobe Illustrator
  • Vector Graphics
    • Web-specific file formats exported: gif, svg
    • Free alternatives: Inkscape, Vectr (Free, Browser-based), Boxy SVG (Free, Browser-based)

Main Web Design Applications

• Adobe XD
  • Prototypes (User Experience Design)
  • Visual Web Design (User Interface Design) 
• Other Alternatives (not being used in this class):
  • Figma (Browser-based + a stand-alone app)
  • Sketch App (Mac Only)
  • Invision App
  • Gravit (Free, Browser-based)
  • Affinity Designer
  • Framer X
  • Webflow (super cool visual site builder that exports coded sites)
  • There are even more, but that’s enough for now.

Other Adobe Applications (also not being used in this class)

• Adobe InDesign
  • Layout (e.g. print posters, magazines, books, etc.)
• Adobe Premiere
  • Video Editing
    • Web-specific file formats exported: mp4
• Adobe After Effects
  • Motion Graphic Design & Visual FX
    • Web-specific file formats exported: mp4
• Adobe Audition
  • Audio Recording, Editing, & Sound Design
    • Web-specific file formats exported: mp3

A Note on Other Web Design Products Not Listed Above

For those familiar with Adobe products, you’ll notice a few web design-related applications that are not listed above, those are:

• Adobe Muse (not recommended for this class, mainly due to it’s target audience of non-coding designers)
• Adobe Dreamweaver (not recommended for this class, mainly due to it’s built-in WYSIWYG visual editor and the code that it auto-generates)
• Adobe Animate (not recommended for this class, mainly due to the code that it auto-generates)
• Adobe Brackets (great code editor, recommended as a good alternative to Microsoft Visual Studio Code)