A Star Is Born — Barbara Stanwyck
Inspired by the upcoming film called “A Star Is Born,” I built a one page web application in tribute of Barbara Stanwyck. The film is a remake of the original 1937 with the same name. It follows a fading actor who helps discover and launch an aspiring Hollywood actress’ career. How Barbara Stanwyck ties into the film is that her story to stardom and marriage to Frank Fay may have been the inspiration to the original film. The characters and their actions mirrored those of the turbulent relationship between the couple.
I was enamored by Barbara’s emotional intensity and depth of character in each role she played. From the tough talking but vulnerable mother in Stella Dallas to the funny, slapstick comedienne in Ball of Fire. Ball of Fire was my very first introduction to Barbara’s films when I discovered it on Turner Classic Movies (TCM) back in high school. I was hooked then. I hunted down as many of her films as I could then. I discovered her Pre-code era work like BabyFace, Night Nurse, and Ladies of Leisure. The Pre-code era looked like it was a great time to be an actress. Femininity and feminism was explored and heavily storied on screen and possibly off screen. Unfortunately the restrictive Hays Code changed all that. It pushed women and their characters on screen back to the puritanical times where women had to be happy, fulfilling their duties as mother and wife.
I speak of that era along with stories I learned about Barbara’s early and later life in my tribute site. It’s heavily text centric with some images I found online. Building the app with React was fairly simple. For those of you following my blog, you may already know that I like React and plan to use it as much as I could. Before building the app, I built out the UX and visual design via Adobe InDesign. Here’s my process:
UX DESIGN
Branding
I searched a great deal online to find the best information and images I could to reflect Barbara and her work. Although this was another project, I didn’t treat it that way. In fact, I don’t do that on any project I work on. Like a scientist and researcher I go about jumping into the rabbit hole of questions in search of answers. I love this process. To learn about someone or something that leads me into another direction of even more bite-size stories excites me. Of course, I could get information overload, but I take it as a learning experience.
One of the stories I learned about Barbara that I included into the branding stage of my UX design was that she was taught to act and communicate with her eyes. She mentioned that as a theatre performer (as she originally was) communicated with their audiences through mannerisms. As an actress on screen, the eyes say it all. With that in mind I searched deep for captivating photos of Barbara and her as her character in various films. I was lucky to find the perfect photo for my header. You’re truly entranced by her eyes and no-nonsense attitude. Like her many characters, that’s what she was communicating, except as you learn more about her, the more you’ll understand and hopefully relate to her vulnerability and soft heart.
Typography choice was hard like it always is. There’s just too many awesome designs out there. Luckily I found one with an embellished trait. Festival Budaya XXXI is an interesting slab serif font where the letters Q, R, and S had unique curvatures to their anatomy. I thought it’ll be a great way to emphasize Barbara’s last name where the letter ‘S’ makes an elegant design point to what seems like a simple font. Other than the embellishments, I thought Festival Budaya XXXI had an early 20th century feeling. For the main text content I went with Iowan … I liked how the serif font still has a roundness to it making soft and classy, like Barbara. It reads like an vintage book font but still modern in a whimsical way when tied to Festival Budaya.
Color was simple, but I’m curious how I can challenge myself to possibly add any colors other than shades and tints of black. I thought back to one of Barbara’s quotes where she said she chose to study the movements of a panther when she was learning how to communicate with a camera. During this process, I found a beautiful black panther photo in black and white. Using Canva’s color palette generator, I applied the colors to the set. Given that most of the actress’ work were made prior to color, I felt designing the web app in any color will distract from the content and Barbara herself. She was a tough cookie with a take it or leave it kind of attitude, from what I’ve read about her. That’s what I intended to portray — classy, traditional, and straight forward with respect of course.
Wireframing & Prototyping
Web layout is tough, but really fun. Using Adobe XD helped in the process. I made about 4 different versions of the web app where I played with various fonts, images, galleries, and text layouts. It’s important to review your assets especially images/photos because those elements help draw a user’s visual gaze across a screen. I wanted to emulate what Barbara said about using your eyes to capture an audience. Using the proper and beautiful images will guide a user around the website, sometimes even serving as a breaking point like a period at the end of a sentence.
Since the tribute site were to be very text heavy, I coded the layout of each section with its own hero image. Below the section hero image I added a section title before the story content followed by quotes from Barbara and a few other testimonials highlighting her greatest qualities. Within the text content, I set up a gallery layout. With Adobe XD, it was really simple to layout the images the way I intended. When wireframing and prototyping, I have a tendency to envision the web page as an editorial piece. With CSS Grid, I thought the galleries would be awesome to set up. However, as I was coding my site, I noticed the second gallery would be a challenge when it comes to responsive design.
Things to improve
After I applied my design into code, I learned a few things that the wireframes and prototypes did not address.
- Typography: Resolve typography especially the headings. On my prototype, the font reads well. Though online, it has another look. The little details on the letters aren’t showing and has taken up a bolder style. The refinement has disappeared. I thought the font was websafe but that needs some investigation.
- Gallery: Given my schedule, I improvised a smaller gallery. I intend to give the second gallery another try. In the wireframe, the photo of Barbara’s film, Stella Dallas is front and center. It’s one of her top films and well acclaimed so I want to feature it boldly. Surrounding it are her other works from film and tv. This is the biggest challenge for my design.
- Responsiveness: I’ll have to resolve the font sizes. I have to use relative units such as
emorremfor my text content. Coming across units likevwandvhwas interesting. I like how fast and seamless it works for responsive design. I have to get familiar with viewport units fast.
These finer details will be incorporated soon enough. In the meantime, please visit my tribute page to Barbara Stanwyck. You can leave comments below if you have any feedback to give whether it be on the site or the content. Barbara was one mighty actress and an even mightier woman.
