Due: February 18 (two days before class)
Please add your response as a comment below. You can review guidelines for the responses here.
Due: February 18 (two days before class)
Please add your response as a comment below. You can review guidelines for the responses here.
When I imagine modular design, my brain is programmed to think of Instagram. The home of constraining an image into a limited space. Grids are the main way of showing off your pictures on Instagram. Cullen says that “the grid must be flexible enough to accommodate changing content while maintaining the ability to be understood and easily adapted by several designers.” (66) Even though Instagram’s profile feed never changes the size or number of squares you have, it still serves as a space that, as Cullen says, accommodates changing content. Many users try and develop an “aesthetic” so that their images flow throughout the modular constraints. Many use filters to make their photos look similar in color and brightness. However, there are others who go above and beyond to push the boundaries of Instagram with their creativity.
One designer I found on Instagram via Pinterest uses her modular grids on Instagram so well that it doesn’t even look as though there is a built in grid from the platform. @simplywhytedesign designs each image so that it looks like her entire Instagram is just one flowing canvas. However, if you were to take each image and look at it on their own, they can strongly stand alone. This is a fantastic example of utilizing modular grids with organization and intentional overlaps.
https://d1n63063rjadkx.cloudfront.net/wp-content/uploads/2017/02/instagram-grid-layout-preview-app-28.jpg
While a successful design may come across as simple and intuitive, a successful design must be extremely well planned and thought-out. Cullen states that “the designer has complete control” of the visual elements and the voices that come across (p. 54). It may seem counterintuitive, but the most simple and effective designs are usually the designs that are most well thought out.
Chapter five discusses the importance of grids and the way in which their use will enhance your design (ex: control organization, balance, direction, etc.). I found the examples within the chapter to be extremely well done and also an inspiration for future projects. The visual balance was also helpful in the way of inspiring future designs. I was able to learn more about the distribution of content, something I was not too well versed in prior to this chapter.
Chapter six covered the topic of creating a visual hierarchy within an effective design. The chapter highlights the importance of every single element included within a design. After reading this chapter, I would argue that the hierarchy of a design I one of the most important elements of the design.
I have attached designs that I believe exemplify the concepts discussed in chapters five and six:
https://i.pinimg.com/564x/8a/d0/ab/8ad0ab39380083791b62c190e26b905f.jpg?b=t
https://cdn-images-1.medium.com/max/1600/0*6NZ7eyswz6kHMq92.jpg
Both chapters 5 and 6 examine visual elements and their role in design, and also the role of the designer in utilizing these elements. Specifically when Cullen states, “Visual elements are mutually dependent on their relationship to each other to communicate comprehensive messages” (55). One element that Cullen explains in chapter 5 is grids and the control that they give the designer in creating rhythm and movement in design. A portion of the chapter that stood out to me was when Cullen discussed how a designer can intelligibility break grids when it is appropriate and can be used to their full potential when they are not seen as restrictive.
Next, in chapter 6, Cullen discusses the importance of hierarchy in design and how “revealing messages through an integrated hierarchy is an effective approach to organizing content and enhancing the value of the design” (76). Going into the second project, I hope to become more educated and informed on these concepts in order to effectively portray the message of my poster. Also, the section on typography and shapes stood out to me because my past and current designs use many different linear elements and text to convey the message of the article.
Below are two pieces that I felt correlated with these chapters:
https://i.pinimg.com/564x/d4/92/93/d49293cfbc4b42d0efc5d12fe76e57c2.jpg?b=t
https://i.pinimg.com/564x/28/87/aa/2887aab6811b71dc88ea29c5bd70d2eb.jpg?b=t
When creating a design, Cullen states that the elements are not randomly placed, they are arranged strategically to purposely interact but not conflict with each other (p.54). When you look at a poster or a piece of art, designers use a grid to create a strategically set up path for eye movement to make it look as appealing, eye-catching, and good looking as possible. There’s no specific universal formula for how to use a grid; they act as guidelines and bases artists use to place elements and spacing in the piece. The first poster uses 3 rows and 2 columns to organize the text of the poster. The left column is slightly larger, and the design of the background makes the poster stimulating and eye-catching and not simple. However, the text and titles are organized into boxes, the colors of the design are few and not vibrant, and the text is san serif and simple, creating an overall harmony in the organization. The text is bold and uses hierarchical development to organize the information, even though it’s not a standard big title at the top with the information below (p.82-89).
Even the more complex posters with curved shapes still use grids. In the second poster, the curved lines follow the parallel and perpendicular lines of the grid and create dynamic proportions. They hit certain key points to keep things symmetrical and organized, while still having the flexibility to move throughout all the space. The colorful, geometrical rings in the circle stand out from the negative background space, and the colors all have the same value. The information is organized into a single column on the right side and uses a visual hierarchy with the size of the fonts to organize the importance of information.
poster source: https://weandthecolor.com/graphic-poster-design-by-hellopanos/16335
Cullen discusses the importance of visual elements and how their balance within design help make a difference in how it’s interpreted. These visual elements have something in common: they exist for the viewer to interpret. Elements used in the design and the design’s overall hierarchical development are used to guide the viewer through what they’re seeing. Visual elements create focal points and allow for the analysis of the design. How the viewer interprets a design depends on how a specific design is set out. Making the creative choice to put an element in front of another or having many layers within the design affect the way someone understands what you’re creative direction is. Something in the front is looked upon to be more important than a visual element that’s more hidden in the background; all of this is up to the designer.
Designs that incorporate grids and or symmetry are more likely to be pleasing to the eye and directly correlate with spacing and scale, two other important parts of design. The relationship between how big something is in and where its placed in accordance with other visual elements help create contrast within a design. Color is also another element that contributes to the process of the viewer’s interpretation of design. Designs with complementary colors evoke a different feeling than ones with analogous colors. The goal of any design is finding a way to make all the visual elements into one cohesive design that relies the message you’re trying to communicate.
https://static.page-online.de/wp-content/uploads/2018/08/29093700/erscheinungsbild-wiesbaden-biennale-zeitung3.jpeg
https://i.pinimg.com/564x/fc/c4/92/fcc492cfbbc1fd8f2c2face3e597b292.jpg?b=t
Chapters 5 and 6 of the Layout Workbook were both focused on visual organization. Words like control, rhythm, and balance are thrown around throughout the pages of chapter 5… understanding the importance of grid development, space, and scale. We learn that there are a variety of symmetry options, but almost all work with the rule of thirds. The nine parts of the rule of thirds form rectangles approximately similar to the divine proportion. A well-conceived grid and proportion system needs to be a flexible mechanism of organization that drives the information hierarchy and fosters the structural integration of type, image, and graphic elements. I now understand that a grid viewed as restrictive will never be used as well as one that is placed freely with room for adjustments. Creating dynamic relationships while occasionally breaking these divisions will make the most utilizing layout.
In Chapter 6 Cullen writes about a blank page and how for a designer this blank page is everything; how this empty canvas will turn into something with meaning. With a visual hierarchy comes color, form, image, space, and typography and none of these are less significant than one another. What I am most drawn to currently is the idea or orientation, alignment, and position. For project two my posters will be word focused. Meaning the text will be the most important part of the image and what I want to know is how to properly use space in regards to text. A tip Cullens gave that helped me was “If all the elements are horizontally oriented, a strong vertical element”. This really inspired my designs for this week and how to layout my posters.
Below are two examples that highlight the tip that inspired me.
https://imgur.com/a/0kJwFGd
https://imgur.com/a/qi0epjk
This week’s reading from Cullen focuses on the underlying framework / organization of design and how all of the elements within a design can work together in order to create visual hierarchy. This is essential because, as we have learned from past readings, visuals (like posters and infographics) must condense various elements into one surface in order to communicate a central idea with the viewer. In order to organize this information, grids are a helpful tool that we, as designers, can use. It’s important to note that grids are not meant to be restrictive – “grids enable the designer to maintain control, create visual connections, and unify the design” (53). However, when using the grid, the designer may break it in order to create diverse and unique layouts. As noted by Cullen, breaking the grid too much can have negative results, such as the creation of clutter. However, when you skillfully and intentionally break the grid, you can “divide the space proportionally…resulting in dynamic symmetry” (68).
For my visual example, I pulled this photo from Pinterest of a new blog template called “Noa Olivia.” I love print and magazines; however, I also love seeing how designers and bloggers create website templates, especially those that are crafted with a more unique and creative eye. I think that this template especially draws on the idea of breaking the grid. It remains uniform in its typographic and palette choices. The simplicity and utilization of white space also unifies the template. However, these minimalistic choices enable the designer to play with the design of the grid and the overall composition of its elements. Through layering and overlapping of elements, this layout takes on a less traditional layout when it comes to the composition of the grid.
For more on the image I found below… (https://theroar.nl/noa-olivia)
https://i.imgur.com/W7Se00X.jpg
This weeks reading about structure and organization and the interaction of visual elements are extremely important to the design process, and at least for me a part of it that take up a majority of the time. While we think of a million different ideas in our heads, we have to structure and organize them in order to create something that is more simplistic that can be interpreted most easily. Cullen discusses how grids and margins aid in this process and mentions that “grids do not dictate the design or its outcome. They work with, rather than against the intentions of the designer (55). I think this is a really good point, especially for young designers such as myself, because when I see grids I immediately think that I am restricting myself, when it actually helps with organization.
In chapter 6, Cullen talks a lot about hierarchy and how design components such as space, scale, orientation, alignment, typography and position help to dictate the hierarchy of the design.
I think the image I chose for this weeks reading reflects both chapter 5 and 6. I think that the use of grids and margins helps to draw the eye, while helping the design have structure. Cullen says in chapter 6 that, “space provides visual contrast and contribute to an effective ordering system. The empty compositional space brings the visual elements alive; it is the invisible energy of the design and must be considered a dominant element” (80). I think that in this case, the design of this represents space to their advantage and really brings the composition of brochures alive.
https://i-h2.pinimg.com/564x/70/5e/45/705e4517ebed82023b377493caff348d.jpg
Chapters 5 discuss the importance of grids and creating a and how they intensify your design. People understand and interpret design in many different ways. We learn that there are a lot of different symmetry options. Most of these options are within the rule of thirds. Chapter 6 discusses the importance of visual elements and the organization of design and how all of the elements work together and create a visual hierarchy. To me, It seems like visual hierarchy is the most important part of a design.
I chose these two photographs because I think they symbolize what was talked about in chapters 5 & 6.
http://www.thejealouscurator.com/blog/2014/04/01/anthony-gerace/
http://lucieparici.blogspot.com/2014/03/working-grid.html
As we learned this week, Cullen’s reading took a focus on illustrating how important visual organization is when it comes to design. Beginning with a strong foundation that is organized allows multiple elements of the design to work together, which can make all the difference on how the final product is interpreted. The several elements that go into a design share a strong purpose as they are what lead viewer to what they are experiencing. Designers have several tools to help them organize these visual elements, such as grids, which can serve as an aid to keep control in the design, tie connections and bring the whole product together. Things like grids and margins are not meant to cause any sort of restriction for the designer or the viewer but can be very beneficial in drawing the eye.
Below are some examples I felt highlighted the chapter.
As we learned this week, Cullen’s reading took a focus on illustrating how important visual organization is when it comes to design. Beginning with a strong foundation that is organized allows multiple elements of the design to work together, which can make all the difference on how the final product is interpreted. The several elements that go into a design share a strong purpose as they are what lead viewer to what they are experiencing. Designers have several tools to help them organize these visual elements, such as grids, which can serve as an aid to keep control in the design, tie connections and bring the whole product together. Things like grids and margins are not meant to cause any sort of restriction for the designer or the viewer but can be very beneficial in drawing the eye.
https://66.media.tumblr.com/3fcffd020dc1290143850b5162cf50f8/tumblr_mutfwhUedb1r1psk6o1_1280.jpg
https://i-h1.pinimg.com/564x/11/59/97/115997a53e5c0c7ae3f7ad1e42b6b27a.jpg?b=t
Since Bill’s web design class, I have been skeptical of grid formats. In the world of coding, everything fits into a grid. Every website you see is maintained by a number of pixels, portioned off into rectangular sections. When we first plunged into grid layouts (and the math involved in web design) I was intimidated. I felt grids would be restrictive – a common thought as the book points out, “grids allow diverse visual elements to coexist,” their restrictive nature is false.
After learning their anatomy, with margins, various columns, and modules, it is easier to understand how grids can help a designer remain flexible, with a better understanding of how each element within a design relates to the next. As outlined in the book, various grid formats help us determine size, scale, and density, among other parts of design. It is up to the designer to maneuver and manipulate elements within their grid in order to perfect their layout and overall composition. However, a designer cannot stop at the grid.
Mentioned briefly, “breaking the grid” can be just as important as maintaining it. By simply using our grids as guides, opposed to definitive lines for placement, designers can bring attention to specific parts of their design. In doing so, they can create a piece that is overall balanced, while not directly symmetrical or even.
One of my favorite ways designers create balance is through color composition. Color palette possibilities are endless. For example, a designer can draw attention to a part of a design that fits outside of the color harmony of their chosen palette. They can also use repeating colors throughout a composition to help guide the eye around the design.
https://i-h2.pinimg.com/564x/50/5d/83/505d83ba4e464e93191217ba5c6d0978.jpg?b=t
Here the designer uses a color complementary to the other colors in their chosen palette as a way to make the subject of the design stand out. (red vs greens, blues, and browns)
https://i-h2.pinimg.com/564x/48/6d/c9/486dc91023f03f98d24a94529f008274.jpg
Here the designer uses a complimentary color palette throughout the design that pulls the viewer through each element. The color, along with the shapes and lines, create a path for the eye to follow.
Anyone who knows my aesthetic can confirm that I am all about movement – curves, dynamic lines, the arch of dancers leaping through the air, the flow of a river crashing over the rocks, the Golden Spiral found in fine art, you name it. It’s actually a component that is easily accessible to interface design, which attracted me to the UX/UI field, among other things. It combines a lot of beautiful aspects of movement and experience in real life to online platforms: “Always developed with the content in mind, grids are reinvented with every project. They are modeled after structures and systems of proportion found in architecture, fine art, mathematics, music, and nature; grids are also informed by the instinct of the designer” (Cullen, 55). This in combination with the ability to “communicate comprehensible messages” via textual, visual, and interactive elements is just a storm of creative possibilities.
It was nice to get a refresher on columns, margins, etc. in the context of graphic design rather than from an HTML/CSS perspective. While learning how to hard-code a website has been thrilling, the technical projects from more computer science-oriented perspectives still revolved around strict boxes and rigid measurements. However, I never considered how a grid could “unify the compositional space” (Cullen, 60). In fact, I think one of the reasons why many of my layouts appear so disjointed is because I assumed a grid was meant to organize a near maximum amount modules rather than bring them together – like trying to stuff as many fruits into the basket as possible rather than hand-picking what would look good together for a still-life.
This leads to visual hierarchy. The concept of visual priorities appeared straightforward enough – similar to how a book has a title, maybe a chapter header, and then the content – but again I hadn’t considered bringing similar elements to the forefront to develop consistency. It makes sense, in retrospect, and I am very excited to implement these concepts into future designs. Honestly, minus color theory, I will probably be reviewing Chapter 6 over and over and over again just because of all the new (and yet foundational) techniques that have been articulated to me. And again, I look forward to practicing and implementing them.
Below are some examples of composition that seem to achieve the “quality over quantity approach”:
https://fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto/gigs/115069082/original/7e3c04016ab7a0132b271dd1bb4aca2165127ab2/design-magazine-layout-to-a-superb-one.png
https://www.colorado.edu/theatredance/sites/default/files/styles/medium/public/article-image/2000x_0.jpg?itok=XJH0cPed
https://i2.wp.com/www.designlisticle.com/wp-content/uploads/2016/12/amazing-magazine-layout-design-idea-62.jpg?fit=1080%2C822&ssl=1
http://freefrontend.com/assets/img/css-magazine-layouts/magazine-layout.png
This weeks reading, chapters 5 and 6 by Kristen Cullen she focuses on the building elements that structure and organize graphic designs to create visual hierarchy. This part of the process is crucial when it comes to design because it allows the designer to stay in control, form connections to bring together a design. Visual elements create certain focal points that determine how it is going to be interpreted and analyzed by the audience. Cullen expresses the importance of grids and everything that goes into a grid for instance columns, column intervals, flowlines, etc. Modular grids accommodate a wide range of visual elements. Grids are very functional and allow visual elements to be controlled, organized, be in unit, and balance each other.
The image that I chose for my visual example is a design company that utilizes Instagrams grid feed to their advance. The Instagram account @nordiccopperdesign designed their instagram to flow when you look at it as a whole but also be able to have their images stand alone if need be. This is becoming much more popular on Instagram these days because it becoming more popular to have everything balanced and produce the same harmony. Instagram accounts also do this to have their feeds photos organized and connected, presenting themselves very effectively. Grids are appealing to the eye and communicate a central idea with the viewer. Although this is not your typical grid, I think that this is an important way to show that grids are not only present in posters but in Instagram feeds as well.
.
https://imgur.com/a/FwDv5DV
The reading about structure and organization I found to be interesting and inspiring. I personally never knew how many grid structures there were and how they can be manipulated and changed to fit the needs of the particular design. I liked how the reading went through and explained each in how they can be used and possible cons if they were multiplied too much on a page. I also enjoyed how they emphasized that “No grid (or rules) are absolute” (68). I like that they kept the creativity and gave readers the ideas that these are just a start point. One is able to change this layout to fit their design in any way they choose. I also enjoyed how the chapter ended with “The designer should use grids freely, adhere to spatial divisions to create dynamic relationships and intelligently break them, the appropriate” (73). In my example that I chose, I think it shows a modular grid with dynamic symmetry. It shows an incomplete image of a woman in a grid. Her image is split into different sections of the grid but it is still balanced. The grid spaces are equal so this may technically not be specifically dynamic symmetry. As dynamic symmetry is defined as having a balance of big and small pieces. I believe this to balanced because it is bottom heavy in the image. Most of her image is for her cheek region down. Her face and most of her head is missing. I also like how this image is captivating without eyes being involved. I believe that eyes draw attention very easily but this image can do so without them.
https://i.pinimg.com/564x/7b/45/e0/7b45e0586686690db792537e10a91b3e.jpg?b=t
In chapters 5 & 6 we learned all about how visual elements such as structure, organization and color of a design affect the viewer’s perception on it. When reading these chapters one section that really stuck out to me was the part discussing grids. I feel like often we don’t notice how efficient a grid is in organizing a page into an aesthetically pleasing design. Cullen explains that, “the goal of working with grids is to order and unify the compositional space; the underlying structure should be apparent without actually being seen” (60). Grids can be such a powerful tool in the organization of the page but must be used carefully as they can quickly become overpowering and too limiting. I found it interesting how Cullen explained that, “grids should be tailored to accommodate specific visual elements” (61). Personally, whenever I think of a grid, the first thing I think of is the stereotypical Instagram grid format. It never really crossed my mind that a grid could be something other than the typical same sized square grid layout. For example, in the image below, the grid consists of all different sizes and shapes. By doing this it makes the viewer feel a certain way. Also by adding blocks of color it makes a bold statement to the design that might not have been visible otherwise.
https://theinspirationgrid.com/app/uploads/2017/04/design-magdiel-lopez-10.jpg