Viewing Designs and Giving Feedback in Adobe XD
WHY USE ADOBE XD?
Adobe XD allows designers to visualize websites more efficiently by creating immersive simulations of designs before jumping into development. Elements can be given hover and click effects to demonstrate limited functionality in addition to static design. However, it’s important to keep in mind that Adobe XD is not responsive to screen sizes and does not have the full functionality of a website, as it is just a simulation.
Adobe XD is a vector-based digital design tool for websites and apps that allows you to create simulations of websites without any code in order to define layout and design elements. XD also allows users to preview the design in a web browser where it can be interacted with similarly to a website.
HOW SHOULD ADOBE XD BE USED TO VIEW DESIGNS?
NAVIGATING PAGES
When viewing a design in XD, pages can be cycled through by using the right and left arrows on the center bottom of the screen. Another potential method of navigating a design is by clicking on elements within the design itself if they have been linked up by the designer ahead of time. Since this process can be time-intensive, often only higher fidelity designs are linked. Elements that are clickable change in color, position, or design when hovered over. Clickable elements also may be highlighted in blue momentarily if the screen is clicked elsewhere.
SCROLLING
Scrolling up and down on the design can be accomplished by hovering over the design and swiping with two fingers on a trackpad or a scrolling wheel on a mouse. It is also possible to click and drag up or down on the design to scroll.
ZOOMING
The size of the design preview can be adjusted in the upper right corner of the screen by changing the percentage and clicking the full-screen icon. If the design is not viewed at 100% and at fullscreen, all elements will appear smaller than they are, including text. Please refrain from commenting that elements are “too small” unless the design is being viewed at 100%. Since Adobe XD is not responsive to different screen sizes, elements may also look smaller than they are on smaller screen sizes such as laptops.
WHAT TYPE OF FEEDBACK SHOULD BE LEFT IN ADOBE XD?
LEAVING COMMENTS
Comments can be made either by typing in the box on the upper right corner of the screen or by grabbing the pin icon at the bottom right corner of the comment box and dragging it onto a certain point on the screen to comment about a specific area. Some comments may already be left on the design by the designer. If there is a number written beside the comment, the comment is pinned to a location on the screen, and the comment can be clicked to show the pin.
If not already logged in to an Adobe account, any users will be prompted to sign in through their Adobe account or with their name as a guest before making comments. All guests can edit their own comments after publishing them, but keep in mind that the designer will be able to view all comments both pre and post-edit.
FEEDBACK BASED ON FIDELITY
Each wireframing stage prioritizes a different goal, so leaving feedback is highly dependent on which wireframe fidelity is being viewed. It’s important to know the purpose of wireframing as it can help get the most from a wireframe. More information about wireframes and fidelity can be read here.
Low-Fidelity Feedback
The low-fidelity wireframe with just a rough idea of layout and flow is an ideal time to request changes to the organization of sections since it becomes harder and harder to change the layout as the design process moves forwards. Common requests center around adding, removing, re-purposing, or rearranging sections. Low-fi wireframes are also a great time to discuss if a section will have a lot of content and need an extra paragraph or can be condensed to just a set of icons.
High-Fidelity Feedback
The high-fidelity wireframe that simulates a polished design is great for mentioning colors, patterns, icons, or the layout of sections or specific elements. The information architecture of the design has already been defined, so the focus should be moved to visual styling. It’s important to note that copy and images are likely not finalized at this stage as they are still being created by other teams.
WHAT TO EXPECT AFTER LEAVING FEEDBACK IN ADOBE XD?
After leaving feedback, the designer will either make changes to the design or leave replies with answers to questions and professional recommendations. Some designers share Adobe accounts, so the name on the account leaving comments may not be the same as the designer who is working on the project and leaving feedback. If the account name and signature are different, the signature indicates which designer is working on your project.
After a design is approved, the project can move on to the next stage in the design process. For a style tile, the next stage is creating a low-fidelity wireframe. From there, the designer can move on to making a higher fidelity wireframe and begin to incorporate visual styling. High-fidelity wireframes begin with the homepage and move on to the inner pages after the homepage is approved. The next stage of the design process is to switch focus to development and finalizing the copy and images.
Questions? Fill out the form below to give us a shout.
CONTACT US