1ST WEBSITE PROTOTYPE
​
The following link above, showcases an interactive prototype of my
web publication produced using Adobe XD.
My initial ideas for my website does not compliment or add any additional elements to the print version. So to say, it fully is the web version of the printed publication. My intentions was to showcase my theme through digital forms.
Creating my website was definitely a challenge. There was a lot of refreshing to do since coding in the first year. Once I was able to get the hang of it again, coding what I needed based on my design and concept was an enjoyable
creative process.
An advantage of designing a digital publication that I discovered whilst executing my website, is the fact that it is immediately updatable and you are able to witness your changes directly. Whereas, in a print publication the changes are only evidently visible and how the improvements work all together once it is printed.
In terms of utilizing the one source work-flow for my digital version of the publication, worked in the beginning as to be able import the full text in one go instead of having to do it manually. However, the link was broken when I began to fully design the website and when the text was placed within different pages of the site.
Attending feedback sessions and discussing the meaning behind specific visual elements, I concluded that the design of my digital publication required a slight change to better suit my concept.
​
As shown above, in comparison to my first prototype, the website now no longer indicates which rectangles belong to which chapter. The reason for this change is allowing accessibility to play a role within the website, corresponding to the hierarchical stances for each chapter. For example, the third space occupies less space on the page and the thickness of the rectangles is thinner than that of others, thus it becomes harder to access the chapter.
​
However, as the design process continued I decided that perhaps the best approach for the home page of my website was to not represent each space/chapter using various different rectangles. Since this brought some confusions regarding the fact that if each rectangle lead to a different part of the chapter. However that was not the case. Therefore, it is now presented as a rectangle dedicated to each chapter and depending which space they belonged to, the thickness of its rectangle varied.
WEBSITE EXECUTION
2ND WEBSITE PROTOTYPE