Website Research

The big part of this brief is the website we have to design this is why I decided to look into a few game websites to draw inspiration from. I was looking for websites which didn’t follow a template and were rather unique. I was also trying to look for websites with a punk/cyberpunk feel to them and in the end Persona 5 and Void & Meddler websites fulfilled those criteria. The other website designs are also interesting and I will definitely use them as points of reference for my own website design. Images below are screenshots of these websites. Some of these are cropped differently because I had to zoom out to show more of the website designs.

Persona 5 Website

http://atlus.com/persona5/home.html

Persona 5‘s website stood out a lot from the other websites I research because of it’s unique layout and design style. Rather than having a menu it’s a scroll through website which is another thing I like about it. It’s reminiscent of a graphic novel therefore the navigation of the website reflects the anime art style of the game. The website follows an arrow which bends along the way down. Along the arrow different elements of the game are revealed which again is a very different approach to website navigation. Even though the website has a very punk/ visual kei feel to it and is cluttered thanks to the arrow the information is still easily readable. I also like the typography style of the headings. They’re reminiscent of letters being cut out from newspapers again bring the element of punk to it’s design. Finally I also like the 2D background design of the website which is very striking and loud. The layout and shapes used to frame the images and text reinforces it. It reflects the atmosphere of the game.

Opening Screen
Opening Screen
P5.1
Game Art Advertisement
P5.2
Character Intro
Character Intro 2
Character Intro 2
Environment & Game Info
Environment & Game Info

Void & Meddler Website

Home-2023

Void & Meddler‘s opening screen is my favorite from all the websites I’ve visited because of it’s graphic novel like artwork and bright colors. It gives a very cyberpunk feel to it off the bat. I like how the arrow moves up and down switching colors with a pink arrow. The way it moves is also reminiscent of the old school gaming style of the game. This website uses a grid system same as the other websites I have researched. It’s a good way to present information clearly on a chaotic/ cluttered background I like how dark it is which is representing night and the bright colors representing the lights of the streets and clubs. It’s very atmospheric which makes this website more interesting to some of the others I have looked at. It’s a scroll through website but it also has a menu which makes it even easier to navigate the page. I really like that style of website navigation because it gives it a Graphic Novel feel but one can get to information quickly. I like how the trailer was simply presented on it’s own. I’ve noticed bigger game franchises have a lot of videos at once with small thumbnails. I’m making designs for only one game so it makes more sense to adapt Void & Meddler‘s way of presenting a trailer.

Opening Screen
Opening Screen
Game Trailer
Game Trailer
Purchase
Purchase
Story
Story
Features
Features
Team
Team

Fallout 4 Website

https://www.fallout4.com/

The thing that I love about this website is it’s use of vintage american advertising design and it’s integration with contemporary website design. This website uses a lot of images from the game to break the website into sections without making it boring. Simple lines and small heading also serves this purpose which makes for a clear design. I like that new images have been created just for the website and are made in the same style as items in the game which brings an element of transmedia into the franchise. I included the franchise’s shop to have a point of reference when designing my little merchandise page. Stand alone games didn’t have a shop section so I used this one. It has a standard grid design which I will probably end up using myself. I like the idea of an opening screen to be a moving image from the game or at least a picture with a large logo same as with the Void & Meddler opening screen. The menu sometimes disappears when you scroll through the website but because it’s on a black strip it matches with the rest of the framing of the website. I will most likely include a menu on my website unlike Persona 5. This seems like a readable and visually pleasing way of designing a menu. I also like how the game’s logo is present in the corner of the menu at all times and so it the buy now hyperlink. The body text is the same throughout making the website look uniformed even though the headings do change their typography style.

Opening Screen
Opening Screen
News
News
Latest Game Release
Latest Game Release
Advertising
Advertising
Social Network
Social Network
Example of an App
Example of an App
Merchandise
Merchandise
Bottom of the Website
Bottom of the Website

The Wolf Among Us Website

https://www.telltalegames.com/thewolfamongus

