Category: Visual Design for Print & Screen

reflections

Here we are! I’m really happy with the end result of this assignment, and with the work this semester as a whole. After the group crit last week, these were my to-dos:

• Add animations for line exits (fade outs for Joan, slide down for Stan)
  • I added these but eventually felt like they were too distracting. It also diluted the tension of having the fades at some of the lines. In this case, it seemed like less was more, so I went back and left things as they were.
• Add emphasis on some of Joan’s words
  • For “I can’t wait,” I added a few yellow sparkles that fade in and out very quickly. They had to be individually animated, since I wanted a gradual effect, so it took a little time — but it was exactly what I envisioned. 
  • For the last line, I kept my plan to make “me” and “I never liked you” yellow. I had to separate the text boxes to achieve that, but it wasn’t too long of an adjustment. I played around with the fade out of this line, making “I never liked you” stick around a little longer, but wasn’t very happy with it, so I scrapped that.
• Make the Vietnam transition a little longer
  • Lots of minor tweaking here, changing the animation range on different elements to get the timing right. I also kept playing around with the speed graphs to get that “yanking” feeling when the line goes across the screen. I also removed the smoothing for the “Vietnam” animation, so it feels harsher. That made a big difference to me, even though it wasn’t something I’d noticed before. This transition was maybe the most important of the scene, so it was really important to get it right. 
• Add some visual for the “and they’re shooting at you” line
  • This was something I thought of literally as I was playing the video during the crit. It’s so obvious in hindsight! I thought of the bullets popping up to the rhythm of Joan’s words/syllables — drawing a parallel between the physical dangers of war and the psychological harm that her words can do to these men who are terrified of being drafted. I got very excited about this once I found some tutorials on how to morph one shape into another. I made two sets of vectors on Illustrator for the blood splatters, so I could have a slow dripping effect to draw out the tension of the line. 

It’s very exciting to complete this assignment and have some more confidence around After Effects. I was even able to use these skills on my other class project, which I would not have been able to do a month ago. In reflecting about the semester, I also think this class really helped me develop a better eye to both the big picture (thank you grids!) and to the little details. Being able to see other people’s work on a regular basis was also a great experience — being exposed to different techniques and styles always helps expand your own skill set. 

reflections

Nearly done with the assignment and the semester! This week, I watched some more After Effects tutorials and explored masking some more. My to-dos from last week were: 

1. Redo the treatment for Bill and Joey’s laughter
   •  I animated each “heh” separately, popping up and wiggling in the corners of Joan’s and Stan’s lines instead of having their own artboards. I think this helped make them more weasel-y — I’m very glad I found the wiggle preset before trying to create it manually. It did take a long time to both check exactly how many laughs were in each part, as well as time them properly. For some reason, I can’t see my waveform on AfterEffects (it just shows the word “Waveform”) — I searched around for a fix but nothing worked, so I just had to time it by ear. Lots of trial and error for this.
2. Place more emphasis on certain words 
   • I thought for Stan’s lines, I would add a thick yellow underline under the most important words (“that” and “illegal”). I explored masking effects to have the line coming in from the left, as if it’s being underlined in real time, and then sliding out the bottom. I also had ideas for how to emphasize Joan’s words, but didn’t have time to apply those, so they’re on my list for this week (more on that later).
3. Create a more evocative transition right before “Vietnam”
   • I drew a dotted line on Illustrator and exported into After Effects, also using masks to give the impression that the line is being drawn and that it’s dragging the new background into the frame. Despite how quick the transition is, it took the longest to figure out (mainly because I did it before the rest, so I was still learning how to manipulate masks). I had to redraw the line a few times to make sure it acted like I wanted — originally I had several loops, but I quickly realized this wouldn’t work very well with the masks.

For this next week, so far my to-dos are:

1. Add more emphasis for Joan’s words
   • I feel pretty satisfied with the emphasis in most of her lines so far — I think the strength of Joan’s lines are that she is being polite on surface while cutting deep. But I do want to add more emphasis on “I can’t wait” and on the last line (“dying for *me* because *I never liked you*”). For “I can’t wait,” I was thinking of some very quick “sparkly” effect because her tone is still very cute then. For the last line, I’m thinking of using the same yellow from Stan’s underlines, but as the fill color on the emphasized words. 
