Yelp Facebook LinkedIn YouTube Twitter Instagram

Classes available in-person (strict social distancing) or live online with an extended free retake period. See details.

Noble Desktop Blog | Tutorials, Resources, Tips & Tricks

Articles on: UI Design

Adobe XD, Sketch, Figma, & Photoshop for Web, UI, & UX Design

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 XDSketchFigma, 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 classes.

Web Design UX Design UI Design Sketch Adobe Adobe XD

Intro to Graphic Design: Free Online Course

Want to get into graphic design? In this video, you’ll learn what graphic designers do, what apps they use, how to get started, and more. See examples of design work and learn about creating a graphic design portfolio. You’ll learn what classes and certificate programs are appropriate so you can take the next step and get started in graphic design.

Learn More

Graphic Design Classes (attend in New York City or Live Online)
Web Design Classes (attend in New York City or Live Online)

Free Classes Web Design UI Design Web Animation Adobe Photoshop InDesign Illustrator

Free UX Design Class Online: Intro to UX Design

User experience is how a person feels when interfacing with a system, product, or service. What makes User Experience Design (UX) different from User Interface (UI) design? It’s a design process which relies heavily on user research, prototyping, and user testing, among other things to identify important issues, develop solutions, and verify those solutions.

In this free introduction to UX design, we’ll discuss the main concepts involved in the UX design process and how to move into the field of user experience design. This is a great way to get started before diving into a hands-on class such as our UX & UI Design Certificate or UX Design Bootcamp.

In this live streamed seminar we explain the appropriate classes and certificate programs so you’ll know the next steps to get started in each area of design.

Learn More (Attend Live Online or in New York City)

UX Design Classes
UX & UI Design Certificate
UX Design Bootcamp

Free Classes Web Design UX Design UI Design

Free Design Class Online: Get Started in Design

Thinking about learning design? Learn about the different types of digital design (graphic design, web design, UX design, UI design, and motion design) so you can better understand what designers do and which apps they use.

In this online seminar we explain the appropriate classes and certificate programs so you’ll know the next steps to get started in each area of design.

Learn More (Attend Live Online or in New York City)

Graphic Design Classes
Web Design Classes
UX Design Classes
UI & Visual Design Classes
Video Editing & Motion Design Classes

Free Classes Web Design UX Design UI Design Motion Graphics Adobe

Free Class Online: Get Started in Design

Thinking about learning design? Learn about the different types of digital design (graphic design, web design, UX design, UI design, and motion design) so you can better understand what designers do and which apps they use.

In this online seminar we explain the appropriate classes and certificate programs so you’ll know the next steps to get started in each area of design.

Learn More (Attend Live Online or in New York City)

Graphic Design Classes
Web Design Classes
UX Design Classes
UI & Visual Design Classes
Video Editing & Motion Design Classes

Free Classes Web Design UX Design UI Design Motion Graphics Adobe

Why Visual Design Is Worth Learning

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:

UI Design Adobe XD

Optimizing SVG Files

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!

Web Design Web Development UI Design Sketch Illustrator Adobe XD

Variable Fonts: Exciting for Designers & Developers

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!

example of adjusting a variable font

Web Design Web Development UI Design Sketch Adobe Photoshop Illustrator Adobe XD

Choosing a Web/UI/UX Design App: Sketch, Photoshop, and Adobe XD

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.

Web Design UX Design UI Design Sketch Adobe Adobe XD

Which Type of Design is Right for You?

Interested in a career in design? Confused about what career you should choose?

UX Designer, Graphic Designer, UI or Visual Designer, and Motion Designer are just a few job titles you’ll see on most design job boards. The challenge is that these job titles often overlap in job duties. There can be confusion about what different designers do. This guide will help you understand the different types of design and narrow down your choices.

Web Design UX Design UI Design