Adobe XD: The Free UI and UX Design Tool You Can Use Right Now

adobe-xd-ui-ux

It’s not often you associate Adobe with “free” downloads, but that’s exactly what that company has done with Adobe XD. It’s a rapid interface prototyping app for mobile devices and websites, allowing designers to quickly come up with designs for specific platforms. The best thing about Adobe XD is how easy it is to use. Even if you have little experience designing anything, there’s only a very gradual learning curve to hold you back. Even the UI is refreshingly stark, without all the tools and panels that put so many people off apps like Photoshop, Illustrator, and Lightroom. In this…

Read the full article: Adobe XD: The Free UI and UX Design Tool You Can Use Right Now

It’s not often you associate Adobe with “free” downloads, but that’s exactly what that company has done with Adobe XD. It’s a rapid interface prototyping app for mobile devices and websites, allowing designers to quickly come up with designs for specific platforms.

The best thing about Adobe XD is how easy it is to use. Even if you have little experience designing anything, there’s only a very gradual learning curve to hold you back.

Even the UI is refreshingly stark, without all the tools and panels that put so many people off apps like Photoshop, Illustrator, and Lightroom. In this article, we’ll introduce you to Adobe XD and explain what you can and can’t do with it.

What Is Adobe XD?

Adobe XD is a design tool. It won’t build your app for you, but it will help you present a vision or a prototype for what you want your next mobile or tablet app, website, or other user interface to look like. The app uses art boards—essentially screen mockups—to provide a visual representation of your app design.

Creating mobile apps and websites that work can take a lot of technical know-how. Adobe XD provides you with the tools to turn an idea into a proof of concept. When you’re finished you’ll have a blueprint from which to work from, and one you can tweak endlessly until you’re happy with the design.

Adobe XD CC

In the same way that concept art is so important in creative endeavors (see this beautiful video game concept art as proof), a proof of concept for your desired interface design is important when it comes to software and website construction. Providing programmers with a concept that so closely matches the finished product is a great way to align your expectations with what is possible.

Best of all the app is designed in such a way that anyone can use it. Whether you’re a seasoned designer, a programmer, or someone who lacks both of these skills; Adobe XD can bridge the gap between your vision and technical knowledge. You don’t even have to learn to code to design an app.

What Can Adobe XD Do?

Adobe XD is designed with a few specific applications in mind, but you can also think outside of the box. The app makes things easy by including templates for:

  • Smartphone apps: From iPhone 5 and SE through to the very latest models; and a generic Android template too.
  • Tablet apps: With templates for iPad, both sizes of iPad Pro, Surface Pro 3 and 4, and a generic Android tablet template.
  • Websites/web apps: With a few presets to choose from, including Full HD.

You don’t have to stick to these templates, they’re just there to make your life easier. You can also specify a completely custom interface (i.e. screen) size, and start designing for just about any platform you can imagine.

Adobe XD Startup Options

If you’re designing a mobile app, you can download the free Adobe XD app for your platform and export your designs for a live preview on your device.

UI Kits Make Life Even Easier

If you are thinking of designing for iOS, Android, Windows, or another well-established platform; you can use UI kits to get a helping hand. These are essentially project templates maintained by Apple, Google, Microsoft and others, downloadable in Adobe’s .XD file format.

With UI kits you can speed up production, allowing you to design your app within the constraints and common elements seen in your platform of choice. Since they’re maintained by the platform developers, they’re generally always up-to-date and thorough.

Adobe XD and iOS UI Kit

For example, Apple’s iOS UI kit includes blank screen dimensions for a range of devices, examples of the iOS keyboard, navigation elements like the ribbon at the top of the screen, the iOS toggle buttons, and more. You can easily copy and paste elements into your design artboards, and create accurate prototypes.

Adobe also maintains a few other UI kits, including watchOS-compliant smartwatch samples, an e-commerce website kit, and a set of examples for creating digital currency smartphone apps. You’ll need to download the appropriate UI kits for iOS, Google’s Material design and Microsoft Windows separately.

A Simple Set of Built-In Tools

Unlike Adobe’s other complex graphics and design apps, XD has a nice clean UI with only a few simple tools. You’ve got your basic shapes: rectangles, circles, lines, and a pen tool for creating custom shapes. There’s also a simple text tool, with access to the Typekit font library (but not all of it).

