This demo is an example of using Adobe XD to design a website and a mobile app.
In this demo, we create two artboards for a website and a mobile app. The website and mobile app have a different layout design, but they share the same color palette and style. Also, the menu collapses in the mobile app to save space.
Adobe XD is a useful tool for designers to illustrate their ideas without coding. All components, such as buttons, text styles, and colors, can be saved and reused in other places.
We can export the artboards as HTML using plugin. The followings are the output HTML pages for the website and mobile app artboard.
There is a good YouTube tutorial video for beginners. This video quickly goes through some important Adobe XD features. The beginners can start their first Adobe XD project after watching this video.
Adobe XD Basics | Top 10 Things to know when getting started with Adobe XDThis is a good video that goes through a new Adobe XD feature released in 2019. We can add hover effects to Adobe XD work.
Component States & Hover – Adobe XD November Release 2019 | Adobe Creative CloudYou can find good Adobe XD official tutorials here.
Adobe XD tutorials