When designing the general background for the website, it was as simple as just expanding the original mobile background and design. One difference though is that each card will remain in the same place and same size on each page. However the amount of space on the sides is a lot more than the phone
To create a good border, the tarot cards were used and put in order of actual tarot card numbers. This is because they are throughout every persona game, and with their unique designs from P3 and P5, it was best thought that they’d work best as a border, especially for the connecting theme of the Velvet Room, which uses tarot cards the most.
While most designs from the phone stay the same, I decided to change 2’s to fit better. Not only is Persona 2, two different games so it has two different cover designs, but also it fits the look and placement for the end result a lot better.
The finished design for the home menu, a good expansion from the phone while filling the space greatly. The interactable elements have been removed as websites are more on getting information, and it wouldn’t fit the placement.
The beginning character menu. Instead of scrolling down like the phone, there will be a button you click to move the characters. The button itself has designed around the Velvet Room, Specifically the V in the middle.
The backgrounds that will be used to represent each game. They’re expansions of the mobile backgrounds to fit the desktop format. These were made on Photoshop by myself in the style of each game respectfully.
The base design for what each section will look like, specifically the Persona 3 section. The buttons at the top remain the same as the mobile app, as that way of going between each game works very well.
The changed design for each section. The text and size will be increased to best suit a pc, while the tarot card has been moved to the name area to conserve space, and as it suits the website style.
A finished look at the character menus. Persona 3 has more characters thanks to the game having more important story centred characters. The format suits the website layout design more, while remaining similar to the mobile app. All information is the same, as it wouldn’t feel right to lock information behind either the website or the app. The inclusion of the Personas was something I wanted to include on the website and not the mobile app to give something original and unique to the website that doesn’t include any more information, and is just a cool added feature.
Unlike most other menus taht have a lot of differences, the Story section is practically the same as the mobile app. The only other differences, are similar ones that have already been discussed. Other than that, the story section only serves to give an idea of the general story.
Like the Story section, there won’t be much different in terms of layout. However, thanks to how pc is, it was best thought to have each games background in each section, were each link and section would be. The backgrounds remain the same.
The finished design of the About section. The backgrounds definitely help each section stand out. It was still decided to keep the box background used in the mobile design. This is just to keep the text still stand out, while the pictures don’t need it anymore to stand out, as the background sections help convey each section.
References
Atlas (1996), Revelations: Persona, Available Online: https://www.retrogames.onl/2022/02/persona-ps1-play-online.html (accessed on 08/05/2024)
Atlas (2009), Shin Megami Tensei: Persona, Available Online: https://www.emulatorgames.net/roms/playstation-portable/shin-megami-tensei-persona/ (accessed on 08/05/2024)
Atlas (1999), Persona 2: Innocent Sin, Available Online: https://www.ebay.co.uk/itm/386251436202?chn=ps&_ul=GB (accessed on 08/05/2024)
Atlas (2000) Persona 2, Eternal Punishment, Available Online: https://www.amazon.com/Persona-2-Eternal-Punishment-PlayStation-Sony/dp/B00004WLZ7?th=1 (accessed on 08/05/2024)
Atlas (2011), Persona 2: Innocent Sin (PSP), Available Online: https://uk.webuy.com/product-detail/?id=5036675013910 (accessed on 08/05/2024)
Atlas (2012), Persona 2: Eternal Punishment (PSP), Available Online: https://github.com/sayucchin/P2-EP-PSP/ (accessed on 08/05/2024)
Atlas (2006), Persona 3, Available Online: https://uk.webuy.com/product-detail/?id=SLEGPS2S1407B (accessed on 08/05/2024)
Atlas (2007), Persona 3 FES, Available Online: https://uk.webuy.com/product-detail/?id=SLEGPS2S1408C (accessed on 08/05/2024)
Atlas (2009), Persona 3 Portable, Available Online: https://store.steampowered.com/app/1809700/Persona_3_Portable/ (accessed on 08/05/2024)
Atlas (2024), Persona 3 Reload, Available Online: https://store.steampowered.com/app/2161700/Persona_3_Reload/ (accessed on 08/05/2024)
Atlas (2008), Persona 4, Available Online: https://www.amazon.co.uk/Shin-Megami-Tensei-Persona-PS2/dp/B001Q9EK82 (accessed on 08/05/2024)
Atlas (2014), Persona 4 Golden, Available Online: https://store.steampowered.com/app/1113000/Persona_4_Golden/ (accessed on 08/05/2024)
Atlas (2016), Persona 5, Available Online: https://www.amazon.co.uk/Persona-5-for-PlayStation-4/dp/B01GKHJP98?th=1 (accessed on 08/05/2024)
Atlas (2019), Persona 5 Royal, Available Online: https://store.steampowered.com/app/1687950/Persona_5_Royal/ (accessed on 08/05/2024)