Intro to Adobe XD

Back to: Intro to UI/UX Software

An Interface Design Tool Designed for Web Designers

For many years, web designers used Adobe Photoshop to design the user interfaces (UI) for websites. Over time, some designers starting using Illustrator and some started experimenting with non-Adobe alternatives. Ultimately, it doesn’t matter what tool you use, but there are several advantages that some tools are able to provide that others can not. In this lesson, we are going to learn about Adobe XD—Adobe’s most recent tool specifically created for user interface designers.

A Brief History

Over the years, web designers have used several different tools and software developers have created several different design applications to help provide healthy alternatives to typical Adobe products (e.g. Photoshop and Illustrator) that were better suited for web design. One notable example is Sketch App, which is one of the most popular and celebrated web design tools. Sketch was first released in 2010 and has since increased in adoption ever since. It took several years, but eventually, Adobe released a product similar to Sketch: Adobe XD.

Key Features

Below is a list of key features that Adobe XD provides:

  • Speed (performance) – unlike Photoshop and Illustrator, XD is super light, lean, and fast. It may not have all of the features of Photoshop and Illustrator, but it loads quickly and runs fast with little-to-no lag/latency.
  • Artboards – at the core of XD are artboards, the rectangular canvases upon which designers can design interfaces. These artboards are designed for interfaces that can easily grow (e.g. vertically at the bottom, when more room for content is added).
  • Vector and Raster support – similar to Illustrator, it is vector-based but has support for raster images, much like the web.
  • Assets/Symbols/Components/Libraries – similar to InDesign, it has built-in support for things like reusable components, shared symbols, and pre-defined colors and text styles. These are set up in such a way that aligns well with the coding of websites.
  • Prototypes – similar to Invision App, Adobe XD has built-in prototyping out-of-the-box. Simply connect artboards by dragging handle connectors. Prototypes also have built-in scrolling support with customizable viewport heights.
  • So much more! – the above list is just scratching the surface of all that Adobe XD can do. It can be used for style guides, client documentation, presentations, sharing prototypes with support for commenting, shared assets and libraries, animation, and a lot more.

Key Features that is DOES NOT have

While Adobe XD is a wonderful, powerful tool, it should be clearly noted that it does not do the following:

  • No 1-Click Auto-Generated Code – XD does can not be used to auto-export a coded, functioning website (HTML, CSS, Javascript). It is mainly designed for the visual planning of a web site, not for development.
Home Page designed in Adobe XD

Activity: Design a Simple Home Page

In this hands-on activity, follow the steps below to create a simple Home Page in Adobe XD. This exercise is designed for beginners with no prior design experience. The only requirement is that you must have Adobe XD installed and you must have an Adobe ID.

Step

1

Get Setup

Launch XD, then at the Welcome Screen, create a new “Custom Size” document that is 1600px wide and 1000px high.

First off, do a “Save As” and name it something like “mysite” or “jd-summersite” and be sure to save it using Adobe Creative Cloud (do not save it locally on your computer).

Next, in the upper left hand corner of the artboard, rename the artboard to “Home”

Next, turn on your Grid, set it to 12 columns wide with 250px margins on each side. This grid layout setup will provide a centered “container’ area that is 1100px wide.

Tip: you can double-check that this is setup correctly by drawing a rectangle across the 12 columns and see if it is 1100px side.

Step

2

Header

Use the Rectangle tool to draw a 1600×100 header with a light grey (#cccccc) fill color at the top edge of the artboard. Make sure that the rectangle has no border. In the Layers panel on the left hand side, rename the layer to “header bg” by double-clicking on the layer name.

Add Site Name (aka Site Identity, Logo, etc.) – use the text tool to write the name of the site in the top left hand corner of the interface inside of the header section. Zoom in and out via “command +” and “command -“. Font: Arial 24px Bold.

Add Site Navigation (aka main nav, top nav, etc.) – create a main top nav by either using the text tool, or copy-pasting the site name (Command-C, Command-V), or by duplicating the site name (alt-click + drag) and place it on the top right corner inside of the header. Font: 18px Arial Regular. Set the text say “Blog” because this is going to be the blog page. Then repeat this step by either copy-pasting or duplicating (alt-click + drag) the “Blog” text to create the next two nav items: “About” and “Home”

Create a header group (folder) by selecting both the header bg layer and the site name text layer then right-clicking and choosing “Group” (or pressing “command G”). Rename the layer to “header”

Step

3

Hero Section

Use the Rectangle tool to draw a 1600×500 hero section with a lighter grey (#eeeeee) rectangle just below the header. In the layers panel, rename it “hero bg” and move it below the header in the layer order.

Add Hero Text – use the text tool to write the words “Summer 2019” inside of the hero section. Arial 100px Bold. Be sure to center align the text. Immediately below it, place a sub-heading/by-line/sub-header txt block with a short description like, “A website I created while learning web design at Iolani.” Arial 21px bold.

Be sure to create a hero group (folder) by selecting the hero bg layer and both hero text layers then right-clicking and choosing “Group” (or pressing “command G”). Rename the layer to “hero” and move it below the header group.

Step

4

Main Section: Lists

Use the text tool to create three sets of lists, each one containing a category Header (Arial 18px Bold), a category short description (Arial 16px Regular), and three list items (Arial 16px Regular). Draw a small black circle for the list bullets then repeat each list item by either copy-pasting or duplicating (alt-click + drag) each line item.

Once you have one list category set complete, repeat it 2 more times to create a three column layout by either copy-pasting or duplicating (alt-click + drag) each category list set.

Be sure to create a parent “lists” group (folder) that contains three “list” sub-groups (sub folders) within it by selecting each set of lists and grouping them together and labelling them accordingly.

Step

5

Footer

Create your footer section by using the line tool to draw a top border (1px light grey #ccc) to a footer section and within it copy-paste (or duplicate) the main navigation within it. Be sure to group the layers and name the folder “footer”

Preview it

When you are done, you can preview your site directly inside of XD by hitting the Desktop Preview button in the upper right. It should looks like this:

Congratulations—you just designed a home page for a website using Adobe XD.