Designing with Adobe XD: Design a Modern Blog UI

Hey, Pixels! I’ve teamed up with Adobe XD this year to bring you an eight-part series on how to design a modern blog in Adobe XD. Last year, I teamed up with XD to create a 16 part video series on how to create a destination website, so I’m very excited to present this new series.

Adobe XD has been teaming up with UX/UI designers from around the world to provide us designers with amazing free UI kits that anyone can use in their own design projects. For this series, I’ve selected two free UI kit to use for this modern blog UI: Navigo Transportation UI Kit and Smartwatch UI kit.

Adobe XD is Free!

Adobe XD is now FREE for anyone to download. Anyone can follow along with this tutorial or add their own spin to the design. Feel free to watch the entire series below.

1) Designing with Adobe XD

2) Setting up your Artboard in Adobe XD

3) Navigation Menu

4) Creating a featured article in Adobe XD

5) Designing a blog layout in Adobe XD

6) Designing a blog layout for Tablet screens

7) Designing a blog UI for Mobile

8) Designing a blog layout for Smartwatches

Share your creations

Feel free to share the creations that you made from this tutorial in the comments below. I would love to see it.

Like this article?


  1. This was such a great article. I made my first blog UI into a travel blog. Thanks, Marisa!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.