Resize a design to create layouts for difference device sizes with Adobe XD CC.
create-webpage-header_1000x560

We designed a header for a mobile web page that we want to use as the basis for different device layouts. We then used Responsive Resize to re-create the artboard for tablet and desktop sizes. With Responsive Resize enabled, XD helps determine how elements should scale and align in the design.

It’s important to experiment with how to best organize the layers on your artboard before you use Responsive Resize. You can also use a combination of the automatic and manual settings to resize and pin objects in your design.

create-webpage-header_step1

Below is the result of our tests. In some cases we left objects as individual elements; in others we grouped them in different ways. What worked best for this design was to group the icons together, and then group the logo with the set of icons. With this structure, the Auto setting worked well to fix the logo and icons to the top left and right of the artboard with a fixed height and the appropriate spacing between elements.

Notice how the pink resize crosshairs indicate how the objects are positioned relative to the edges of the artboard.

create-webpage-header_step2

With our base design complete, we copied the elements, pasted them to a new tablet-sized artboard, and turned on Responsive Resize. Then, we disabled the manual settings for the large logo and tagline in the center of the design, selected all the elements, and dragged to fill the new artboard. As you drag your own design, notice what scales and repositions and what doesn’t.

create-webpage-header_step3

Our settings worked well for this design. We just needed to manually adjust the large logo and tagline.

create-webpage-header_step4

Responsive Resize helped us quickly reuse our mobile app design to create layouts for tablet and web.

create-webpage-header_step5

See how you can design for different devices without having to re-create each layout from scratch.

10/11/2019

Adobe Stock contributor: Weidong

Var denne side nyttig?