Yelp Facebook LinkedIn YouTube Twitter Instagram

Noble Blog

Articles on: Adobe XD

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!

Sketch Web Design Web Development UI Design 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

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

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

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.

Sketch UX Design UI Design Adobe XD

Video Tutorial: Intro to SVG

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)

Web Design Web Development JavaScript Adobe Adobe XD

Video Tutorial: Designing for Mobile

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

Sketch Web Design Adobe Photoshop Adobe XD

Video Tutorial: Secrets to Designing Hi‑Res Web Graphics (Exploring Modern Workflows)

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

Web Design Adobe Photoshop Adobe XD

Free Tutorial: Intro to Adobe Experience Design (XD)

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)

 

Adobe XD