![](https://pro2-bar-s3-cdn-cf1.myportfolio.com/c66ba04724c35b0fee40fcacb1350fc1/26461223-5147-4af1-9bad-28f5baff1410_rw_600.png?h=cda10e23bab7f555b8515166520f936a)
SHOP IT | AdobeLive UX Design Winner
During the “Live UX Design with art director Sallie Harrison 1/3” live-stream on September 12, 2017, we were challenged to use Adobe XD to design and create a fictional app with at least 3 artboards based on the theme of “shopping”.
![](https://pro2-bar-s3-cdn-cf.myportfolio.com/c66ba04724c35b0fee40fcacb1350fc1/12e5b23f-92d0-4408-9ea9-dd455ef7abf0_rw_1920.png?h=7b8ebbb855b15d1d7d1dd59128d8a31b)
WIREFRAMES
Using Adobe XD's "repeat grid" functionality, I quickly drew up a basic navigational menu, a home screen, a search results screen, as well as a product details screen.
![](https://pro2-bar-s3-cdn-cf2.myportfolio.com/c66ba04724c35b0fee40fcacb1350fc1/d910c130-4deb-4b98-b095-ca8265374d11_rw_1920.png?h=4af1ea9c277ed707969e4fe8a23b2854)
STYLE GUIDELINES
I chose a monochromatic layout to allow the photographs take centre stage, while combining the "Montserrat" and "Helvetica Neue" font families to add a 'modern' aesthetic to this application.
![](https://pro2-bar-s3-cdn-cf3.myportfolio.com/c66ba04724c35b0fee40fcacb1350fc1/ed449bad-5ea7-4588-a358-466d43c75496_rw_1920.png?h=7acee0c1695ab2159beb4b58847f8724)
ICON LIBRARY
Using Adobe XD, the following icons were drawn to help create a unique look and feel to this app. Each icon was drawn within a 24px x 24px area, while ensuring that each icon had a trigger area of 48px x 48px.
![](https://pro2-bar-s3-cdn-cf1.myportfolio.com/c66ba04724c35b0fee40fcacb1350fc1/cb711332-7af8-4264-a010-e2fba7a5f2ae_rw_1920.png?h=fb522055d719319e5205de5945246548)
RELIVE THE MOMENT
THANKS FOR WATCHING!
If you liked this project I would greatly appreciate a follow.