You can then change various attributes relating to these elements, like opacity, fill color, borders, shadows, and scrolling behaviour. Finally there’s a magnifying glass and an artboard tool for expanding your design.

Adobe XD Object Properties

Adobe XD helps you place elements in aesthetically pleasing places by “snapping” into place around the edges of the screen, the center point of the canvas, and to other elements. You can override this if you want by holding down a button (on the Mac version it’s Cmd).

Along the top edge of the app you’ll see two toggles: Design and Prototype. Design is where you’ll spend most of your time creating your vision. Switch to Prototype mode to add various interactions between elements on-screen. You can trigger events and switch to different artboards, providing a simple user experience run-down without writing a line of code.

Adobe XD Prototype

This is done via a simple drag and drop interface, for example: create a button with the circle tool, create a new artboard with the desired result of that button press (e.g. a different tab in your app), switch to the Prototype mode and drag the arrow from the button to your new artboard. Hit the “Play” button or preview on your live device to see how it plays out.

You can even specify transitions and effects to make it look fancy. There are some pretty big limitations to Prototype mode. You can’t really get too in-depth with it, but it serves a purpose and it’s simple implementation makes it easy to use.

How Limited Is the Free Version of Adobe XD?

Being a free product, Adobe XD is designed to get you hooked to its simple workflow and user-friendly tools without spending a penny. The biggest drawback to the free version is the inability to have more than one active shared prototype or set of design specifications at one time.

So for your first design or project, the free version may suffice. When it comes to sharing more designs or projects with your team or app developers, you’ll quickly hit a wall. You can always export your various artboards as .PNG files for free, forever via the File > Export option.

Adobe XD Compare

However the shared prototyping and interactivity between artboards is one of the standout features here. The app is still useful without it, just not to the same extent. You can’t build a fully realised prototype, but you can quickly lay down your design.

The other limitations of the free version include a limited number of Typekit fonts, and 2GB of cloud storage (as opposed to 100GB) for Creative Cloud subscribers. If you do decide to stump up the cash for the paid version, Adobe XD will cost you $9.99/month for this app alone or $52.99/month for the full Creative Cloud suite.

We think Adobe Creative Cloud is worth the money, provided you’re able to get enough use out of it.

Adobe XD Is a Surprisingly User-Friendly Tool

Adobe XD is a useful tool, whether you intend to pay for it or not. In some instances, you might get away with the free version for working on small personal projects. When it comes to serious work and sharing with teams, you’ll need to upgrade.

Adobe XD is not the be-all and end-all of UI design. Designers have been using graphics tools for years to create mockups for websites, app designs, and more. Check out the best Mac vector graphics tools for designers on a budget to see some capable alternatives.

Read the full article: Adobe XD: The Free UI and UX Design Tool You Can Use Right Now

How to Use Adobe Capture to Design With Real Life Elements

adobe-capture-howto

A designer’s work is never done. From designing on a tablet to drawing inspiration from the world around you, design is always on your mind. Few companies understand that better than Adobe. Adobe’s smartphone applications can accomplish some fantastically creative achievements, and Adobe Capture is no exception. Capture is a deceptively simple app that allows users to collect and use design elements they encounter in real life. How? Read on to find out… Adobe Capture’s User Interface Capture’s interface is dead simple to use. The three top options available are: Settings, Library, and Options. Settings provides a list of basic…

Read the full article: How to Use Adobe Capture to Design With Real Life Elements

A designer’s work is never done. From designing on a tablet to drawing inspiration from the world around you, design is always on your mind. Few companies understand that better than Adobe.

Adobe’s smartphone applications can accomplish some fantastically creative achievements, and Adobe Capture is no exception. Capture is a deceptively simple app that allows users to collect and use design elements they encounter in real life. How? Read on to find out…

Adobe Capture’s User Interface

Capture’s interface is dead simple to use. The three top options available are: Settings, Library, and Options.

adobe capture options

Settings provides a list of basic options you can adjust regarding your Adobe account, and features other Adobe applications for users to download. You can also select between different Adobe Libraries you may have set up beforehand.

Options allows access to a selection of features. Most importantly, you can collaborate with other designers to add more assets to your library or create a library link so others can access your personal Adobe library.

adobe capture options

