Redimensionnez un design pour élaborer des mises en page adaptées à différents appareils avec Adobe XD CC.
create-webpage-header_1000x560

Nous avons créé l’en-tête d'une page web mobile qui servira de point de départ pour élaborer différentes mises en page. Nous avons ensuite utilisé le redimensionnement réactif pour adapter le plan de travail au format d'une tablette et d’un poste de travail. L’activation du redimensionnement réactif permet de déterminer facilement la mise à l’échelle des éléments ainsi que leur alignement dans le design.

Avant d’utiliser le redimensionnement réactif, il est important d’agencer au mieux les calques sur votre plan de travail. Vous pouvez aussi associer des paramètres manuels et automatiques pour redimensionner et épingler des objets dans votre design.

create-webpage-header_step1

La capture d’écran ci-dessous présente le résultat de nos tests. Dans certains cas, nous avons conservé des objets séparément, et dans d’autres, nous les avons associés de différentes manières. La solution la plus efficace pour ce design était de regrouper les icônes, puis d’associer le logo au jeu d’icônes. Avec cette structure, le mode Auto a correctement positionné le logo et les icônes en haut à gauche et à droite du plan de travail, avec une hauteur fixe et un espacement approprié entre chaque élément.

Les repères magenta indiquent la position des objets par rapport aux bords du plan de travail.

create-webpage-header_step2

Une fois notre design de référence finalisé, nous avons copié-collé les éléments sur un nouveau plan de travail adapté aux dimensions d'une tablette et activé le redimensionnement réactif. Nous avons ensuite désactivé les paramètres manuels pour le logo et le slogan au centre du design, puis nous avons sélectionné tous les éléments avant de les faire glisser vers le nouveau plan de travail. Lors de cette opération, repérez les éléments qui se mettent à l’échelle et se repositionnent, et ceux qui restent inchangés.

create-webpage-header_step3

Nos paramètres se sont révélés efficaces pour ce design. Il nous a simplement fallu ajuster manuellement le logo et le slogan au centre.

create-webpage-header_step4

Grâce au redimensionnement réactif, nous avons pu réutiliser rapidement notre design d’application mobile pour élaborer des mises en page pour le web et le format tablette.

create-webpage-header_step5

Vous savez maintenant réaliser un design pour différents appareils sans avoir à recréer entièrement chaque mise en page.

02/25/2019

Contributeur Adobe Stock : Weidong

Cette page vous a-t-elle été utile ?