2. Add animations for line “exits”
   • I have very few of these so far, so I want to go back and have all lines animate out properly. Joan’s lines should fade out smoothly; for Stan’s, I’m thinking sliding down the bottom through a mask, just like the underlines I added this week. This will probably involve redoing the animations since I did them for the whole sentence as opposed to line by line.
3. Add credits! 

I imagine after class I might want to add more depending on comments and feedback too. Excited to see how everyone’s work is shaping up!

reflections

I’m feeling good about this project’s progress. This week I devoted some time to watching several After Effects tutorials linked in our class website, which was immensely helpful — some of the longer ones I admittedly didn’t finish, but Black Mixture’s tutorial in particular made everything click for me. 

My first step was to create the individual compositions for each piece of dialogue. This seems like an easy way to keep the timeline organized, and quickly jump from one composition to another to fix small things. In my past experiences with AE, this was a total mental block for me — I always thought a composition was like a file, but it’s much more like a layer or group. I set up the plain text into those compositions, using my exported Illustrator artboards to help me place everything correctly. I used solids for the backgrounds in each composition instead of the main timeline. 

Once it was all organized, my first attempt to animate was for my halftone pattern composition, instead of the text. I knew I wanted it to move continuously, so I created copies of the image at different vertical and horizontal orientations and set it to change flatly every 4 frames. It took a long time since it involved a lot of copying and pasting to reach the full length of the clip, but the result is exactly what I wanted — a bit like old film grain, moving randomly enough to not be distracting. I layered that on top of the entire main timeline as its own composition, set to 10% opacity. 

After that, I started tackling the text. For these first animatics, I’m using the preset text “animation in” effects: Joan’s lines are using “Fade Up Words” and Stan’s are “Straight In By Word.” Bill and Joey’s laughter is just using position keyframes, swiping across the screen entirely. I played around with the easing as well: Joan’s lines ease in and out at 100%, while Stan’s ease in at 65% and out at 100%; Bill and Joey’s laughter uses the speed graph with a higher speed at the beginning (I get tripped up over whether that means it’s easing in or out more). For Joan and Stan, I took advantage of character tracking to trick the “by word” effect to create more nuanced animations: in “pornographic,” I added a space between each syllable but set tracking to -300 so it doesn’t look like separate words, but the animation still pauses slightly. I also did the opposite, removing the space between “It’s a” and adding 300 tracking to make the words animate together. The timing is still not exactly where I want for some of the lines, so I may have to split up the text boxes even more.

I was able to do about half of the length of the clip in this first draft (linked below) — I wanted to make sure I got to the second laugh bit so that I could test out the slow fade in the background color. I think it worked very well, and I’m excited to see how it looks for the rest of the clip where it’s used even more heavily. I’m still considering whether I should have some more sudden “drops” in color at key moments in the dialogue — maybe it would help make it more dramatic, but I don’t want it to be too distracting either. Now that I’ve gotten the hang of AE, I’m definitely looking forward to trying different things out!

reflections

As someone who’s been both fascinated and mystified by motion design, I’m super excited to dive into this kinetic typography project. My past experiences with Adobe After Effects left me confused and frustrated, but especially as I’m watching the tutorials linked in our class site I feel ready to try it out again and hopefully conquer the beast. 

For my audio, I picked the Scorched Earth scene from Mad Men’s The Summer Man (Season 4, Episode 8). I cut the audio on Audition to keep it between our 30-60s range; starting with Joan’s heels clicking as she walks into the break room (about 0:11), and ending with her walking away (1:03). I tested out a few versions of the end cut, and eventually decided to cut out the short exchange between her and Peggy at the end, which I feel is more to set up the payoff at the end of the episode than it is relevant to this scene in particular. It also felt more impactful to me to end on “I never liked you” and let the full weight of the line settle. I’m very happy with the clip; it’s probably my favorite scene in Mad Men, which in turn is one of my favorite shows — I just love being able to use it in a project. 

