Categories
web

First steps with Adobe XD: Building a website mock-up

XD is an integrated tool for the user interface (UI) and user experience (UX) design process. You can create flowcharts, wireframes, mock-ups, interactive prototypes, and animations – all in the one design space.

Adobe XD is a design tool specifically for screen design. Although Photoshop and Illustrator are fine, XD is purpose-built and streamlined for designing user experiences on all types of devices. It is part of the Adobe Creative Cloud and is cross-platform. There are numerous alternatives to XD including Sketch and Figma, which you might also want to investigate.

The XD workflow is fast and fluid for rapid prototyping and iteration. The workspace is ideal for generating multi-screen size designs and investigating how layout and design function on different devices.

XD includes user experience and responsive design specific features not available PS and AI. XD has a prototyping workspace where you can design linking structures. You can also design interactive and animated elements for your projects. There is the ability to preview your progress on different devices through the XD mobile app. There are some cool responsive design tools like the Repeat Grid and Responsive Resize.

You will love this app!

Simon

The video below is intended as a first look at XD. The video walks through the creation of a simple webpage layout. It demonstrates making an artboard, adding various assets, using shape tools, using text, and using the document grid. We also use the Repeat Grid tool to make the thumbnail grid of items in seconds.

Install XD from Crative Cloud and work along with the video. The assets used are from stock libraries. Download them here: