When designing digital products such as websites and apps. there are many apps to choose from. Which one is right for you? In this article we’ll talk about Adobe XD, Figma, Sketch, and Adobe Photoshop.

Adobe XD

XD is the newest of these apps, and Adobe is putting a lot of effort into developing it quickly. Updates are released every 1–2 months, and XD has come a long way since the first beta versions.

XD aims to be the all-in-one solution for UX/UI design from wireframes to visual design, visual prototyping, voice prototyping, animation, and more. Despite XD being a relatively young app, it has some features (such as voice prototyping and repeat grid) that are not found in its competitors. While it is more advanced in some ways, it does lack some essential features. For example, there is no color management so on Display P3 monitors (like iMacs and Mac laptops use) the colors are not accurate, you can’t add multiple fills/strokes, and text styles are merely a find/change for formatting, just to name a few. Not having true styles severely limits their use because you’ll accidentally change things you didn’t intend to. There are no graphic/object styles, and exporting features are poorly implemented. Keep in mind that each app in this list has pros and cons, so none of them are perfect (Sketch and Figma also have their own set of limitations with styles for example).

Because XD came later to the game, it can open up Sketch, Photoshop, and Illustrator files and convert them into fully editable XD files. This makes it easier to switch to XD from those other apps. Being an Adobe app, it also integrates better, allowing you to edit photos in Photoshop and send an XD file to After Effects (if you need something beyond the animations you can create within XD).

XD has gained enough features that designers and companies are now starting to use it. Especially on small projects, some of the missing/poorly implemented features won't be much of an issue. However, on larger projects, those limitations might become a bigger issue. Adobe has been rapidly fixing things and adding features, so we’re seeing more and more people choosing Adobe XD.

Overall XD is quick and easy to use. We like the integrated design approach Adobe is going for, and we look forward to seeing XD continue to improve. It’s especially strong in UX design, prototyping, and animation when compared to the other apps.

You can use XD for free to see if you like it. The free version of XD gives you the full app, but with some limitations such as only one shared link (for prototypes and design specs) and no ability to save local files. If you need any of the premium features (such as multiple shared links or the ability to work with local files), you can get XD for $9.99/month (USD) or XD with all the CC apps for $52.99 (USD).

Learn more in our Adobe XD Bootcamp or another one of our Adobe XD classes.

Visual design is way more than just appearance, providing essential tools for creating marketing perfection. While design is crucial in today’s world, it is often underestimated in the business world for its effectiveness and capabilities. Learning visual design can help boost your company’s marketing and messaging through high-end visual communication to better inform and educate potential clients.

Here’s what you need to know:

What is SVG?

SVG stands for scalable vector graphics. It’s an XML-based coded file format that enables us to use vector graphics in webpages.

Why Should You Optimize SVG Files?

Design apps such as Sketch, Adobe XD, and Illustrator code SVG files differently. Some produce cleaner code than others. Regardless of what app codes the SVG file, it’s likely that the code can be further optimized, offering cleaner code and a smaller file (which downloads faster). Loading speed is important because website speed is one factor that affects your website’s Google ranking.

Optimizing SVG files can have other benefits. Once we had an SVG file that Illustrator didn’t like. The SVG was exported from Sketch, and we were trying to open it in Illustrator. We got an error message and it appeared wrong in Illustrator. After optimizing the SVG file, it imported without error and looked correct!

What are Variable Fonts?

Variable fonts are a new kind of font that allows for amazing new levels of flexibility. With just one font file you can alter thickness, width, or just about any attribute you can think of... all while keeping the file-size small (important for websites).

Do not limit your thinking to the standard options that you’ve seen before (bold, italic, extended, condensed, etc.). Font designers can make variable fonts do all sorts of cool things!

IMPORTANT: The information in this post has since become outdated. Read our more current article on this topic.

When designing digital products such as websites, apps, etc. there are many apps to choose from. Which one is right for you? While some people use Figma, InVision Studio, and others, in this article we’ll focus on what we consider the three industry front-runners: Sketch, Adobe Photoshop, and Adobe XD.

Sketch

While some designers are just now making the switch to Sketch, it’s been around since 2010. Sketch is a Mac only app, which is fine with most designers, but PC users will need to look at Adobe XD or Photoshop.

Sketch is great for UX/UI design. You can design wireframes or finished visual designs, and turn those into clickable prototypes using Sketch’s recently added prototyping tools or InVision’s Craft plugin.

Sketch has very powerful symbols and styles, which enable you to easily create complex design systems that are flexible and manageable across large projects. It also has decent exporting options.

Sketch costs $99 (USD) and you get a year of updates as well as Sketch Cloud. After the first year, you can continue using your last update for as long as you want with no other payments. However, if you want another year of updates and Sketch Cloud, you must renew your license for $69 (USD).

Sketch is a great option for Mac users that want an affordable and powerful design app.

Learn more in our Sketch class.

If you’re not saving your vector graphics (icons, logos, etc) as SVG for use in your webpages, you should be! Instead of using pixel-based PNGs, keep the graphics as their native vectors (so they download faster and can be used at any size). As great as that is, you can even use JavaScript to animate them!

Download the Presentation Slides
Download Demo Files

LEARN MORE:
HTML5 Animation with GreenSock Class (attend in New York City or Live Online)
HTML5 Animation with GreenSock Workbook (eBook or Print)
Web Design Classes (attend in New York City or Live Online)
Web Design Books (eBook or Print)

Learn about designing for mobile websites and apps. In this free class, we’ll cover numerous resources and info.

Want to learn more? Check out the following classes we offer:

Photoshop for Web Design & UI
Sketch in a Day
Adobe XD in a Day
Web Design Certificate
Responsive HTML Email
Mobile & Responsive Web Design

View the Presentation Slides

We’ll explain 1x and 2x web graphics, and show you ways to create them quickly and efficiently in Photoshop, Illustrator, Sketch, and XD.

Download the PDF Reference Notes.

LEARN MORE:
Web Design Classes (attend in New York City or Live Online)
Web Design Books (eBook or Print)
Sketch Training
Photoshop for Web & UI Training
Adobe XD Training

Adobe Experience Design is a totally new app created specifically for designing websites and apps. You can craft the visuals and turn them into working prototypes all in a single app! Even though it's currently in beta, it’s developing quickly. See how it works and what it can do for your design workflow.

View the Presentation Slides

LEARN MORE:
Adobe XD Class
Adobe XD Book (eBook or Print)