Keeping up to date with the latest features
https://www.adobe.com/uk/products/xd/features.html
The default settings for a desktop artboard is:
Artboard width: 1920
Recommended workspace view: 1200
Grid setting for fluid Bootstrap website
Viewport height (default): 1080
Tips:
The project specifications should document which tablet/mobile devices, the app will be primarily used on. If the requirements are based on multiple resolutions then you should design to the smallest device as it is easier to scale to a larger resolution (mobile first design).
Tips:
Keep your design styling constant and save valuable time by creating reusable/global assets.
The following assets can be created:
Colors
Store your main projects colour pallet.
Character Styles
Create different typography styles to be used throughout the project.
Components
Create components such as navigation bars, buttons, cards or any other reusable elements.
Keep in mind:
‘Master’ components - These are the main components which when edited, all child components will be edited in the project.
‘Child’ components - These are copies of the Master Components but can be edited without affecting the master or other child components. eg. change component colour
After you have finished creating your design, you should turn it into a prototype which will allow users to navigation through the wireframes. By doing this you have the ability to test the user-flow and everything is correct, etc.
Having a working prototype will allow the client to navigate through designs and get a clear idea of the end product.
Having broken or missing links will cause the artboard to be hidden from view when exporting n prototype and developer view.
Once the wireframes and prototypes are completed, you can export into the following views:
Produces a PDF version of artboards which can be easily emailed.
Share for Review
Creates a linked prototype version of the app or website where clients can easily navigate through. Clients can create and pin comments to the wireframes to request changes etc.
Share for Development
This option creates an overview of the project where you can see a detailed view of the page styling. The options include colour pallets, typography, assets(with download option), along with all the styling options, interactions and navigation links.
Use the link below to view the design resources and guidelines for iOS. If the app does not meet the guidelines, Apple may reject it.
https://developer.apple.com/design/
Download iOS UI Kit for XD
https://developer.apple.com/design/resources/
Use the link below to view the design resources and guidelines for material design.
https://developer.android.com/design
Download Material UI Kit for XD
https://material.io/archive/guidelines/resources/sticker-sheets-icons.html
When designing for Bootstrap, use the link below to see what components and layout options are available to use.
https://getbootstrap.com/docs/4.3/getting-started/introduction/
When designing for Flexbox, keep the following in mind.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
When designing for charts and graphs, use the link below as a guide.
http://recharts.org/en-US/
https://unsplash.com/ https://pixabay.com/ https://elements.envato.com https://fontawesome.com/