I find the opening of this website quite boring and amateur looking. Mainly because of the typeface on the menu being on a block colored square which before one clicks on the hyperlinks looks out of place. Also the muted image from the game makes the website look like it’s missing something. However the website improves massively once a hyperlink is clicked on. I like the comic book style of the layout which reflects the style of the game itself. The choice of the typeface makes more sense once the comic book window is open. I like the changing background which shows off more of the stills from the game. The shop page also uses a grid system which is the clearest to read and gives off an impression of being legitimate and trust worthy which is important when you’re trying to make people pay online. I will most likely end up using a grid system as well. I don’t think I can use logos of these websites however so I will most likely do a similar page as the one here ‘buy it from telltale’. Finally I included the bottom of the website as a point of reference to where everything usually is placed when it comes to the legal bits. I might not include that in my website design seeing as it is a made up game.

Opening Screen
Opening Screen
About The Game
About The Game
Purchase
Purchase
Bottom Of The Website
Bottom Of The Website

Borderlands Website

http://borderlandsthegame.com/index.php/news-main

This website also uses a large image from the game with it’s logo as an opening screen. This one scrolls though a couple of different game release from the franchise. It has a similar menu to Fallout’s website which I do like a lot. I personally don’t like the yellow but it does go with the franchise’s design. The main thing I don’t like about this website or most websites I’ve researched is the scrolling bar on the side. It’s usually grey and it stands out too much whereas the Void & Meddler‘s website has it integrated into it’s design. I will aim to produce something similar. I like how this website uses stills from the game as background and every page has a different image. This website also uses a grid system which I don’t normally like but here it is useful to make the information more readable since the website is quite cluttered with colorful imagery. The typeface also reflects the style of the artwork for the game. I like how the headings are at an angle giving the website even more of a dynamic feel. Finally I really like how the website design changes for different game releases to represents it’s unique feel although it’s layout stays the same in order to keep the website uniformed. This is something that I might adopt when designing pages to represent the conflict between the church and the barbers.

Opening Screen
Opening Screen
Opening Screen 2
Opening Screen 2
Example of a page for a specific game edition in the franchise
Example of a page for a specific game edition in the franchise
News
News
Shop
Shop

Game Covers Research

Another practical application for my project is a game cover. I decided to research a few of these. All the images are taken from Google Image search. To begin with I thought about only doing the front cover design but after conducting this research I might do the whole cover. Below are a few game covers which I found particularly effective and/or applicable to the theme/genre of my game. I like how The Wolf Among Us’ back cover is reminiscent of a comic book. Its provides a clear layout for a fairly cluttered design. The Witcher’ back cover shows a different style of a layout with a larger image at the top which also works very well. I included the Jazz Punk‘s cover because of it’s simplicity. I don’t know if I will be able to produce images of such high standard as The Wolf Among Us therefore it’s good to have a simpler point of reference. I could easily make a similar cover to this one because the style of it is mostly line work and block colors. Finally I decided to include Saints Row‘s cover because it depicts demons/hell which is in tone with the themes of my game and again is a good point of reference. It’s very cluttered put the eye is easily guided to the focal point which is the main character flying out of hell since he is at the center of the cover and most of the ‘chaos’ happens around him.

The Wolf Among Us Cover
The Wolf Among Us Cover
The Witcher Cover
The Witcher Cover
Jazz Punk Cover
Jazz Punk Cover
Saints Row Cover
Saints Row Cover

Anime Covers

I also decided to roughly look into anime DVD covers in order to broaden my search and ideas. These are a lot simpler than the game covers. I particularly like the first Ergo Proxy‘s cover because of how dark it is and because of the faded out image on the back cover.

Ergo Proxy Cover 1
Ergo Proxy Cover 1
Ergo Proxy Cover 2
Ergo Proxy Cover 2
Vampire Hunter D Cover
Vampire Hunter D Cover

Game Poster Research

I decided to look into other game posters in order to get inspiration for my own Bloodletting posters. I also researched film and anime posters to broaden my ideas. All of these images are taken from Google Image search.

Game Posters

