project[2]
0344034.
BDCM
.Interactive Design
::project[2]
project[2]: Minisite Design
todo:
- Create a minisite sitemap
- Create a minisite sketch
- Create a minisite mockup
process:
I started out with the sitemap, using XMind as my weapon of choice.
 |
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.
 |
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:
- Adding a gradient to the background of text
- Changing text from using
Differenceblend 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:
 |
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:
|
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
reflection:
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.
Comments