To create a library link so others can view your created elements, tap the Options icon and select Share Library Link.

Adobe Capture’s Feature List

Adobe Capture is more of a toolbox than an application. It has six fully featured applets that provide absolutely crucial design elements: Shapes, Type, Colors, Materials, Patterns, and Brushes.

Each category has a complete, clear guide to creating your elements. Choosing the Shape function, for example, allows users to create vector shapes of anything they find in real life.

Once you take a picture, or load a saved image into the application, you can then refine the image to create a shape or pattern. Once you’re done, you can save the asset to your Adobe Creative library or simply export the file to a computer.

In-app options remain the same using any part of the app, so workflow is quick, concise, and efficient. These standards are what make most Adobe products great, so you can rest assured that the quality of your finished product will be as stellar as the app you’re working with.

Shapes

Adobe Shapes allows users to create a vector image from either a snapshot from your phone or an image already saved onto your device.

Once you’ve loaded your image into the application, adjust the slider to affect the threshold (ratio of negative to positive space) of the image. The higher the threshold, the darker and more pronounced the image.

Above this initial window are two options: Invert and an Auto Clean toggle. Invert will exchange positive for negative space in your image, turning white areas black and visa versa. Keep in mind, the “black” parts of your image are the shape you are creating. Auto Clean attempts to automatically smooth out your shape.

The next window allows you to clear up the image using either a simple eraser or brush tool. Since you’re creating a vector shape, color options aren’t necessary.

There are also three top categories in this window: Refine, Crop, and Smooth. Crop will allow you to crop  your image, while Smooth will automatically attempt to refine the edges of your shape.

Finally, you can choose to save your work in the Adobe Cloud for later reference. If you’d like to use your original image for another applet, you can do so by tapping your final image. Then, tap the Image tab and select the Reuse icon to the bottom right.

You can now use whatever raw asset you’ve captured in any other applet on Adobe Capture.

Type

Of all the options in this application, Type is my absolute favorite. It’s hard to find a proper font for graphic design, especially one that came from a real world reference.

Type allows you to take a picture of a font in real life, or reference a font from an image. Once you’ve loaded your image or taken a picture of your chosen font, adjust the area indicator so it only covers the font in your image.

From your image, the app will search through Adobe’s font kits in order to find a similar font. The application will then back up the font option so you can reference it later.

While the fonts aren’t free, knowing the name of the font you want to use will allow you to seek out close alternatives using font repositories like Google fonts (which are free to download).

Colors

Next up is Colors. Colors will automatically create a color palette from a reference image. While it’s only limited to five colors, you can choose what colors you wish to extract from the image.

Next, you’ll be presented with three top options: Swatches, Harmonies, and Image.

Swatches allows users to adjust the colors they’ve picked from their image. The adjustments are standard RGB and Lightness sliders. Colors are adjusted individually, allowing you to maintain full control of your color options.

Harmonies, a useful feature in itself, allows users to view the compatibility of colors on the color wheel. On the bottom left of your screen is a paint palette logo. Tap the icon to view the available color categories. Adjust your colors if you wish, or leave them as they are.

Image, the final category, will allow you to revisit or readjust your initial color palette using your original reference image. Your color theme will then be saved directly into your Adobe color library for later use.

Materials

Next is Materials, which allows users to create textures they can then add to 3D shapes using Adobe Dimensions. Materials will create a spherical reference object so you can view your displayed material image.

Ensure that you choose an image with a repeating pattern or a literal texture, such as a wood panel or metal sheet. Your first window will have two principal options: Reference and Shape.

The reference option will toggle your 3D preview image on and off. The shape option will change the shape of your sphere so you can view your material texture using different shapes and light sources.

The next window allows you to adjust multiple material options. There are three top options you can use in this window: Refine, Crop, and Preview.

Refine allows for a slew of options, such as Roughness, Detail, and Intensity. Crop will allow you to crop your initial image to limit your materials reference, and Preview will again allow you to change your reference shape. After you’re done with these options, you will be allowed to save your material.

Patterns

Patterns allows you to create a kaleidoscopic images—repeating image creating a continuing pattern—for later use in design work. To use, upload an image into the applet that possesses or resembles some kind of pattern. You will receive three top options: Color, Sample Size, and Pattern Shape.

