July 10, 2020 New Era Design Tools to Expedite Web Design

Around two years have passed since I introduced Adobe XD in my Column titled "Design Tools that Transform Communication". In the intervening period, there have been 18 major updates and the software is now being commonly being adopted as the tool of choice - even for website development.

In this column, while touching on some of the new functions added to Adobe XD, I’ll discuss design previews that cannot be realized with conventional design tools as well as provide tips for more efficient design production.

In web design, components "are UI elements that can be reused across designs." Examples of such items include thumbnail images and titles for column articles, as well as rectangles for link buttons and arrow icons.

Examples of defined components

By defining parts that are used repeatedly on websites as components, items can be instantly retrieved and then implemented into the page - thereby leading to more efficient design production.

Furthermore, components are defined as either master (the first component created) and instance (a copy of the master component), this classification enables efficient editing and updating of designs. So, if a partial update is necessary on already-created designs, only modification of the master component is required. Once the master is updated, the design changes will be replicated in all instances across multiple pages or separate files.

Furthermore, when creating a new page, unless a design is to be totally unique, quality designs can be instantly created through a combination of existing components.

Responsive Web Design, which flexibly supports website display on devices of various size, such as smartphones and tablets, has become commonplace. However, during conventional design production, it has been necessary to manually create designs for each device width.

To make this process more efficient, an Adobe XD function called Responsive Resize can be used. With this function, when resizing groups of objects for different screens it’s possible to retain their spatial relationship, placement and scalability.

This contributes to the creation of consistent website designs and usability across devices – something that is important both for branding and achieving desired business objectives.

Additional advantages of this function are that creators can expedite design production as well as perform usability studies from an early stage in the development process.

As introduced in my previous Column, when using the prototype function, it's possible to examine page transition, understand interface operation, and test click interaction in a manner that resembles an actual website.

So, at the design stage, it’s possible to explore and test the interactions used on a website - such as display changes when a curser is hovered over a button, and the opening and closing of the hamburger menu on a smartphone site, etc.

Designs with added interactions can be easily previewed in the browser. So, through browser testing and subsequent analysis, it’s possible to experience the website/webpage from a perspective that is closer to potential users and thereby evaluate designs more comprehensively.

In the preceding paragraphs, I’ve introduced the main features added to Adobe XD. I’ve highlighted features that can contribute to more efficient design production and are useful for conducting deeper usability studies.

While design tools have become more beneficial, there are also now additional factors to be considered during the design phase. Therefore, to ensure the smooth progression of projects, I believe it will be important for project members, including customers, to recognize how design tools are being used and to establish guidelines for smooth, productive communication.

As a designer myself, with a focus on "objectives that are important for our clients and their target end-users", to ensure website objectives are met, I will provide continuous input on how to successfully interact with the appropriate design tools.