For unit 35, I had to create my own website.
For the website, I used a WIX ADI creation. I answered some questions and chose the 'portfolio' option this portfolio led to a 'Game Design Portfolio'.
The theme I chose for the website is minimal. The minimal theme is balance and simple with a touch of refinement. In terms of minimal, I decided to go with a black background and white text the reason why I went with this choice of colour is that:
"Our brains commit this to memory as a symbol. This can then be referenced later for recognition. If there is a lot of text on a dark background you can try reading it yourself and notice that your brain is struggling to interpret it not as a symbol but as content to be understood and committed to memory more how it would with dark text on a light background."
Examples
Logos
Billboards
Headlines
Media (movies/photos/etc.)
Next step of the process. The next part of this process is to create a wireframe and diagram.
I made a blog regarding creating my wireframe and diagram for my websites. Here are the wireframes I made on pencil and paper:
![](https://static.wixstatic.com/media/48d25b_025f6c077b644d8dad1fd60110f73298~mv2.png/v1/fill/w_85,h_117,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_025f6c077b644d8dad1fd60110f73298~mv2.png)
![](https://static.wixstatic.com/media/48d25b_3ce4c28a3ad344c7893e8e6bee911d2d~mv2.png/v1/fill/w_85,h_117,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_3ce4c28a3ad344c7893e8e6bee911d2d~mv2.png)
![](https://static.wixstatic.com/media/48d25b_ac18ed1801c34024907c37fe440e25a1~mv2.png/v1/fill/w_85,h_117,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_ac18ed1801c34024907c37fe440e25a1~mv2.png)
Once I had created the wireframe and diagram, I created my game design document website through Wix.
With this website, I took into consideration the psychology elements, what makes a good UI design for the website itself and what's convenient for the website.
Once the website is created, I plan on making a survey to gather customer feedback from focus groups.
Creating the game design website (version 1)
Creating my game design document website, I had thought and taken the following elements into consideration: - UI design (how it affects the overall user experience)
- User experience (psychology effects)
I will briefly explain my process of how I went about creating my website. Alpha product vs beta product
Before:
![](https://static.wixstatic.com/media/48d25b_36c5457ac69d444a81ef30e1c322a11c~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_36c5457ac69d444a81ef30e1c322a11c~mv2.png)
![](https://static.wixstatic.com/media/48d25b_8227dd4d98b6435495c2ca0486585db5~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_8227dd4d98b6435495c2ca0486585db5~mv2.png)
![](https://static.wixstatic.com/media/48d25b_b7cbd2fb25f449bc9c721083f9df9842~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_b7cbd2fb25f449bc9c721083f9df9842~mv2.png)
![](https://static.wixstatic.com/media/48d25b_d7459536b14a44fb89e90b26de40cf95~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_d7459536b14a44fb89e90b26de40cf95~mv2.png)
![](https://static.wixstatic.com/media/48d25b_ff1fc8c06ebd4a84aa1d97b841ed08e2~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_ff1fc8c06ebd4a84aa1d97b841ed08e2~mv2.png)
![](https://static.wixstatic.com/media/48d25b_96cd607a6f4e405ba01813c79f077261~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_96cd607a6f4e405ba01813c79f077261~mv2.png)
![](https://static.wixstatic.com/media/48d25b_7a79793c8d6f4196816e7b3498bc9134~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_7a79793c8d6f4196816e7b3498bc9134~mv2.png)
![](https://static.wixstatic.com/media/48d25b_36c5457ac69d444a81ef30e1c322a11c~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_36c5457ac69d444a81ef30e1c322a11c~mv2.png)
After:
![](https://static.wixstatic.com/media/48d25b_91a642bfb4604d8ea493397d093377f1~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_91a642bfb4604d8ea493397d093377f1~mv2.png)
![](https://static.wixstatic.com/media/48d25b_fce6614d85f74fbbbe15ddae7e68627a~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_fce6614d85f74fbbbe15ddae7e68627a~mv2.png)
![](https://static.wixstatic.com/media/48d25b_281afa1e1d0041eebcb47b2bd6357428~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_281afa1e1d0041eebcb47b2bd6357428~mv2.png)
![](https://static.wixstatic.com/media/48d25b_cd60bcd7ae4645b3b65c91e23f81617e~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_cd60bcd7ae4645b3b65c91e23f81617e~mv2.png)
![](https://static.wixstatic.com/media/48d25b_0aff439af6d14a41bc59ff4def02e6cd~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_0aff439af6d14a41bc59ff4def02e6cd~mv2.png)
The reason behind using different colours for the header, footer and blog strip is to make the page stand out and memorable. This is the psychological effect called
I have created a survey for my game design prototype website: Website link: https://cade-mason.wixsite.com/tower-of-hell-game
Survey results from testers feedback
I made a blog for testers' feedback to meet client needs. To keep it short, I asked for user feedback after they tested the website. I took the comments into consideration and made improvements where it felt necessary and to meet client user needs. https://cade-mason.wixsite.com/website-1/post/survey-feedback-from-user-interface-and-experience
Having made changes to the website based on testers comments here is the after version of the website's home page:
![](https://static.wixstatic.com/media/48d25b_3f0dfdecb3ed4947a2ac9d0c21de3f27~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_3f0dfdecb3ed4947a2ac9d0c21de3f27~mv2.png)
![](https://static.wixstatic.com/media/48d25b_02bb7d6d911141a59191056b5c09e57e~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_02bb7d6d911141a59191056b5c09e57e~mv2.png)
![](https://static.wixstatic.com/media/48d25b_eb1fcd2a53074daca46bd9caa012babb~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_eb1fcd2a53074daca46bd9caa012babb~mv2.png)
![](https://static.wixstatic.com/media/48d25b_d6446952bbf44ba9b4621b5a7fb66dba~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_d6446952bbf44ba9b4621b5a7fb66dba~mv2.png)
![](https://static.wixstatic.com/media/48d25b_b519cfe1918a4aff8df48d4d8e36c441~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/48d25b_b519cfe1918a4aff8df48d4d8e36c441~mv2.png)
Blog page before (1st image) and after (2nd image):
Features page before (1st image) and after (2nd image):
"About the game" page before (1st image) and after (2nd image):
More information page before (1st image) and after (2nd image):
Contact page before (1st image) and after (2nd image):
Overall, I am fine with how the website has turned out. Given time constraints, there isn't anything else I can do with the website. In the future, I could see myself going back to this website and making more adjustments depending on user feedback of the UI design presentation. This has taken me 5-6 weeks to create this website all the way from the wireframe (draft) process to the website design process.