The game posters I have researched were mainly within the cyberpunk, noir and horror genres. I like the bright tones of the first three posters. The bright pink, magenta and violet contrasted with black and dark blues creates an atmosphere of streets being alive at night with lights coming from shops and spilling out onto the concrete. It’s the same ambiance I want my game to have and therefore convey though advertising. I also like the clutter of Catherine game poster. There’s a lot going on which creates a sense of a fast paced game. For my poster I could use that chaos to represent the conflict between the church and the barbers. I’d like some of my designs to be influenced by punk/cyberpunk and be loud and in audience’s face. I like the dark shadows of The Wolf Among Us poster and how the light source is a match which automatically tells the audience about the character so does the pose. The Void and Meddler poster has great composition but the thing I like about it the most is the static like look of the background lights and the neon look of the typeface. The Evil Within and Bloodborne posters are strikingly different from the first three posters. They’re not bright and don’t include lights or much color instead they’re mainly black with muted colors. I like how The Evil Within poster doesn’t use a character to advertise their game instead it uses a brain and a building with clever composition. This is something I would like to explore in one of my design and focus on the Bloodletting tools or the symbols from the game like the neon cross by it self and the logo. Bloodborne poster includes a chair which I thought was applicable to my game since the barber or the bloodletting chair are the focus of my designs. It’s good to see how other posters integrate a chair into it’s composition. I do like the fact that someone is sitting in it as originally I wanted to include the chair by it self. I’m thinking about including a possessed patient being bleed in the chair violently screaming. Perhaps have it at a canted angle in order to make the design more dynamic. The patient could be trying to break free away from the bloodletting chair towards the corner of the page. I also like the facial expressions of the characters. They’re very explicit and represent each character well. I want the three barbers to have very distinctive facial expression to make their characters memorable.

Void and Meddler Poster
Void and Meddler Poster
Catherine Poster
Catherine Poster
The Wolf Among Us Poster
The Wolf Among Us Poster
The Evil Within Poster
The Evil Within Poster
Bloodborne Poster
Bloodborne Poster

Film Posters

I decided to research film posters in order to broaden my ideas. I like the blue tone of Nikita poster combined with bright pink font. It gives it a more of a run down club feel which I like. The Oldboy poster also has that night street feel with all the neon signs from shops and clubs. It’s a very striking composition as well with the main characters being so small in relation to the signs. It connotes these to characters to be facing off a bigger problem or that the society or the world is judging them (which is true to the plot of the film). I think that the title of the film being integrated into the rest of the neon signs creates a successful composition. I’d like to attempt this when designing my poster. Inherent Vice posters are one of my favorites this is why I included character posters as well. I haven’t actually seen this film yet but I really like how creative and cluttered these posters are paying homage to some of the older poster designs.  The bright colors create a very psychedelic feel to the posters (again representing the ‘vice’ and the narrative). I also like how the designs combine the genres of neo noir and psychedelia. There’s the iconic composition of noir posters reminiscent of films such as Double Indemnity combined with the bright colors and neon fonts. Since my game also combines different genres I might pull out elements of each genre and attribute it to either the font or the composition or the image itself and combine these together to create a unique feel. Finally the Sweeney Todd poster depicts a barber sitting on a barber chair which I thought was appropriate to my project. It’s another point of reference for my bloodletting/barber chair design. I like that the title is right at the bottom below the chair.

Nikita Poster
Nikita Poster
oldboy-movie-poster-2003-1020263711
Oldboy Poster
Inherent Vice Poster
Inherent Vice Poster
Inherent Vice Character Posters
Inherent Vice Character Posters
Sweeney Todd Poster
Sweeney Todd Poster

Anime Posters

I like how dynamic and creative anime posters are. I particularly like how movement is represented through these posters and how they establish conflict between characters (especially the first Psycho-Pass poster). Again I like the clutter of the first poster and how the chaos of the background creates conflict between the two present characters. At the same time I like the white/gray background Psycho-Pass posters and the  Blue Exorcist poster as well because they’re really clear and the background doesn’t take away from the main composition. It’s simple yet effective. On the other hand the static like backgrounds of the first Psycho-Pass poster and Ergo Proxy poster they go with the tone of the cyberpunk genre. I also really like the positioning of the title for Psycho-Pass at the bottom of the page. Again it’s a really clean design which I could use for the church’s exorcists design to show off the contrasting sides. I also like Psycho-Pass‘ animation style, especially how the clothes behave which adds movement to the designs.

