Adobe XD Workshop I: Wireframes

For the De/Re-construct assignment I utilized Figma to create my final prototype. It’s nice to know that there are other applications out there for digital prototyping purposes. If I had known more about this Adobe application beforehand, what it is and how it works, I might have considered using it for my final reconstruct instead.

I did not attend this workshop because at that moment in time I could not get Adobe XD to download on my computer, therefore I found it to be not so effective to attend the workshop. Now that I have managed to do so, and have consulted my classmates about what went down during this workshop, I have a better grasp on the application and how to use it.

Introduction to Adobe Xd (not xD, 😂):

What is Adobe XD typically used for?

“XD empowers designers with the speed, precision, and quality to seamlessly iterate and share interactive prototypes with team members and reviewers across devices and platforms, including Windows, Mac, iOS, and Android.” (Adobe Help Center)

XD serves as the perfect tool for vector design and in our case as Interaction designers, website/application wire framing. XD helps create simple interactive click-through prototypes, handy for us when we prototype redesigns of an application or creating a new application. Having access to the interface upfront, it’s easy to engage customers and your “audience” to demonstrate how it works in general as well as spot flaws and performance issues during user-testing.

The technique of wireframing in design:

Wireframing is a quick and effective way to identify usability issues early on in any design process. 

A wireframe is like a skeleton of a page (on desktop, mobile, or any other devices). This skeleton is a two-dimensional depiction of a page’s interface that shows the spacing of elements on the page, how the content is prioritized, what functionalities are available, and how users will interact with the site. (Medium)

Five Reasons to use Wireframes (from Medium)

1. Wireframes are a great tool to get your clients to focus on what you want them to think about early in the design process. 
2. Wireframes allow you to map out the functionality of the pages, catch problems early, and save time on revisions later. 
3. Wireframing allows you the opportunity to get to know your client better. You will start seeing patterns in behaviors and motivations the more time you spend with your client. 
4. Wireframing is a great tool for gathering feedback and figuring out flaws early.
5. Wireframes are a great way to prioritize content by helping reveal space constraints and designing the hierarchy of elements on the page.

---

Now that I have a clear grasp of Xd as a tool and wireframing as an important UX design technique, it’s time to address the insights I’ve gotten from the material taken from this workshop.

✍ Insights and other take-aways important to note down:

It was nice to be given an idea of the common industry practices, it’s important and we can apply it in our future work.

From workshop:

• Single column layouts on mobile applications
• It’s important to make clear to the users that clickable text IS clickable, otherwise use cards to visualize that the users can click on it.
• Comment sections should require moderation, otherwise don’t include it
• Icons in the west are on the left, in Eastern cultures they are on the right <coming from an Eastern country I know this because our text starts from the right and goes vertically instead of horizontally :)>
• When wireframing, only place components that are needed, there’s no need to make a wireframe (perfect), as long as you showcase the main spacing of elements and what functionalities are available for a clear understanding of what’s going on.
• Include visual hierarchy
• Neutral colors so client can’t find fault in something irrelevant (like a choice in color that they do not prefer)
• Implement icons if it’s important for the interaction.

Other insights:

• Keep your colors to grays, whites, and blacks.
• Use a generic font. This helps prevent the user from being distracted by the style of the typography.
• Showing the hierarchy through simply changing the size of the font and whether it is “regular,” “italic,” or “bold.”
• Avoid highly stylized graphics and images. Use rectangles and squares as placeholders, adding an “x” through the middle of the box to show where the image will be placed. You can also do the same thing to show where videos will be positioned with a triangle as a play button at the center of the box.