My first step after transcribing the lines was to look at the type I’d use. Joan plays into the sultry trope, so I wanted to choose something curvy, and a little soft and sweet — I went with Merengue Script. I especially like how it has alternate characters with big swirly ends, which feel perfect for a sarcastic cuteness when combined with the harsh words she’s saying. To contrast with that, the men would be very standard and geometric; to show how they’re ganging up against Joan, I decided to use the same type family (Dunbar Low) and just different weights to denote the characters (Stan is Medium since he’s more dominant in the scene, while Bill and Joey are Extra Light). After that, I picked a color palette somewhat based on the colors of the scene — Joan should be a deep red based on her hair and lipstick, while the men are a more drab green based on Bill and Joey’s pants color. As I worked on the transitions later on, I added the deeper shades that will transition between the red and blue in the end. Because this is a show set in the 1960s, I wanted to keep a mid-century feel, which I think is more or less captured in the font and color choices.

I then set up my artboards with a 3×3 grid inside the video safe area. Again thinking about the contrast between Joan and the men, I decided her lines would be at a smaller size and left-aligned, while theirs would take up as much space as possible and be right-aligned. I also thought of how they would animate on the screen; so far I think Joan’s should just pop up one word (or sometimes syllable, for emphasis) at a time, denoted by the little dots underneath the words. Stan’s will gently fade-in from the left to show his slight drawl, while Bill and Joey’s laughter will slide very quickly from the right. My last touch was finding a distressed halftone texture, again to try to capture a mid-century feel; I think this will be a video layer on After Effects, shifting very slightly from moment to moment (not just artboard to artboard; it should move with every syllable/word, or along with background audio like typewriters and phone rings).

Below is a slideshow of the artboards so far, plus a PDF version of them.

reflections

Four weeks really flew by! It’s hard to believe we are done with this project. This week, I devoted my time to fine tuning the small details of my poster and spread, as well as recreating my website into one single artboard and adding the rest of the content to it.

The poster stayed mainly the same — the only change I made this week was simplifying the presentation times, but I think it had a big effect. There’s more consistency now, since the widths are more similar (having the 11AM – 12PM was driving me crazy, but stylistically it felt wrong to just take out the AM/PM). This was also helpful in the site design for the same reason.

For the article spread, I added half-columns but didn’t end up using them in the outer margins. I liked how wide they were, so I kept them that way (except for the header, so that the title could have more room in the inner margin). To avoid the issue with the quote’s inner margin, I moved it around the grid. I also changed the tracking in some spots where the spacing was off, with a special look to any widows and orphans. The first paragraph was especially tricky, so to fix it I added a drop caps which I really liked — I think it helps tie the headline and body text together some more.

The website took the most amount of time, since I still had content to add to my single-scroll page. To start off, I added margins (160px) and padding (20px) to my columns (now 115px), then adjusted my content to fit into the new grid. I left my Itinerary section mostly as it was; changing the presentation times like I mentioned before, which helped the consistency, and leaving them right-aligned, with the 20px padding providing the space between the columns. I simplified the Speakers section, imagining an auto-playing slideshow moving from speaker to speaker, with only one big image and short bio at a time. The bubbles underneath the bio should help indicate that it’s a slideshow, and allow the user to click into a different speaker (for this mockup, though, the interaction and content is missing). The FAQ is also pretty simple, with just three questions mocked up with lorem ipsum, though I envisioned the rest could go on past one screen length, like the Itinerary section. Since this is a single-page site, the menu buttons will scroll up and down the page to the appropriate sections; I prototyped these actions, and also added some slight hover animations to make it more interactive. The prototype also somewhat crudely shows how I envisioned the header “shrinking” as you scroll down; plus, it has the fixed header and footer across the scrolling locations, so it’s a lot more high-fidelity than the PDF is. 

Overall, I’m very happy with my final deliverables and progress over the course of these four weeks. While finalizing the poster, I took a look at each file I submitted each week — it was really cool to see the progression, from big changes to small tweaks as the weeks went on. It was a challenge to create such different products, with varying needs and constraints depending on the platform/media, while keeping the look and feel consistent. It was great to have four weeks to make it happen, with enough time to explore and play around.

Edited 4/7/2021: Updated PDFs to include overlays with the grid systems used.

reflections

