error404-bloggerstillsleepi-blog

[error404-bloggerstillsleepi-blog]

the final push

While the last month of college has been an all-around slog, working on this project was a productive bright spot in the past few weeks...and it wouldn’t be finals if I weren’t writing a blog post at 2:30 in the morning.

Responsive Web Design can be tricky at times, but on the whole I found to be a good balance of frustrating and rewarding, like a puzzle. When putting together my mockups in XD, I shuffled and resized portions until I felt I got the visual unity just right, and at that moment I remembered that I had to code these changes from mobile to desktop accordingly, and my head spun a little.

The process may have been long and not without holes, but I was more confident in my coding than in past projects. When I set a goal for myself to go from absolutely zero code to most of a website in four days, I knew I could do it. Sure, there are parts I’m not happy with, or that I wish functioned more smoothly, but this project was more of a test of will for me than a test of skill. Given the time, I know I could code a well-functioning site, and gaining that confidence this semester was far more valuable than proving whether or not I could go without sleep for a week and build something vaguely resembling a portfolio site.

One of the most surprising things I learned in this process was how crucial hand-drawn sketches were. When it became apparent I wasn’t getting as much work done as needed, I tried skipping sketches and going straight into XD mockups to save time. Instead, I sat paralyzed in front of a computer for hours, unable to focus myself because I had no visual to guide me. I learned quickly (or rather, relearned) that it pays off to do some slop sketches by hand (see Google Drive for style tiles, mockups, etc).

Reflecting on the semester, I feel confident and excited with the new skills I’ve learned. More than anything, this last project reminded me that starting something is the hardest part, and starting small and familiar is the best way to combat a task that seems all-consuming. In terms of my coding skills, I was never best-in-class, but I learned early--as my sketching professor would often remind me--I wasn’t really the most talented designer to begin with. My sites might be visually average, but no amount of talent or lackthereof can stop me from becoming a better and more efficient programmer. That’s an exciting prospect for me, and it gives me something to work towards in my post-grad life.

I hope to return to these projects like touchstones in the months and years to come. I want to challenge myself to reduce programming clutter, add more complex elements, and refine my skills in both visual design and front-end coding.

Until then, this is me signing off for a little while. Next adventure: getting a life and figuring out what my hobbies are. It’s been real, undergrad.

Peace,

Liv

[error404-bloggerstillsleepi-blog]

Process and Pop Culture

The Ed Sullivan Show is synonymous with international pop culture of the 20th century. Airing on CBS from 1948 to 1971, the Ed Sullivan Show brought historic musical acts and iconic comedians to millions of American viewers each week. The reputation of Sullivan and his show can hardly be understated, memorialized in the renaming of the theatre where he hosted for over two decades. The Ed Sullivan Theatre is as iconic as its namesake, previously home to the Late Show with David Letterman, and today the Late Show with Stephen Colbert. The theatre sees thousands of visitors a year, all of whom pass under its neon-clad signage bearing its name in a classic mid-century fontface called Brush Script. Associated with class and quality, Brush Script gained post-war popularity with advertisers and marketers; its conversion to a digital typeface in the 1990s only contributed to its popularity and widespread use.

Hoping to achieve a theatre marquee style, below are wireframe sketches outlining the design of the webpage:

Due to its nature as a script font, I entertained the idea of showcasing two letters so its handwritten connectivity could be displayed. 

Instead I opted for a single expressive letter. The lowercase “z” highlights the authentic brushstroke roots of the font, as evidenced by the sharp changes in direction at the corners and the smooth loop of the descender. To display the fluidity of adjacent letters, I replaced the standard character set (i.e. “a b c d e…”) with an homage to the theatre signage: the marquee that reads “Ed Sullivan Theatre – The Late Show with David Letterman.”

After departing from the traditional letterset, I kept the layout fairly straightforward in order to focus my energies on learning HTML and CSS. I chose a color palette inspired by the New York City signage and incorporated the gold neon lines into the design. The visual analysis was kept simple and free of text, while the written analysis is embedded in the font info paragraph. To unify shapes, I changed the button and photo into circles, matching them with the visual analysis. I also opted to use a more legible font for my essential text, leaving Brush Script for the nostalgic elements of the page.

Sources:

http://www.edsullivan.com/show-history/

https://www.biography.com/people/groups/the-ed-sullivan-show-guests

https://allthatsinteresting.com/the-ed-sullivan-show

https://www.biography.com/people/david-letterman-9380239

https://www.linotype.com/1090/brush-script.html

http://graphic-design.com/typography/design/script-brush-italic-freehand