This week, I showed some mockups of what visuals in the videos might look like. I came up with two color palates, the title screen, the set of fonts that I would use, and a special overlay to make the footage look like it was on a physical computer screen. Feedback was a lot more varied than last week, perhaps because visual design is a lot more subjective than an informative script. The two main points of contention were the color palates, and the screen overlay.

The Color Palates

I presented two possible color palates, one that was predominantly teal and one that was predominantly reddish-orange. I wanted to have two color palates that contrasted somewhat so that the video wouldn’t be completely monotonous, color-wise. A lot of people liked both color palates. The teal palate was slightly more popular than the reddish palate, but there were people who preferred the reddish one as well. I got one comment saying that the reddish palate looked stronger or harsher than the teal, while another comment said the red felt warm and comforting. I personally preferred the teal to the red, so it was kind of relieving to know that my opinion was shared by the majority. At the same time, I’m relieved that the red palate still had fans, and that it wasn’t considered completely ugly. Picking a color palate was difficult, and I was worried that my color-picking skills would not be enough. Given this feedback, I will use teal as the main color palate, showing the reddish one occasionally to break monotony or signify a change in tone in the video.

I also got a few comments asking about color-blindness. That intrigued me, since it shows that my project is leading people to think more about disabilities and design. I did some more research, and what I found was that using a high-contrast color palate (as described in the Accessibility Guidelines) actually fixes many issues for color-blind readers, because the contrast between foreground and background is enough to make designs readable. This relieved me, since I used a color contrast checker based on the Accessibility Guidelines to check my designs. That being said, my color palate typically had several dark colors on top of a light background (or vice versa), and color blind people might have trouble distinguishing colors of a similar luminosity. Fortunately, the Accessibility Guidelines also recommend not using color as the sole means of conveying information in charts and graphs, so as long as I also include either text or a pattern as well, I should be fine.

The “Screen” Overlay

I created an overlay in After Effects that mimics pixels on a screen, as though you are filming a computer screen with a camera close up. I did this to add something visually interesting to my videos, as opposed to just generic flat colors. The screen had mixed reactions – I got essentially a 50/50 split between positive comments and negative comments. The positive comments thought that the screen looked eye-catching, and that it made the visuals stand out, as opposed to the very academic-looking flat colors. One student even compared the appearance of text with the screen overlay to the way that text appears in the video game series Fallout. Another student remarked that the screen helped give the tutorials a “digital” aesthetic, which fit given the subject matter.

The negative comments found the screen either distracting or an eyesore. Some found small text (like HTML) difficult to read when placed under the screen overlay, in part because I added a “glow” effect that makes light emanate from around the text, making it appear slightly fuzzier. I also got a few comments saying that the screen was a good aesthetic choice, even if it made readability an issue. With this in mind, I will probably only use the “screen” overlay during segments where I talk about broad concepts that don’t require reading text or looking at intricate charts. I’m proud of it as an aesthetic choice, but I don’t want too much sensory overload during parts where I explain HTML. I also got one comment asking about how this overlay would look in different resolutions – since if bandwidth is low, videos would play at a lower resolution than the 1080p that I was showing people. I uploaded one of my mockups featuring the overlay to YouTube and tested it out, and I found that the overlay didn’t cause any weird artifacts when displayed at a lower resolution – which relieved me quite a bit.

On the whole, I’m glad I got a variety of opinions to think about. One of the themes of this tutorial series is that different people can process the same information differently, so it’s good to design with multiple perspectives in mind. I’ll definitely keep the varied perspectives I received this week in mind while creating these tutorials.