This week I spent most of my time refining my drafts, both in small and big ways. Across the three deliverables, I came up with a more consistent image treatment — using a gradient map between my teal and beige to create a duotone effect, with the help of this Adobe tutorial. Before, I’d used Color Dodge and Screen/Multiply blending modes for each color layer, but the gradient map is a lot easier and creates a sleeker look without color distortion (it takes the darkest and lightest points of the image and maps them as teal and beige respectively, so the process happens all at once). 

For my poster, I’d gotten feedback regarding the line spacing in the body text, the kerning and chunking of the header text, and the color palette (trying to find ways to make it more cohesive, maybe by bringing the teal into the header text somehow). I tried to act on all of those points — I tweaked the spacing and weights of the body text, bolding the speakers’ names, which I think helps create more visual distinction between each presentation. I went back to my logo to justify it, reducing the kerning between the letters in “Invisible” and increasing both kerning and point size of the letters in “Designs.” This in particular seemed like a really small change, but once I actually saw it, the effect was a lot more noticeable than I’d expect. I also used a light version of the teal for the fine print text — I’m not 100% convinced it works better that way (and maybe I’m overthinking it!), but it was my best attempt at incorporating the teal. 

Since we didn’t devote much time last week to the article spreads, I didn’t make many edits to this one. I moved my caption around on the second spread and added another quote in order to break the text a little more and create some more movement. I played around with the body text settings too, making my font slightly bigger and playing around with different hyphenation settings. I did also try out left-alignment, but decided to stay on justified because I’m a fan of the strong lines it creates on both sides of the columns. I didn’t notice any particularly egregious “rivers” of space, probably thanks to the hyphenation settings, so I’m pretty satisfied with the look of it. Since this is a small-sized spread, I erred on the side of caution in terms of graphical elements; I didn’t want to add too much and make it busy or hard to follow. 

For the website, I tweaked my first screen (updating the logo and image as well as changing the body text size and alignment) and then made the two following ones. Since I’m imagining this as a single-page website, with each menu acting as an anchor link to headings, I wanted to keep the basic structure consistent. As the user scrolls from the “About” section towards “Itinerary,” the header will resize to take up less space, and the image will change. The “Speakers” section will show 4 speakers at a time, also changing the headshot collage as you scroll down. I think creating these screens really helped the website come to life, so I’m happy with how it’s turning out so far. 

reflections

I was very excited to see Pressing On listed under our assignments this week. I watched the documentary early in 2018, and looking back now I think it was really influential in igniting my interest in design. Seeing the passion in all of the film subjects, regardless of how long they’d been working with letterpresses and how much experience they’d had with the machines before starting out, was very inspiring. Just a few months after watching the film, I bought my first design books online and started getting into the field more seriously — so it was a joy to revisit it. I think this time around, the sense of history and legacy in each machine hit me even harder: it’s touching to see how seriously the subjects take each “printer rescue,” for example, since each machine is unique and will be lost forever — not just as an object, but as a technology — if thrown away.

With our Invisible Designs assignment, I went back to redraw my grids following the feedback I got. I used six-column and nine-row grids without margins or gutters as a way to experiment (except in my website draft; that one stayed twelve-column). I tried a lot harder to stick to it this time, and hopefully it shows! Understanding that the article spread could be worked on as a spread, with elements spanning more than the single page, was really helpful. Right now, that’s my favorite layout of the three. Another thing that really helped me was plotting the elements in black and white before moving onto color, although I did tweak some details after that. Below are my B&W grids and the color versions that followed:

In developing the look and feel some more, I tweaked my color palette to have a darker brown, which was useful for contrast against the cream background color. I also went back to re-do my earthy-edge elements all in the same scale — this time creating some long strips to be used in footers and image edges. Lastly, I decided on a two-toned teal and cream treatment for images, to add more visual cohesion throughout the pieces. They definitely feel more unified to me this time around, even if things like the palette and grids aren’t used exactly the same across the board. 

I’m excited to continue developing these pieces. I’m looking forward to working more on the website especially — I’d like to add some more elements below the fold, since I imagine this to be a single-page website, with the menu links auto-scrolling to different headings. I imagine the header and footer would stay fixed on the page, but the title would shrink to a single line so that the header can be thinner and not take up so much real estate on the screen. I also envisioned the teal image in the landing page to be a slideshow, featuring more pieces from different geographical areas. I think prototyping these animations, as well as any other hover or scrolling interactions, would be really exciting as a way to help the page come to life.