Psycho-Pass Poster 1
Psycho-Pass Poster 1
Psycho-Pass Poster 2
Psycho-Pass Poster 2
Psycho-Pass Poster 3
Psycho-Pass Poster 3
Ergo Proxy Poster
Ergo Proxy Poster
Blue Exorcist Poster
Blue Exorcist Poster

Environment Design: Reference Photographs

Below are photographs I’ve taken around Lincoln of the outside of buildings which I thought are good starting points or reference images for my environment designs. I also included some images I found online to broaden my ideas.

Reference Photographs Collages

There were too many photographs so I decided to make collages out of them. The places are still visible but I have chosen the best images or my favorite ones from these to use as my definite references. The photographs were taken at night because the environment designs will also be night images. I was looking for interesting architectures or old school shops as well as bright, colorful lights. Over all I think I got some good reference images especially for the outside of the barber shop.

Reference Photographs Collage 1
Reference Photographs Collage 1
Reference Photographs Collage 2
Reference Photographs Collage 2

Reference Photographs for Outside of the Barber Shop

Below are the three best photographs I have chosen from the collages. My favorite is the first photograph because it reminds me of an old school barber shop. I also like the carving in the wood combined with the dustiness of the windows.

Barber Shop 1
Barber Shop Idea 1
Barber Shop 2
Barber Shop Idea 2
Barber Shop 3
Barber Shop Idea 3

Reference Photographs for Lights Outside of the Barber Shop

Lights 1
Lights 1
Lights 3
Lights 2

Reference images for outside of the Barber Shop/ Tattoo Parlor

The images below were found on Google Image search. I decided to look for Barber Shops and Tattoo Parlors because I thought it would be a good idea to include surrounding buildings to make the street more cluttered, busy and alive especially at night. My favorite image for the outside of the Barber Shop is the one captioned Barber Shop 1. This is because I like the neon signs and bright colors combined with an old school architecture of the building and the urban metal gates. I also thought it would be a good idea to research neon barber poles to make the scenery more cyberpunk.

huckle_ref_01_0
Outside Old Barber Shop
MED_DSC_1029
Barber Shop 1
PB-HwdTatoo
Tattoo Parlor 1
voltage_tattoo_lg
Tattoo Parlor 2
5131276577_4693e77018_b
Neon Barber Pole

Reference images for indoors of the Barber Shop

I mainly researched the barber chairs and bloodletting chairs. Turns out they’re pretty similar. I like the look of a leather chair with metal details. Perhaps make it look more rusty and used up rather than shiny and new like in the images below. Maybe even include some bloodstains and a design stitched on to the leather. I want to use the chair as one of the main elements of the posters.

14723677673_0f6365a45a
Barber Chairs
Medical
Bloodletting Chair
barberchairval
Vintage Barber Chair
9511659262_e021e2a1cd_m
Neon Barber Pole 2
Barberpole_02
Inside Retro Barber Shop

Reference images for the cross

I decided to research neon crosses because of the cyberpunk genre elements I wanted to explore throughout this project. I want the neon cross to be one of the signature designs for the game carried throughout the posters, website and the merchandise. I might try to incorporate it into the logo as well but this is yet to be decided. I really like the concept of having words in the middle of the cross. I could use it to represent the uniformity of the church and their attempt to exert superiority in the field of exorcism over the barbers. I also researched chemist crosses and symbols to include on the outside of a pharmacy perhaps as well as Gothic crosses to include on the cases of bloodletting tools etc.

TRM-Cross-At-Night
Neon Cross 1
sin
Neon Cross 2
e40a01187f9b565de1a9efc68492c08d
Neon Cross 3
ChemistCross_001
Chemist Cross
519065502_906
Pharmacy Cross
pharmacy_logo_for_web
Bowl of Hygeia with the serpent of Epidaurus
gothic-cross-pendant-with-black-cz
Gothic Cross 1
OLYMPUS DIGITAL CAMERA
Gothic Cross 2

Reference images for the Church

Below are a few images I research to have a point of reference for the church in the middle of the city. In order to combine it with the cyberpunk genre I want to add a massive neon cross running through the middle top part of the church.

