lim jia sheng,

.Interactive Design

project[2]: Minisite Design


  • Create a minisite sitemap
  • Create a minisite sketch
  • Create a minisite mockup


I started out with the sitemap, using XMind as my weapon of choice.

Sitemap, 16/10/2021

Figure 1.1.1, Sitemap, 16/10/2021

The solid lines signify the main page flow, with the dotted describing fragments/components that were accessible across multiple pages.

I then jumped straight into Adobe XD to whip up the rough wireframe.

Wireframe inside Adobe XD, 20/10/2021

Figure 1.1.2, Wireframe inside Adobe XD, 20/10/2021

This was more gruelling than it needed to be, mostly because I hadn't figured out how to use variables & components properly inside of XD (I am now a improved & wiser man). This made it so that copy paste inconsistencies, especially between files, were a lot of my work time.

After constructing the frame, I hydrated it all with images from unsplash, & made a few more changes that could not be caught in the wireframe:

  1. Adding a gradient to the background of text
  2. Changing text from using Difference blend modes to solid colours (will need to change according to their background in prod.).

I also took all the buttons & wired them up to their noted pages:

Mmm, spaghetti, 21/10/2021

Figure 1.1.3, Mmm, spaghetti, 21/10/2021

Pay no attention to frame not being a component (I swear I'm better than this now).


Final sitemap, 22/10/2021

Figure 1.2.1, Final sitemap, 22/10/2021

Figure 1.2.2, Final wireframe, 22/10/2021

Figure 1.2.3, Final mockup, 22/10/2021


Well the most important thing I've learnt was the use of components & variables, as without them it made reuse a pain. Other than that, it was a surprisingly fun experience. Never really got to do something like this, & going into UI/UX I feel like I could get used to this.