Adobe XD vs. Adobe Photoshop: The War for the Best Website

Imagine you spent five hours on structuring a web design layout combined with the actual design of a webpage, only to realize you need to export said mock-up AND THEN create a prototype in a different platform.

Agonizing process, right? The day I converted my web designing stubbornness into pride was one I will never forget: The day I taught myself Adobe XD.

For too many months, I’d seen the little Adobe XD icon chillin’ in my Creative Cloud Apps – unbothered, all curvy and pink. I was too intimidated by a completely different tool to think to press it.

But I was so wrong. And don’t let the different, light, minimal default settings of the interface fool you. Embrace the alternative design tool, for it cuts your wireframing, mock-up and prototyping time in half.

What does XD stand for anyway?

Experience Design. You’re prototyping experiences for users and can double check your design decisions in the process — NEAT.

 

Before diving into Adobe XD, you still need to know the basics of Photoshop and Illustrator. Learning rasterizing objects vs. vectorizing objects and what that entails is still important. Photoshop will allow for you to use blend tools, masked layers and all that jazz. But you will still be glad you learned the hard way of using Photoshop to design websites in order to appreciate the efficiency and ease of what is XD.

 

First, let’s talk about the benefits of using Adobe XD vs. Photoshop.

 

XD

Photoshop

Vector Based

X

 

Uses Layers

X

X

Image Editing

 

X

Smaller File Size

X

 

Publishes A Prototype

X

 

Publishes Design Specifications

X

 

Ability to Publish CSS

With

plugin such as Zeplin

With a platform such as InVision

Uses Artboards

X

X

 

So you’re telling me I need to use XD to design websites?

Not exactly. I’m just raving about how efficient XD is compared to creating Photoshop prototypes for the type of work I do. Both can create beautiful work, but it just depends on what type of work you’re doing. If you are working on a minimal web design with hardly any photo editing, I would choose XD over Photoshop. If your design has more complex features such as 3D models, crops, clipping paths or color correction, Photoshop is the tool you should use.

Got it. So how should I approach XD?

For starters, make sure you are putting your mobile mockups in one document and desktop ones in another. This makes prototyping and editing so much easier when exporting each view. The following are some tips on how to use XD. I recommend watching a few tutorials provided by Adobe that are available on the main screen when launching XD.

Upon opening XD, you are prompted with a screen to choose your document dimensions. You can select a default size for phones and desktop or create a custom size. I prefer selecting the preset of the latest phone the application has in their settings.


Once you have the document open, you will have a simple design toolbar on the left and more object and artboard based tools on the right. The scrolling section on the right allows you to control the viewport for the user. This is a great feature because you can make a design and then test it out in the prototype mode by pressing play in the top right of the window.


 You can also control your layout grid, just as you can in photoshop, on the bottom right.


Something that you can NOT do in Photoshop, is create a prototype on the fly. To do this, you will have to have at least two artboards you can connect with a click. You simply create the two designed boards, then switch from Design to the Prototype tab in the upper left hand corner to assign what you want object and artboard (page) you want to open upon click.

Not only can you preview this interaction as shown in step two, but you can change the transitions, ease of transition, and preserve the scroll position (so the prototype doesn’t awkwardly land you at a different spot of the page if the button is opening up, say, a modal).


You can publish your prototype or your final functioning prototype for developers by selecting the export button at the top right of the screen.






When publish as a prototype, the user can use a link to click through the design just as you can in the preview capability in XD. When published as design specs, the developers can copy and paste text, gather fonts, dimensions, etc. for measuring to build your design.


You will still have to export all of your graphics because XD doesn’t support that in the beta version. You can do this by selecting the graphics you want to export, then go to File > Export > then choose the location and file type you want to save your images as.

As you can see, there are some differences in how to approach which program is right for your project. First ask yourself the following before beginning a project in one or the other:

  • Is this project a website or an app?
    I recommend using XD
  • Is this a tight project timeline?
    I recommend using XD
  • Are there several pages I will need to prototype?
    I recommend using XD
  • Does this project contain heavy imagery?
    I recommend using Photoshop for editing said images

 

Keep in mind that XD is still in beta, so there is room for improvements/additions.

 

Share