Church 1
Church 1
Church 2
Church 2
Church in Cambridge
Church in Cambridge

Reference images for the Pharmacy Shop

Finally I decided to research a few images of Pharmacy Shops. These will serve as a point of reference if I decide to include a pharmacy next to the barber shop or somewhere else in the environment design. These are pretty similar to other buildings I have researched only have a massive Pharmacy sign on them. I like the run down look of these and the big glass windows with clutter. I might include an inside of a pharmacy design on the game’s website.

Pharmacy 1
Pharmacy 1
Pharmacy 2
Pharmacy 2
Pharmacy Indoors 1
Pharmacy Indoors 1
Pharmacy Indoors 2
Pharmacy Indoors 2

Bibliography

Images which aren’t my own photographs are from Google Image search.

http://www.rpharms.com/museum-pdfs/13-pharmaceutical-symbols.pdf

Bloodletting

Bloodletting is a medical practice popular in Medieval Europe although it existed since ancient Egypt. Erasistratus believed that illnesses were caused by an overabundance of blood. The blood was drained from the patient with the use of tools such as the lancet and dripped into bleeding bowls. There were alternative techniques to cutting such as leeches and cupping. These will be depicted in the designs for my game.

Depiction of Bloodletting
Depiction of Bloodletting
Bloodletting Tools
Bloodletting Tools

 

Barbers:

In 1163 church prohibited monks and priest from performing Bloodletting. I could use this fact as a plot device for my game and create a conflict between the exorcists employed by the church and the barbers who perform bloodletting as a form of exorcism. Church would be represented as a richer and powerful establishment where as the barbers would be represented as more of an underground, street service. Barber Surgeons became responsible for treatments such as Bloodletting. The barber pole is red, blue and white to represent blood, vain and bandages.

Barber's Pole
Barber’s Pole
Vintage Barber Chairs
Vintage Barber Chairs

 

 Tools for Bloodletting:

The Lancet
The Fleam

Most commonly used on animals but fleams with smaller blades were used on humans too. I might put these in the interior of the barbershop but I wouldn’t use these as the main bloodletting tool in the game. I’m looking for something of more elegant and/or elaborate design.

The Lancet
The Lancet

Apparently the lancets that came in cases used to have dedications from other physicians or even patients who enjoyed being bleed. I’m considering using this for the main bloodletting tool in the game because I can add elaborate carvings to it’s design. I also prefer it aesthetically. I will most likely have a dedication carved into it because I really like that small detail from history. It would make for a good Easter egg for my game.

The Spring Lancet
The Spring Lancet

Developed in the 18th century it was the more comfortable tool used on humans. It was made out of brass and the blade was made out of steel. I like how it looks aesthetically but I still prefer the regular lancet because it looks a bit more brutal. I might have it used by a side character in the game however. I do want it present in one way or another.

The Scarificator
The Scarificator

Popularized in the 18th and 19th century Europe the case was made out of bras and the blade out of steel same as the spring lancet. The depth could be adjusted on the top and release switch was positioned on the side which allowed the blades to make multiple cuts at the same time. Round shaped Scarificators were French. I like the aesthetic of these and will most probably include them in my designs but with more carvings on the case.

Cupping
Cupping

The glass would be heated up to extract the blood. There are a few different techniques of cupping but I don’t need to research these in depth for this project. I will most likely include a design of a cupping kit.

Leeches
Leeches

I will most likely include a vessel with leeches in it but not as a main design.

Bleeding Bowl
Bleeding Bowl

These were usually made out of tin or pewter and rarely out of silver. I will definitely include these in my designs.

Bibliography

http://www.huffingtonpost.co.uk/dr-lindsey-fitzharris/the-bloody-history-behind-barbers-pole_b_3537716.html

http://www.history.com/news/ask-history/why-are-barber-poles-red-white-and-blue

http://www.history.com/news/a-brief-history-of-bloodletting

http://www.history.com/news/history-lists/7-unusual-ancient-medical-techniques

http://www.medicalantiques.com/medical/Scarifications_and_Bleeder_Medical_Antiques.htm

http://www.rauantiques.com/library/scientific%20antiques/collecting-medical-antiques-COLLECTINGMEDICALANTIQUESLIB.html