I have been using Adobe XD a few times this semester for various projects. It is a very easy to use, light program for mocking up, wire framing, and prototyping. I used it this week for the first time to prototype a web site I am making.

The project itself was to recreate an outdated website, with a reimagined version. The website I chose was pretty empty, it is called Pocono Restaurants. But all that was actually on the website were pictures for one specific restaurant and a bunch of external links to different activities and other things. So, I kind of made up what the website would be if it was truly Pocono Restaurants, a recommendation-type site that helps people navigate where and what to eat in the area.

I made 5 pages including the home. XD is so nice with creating layouts. It brings up automatic pixel adjustments and comparisons so you can tell if everything is centered and aligned without dragging out a guide.

After I created the home page, it was extremely easy to just copy the art board and create a copy to make the other four pages. After all the pages were created I started to connect them with prototyping. When in prototyping mode it is very easy to see the visual correlation between the elements and where they connect to. You just click on an element and drag to where it should lead. For pages, I just click on the page name in the nav bar on the home page, drag it to the other art board, then repeat the process to link back to the homepage.

I also tried to do a slide show of images for the top of the home page. To do that I had to group a bunch of pictures the same size, add arrows on the pictures. Once all that was a group I duplicated the home page. Then moved the images over on the duplicated slides. To prototype I made the arrows be the element connecting to the other pages. Then just loop it back.

That was pretty much all the prototyping I did on the site, quite simple for the first time. I had some trouble figuring out where to connect where, but once I got the hang of it, it was fun.