In this last week, the class learned about HTML and CSS and used those lessons, as well as a structured tutorial, to build a website. I will use this post to explain what I wanted my webpage to look like, what I did to make it unique, and where I must improve.
First, it was my goal to create a web page that created an analogous color palette and highlighted my favorite projects, while also showing a few design skills that I learned that went past the tutorial. One of my largest challenges since starting college was to try to understand code. When I looked at the handout and the submission page and saw that were expected to add our own creative elements, my world stopped for a moment, and panic set in. Thus, I set out to follow the tutorials closely, but make minor changes as I went, and then add a personalized flair at the end, once the rest of my code was set in place. I chose a green, blue-green, and blue color scheme, and I then deepened or lightened the colors whenever needed. For our typography, I tried around 15 fonts before settling on Crimson Text for my serif font, and Fahkwang as my sans serif. I loved the simple, clean look of the Crimson Text, and the blue-green background against the deep navy type reminded me of nature and herbs. The sans serif had the wonderful contrast to the evenness of the serif font, and some of the lines that made up the letters were wider or thinner than others. I loved this look. The header was one of the most difficult pieces to create, as it kept being cut off when I added it as a background image. After spending a few hours tweaking the size, the rendering, and the color, I had to fight with my code to force it into the position I wanted and leave a large enough margin. I chose my photo because I have very few photos of myself, but I dislike this one, as I think that it looks a tad blurry on the page. Thankfully, the photo had hues that I could use for my color scheme though.
To make my site more unique, I made smaller changes while watching the tutorials and later added a list, an extra link, and color variations, and 3D header. Because I was not familiar with coding or using code to design, I tried to follow the tutorials and make minor adjustments as I felt more confident. The final stage was adjusting my aside and creating a bulleted list, smaller image, and multiple links. Because I wanted to practice using IDs, creating long links, and adding lists, I used the aside as an opportunity to make my site a bit different from our professor’s. Yet, I struggled to create an aside that looked aesthetically-pleasing, because the addition of the unordered list meant that my “sticky” text only allowed a certain number of words to be viewed; my list became trapped by the “sticky” type. I finally resized my image to fix the issue, but then I began wondering if the photo should align with the “About Me” sitting above it, and I wasted hours trying centered alignment, justified alignment, and changes in photo size. If I could change anything, I would likely find a way to use a larger photo while still having a longer aside and “sticky” type. In addition, in the future, I want to experiment more with the space. I think that my webpage is nice, but I wish that it looked more interesting, and less like our professor’s. My only defense to my lack of additional creativity was my fear of somehow ruining my code and having to start over.
For this post, I will explain the goals of my poster, explain how successful I feel I was in accomplishing said goal, and give an analysis of my process, determine which areas best displayed my skills, show what was most difficult, and look at where I must improve.
First, I should express the purpose of this poster, as my topic choice is very niche. I chose this topic because I am an advocate of wild horse management and a long-time equestrian. Right now, our president’s Fiscal Year 2026 (FY26) budget aims to not only remove the ban on American mustang slaughter but also decrease the Bureau of Land Management’s (BLM’s) budget by 25%, thus endangering the Wild Horse and Burro Program and the 64,000 wild horses and burros currently being held in captivity after having been captured from their ranges in the Herd Management Areas (HMAs). The budget will also make it easier to sell animals and remove their protected status. Finally, not only may the government “dispose of” the “excess” animals, but it also increases the probability of horses being shipped to Canada and Mexico–where they may be legally slaughtered for pet food or human consumption. Thus, this poster acts as an outlet to the frustration that I, and many other wild horse advocates, feel. My goal was to quickly and efficiently educate the public and welcome them to a public protest, where they may learn more about this issue. Even without reading the smaller text, the headline is a shock that should encourage civilians to do additional research. Because American wild horses/mustangs are generally considered national symbols of freedom and remnants of the American Wild West, I wanted to appeal not only to animal lovers (and draw attention using a horse silhouette), but also to those who care deeply about this nation (by using the flag). We usually associate America with Bald Eagles, but many also remember the wild horses running free in the West–the escaped horses of the Spanish settlers, the “mestengos”. Wild horses are in America’s DNA. My ultimate goal was to inform the public that a symbol of freedom and American history is now under attack, and we must fight back.
With respect to my design goals though, my hope was to create a dynamic, striking poster that was simple yet effective. I tend to overcomplicate everything, and I wanted to focus on a simple concept that still showed how much effort I put in. My goal was to use the rules of design correctly and make a layered, technically difficult illustration that quickly informed readers while pushing my new designing capabilities.
Next, I believe that I was fairly successful in my goals, and I will explain my reasoning behind my claim, as well as explain which aspect was the most difficult and why. First, I used many design techniques/rules in this class, implemented strategies written about in my last post, and remained loyal to the techniques/rules of design that we focused on this semester. Regarding techniques used, I began with a rough design that focused on the Wild Horse and Burro Program logo drawn inside a sight, with an arched headline wrapping around the sight, as well as a dark and light red-striped background and stars surrounding the sight. I moved on to craft another design mimicking James Montgomery Flagg’s “I WANT YOU”/Uncle Sam poster; the sketch had two colors offsetting the poster, navy/beige/red color scheme, sans serif font, and a simple background. However, the designs were all too busy and highlighted the American flag too much. I then tried using a photo of a flag with reduced opacity as my background, but this idea failed because the text was lost in the flag’s pattern. Thus, I improved from the last project and went through variations of my sketches, allowing myself the time to change elements; this choice (to redesign my poster multiple times) and the hours of placing, grouping, clipping, and altering the flag’s components were the most difficult parts. With the time, frustration, and inability to effectively use the flag making me feel like a bad designer, I often considered switching my topic. I moved forward though, intending to make a waving flag later in the process, and hence drew my horse’s body, mane, tail, and hooves with the pen tool and grouped them together; I created my sight by using the ellipse, rectangle, and pen tools. I then drew my flag using the star and rectangle tools and used my shape mode and pathfinder tools to merge my rectangles and join everything into a combined element. After days of figuring out how to incorporate the flag to invoke national pride and urgency towards my plight, I decided to make an opacity mask. I drew an additional ellipse, the same size as my sight and made a mask to use over my flag; once finished with reducing the flag’s opacity and setting my mustang outline in front of it, I set my sight in front of both elements. Before settling on using the mask, I also experimented with my warp, mesh, envelope distort, and lasso tools, as I initially wanted a perfect, waving flag. To further add to the illustrations, I used the texturizer to create a canvas fabric for the flag (with lighting coming from the top-left), and I added a canvas texture to my horse, complete with a small drop shadow to separate my silhouette from the flag (again with the light coming from the top left). Because I could not directly put the BLM’s Wild Horse and Burro Program logo (copyright issues), I made my horse’s silhouette a bit like its own little version of a logo/badge–hence the repeated use of a canvas texture rather than hair/hide. Notably, the textured background is an Adobe stock photo of mustangs, but the opacity is lowered, so a beige rectangle shows through and lessens the vivid colors. Colors were chosen using the Uncle Sam poster and US flag, but because I wanted RGB and CMYK color schemes to translate easily between web images and print design, I altered the colors and made them less vivid; the scheme used beige (background), blue (flag, stroke for the horse, background), and red (lettering, sight, flag). My horse was left white, to represent purity and the flag, while the red represented blood and the flag. The blue tied the flag, background, and horse elements together but had no significant meaning. For lettering, I used Kiln Serif, because although I did not want to use a serif font on my poster, I liked the “blood spatter” look of this font, as well as the “Wanted” poster aesthetic. I used Franklin Gothic Demi Condensed for my smaller type, as it resembled the typography from the Uncle Sam poster. The lettering hopefully also added visual echoes by using the same red hue used in the sight as some of the type. For this project, I also created hierarchy and visual flow, with the large illustration set just above the center of the poster to grab attention; viewers then look up to the smaller headline, and finally back through the illustration and to the bottom of the poster (with the smallest text and information/meeting time). To use the negative space in my textured background, I made the horses run through the blank space. I also think that I created interactions in my design by reducing opacity and setting elements within/below others. Notably, the circular glyphs are supposed to create an additional visual echo. To add dynamic alignment, I set the flag’s stripes at the same diagonal angle as the rearing horse’s back. For another design strategy, I used the golden ratio/section, as the grouped headline and illustration take up 62% of the used space. Finally, I do believe that I achieved my goal, because I used many design strategies and rules, while also spending hours ensuring color would translate better between mediums (which was my issue with the magazine project). Furthermore, I believe that I followed many (though not all) of Müller-Brockmann’sideas, as my poster is readable, shows simplicity of design, abides by the three-face maximum rule, adds emphasis with a limited color pallet, imparts information quickly, and maintains symmetrical balance (while using a diagonal composition within the illustrated element). I feel that I created a meaningful design while following design rules, and I have improved my skills since the last project.
Moreover, my design had strengths and weaknesses. I believe that the horse illustration showed how much I have improved with the pen tool, and the flag’s design and position in the layers indicates that I now understand how to use design techniques. I am very proud of my illustration, and I used some tricks and strategies that we learned in class. With grouping and editing, I made my flag similarly to how we made the frets of the guitar and used the pathfinder and shape modes. I used the opacity mask similarly to how we used a mask in the handout for the “beans” poster. Yet, I will say that the horse’s right hindquarter was incredibly difficult to draw. The animal in my reference photo was at an angle where the right hind leg was wider and straighter looking than the left one. I tried to fix the issue when I drew the animal with the pen tool, but I still think that the leg was a tad “wonky”, even after redrawing it multiple times. I do think that I captured the odd curvature of the leg though, where the femur, patella, and tibia meet. Of note, with respect to the lettering, I regret my choices. I made sure that my words were the same length as the sight’s diameter, but in doing so, my type was too small for a headline. I also regret trying to use typographic mass. I initially had the “Slaughter in sight” above the sight, with “for American mustangs” below. It looked better, but the text looked too straight when close to the round sight, and after also deciding that arched text would look too whimsical on such a serious poster, I tried using typographic mass and grouped the text. I think that this was implemented poorly, as the text is too small for my headline, and the lines of text are not even in their width. While I liked the design in the moment, looking back, it looks silly. In the future, I want to work more with typography and its mass and use lettering as an art element within the poster.
This post will explain my main goals, key design decisions, and an analysis of my creative process.
First, I wanted to create a magazine for young designers–a light, alternative, and nuanced set of stories that balanced history with design news and skill advancement/acquisition. Hence, I designed a cover with teasers that: offered a historical perspective of the London Tube map, the best design schools in the United Kingdom, and a review of color theory. This publication was, of course, for young people in the United Kingdom, but I did not want it to feel like a tabloid, which was quite difficult to avoid. The colors, typography, and photos all reflected a slightly “grungy” but still lively aesthetic that prioritized deep thought and critical thinking while holding Millennials’ and Generation Z’s attention. Simply put, this magazine was inspired by the news outlets and magazines that I use daily, but it also had to heavily incorporate and welcome (art) history and artists of all kinds, which are not the topics of most of my favorite sources. My favorite online magazines and news sources are: The New York Times, Forbes, Sentient Media, We Animals, The Guardian, National Geographic, and the BBC Science Focus Magazine; after reviewing their style choices, favorite fonts, and notable teasers, I adjusted my own cover to make it look more professional and show continuity and stylistic flow. I also looked online, specifically using image searches for classic publications like TIME, Vogue, and National Geographic for inspiration as well, both for my spreads and the cover. Thus, while I wanted to establish my own visual identity, I also used outside sources to help create a professional magazine, rather than something like a tabloid or otherwise weak presentation. I do believe that I achieved my goal to create a serious, yet aesthetically pleasing magazine, while focusing on history, design, and the youth.
Furthermore, I spent most of my time adjusting my typography, images, and colors. The most difficult part of this project was pairing images and colors, as well as establishing an identity with my fonts. Beginning with typography, I chose to use Broadway, Georgia Pro, and Avenir Next as my three font families, but I used P22 Underground for my headline. I chose Broadway after much contemplation. While Broadway was initially created in 1927 as an Art Deco typeface and usually reminds us of the 20s and 30s, to me, it invoked a feeling of older art forms–dance, music, and drama–that were “wild” for their time. It is a font family of history and innovation of art forms, which deeply resonated with the purposes of my own publication. In addition, I chose to use Georgia Pro, as I read that The New York Times used to use Times New Roman but switched to Georgia; I love The New York Times, and because Adobe InDesign comes with 20 stylistic variations of Georgia Pro, I decided to use Georgia Pro, as it looks a lot like Georgia and has a wide range of styles. Georgia Pro acted as my main Serif font, and I used it in my body text, deck, and author’s name, as well as in my teasers. I chose Avenir Next, as our professor used Avenir in one of our assignments, and I wanted to try it too! However, I only had access to font families such as Avenir Next and Avenir New World. I wanted a Sans Serif for my captions; I also used the Sans Serif in my sidebar and my ASF page, as well as on my cover. I needed a font family that was suitable for my captions but was readable (for the slightly longer paragraphs, like the short paragraph in my sidebar). Next, I used P22 Underground. This font has a story. P22 Underground was created by Paul Hunt in 1997 for the P22 Type Foundry and is an adapted and publicly available version of Johnson, designed by Edward Johnson in 1916 for the Underground Group. Thus, this font was used by the London Underground! I initially used a font family called Omnium, as it was rounded and reminded me of the long tube lights illuminating the insides of buses and along railway passages. However, once I found the font used by the London Underground, I knew that I had to use an adaptation of this font for my opening spread. Moving forward, I must describe my image choices. I chose the image of the London Eye for my cover, because I thought that I could use the “sandwich” effect with it, just as the class did with the Lil Bub cover. I also loved the colors in this cover, and I loved that the colors (blue and orange) were compliments on the color wheel. However, I experienced difficulties with the colors, as CMYK and RGB versions of the photo looked completely different. These issues will be addressed in the next section, but shortly put, my color scheme changed to include yellow-orange and blue-violet. Virtually every photo had to have at least one of these colors, once I made this choice. The image you see in my thumbnail has yellow-orange in it (I used the Eyedropper tool to pull this color from my cover); the text box is a tinted version of one of the two blue-violet colors that I pulled from my cover image (using the Color Theme Tool). Notably, I also used the Golden Ratio and had to crop my image to show the tracks running toward my body text! Thus, my photo took approximately 62% of the space, and it was cropped accordingly, while still abiding by the Rule of Thirds! I continued this pattern and applied the Golden Ratio to the Sidebar on the left side of my second spread and to the main image on the right side of my second spread. The main image (a train) also contained yellow-orange, and I had to swap out the image three times before finding the best one! Images of the maps and of Harry Beck were added to provide historical elements, as I wanted to add visual references within the story, though these elements did not abide by my color scheme (they were thus used as smaller images and did not have as much attention drawn to them). With respect to the sidebar (I chose Poster Parade), I used a tinted version of the one of my color swatches from my cover. I chose to use six images in my sidebar and displayed them chronologically. I did not use all eight posters in the sidebar, as I ran out of room, but I did choose to remove the two posters whose publication/creation dates were duplicates. The posters used also tended to have a blue-violet, blue, orange, or yellow-orange element in them. Lastly, my ASF page was designed to reflect an informative but playful aesthetic. The images were all given strokes from the cover’s color swatch (or using the Eyedropper tool), but I tinted the colors to turn them into pastels and add to the playful effect (I also rounded the edges of each box around the image and around the ASF itself to add to this effect). Thus, this process was long, but the complementary color scheme, three font family rule, and rule of thirds, were carried throughout the magazine, adding continuity of style and consistency of effect. As most of my issues revolved around color, this topic is addressed in the next section.
In this last text block, I will review my mistakes and issues. I had many. First, I struggled with color. The image that I chose for my cover looked very different in Photoshop, and when I added it in InDesign, it changed from an orange and blue color scheme to an orange-yellow and blue-violet scheme. I knew that I had to use the CMYK color model for print projects, but I wanted to preserve the blue and orange complementary color scheme seen in the RBG version of the image. My original plan involved crafting the cover in a separate file and importing the cover as a PNG. Then, I would import the cover without impacting the spreads, and ASF, which would both use CMYK color settings. The final version would use the RBG model for the cover (as a PNG) but still technically be using CMYK colors everywhere else, abiding by the printing rules. However, after doing more research as to how the CMYK and RBG models work, I realized that CMYK model is better for print projects and is a subtractive model, while RBG model uses additive light and needs a screen. Because I wanted to maintain consistency, I used the Transparency Blend Space to change the settings back–from RGB to CMYK. Because of this change, I spent Saturday altering my entire color scheme, swapping images out, and redesigning my headline for my opening spread. The issue came when I went back to Photoshop to create my thumbnail. The file using the CMYK model was dull and unimpressive as a thumbnail, so I used RBG color model settings, just as our video tutorial suggested. However, my project thumbnail looks different from the InDesign file and PDF. Because of this inconsistency, in the poster project, I plan to either use the RBG model (as we used this model when making thumbnails) or only use colors that are “CMYK-safe” (and are less affected by conversions between models). For the former option, I have read that the file should be saved as a transparent PNG for printing, as the printer uses RIP for CMYK color conversion. For the latter option, it seems that some colors are better preserved during conversion than others, as the available colors are more limited in CMYK than RGB color models. I have learned much. Because I am new to this type of project, I assumed that my only option was to use CMYK color settings to maintain consistency, but I now see that I just need to do a little bit more research, as the answer to my problems are not black and white, and I can alter my settings to fit my needs. I have a better plan to illustrate my poster now! Lastly, I learned so much from this project. I learned how tedious this process is. I learned that I must create a contingency plan. I learned that I must take the process in stride; as soon as Week Two began, I started working on the first project instead of waiting. Yet, I had not acquired a full skill set to tackle the project, so I had to redo a lot of my work later on, resulting in over 30 hours of work being needed. As I saw issues with typography, looked at other magazine spreads and covers, perused past students’ work, and designed my magazine’s first six pages, I found out that I needed to work more slowly. I had to work and revise, instead of race forward. I also learned that I needed to accept that a first draft might not be good enough. I became so attached to my work that I was hesitant to change the color scheme from orange and blue to yellow-orange and blue-violet and to move from the Omnium to P22 Underground font family. I was afraid to alter my work. In the next project, I intend to embrace the struggle, work fewer hours, and make rough drafts. I will embrace the tedious process of sketching and resketching, and I will look to work slowly, as the tutorials are given, instead of working too far ahead, before I am ready. I am so excited for the next project, as I become a better artist and designer!
