Create a low-fidelity design in Adobe XD to define the overall structure of your app or website. Then, refine the design to convert it into a high-fidelity prototype.

Start with a low-fidelity design

Focus on the structure and flow of an app before refining your design. Add artboards, placeholder text, and basic shapes to map out the design. Use Repeat Grid to place copies of text and objects in rows and columns. Setup symbols as placeholders for items that repeat throughout your design. Leverage templates and design elements from wireframe kits available from XD to quickly get a head start.

Plan the flow of your app

Learn how to use the canvas to experiment with design concepts before updating artboards. Use Repeat Grids in various ways to speed up your design process. Modify a design element in a Repeat Grid to update elements in other cells simultaneously. Open UI and wireframe kits to copy and paste design elements into your document. Streamline the management of your documents assets, including color and character styles, from the Assets panel.

Draw icons and work with graphics

Use the Rectangle, Ellipse, Line, and Pen tools to draw simple icons. Refine the graphics in your app with the Boolean operators by adding, subtracting, intersecting, and excluding overlapped shapes. Import icons and illustrations created in Adobe Photoshop CC and Illustrator CC. Explore Symbols and Repeat Grids as you develop your design.

Create your high-fidelity design

Fine-tune your app or website’s design by adding final images and text to your artboards and Repeat Grids. Add symbols and apply symbol overrides and use images, colors, and character styles from Creative Cloud Libraries and the Assets panel.

Was this page helpful?