For reference, the artwork used in the poster and website is by Aboriginal artist Michelle Wilura Kickett. The images used in the article spread come straight from the original Print magazine article.

reflections

This multi-week assignment is so exciting to me. I love the process of developing a visual system, something consistent yet flexible, exciting but not overwhelming. The hypothetical symposium is an amazing way to frame this challenge, not only because its topics are so interesting and relevant, but also because it provides a great range of considerations and deliverables.

I took a bit of a winding road with it this week. The first thing I locked down were my fonts, New Kansas and Realist. I chose both based on their weight flexibility (within each font) and width contrast (between both fonts). I also liked that New Kansas has a Cooper Black look, but more modernized and even a bit quirky (love the detail on the “f”). After that, I looked at color palettes. I wanted some warm tones, which eventually led me towards an earthy palette — but I also wanted a contrast color, so I went with teal. While my full palette is six colors, I probably won’t use them all in each design, though I like having the options (and I noticed when drafting my deliverables that one color might look very close to another depending on where it’s used, like a small thin font). This is what my fonts look like within the color palette combinations — of course, the contrast between some of them is too low, so they may just be used for decorative elements:

At this point, I hadn’t exactly noticed that my palette was “earthy,” but I framed it that way because I think unconsciously it helped me get to my “big idea.” I got to this idea first by writing my tagline “Unearthing erased histories in graphic design.” I didn’t have a very specific reason to use “unearth” — I just liked the way it sound. But after a while I realized I could tie the whole thing together that way. I started playing around with making the title look as if it’s being dug up from the earth:

I got drawn to this because it made some very literal sense: by unearthing something, you’re making it visible. But I immediately also saw it as a call back to colonialism, hopefully in a more reclaimed way — the idea being that these designs are precious resources that the communities that create them have a right to. Maybe it also raises questions about cultures being sold like commodities through design, and who (if anyone) has a right to do that.

The last part was making my grids and drafts. This is my first time actively trying to make a grid — I think it’s very challenging to do that before you know what the content will look like on the page. For the poster and article spread, I created modular grids in a proportional way: first by setting my margins, then by dividing the inside between three columns, and then by making rows that were the same height as the columns were wide. For the website, it made way less sense to have rows, so I split it into 12 columns (160px each), and have just been trying to space out the elements with a proportional number (40px, or 80px, and so on). Here are my grid sketches:

I also did start the first drafts of these, maybe prematurely — I wanted to see how my “big idea” would look. Below are the PDFs for those drafts, where you can already see me breaking my own grids quite substantially:

reflections

While the constraints in this assignment were absolutely maddening, I did appreciate the challenge of conveying hierarchy with the bare minimum — using each tool individually before moving onto their combinations. 

Task 1: Leading felt to me like the most useful tool in individual terms — being able to chunk the information together really helps clarify the logic for me. I tried to spread out the information as much as possible vertically to add more whitespace and give the eye a breather. 

Task 2: With indentation, my instinct would be to mix alignments (having some information be right-aligned, for example). But since we had to keep a left alignment, I tried to limit the levels of indentations as much as possible. To me, having too many indents causes the eye to dart back and forth too much, confusing and straining the reader. So I kept one level for the program, and another (with double the spacing, to give some more breathing room) for the details.

Task 3: Without any ability to distance information (vertically or horizontally), I felt I needed to use bolding not just to highlight the most important information (titles), but also to help create boundaries. So I bolded the times to help differentiate between presentations — for example, seeing “Tristan Schultz” in one line and “02:00pm” right under it with the same style, my instinct was to group them together. I bolded the first sentence in the footer (“Registration is free”) for the same reason: to denote that the schedule section was over. 

Task 4: This seemed like the hardest challenge to me. Using color sparingly to denote importance while also trying to differentiate information by its category — without any help from other variables — was really tough. I tried a lot of different variations, but wasn’t really happy with any of them. I think this highlights how we shouldn’t use color alone to denote meaning. 

Task 5: Such a relief to both be able to use size and to combine it with something else. Out of the two-variable combos, I think this is the most useful one — size is the easiest way to quickly denote importance (to guide users’ attention), while space (through leading) is the easiest way to group elements together (to clarify details). 