The Color options allows you to choose between full color patterns, monochromatic, or black and white. The colors are based on your initial image.

Sample Size adjusts the sample colors you can use in your pattern. You can either use the full color spectrum of your image, or posterize the image so less colors appear in your pattern.

Finally, Pattern Shape allows you to change the reference shape of your pattern. You’re presented with five options for shape, each creating a separate kaleidoscopic effect. The next window then allows you to fine tune your reference shape for the patterns using scaling and rotation.

A preview of your pattern is provided. Keep in mind, this process creates vector patterns. That means you can scale your pattern as large or small as necessary regardless of the size of your reference image.

Brushes

The Brushes applet allows you to create completely custom brushes from real life brush strokes or reference images.

Load your shape or stroke into the applet. Adjust the sharpness of your image in order to smoothen your brush shape. A base color sector is provided, which determines what color is removed in the adjustment process.

Aim for a definite image with a transparent background, which is absolutely crucial when attempting to extract a stoke from white paper for example.

Next, you’re presented with four top options: Crop, Styles, Presets, and Refine.

The crop tools is separated into three parts, Tail, Body, and Head. Since you’re creating a custom brush, these three options describe the orientation of your brush. Correct your stroke’s scale and orientation. You’ll see a preview space above your crop which allows you to draw a simple shape using your cropped stroke.

The Styles tab will take your custom stroke and implement it using default Adobe brush styles. These styles resemble brush, pencil, and charcoal brushes. Presets is the beefiest tab in the applet, allowing users to fine-tune their brush using options like Size, Color, and Repeating pattern.

You can even add basic textures, like Noise, Antialias, and Fade, to your brush to adjust exactly how your brush behaves as you stroke. Refine then allows you to adjust the strength of your stroke using the initial image, in case you made a mistake initially. Finally, you can save your brush to your library for later use.

Design IRL with Adobe Capture

We cannot believe this app is free. For designers, custom is king. Being able to create your own design assets and reach them directly from your Adobe account is both effective and convenient.

Like a texture? Take a picture on your phone. Like a brush stroke or a font in a magazine? Take a picture on your phone. It’s that simple, and the application is still being refined. If you’re a designer, illustrator, or all-round creative, you should download Adobe Capture ASAP. And if you’re looking to learn the basics of graphic design we’ve got you covered.

Read the full article: How to Use Adobe Capture to Design With Real Life Elements

How to Name Your Price for 100 Hours of Adobe CC Training

If you want to work in design, it’s pretty essential to know your way around Adobe’s Creative Cloud. This powerful software suite is packed with useful features, but it can seem daunting when you’re just starting out. The Adobe CC A-Z Lifetime Bundle helps you master Photoshop, Illustrator, Premiere Pro and more, through 100 hours of video training. Right now, you can pay what you want for the courses at MakeUseOf Deals. Total Training With the digital world playing such a pivotal role in our lives, designers and content creators are in demand more than ever. If you want to…

Read the full article: How to Name Your Price for 100 Hours of Adobe CC Training

If you want to work in design, it’s pretty essential to know your way around Adobe’s Creative Cloud. This powerful software suite is packed with useful features, but it can seem daunting when you’re just starting out. The Adobe CC A-Z Lifetime Bundle helps you master Photoshop, Illustrator, Premiere Pro and more, through 100 hours of video training. Right now, you can pay what you want for the courses at MakeUseOf Deals.

Total Training

With the digital world playing such a pivotal role in our lives, designers and content creators are in demand more than ever. If you want to make the most of your creative talents, this training can help you acquire the technical skills.

The bundle includes 11 courses in total, covering all the major apps in Adobe’s Creative Cloud. You don’t need any previous experience to get started, and the video lessons provide loads of hands-on practice.

Along the way, you learn how to create custom logos and graphics with Illustrator, and edit images in Photoshop. The Adobe Premiere Pro training offers essential knowledge for aspiring filmmakers, and you discover how to create stunning motion graphics with After Effects.

You also get a crash course in UI/UX design, and two courses help you create beautiful print layouts with InDesign.

Name Your Price

To get the deal, name your price on Adobe After Effects: The Complete Motion Graphics Course. Simply beat the average price paid to unlock lifetime access to the full line-up, worth $2,594.

Read the full article: How to Name Your Price for 100 Hours of Adobe CC Training