Tone+Manner Multi-Page Layout
InDesign and Four design principles exploration
Tone + Manner Bio
I've been interested in art and design for as long as I can remember. I began my artistic journey like any other, with a pack of crayons and limitless blank paper at my disposal. I tried various medias, eventually branching into watercolor, charcoal, oil pastel, pen, and acrylic. Though I developed quite the affinity for the fine arts, I decided to enroll in Yearbook my senior year of high school, and it was here where I discovered I had a knack for graphic design. As someone who is strives for perfectionism in any piece I create, the clean and sharp lines of digital design meshed faultlessly with my creative process.
Alongside my natural fondness for the arts, one of my biggest inspirations has been my aunt, a wonderful person and designer who headed the graphic design department at LACMA pre-recession. Seeing the countless museum exhibitions she produced emboldened me not only to continue pursuing art as a hobby, but to also explore a plethora of artistic styles, as museum exhibitions are not limited to any culture, society, or art movement. I learned in order to design beautiful things, I have to be adaptive, taking into careful consideration the context that surrounds the subject I am designing. While I would say I design more practically than abstractly, I enjoy both making and viewing art that brings about a certain nostalgia, regardless of its style, because it evokes a particular emotive response. Art that evokes that nostalgia is typically comprised of bright, vibrant colors, a variation of shades and opacities, and special attention to detail. Everything I appreciate about art makes up my own perspective, all the more reason I should continue to experiment in the future.
Multi-page layout reflection
A light green, a dark brown, and an off-white were the colors that jumpstarted my design, with inspiration taken from nature (the lemon and the crop field). Since I enjoy designing with clear, defined lines, I decided to incorporate architectural images to ground my layout's aesthetic. With this in mind, I designed my compositions to accomplish each design principle (hopefully haha).
To create contrast, I juxtaposed the light green with the dark brown in the head on every page (excluding the cover), and I put my photos in grayscale in order to preserve the hierarchy of the heads. I also chose to use architectural images to contrast both the natural colors of green and brown and the organic tone of the folded paper textures. To create repetition, I continued my head and colors on every page, thus connecting each page and its unique composition while staying true to my architectural theme. I also placed my subhead and page numbers on the top right of every page. To create alignment, I made sure to follow a grid on every layout and kept all text within the margins, aligning each text box with a strong vertical line. And finally, to accomplish proximity, I grouped information based on relevance: i.e. on page 3, I separated my tone and manner keywords and kept them tightly knit within their respective categories. Overall, I'm really happy with how it turned out; I had a lot of fun!
Discover the Logo in Your Name
Illustrator | Brand Sketch, Vector Art and Color Studies
Sketch Development
The process for selecting my final sketch was one of identifying a simple, yet identifiable logo. I think that the lowercase "bh" in sketch #21 is a more appropriate brand choice as opposed to the similarly sketched uppercase "BH" in sketch #18 because lowercase letters do not convey the same seriousness as uppercase letters. I also chose this sketch over the other lowercase sketch in #12 because, although both are simple, and I like simple designs, the letters in sketch #12 are not connected in a way that feels complete or brand-worth; however, I may experiment with that design by rearranging the characters inside. I may also try to experiment with the letters in sketch #15, because I like the shape they create when conjoined, but I am still in favor of lowercase letters, so it's up in the air.
In the sketch I have selected, I not only enjoy its simplicity, but also the forms it creates with negative space. I will definitely see if I can place these letters in different shapes or attach them to interesting dingbats, but for now, I am content with the general layout and the Avenir Black font.
Vector Art Development
I had a really fun time experimenting with ten different designs. My vector art studies comprise my initials scrunched together and various omissions, outlines, and extensions of select letterforms. I decided to stick with the design I chose in my previous post on sketches, because the simplicity and boldness of the Avenir font really speak to my personal aesthetic. I am honestly not sure if I will include the line separating the black box from the "h" in my final design, because the "h" can appear to be an "n" in some cases; however, I will explore this more when I do my color studies.
My favorites are probably my studies in the bottom row because I experimented more with shade and letterform alteration than in the top row. I like the outline of the "b" in the 7th artboard because it does not overpower the "h" as it may in other vector art designs. I also like the designs of artboards 5 and 6 because the "h" is more pronounced. With the color section of this project fast approaching, I feel like I can further experiment with the "b" and "h" letterforms and define their relationship to each other more clearly.
Color Study Development
For this assignment, I stuck with mostly cool colors and added some bright reds and pinks here and there. The top row comprises my simple designs, and in the bottom row, I experimented with gradient and texture. I really enjoyed using color this time around. In my grayscale studies, there was not much I could do to alter the shape of my logo because it is comprised of very simple forms; using color allowed me to fully explore my design.
I don't have a favorite as of now, but the longer I sit with it, I'll probably lean toward a few select designs. One of the boldest designs, and possibly most successful, is color study 4: the bright (two of three) triad colors bring the simple design to life. Another simple, yet successful design is color study 1. The varying stroke weights of the horizontal lines make it more dynamic than its plain-colored counterparts. I also really like my last two designs, just because it was really fun selecting and placing the colors to form a polychrome gradient layout. Overall, I am happy with how my logo turned out. I learned a lot about the process of color implementation and how much thought you must put into designing even the simplest of logos.
Responsive Web Banners
Photoshop | Mobile, Tablet, Desktop Web Banners
Banner Sketches Idea 01
For my first idea, I wanted to make the "bh" the most important thing on the page, so I drastically enlarged it in each layout. This is the most simplistic of the sketches, because the "bh" takes up most of the space. Thus, I will use a gradient effect on my logo to draw attention to the simple, yet bold logo design. The background will probably remain white; however, I may implement a neutral, muted color to see what fits best with the gradient.
Banner Sketches Idea 02
For my second idea, I am keeping my logo in grayscale, and instead I will draw attention to the background through fragments of color. I may implement gradients into the background so long as they do not distract from the text. In these sketches, I want the headline to be the most important piece of information, thus the logo serves as an attachment to the headline rather than its own design as in sketch 1.
Banner Sketches Idea 03
In my last sketches, I attached the "bh" to the very top margin so my layout has a top-down flow. I think the vertical layout is not only easy to read, but is also visually pleasing, especially when paired with the desktop version; the vertical of the information balances out the strong horizontal of the banner. I decided to implement a blur on my background (which will either be a blurred photo of architecture, as in my Tone+Manner layout, or a blurred gradient) to create a contrast between the sharp geometry of the text and the softness of the blurred photo/gradient.
Mobile Banner Comp
For my mobile banner, I decided to align everything to the left, because centering a lot of information on a small screen can negatively impact readability. Alongside with keeping consistent alignment of information, I enlarged both my logo and headline drastically in comparison to any other piece of information on the banner, as they are the two most important aspects. I exported this file as a PNG to preserve the quality of the blurred gradient.
Tablet Banner Comp
For my tablet banner, I kept everything in a similar format as my mobile banner, because, while there is more room to center information on the page, tablet function, shape, and size is much more similar to smartphones screens than desktop monitors. I made sure to spread the information out within the margins of the layout more so than my mobile banner because tablets are physically larger than smartphones. I exported this file as a PNG to preserve quality for a larger screen.
Desktop Banner Comp
For my desktop banner, I decided to center everything on the page to accommodate for the horizontal flow of the layout. I stacked the most important information vertically, as with my previous two layouts, but I moved the small text over to the upper left corner instead of directly right of my logo so as to not draw attention away from the strong central layout. I also exported this as a PNG to preserve quality.
Exercise Overview
I wanted there to be a common theme in my headline, so I came up with the idea of the "three d's": drive, direction, and design. Because my banner advertises my hypothetical graphic design freelance services, the central focus should be around design. Thus, I concluded the three word headline with "design," placing a period after each word in order to prompt the idea that each should be read separately and thoughtfully, yet together, hence the three d's. Moreover, via the correspondent "d's," I enforced repetition and consequently continuity. I placed my headline directly underneath my logo in all three layouts not only because my brand and my slogan are the two most important pieces of information on the page, but also because I wanted to foster a relationship between them: when viewers see my logo, they will associate it with my slogan, and thus my brand is born; the image now has words to describe it. The image (my initials, and by that logic, me) promotes my personal brand, and the text (my slogan) fortifies the idea that I am a designer via the image-text relationship.
My call to action was inspired by my headline; it is not a call to action in the way that it prompts viewers to take an intended action, but in the way that it reinforces the significance of my headline. It is a tactic to inform potential customers that my business intends to promote their ideas through my designs that are made for them.
My most successful banner is my desktop banner due to its clear, centered format; however, my mobile banner is a close second. All of my designs have a blurred gradient background of the same colors and white text, but my desktop banner triumphs because the information is the most readable of the three, and, in doing so, looks the most aesthetically pleasing. My logo is front and center, while my attached slogan contributes to its importance. Moreover, the desktop layout itself allowed me to move my slogan all on one line instead of three, and thus the words flow as one slogan rather than a divided slogan.
The next time I try this, I might implement a blurred photo rather than a gradient in the background, and I may experiment more with text color and size. I also may color my logo instead of keeping it white; however, with my blurred gradient background and the colors being so bright and bold, the only option to bring the information to the forefront of the design was to make it white. The sharp and simple geometry of the Avenir bold font also assists the legibility and creates contrast between the soft, blurred background. Overall, this project was very enjoyable, and should I try it again, I will experiment with more than just color and gradient.
Cinemagraph
Photoshop | Sequential Image Animation
Idea 01 | Blowing Bubbles/Dandelion
For my first idea, I want to explore a cinemagraph concept that involves bubble/dandelion blowing. I would film close-up shot of someone blowing on the wand/dandelion while everything else is still. I think it would be interesting to see a seamless, looped gif that conceptualizes (invisible) airflow, because the emphasis is placed on the object itself rather than the person blowing it.
Idea 02 | Lens Reflection
For my second idea, I want to explore a cinemagraph that depicts a dynamic reflection on a close up shot of someone wearing glasses. The person and the glasses would be entirely still, but the reflection would show many moving parts, e.g. a busy road or birds flying through the sky.
Idea 03 | Hypnosis
For my last idea, I want to explore the concept of hypnosis in a really cliche way: a pocket watch swinging back and forth. I think it would fun to show a scene where an unidentified person is holding a swinging pocket watch, while everything in the background is still, including the person.
Final Idea Storyboard | Hypnosis
My concept for this cinemagraph is pretty simple: a pocket watch swings back and forth while the person holding the watch remains completely still. I hope to add some other element of motion in the background, most likely a shadow, so that there is more than just one element in motion. As such, I will shoot the video in a sunlit area. The only challenge as of this point is figuring out how to use the timeline on Photoshop; however, the demo videos are very helpful and detailed, so they will aid my process greatly.