Task 6: Similar to the first indentation task, I kept this at two levels — but now, being able to use leading, I could distance the schedule from the title and footer while keeping the original left alignment as intact as possible. 

Task 7: Being able to space things out fully solved the challenges I had with the first bolding task. I could now keep the times and footer unbolded, since there wouldn’t be as much confusion about where each group begins and ends.

Task 8: This one highlights the importance of spacing to me. With three variables but no way to distance them, it seems too busy even though I was very deliberate with what I did. I bolded the headers and titles first, then colored the titles only; then I felt like the details for each presentation/panel should connect to its title, so I bolded the times and colored the participants. I think the logic of it is sound enough, but the end result is a little disappointing given the amount of variables.

Tasks 9 & 10: Now we’re talking! With both of these, I tried to create contrast in size as much as possible to make a more visually captivating flyer. I didn’t really miss the indenting in Task 9 — I feel like I was able to do everything I really needed. But, given the opportunity to indent the subheading, I tucked it under the title and saved up some vertical space, which allowed me to make the title a lot bigger — I think it made this version more dynamic.

brand sheet

samples

reflections

Being satisfied with the long form of my logo from last week, I focused on making a short form that could be a more eye-catching and memorable symbol. One of the ideas that came from the in-class feedback I got was to use color to create a symbol that gets incorporated into the letterforms I already had. I pretty immediately realized that the top curves of the T and S could form an eyelid, and the exaggerated curve of the S could be a pupil. I really liked the idea of an eye as an obvious but fitting symbol to represent concepts like curiosity and attention, and also skills in visual design, research, or copyediting. I also liked the idea of using CMYK as my color palette as another nod to design — initially, I wanted the colors to be layered on top of each other with a Multiply blending effect to show the secondary colors, but this quickly became way too busy for a logo. Right after class was over, I started sketching different shapes for the eye (see those below) — but in the end, my very first sketch seemed clearest to me. For one, it was important that the gap between the T and the S be only one color, to improve the legibility of the “hidden B,” but this version also preserved the continuity of the curves best while staying as simple as possible. I did tweak the anchor points and handles many, many times, trying to get the smoothest curves possible — shoutout to the Simplify tool on Illustrator, which as I just found out during this process can be used in anchor point chunks, and not only for the entire shape. In the monochrome version, the spot color should be lighter than the letterforms so that they remain legible, and the yellow portion is removed to both highlight the “hidden B” more clearly, as well as emphasize the eye as a shape.  

For the brand sheet, I used the typeface in the long form of the logo. I felt strongly about including Portuguese diacritics in the placeholder text, so I made up a sentence (“She drinks tea with sugar and watches TV in the attic”) with a variety of accents in order to see how they’re set. The mockup samples took a long time, since I shot and edited the photos myself — this was the first time I made one from scratch as opposed to using a free template. I chose my substrates based on my career and hobbies, and also to showcase a variety of textures. A business card is an obvious choice since it’s such a useful object, so I made sure to do it in a glossy paper to stand out from the other substrates. My second choice was a Moleskine notebook, on behalf of my love for sketching and writing, but also as an opportunity to emboss the logo with a leathery look (with the strokes going deeper than the monochrome cutout, for higher contrast). Lastly, the cross stitch pattern on a hoop is a tribute to the hobby I’ve picked up in the last year, with a very unique threaded texture. I did have to physically stitch the pattern to make it convincing, but in the spirit of manipulating the photo digitally (plus to save on materials), I did it in a smaller section of fabric and in only one color, so that I’d have to place and color it on Photoshop. Despite how long these took, I did find the process really satisfying, and I learned a lot of techniques while playing around with the images. 

Overall, I’m really happy with this work, especially given the timeframe. I think the shape of the eye has a smoothness to it, with an attentive and confident gaze to it. There’s a femininity in the curve of the eyelash, but it’s balanced by the boldness and saturation of the colors, so it doesn’t become cloying or condescending. I feel like both the graphic logo and the sample mockups do a good job at capturing my personality and interests. With more time, I’d play around with the shape some more, since there’s always more adjustments that can be made to those pesky anchor points and handles.