2 of 8

XD Tutorials

To learn the basics of XD, along with some more advanced tips later, I primarily used this website: https://letsxd.com/getting-started. With this resource, I was able to learn how to use artboards, shapes, images, repeat grids and components so that I could start wireframing my app in XD, then add functionality and personalisation. I also learned many useful tips and shortcuts to help me streamline the creation process and problem-solve on my own. Then, for more specific and advanced features like my search bar, I looked up a few YouTube tutorials which helped me to understand more nuanced things in XD, like how the auto-animate setting works and how to add simple timed animations with little effort.

3 of 8

Splash Page

For the wireframe of the splash page, I added a space for a top bar, then used a repeat grid to make spaces for three different images, along with a title, buttons and a divider. Later, I added the menu and search components to the top bar, and images to each space. I also added like, dislike and purchase components, and gave each image unique text. The purchase icon I designed solely in XD, which allowed me to see the limits of the app’s design capabilities, but they worked for this button at least. After designing, a fairly simple button design for its default state, I altered the colours to make its hover state. Otherwise, the purchase button has no real functionality in this prototype. For the like and dislike icons, I pasted the images into circles from Illustrator for their default states. Then, I gave the circles an outline for their hover states. Finally, I altered the icons in Illustrator to use for their active states. This meant that they have proper functionality by changing once they have been clicked, as with real like and dislike buttons.

4 of 8

Browsing Page

For the wireframe, I added a top bar again, then used another repeat grid for all the images and text, only this time it had two columns and far more rows. Later, I added the menu and search components to the top bar, along with the home component. I felt three icons was probably the limit for the top bar, as any more would make it feel crowded and overwhelming, which is why most buttons are hidden within the drop-down menu. I also added many different images to the spaces, utilising almost all my imagery assets, then giving each image a title. One issue I ran into while adding the imagery was overlapping images replacing others due to the nature of the repeat grid. I solved this by making copies of some images, though I soon realised I could expand the repeat grid into a group to avoid this when I ran into a similar issue later on. Something I neglected to mention with the splash page, but also applies here, is how I lengthened the page to allow for scrolling, while keeping the viewport the same, as indicated by the blue dotted line. Along with this, I fixed the top bar in position so it would always be accessible even when scrolling.

5 of 8

Notifications & Settings Pages

The wireframe for these three pages were as simple as the previous ones: I added a top bar and a repeat grid with space for text (and a small circular image). I later added in the text and images for each part of the repeat grid. I also added in the menu and home components to the top bar. For the profile and settings pages, I decided to then turn each box into a component with its own hover state similar to the purchase button’s. This meant they change as you hover over each setting, making them appear more functional even though most of them aren’t fully interactive. I actually did link the Home and Notifications settings to their respective pages just to add a little extra functionality to these otherwise static pages.

6 of 8

Create Page

This was probably the most complex page, though even now it doesn’t have the full functionality that it would in an actual app, but I can’t code I couldn’t go that far. The wireframing involved the top bar, an image workspace, a scrollbar and a repeat grid that went off to the right. Later on, I added the menu and home components to the top bar, along with a new tools component. I also added images to all the boxes as assets that could be used for hat creation, then recoloured the scrollbar to make it stand out more. To add functionality to the scrollbar, I made a duplicate page with the assets scrolled to the right, then added a drag animation to it. The way this works is almost like a fake scrollbar, as you can’t stop in the middle, only at each end, but I couldn’t find any tutorials for a proper scrollbar, only ones that worked the same way I had come up with. This isn’t too big of a problem, though, as it still appears to function perfectly. The next major feature of this page was the tools bar, a drop-down menu that is activated after clicking on the tools component. Within this bar are four components, each with hover states, active states and a hover state for the active state. I designed all the icons in Illustrator with reference to similar icons to ensure their purpose would be clear. It took a long time to set all this up, but the end result is quite pleasing.

7 of 8

Search Page

I was somewhat disappointed when I found out I couldn’t add a fully-functioning keyboard to my app, but I did find a few good tutorials for search bars with smooth animations. Following one of these meant I didn’t really wireframe this page, instead I started by copying the search component from one of the other pages. I then stretched the rounded square and linked the pages so that when the search icon is clicked, it would take you to this page with a neat animation of the circle stretching out into a bar. For the blinking cursor, I duplicated the page and added a line to the search bar. I then made both pages link to each other on a timer so that they flick back and forth, creating the illusion of a blinking cursor. I then added the final functionality of tapping the search bar to take you to the browsing page, as that page shows you an array of images similar to how the search results would look.

8 of 8

Drop-down Menu

Finally, the most important feature of all, that links these various pages together: the drop-down menu. I actually made this fairly early on, just after wireframing, so that I could preview lots of pages at once. I started by making a menu artboard with all my Illustrator icons. Then, I made them into components with hover states for the icons variants, and active states to take you to their respective pages when tapped. Lastly, I made the menu component bring this artboard up using the overlay animation. I later repeated these steps to make the toolbar for the create page.

Designing this app prototype was quite fun, and I learned a lot about what goes into making a connected, interactive medium. Sometimes, the limits of XD were annoying, but I would have to learn to code to make something more advanced (which I might). Another thing that I might like to add is mutually-exclusive buttons, such as the like and dislike, where clicking one would automatically unclick the other. This could be a final touch I may add with more time.