UX In CMS Websites

 

B00135525 – Aaron Lynch

Content Management Systems – Publishing Task 1

 

Purpose Of Universal Design in CMS Websites

 

With this blog entery I’m going to share some good practice among professionals when it comes to user experience (UX) and how they can be incorporated into websites.

 

Howard Pinsky, a Senior XD Evangelist at Adobe made a great video on Adobe Max where he goes onto to show UX design for websites using Abobe XD. He demonstrates how a user can use “Prototype mode” to click on any object on the artboard and make it do a pacific control.

In this case Howard makes it so that when the user clicks on the button, the artboard is going to switch to the other artboard which displays the end result/result of clicking button.

There is also a transform button that allows you to edit the slides, changing how they will appear once the button is clicked. You can make it so the tabs are smaller, or at more of an angle. There really is infinite possibilities

 

 

 

Adobe XD also has great features for playing videos in the background of a web page. Howard demonstrates how a user can adjust the settings of their video. From settings like , play on click, auto play or pause when finished. There is also a feature to set a thumbnail you can set from the video. This can be useful for when the page isn’t fully loaded.

There is also a feature to have the video switch to another media source when finished playing, instead of just looping the same video repeatedly.

 

 

 

 

There is also the ability to make the web page perform an action once the video is over, using the “Interaction” feature. This can be useful if you want to have an introduction video for when the users land on your webpage, once the video is over perhaps the nav bar appears. Another example would be for a product web page, after the product video is over, it automatically switches to the products info page where the user can continue to read about the product or purchase it.

 

Howard also shows us how to use the Mask feature for video transitions, With this feature you can mask a text box so that only certain text is visible on a selected video, in the example he uses we see the text “Its time to adventure” on the first video, but on the other video it says “Its time to relax”.

This can be really useful for webpages where you might have a slideshow of products and you want the title of the product to be its own element, compared to part of the video its self. This is really useful as it gives you a lot more freedom for getting the page exactly how you want. You might want it so the user can simply click on the name of the product and it takes them to the products page, where if it was in the video its self that would not be possible.

 

 

Dani Beaumont, a Principal Product Manager at Adobe. Shows viewers how to use adobe XD to create a fully interactive demo to share with clients or stake holders before making the first version of the real website.

 

Dani demonstrates how to link objects to other artboards so that its functional when previewing the artboard. Clicking one of one of the buttons will display the attached artboard.

There is also a feature built unto Adobe XD where you can actually record the preview which will save it as a .mp4 file. This makes it very easy for sending to clients if you are showing them a new feature or an update. It makes it easier and quicker for the client also as they don’t have to test it themselves. There is also a microphone feature where you can

 

record your self-presenting the piece. This is very useful for pointing out any changes made in the video itself, which is a lot easier for the client to follow.

There is also a really useful feature, where the client can actually drop a pin on the artboard and add comments. This is quite useful if the client checks out the work in their own time instead of having a face-to-face meeting, or an online meeting.

 

 Adobe XD is a great application for connecting the developer and client together to work efficiently to achieve their end goal. Its really is as easy as highlighting artboards and sharing them to the client to review.

Can also be used for early stages of development either, You don’t have to just display Alpha or Beta versions of the website. You can use it for early stages such as color themes or website layout examples.

 

 

 

 

 

 

 

References:

Howard Pinsky – Senior XD Evangelist, Adobe

https://www.adobe.com/max/2022/sessions/na-creating-interactive-prototypes-with-adobe-xd-s503.html

 

 

Dani Beaumont - Principal Product Manager, Adobe

https://www.adobe.com/max/2022/sessions/na-using-adobe-xd-to-showcase-creative-workflows-s502.html