Ex3: Incorporating principles of UI/UX design
Making Components
Within XD the programme has a function in which you can turn any asset within your document into a component. By doing so it turns the once blue border that encompasses the asset into a green one so you can then tell apart from components and regular material that is on the artboards. Once anything has been made into a component by right clicking and pressing the “Make component” button you can then access it via the library panel in the bottom left of the page where you can find all of the components you have made. You can incorporate these components into your work by copy and pasting them but also by dragging and dropping them from the components panel in the library. In the library you can also organise all of these components into separate groups as to not confuse them from one another as well as renaming them to further make organisation much easer. It also works similarly to layers in the fact that you can drag them within the layers panel to dictate which component is above or below a different once which can be much easier than right clicking on an asset and continuously selecting “Bring to Front” or the other way around.
Updating Master Components
Once an object has been made into a component that individual item will be known as the main component which you will be able to tell by whether or not the green diamond on the top left of the component is filled in with a solid green or not. If it is filled in that would be the main component and if that main component is copy and pasted it would change into an instance of the component. All instances can be changed from one another without changing the appearance of any of the others, however if you wish to change all of them at once then instead of going through each of them individually and altering them you can locate the main component and then change it to however you wish making the main component and all of the instances change simultaneously. This speeds up the process of prototyping and makes everything work a lot more efficiently.
Nesting Components
Nesting components within one another allows you the user to efficiently replace icons and buttons without having to change the entire component. Here in the tutorial it depicts a cross button and we want to have multiple versions of this button but with varying icons in the middle so they can signify different actions within the app. To change the cross icon to another you can locate your assets within the component panel and scroll until you find a suitable one you want to replace the cross with. First you can duplicate the whole component a number of times before clicking through the group until you have highlighted the cross itself and not the rest of the circle behind it. Once that is highlighted you can drag the desired icon from the library until it is hovering above the “X” icon and the whole icon lights up blue which you can then release the new icon on top of and will easily change the look of the button without having to delete certain aspects which may take much longer to complete. As the new icons are still instances of the master component you an still go on back to the main component and alter it in any way you like with the rest of the buttons following suit.
Using States
XD has a function called “States” which allows the user to design and develop interactive content that helps create a smooth and engaging user experience. The different states allow us to save multiple versions of the component so that when the user clicks through the prototype certain buttons and navigation settings that we’ve altered with the states can make for a more overall dynamic experience.
When adding states to a component you have the option to add one hover state which I have included here in the tutorial. Once I have the new hover state open I can change the background fill of the button so that when you hover over it in preview the display colour will change with it. I then added on a third state which i changed to say “Done” to indicate that the action of pressing the button had finished. I could also change the icon with it which makes the whole process a lot more easy as I didn’t have to create new states for each component involved.
