{"id":144,"date":"2024-01-13T18:46:45","date_gmt":"2024-01-13T18:46:45","guid":{"rendered":"https:\/\/nua-ux.design\/hashry-andri\/blog\/?p=144"},"modified":"2024-02-15T19:38:02","modified_gmt":"2024-02-15T19:38:02","slug":"project-3-hifi-website","status":"publish","type":"post","link":"https:\/\/nua-ux.design\/hashry-andri\/blog\/3\/project-3-hifi-website\/","title":{"rendered":"Project 3 (HiFi – Desktop)"},"content":{"rendered":"\n

Final phase of project 3, designing high fidelity for the website. As mentioned in the previous post (project 3 visual ideation) i’ll be designing an experience website about red dead redemption festival. It’s a site for user to make table reservation and enjoy their meal at a fancy saloon that’s fully inspired from the game. The foods, drinks, environment, building and etc. <\/p>\n\n\n\n

Analyzing Game Designs <\/h1>\n\n\n\n

First and foremost i analyze the gaming design, the fonts, graphic and interactivity that are available in the game and it seems that it’s impossible for me to replicate their design if i fully depend on figma tools. Their not using simple vectors but instead they use waterpaint, grunge brush, vintage paper texture<\/strong> to recreate 1800s style. Johnny gave me this website where it breaks down all graphics and interaction design from the game for reference. So, I decide to illustrate vectors<\/strong> like frame and button in photoshop and illustrator<\/strong>. As for the font, I looked up on google about red dead redemption’s font and download it. I used the font<\/strong> “Chinese Rocks” as header, “Kirsty” for topics and buttons and “Roboto Slob” for any descriptions. <\/p>\n\n\n\n

https:\/\/www.gameuidatabase.com\/gameData.php?id=34<\/a><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Illustrations i did to replicate Red Dead Redemption graphics<\/em><\/strong><\/p>\n\n\n\n

Content Experience<\/h1>\n\n\n\n

All the description<\/strong> in the website such as the objective, saloons, mission page are all written by me first then i ask ChatGPT to rephrase it into cowboy slang<\/strong> or even better, phrase it as if Arthur Morgan<\/strong> (game protagonist) would describes it or promote it to people around. Sometimes it would be too long or it kept repeating the same words but I’ll asked it to simplify and changed some words with their synonym.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Help from ChatGPT<\/strong><\/em><\/p>\n\n\n\n

For the images i asked imagebingcreator to generate<\/strong> it. I would put in the prompts<\/strong> like “Generate an RDR2 festival poster with their the game artstyle” or “Generate a poster of treasure hunt inspired from RDR2” something like that. These picture are used for the ticket poster, background and gameposter, and header picture as well. I tried to put in as much picture as i could to attract the user and less description because i believe user won’t read everything. Short but pack<\/strong> with information.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Festival Layout and images<\/h1>\n\n\n\n

Although it’s a fiction event, I’m aiming to give the best website experience with full of information<\/strong> for the user. I’ve illustrated<\/strong> a map for the event in photoshop <\/strong>so users would plan out their day when attending the event. There’s also indicators<\/strong> at the bottom right for users to know the locations. The map design is fully inspired from the game<\/strong> in terms of the colours and marking (circle icon) from the game. I add crumpled and old paper texture<\/strong> to make it seem more vintage just like how the theme was supposed to be. Other than that, there’s a table layout<\/strong> in restaurant as well for them to book their seating. Simple and easy for user and theres colour difference for reference<\/strong>.Grey is for “available” tables, yellow’s for “unavailable” and green is when user selects it.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Event map <\/em><\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Restaurant layout for table booking<\/em><\/strong><\/p>\n\n\n\n

For other relatable images, I basically took it from google for menu,saloons and past events, just to give a hint on what users will be expecting on the day.<\/p>\n\n\n\n

Interaction Design<\/h1>\n\n\n\n

Moving on to the final part which is adding interaction (button functionality). All buttons have an interaction where the mouse hover over it, it either changes colour or image. It’s to emphasize that the ones user hover over is the button. Other than hovering, colour distinction also signifies that it’s a button with statements beforehand. <\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

<\/p>\n\n\n\n

My favorite interaction that i applied is when the user hover over the options of saloon, the colour changes to black and white and the name of the saloon reveals, plus there’s an outline with red colour appear and it is based from the game which is the reason i love it because i manage to copy it.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Another favorite interaction i did was adding tooltip. Other than changing colours, there’s an information popped up when the user is hovering at the register button in every saloon page. It’s for the user to be on alert if they want to proceed on their progress and it’s very obvious since the colour is contrast from background<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

the change of picture. I applied this effect on merchandise and food section for the user to get a glimpse of the product. The cursor <\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n
\n
\"\"<\/figure><\/div>","protected":false},"excerpt":{"rendered":"

Final phase of project 3, designing high fidelity for the website. As mentioned in the previous post (project 3 visual […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,14],"tags":[],"_links":{"self":[{"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/posts\/144"}],"collection":[{"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/comments?post=144"}],"version-history":[{"count":8,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/posts\/144\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/posts\/144\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/media?parent=144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/categories?post=144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/tags?post=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}