PSYCHOLOGY OF
HORROR WEBSITE ARTICLE
WINTER 23
The project was an article redesign of choice, by coding using HTML and CSS. I chose to do “The Psychology Behind Why We Love or Hate Horror”, by Haiyang Yang and Kuangjie Zhang. It was published on the Harvard Business Review website, under the subsection Ascend.
DESKTOP
MOBILE
CHECK OUT THEIR ARTICLE HERE
HERE’S HOW I DID IT.
PROBLEM
The problem presented was that the article was published in a layout that didn’t capture the content that was provided. Even though the contents were spooky and interesting, the visual language of it was sterile and corporate.
SOLUTION
My approach to this problem was to incorporate the content provided and have it harmonize with the layout and visual language. I wanted to have horror-imagery, and to have the reader feel as if they are going through a horror experience as reading through the article. My strategy was to focus on the “showing”, and not the “telling”. The reader would first face a shocking and intense article name, and then get thrust into the darkness of the article. I also wanted to not use horror-movie photos, since it can be distracting and I viewed it as unnecessary.
My strategy statement is to give the reader an unique and horrific experience, with complimenting dark visuals.
PROCESS
I had a clear initial idea of what I wanted from the website. From the classes and research, I realized I wanted to try a black website with mainly white text. I wanted to also use large bold header texts, my own artwork, and photography that didn’t rely on gore to elicit a scary feeling. I also checked out some similar websites, ones that also were gothic and horror-based, and a moodboard. Then once I got a good grasp of what I wanted, I did a lo-fi wireframe, just laying out the flow of the website, such as where my images and potential divs would be.
I then decided on what images I would use. I chose several art pieces I have done, and then edited them in photoshop to be inverted. I also decided on photography, I used two lo-fi images of dark figures in black and white. I found a black and white eye gif that matched my idea for the first page, and a spooky jumpscare for the ending. Finally, I wanted to incorporate my favorite horror movie, Suspiria (2018), by including a matching red and black gif.
LOFI WIREFRAMES
TARGET AUDIENCE
My target audience is anyone who enjoys darker media, and are curious about the psychology of how people are divided among horror. I determined this through reading the content, and also how I felt when reading the article. I asked a few of my peers who also enjoy horror to go over my layout and approach, and it was well received.
MOODBOARD
RESEARCH
I own a horror-based tumblr, where I post horror edits pertaining to movies and manga. I checked it out, and looked at some other blogs where they post similar content. I took a lot of inspiration from the simple and minimalistic approach to the post outline, and the dark background with contrasting images and text. I also looked at the websites provided in the initial assignment of the project, with how they encouraged the reader to interact with the article. I also did a Pinterest mood board that inspired my approach to how I would edit my photos to match the tone of the site.
VISUAL DESIGN
The two design directions I explored relied on color and type. The first was the minimalist high contrast route which I took, using shocking red and white, with matching visuals and a sans-serif type. The second was a more traditional gothic route, using a more muted gray and brown palette, with gothic lettering.
CONCEPT EVOLUTION
I chose the concept I did because I thought it was the most interesting and harmonious with the content provided. The user goal was to learn about the science behind the scare, and to also feel as if the user was experiencing the same sensation when reading. My priorities were to amplify this feeling to the utmost case possible, while keeping the article aesthetically pleasing. The user flow emphasized spacing and pace in which the content was consumed. The slow, drawn out text makes it feel as if the reader is coming to a climax of a horror story, with the ending being a jumpscare.
HIGH-FI WIREFRAMES
I.
II.
III.
IV.
INITIAL SKULL
IMAGERY
I TRIED A FEW DIFFERENT GIFS, BUT ULTIMATELY FOUND IT TOO DISTRACTING.
FINAL SKULL
IMAGERY
SUPPORTING
PERSONAL ART
STOCK PHOTOGRAPHY USED
USABILITY TESTING
What I learned during testing was the importance of my pacing and slight visual elements that made a big impact. I wanted lots of padding and margin between each type block, and spaced out paragraphs. I also experimented a lot with my visuals. Once I scanned my drawings, I tried out a few different editing styles. For example, the skulls, I first tried making a gif that switched between the normal coloring to the inverted that was finalized. I didn’t quite like the look, so I tried from red to inverted.
Finally, I decided it was too distracting from the text itself, so I kept it a static inverted image. Another thing I learned was the importance of contrasting headers. I kept increasing the size of my headings to a point where it made the impact I wanted. I also received feedback on the addition of subheadings of the main points of each question the headings contained.
OUTCOME
The end result was a shocking article with high contrasting visuals. The landing page features a pen drawing I did of a centipede, with bold red heading text. Once the user scrolls a bit down, they are faced with an animation of the subheading, with a question I added to set the tone. Then, the user is thrust into complete darkness, minus a blinking eye. The user is forced to “feel around” in the darkness, until they find the text, and on hover it slowly appears. There is then the next page, featuring my large skulls with the main points of the subsection. Next, is another similar layout, but with a large drawing edited with a red overlay that is applied to the next image and landing image. Finally, there is the red final statement, and a jumpscare that pops up on hover.
For the mobile page, I stacked each item, and rearranged it to have first an image than text associated. I also set the opacity from the hover-only text to show fully, as well as other hoverable assets. I also omitted the jumpscare.
FINAL SITE
DESKTOP
MOBILE
CHALLENGES
The biggest challenge for me was to keep the site functionable and within my ability to code and use solely HTML and CSS as the effects. I had issues with spacing, and had to figure out how to reduce the spacing from desktop to mobile. I also had conflicting visual imagery in the beginning, and tried multiple variations until I felt it was all cohesive and didn’t interrupt user flow.
reflection
I learned a lot! I had some background in coding, but never built a full website from ground up. I also learned a lot from the switch to mobile, and how to make the site rearrange itself into a cohesive experience. I learned more about what makes a site successful and an enjoyable experience for the user. This wasn’t an image-based project, but I also learned a few photoshop tricks that I enjoyed figuring out.