Visual Design

Visual DesignDMET 255

Focal Point

Find your FocusThe focal point of this piece is the model and her clothes. So, she has been placed centrally, has type and a block of color positioned in a way that highlights and draws attention toward her face and then to her outfit, and leading lines direct the eye down her frame and gradually toward more information.

Focal PointThe focus on the photograph of the man. The design orients the focus to this image by placing him centrally, framing him with the graphics, and using the doodled graphics to lead the eye in toward the photograph.

Leading LinesJust like you point at something when you want people to look at it, by positioning certain lines and shapes in certain ways you can control the viewpoint of your design, aka where viewers’ eyes go when they see your design.

FlowchartsFlowcharts use lines to direct your eye from one point to the next in an obvious way.

Leading Lines = Focal PointThis poster design by Design By Day that uses strong leading lines to first guide the eye toward the main focal point (the title), and then to various rungs of information.

Scale and HierarchyIn a very brief explanation, hierarchy is the arrangement and design of elements in order to visually signal importance. So, you might make a more important element bigger and bolder than a less important element which might be smaller and fainter.

Type HierarchyThese days, our headlines or titles don’t have to be six inches tall to catch readers’ attention, but the image to the right provides a dramatic reminder of just what typographic hierarchy is all about — organizing and formatting your type choices in such a way that readers or users can clearly see what’s most important, which enables them to easily navigate the layout at a glance and quickly scan to find the information they’re looking for.

ScaleThis poster design by Jessica Svendsen uses a scaled-up image as the largest element, which helps it attract the most attention and focus. 

This poster design by Scott Hansen uses a scaled-down, small silhouette of two people to help communicate the massive scene in front of them. This instantly gives viewers a sense of the grandeur and size of the scene.

BalanceSymmetrical & Asymmetrical

Symmetrical BalanceA symmetrical composition by reflecting the positioning of type and graphic elements. By using symmetry, this design is made elegant, clean, and beautifully balanced.

Asymmetrical BalanceIn the above design, the three central circles are the largest elements in the design, but they are balanced out both by the type, the fine line graphics, and the small, heavily textured circle in the bottom corner.

Complimentary Elements

Complimentary photosUse photos from the same photoshoot. This is an easy way to ensure your photographs look cohesive as they were likely all under the same art direction and photographic style.

Photo ColorColor your photos similarly. With the prevalence of filters and image adjusting tools, you are able to color and adjust your photos to have more cohesive and complementary palettes. 

Contrast

Boost Contrast

Low ContrastThis poster by Melanie Scott Vincent uses a yellow paperclip on a yellow background, creating a low contrast difference between the object and backdrop. While this is usually a thing to avoid, in this case it reinforces the event name ‘ignored everyday’.

Repetition

Multi-Paged LayoutTo maintain consistency and a logical layout, try to take specific elements from one section of your design and apply it to other sections. Maybe a style of type can be applied to more than one section of your design, or perhaps a graphic motif can be used more than once. So, try to tie your design together with repeated elements.Repetition is a key factor when it comes to multi page layouts. Repeating elements of your layout and/or design helps each page flow into the next, creating a cohesive set of pages.

Repeat StylesThis poster repeats certain type stylizations, graphics, and line weights throughout to maintain a cohesive and effective design. If it were to suddenly use a thick, bold, pink line-based graphic somewhere in the middle, the cohesion would be lost. So, by keeping the font palette and color palette small and the graphic styles simple and alike, the design is kept beautiful and strong.

White Space

ClarityWhite space when used strategically can help boost your design’s clarity and overall look by balancing out the more complicated and busy parts of your composition with space that helps your design to breathe.For example, this design uses white space to balance out the image, texture and type to keep the design clean and sophisticated.

Create a FrameScale down your graphic elements. By scaling down your imagery, type, graphics etc. you can create some luxurious white space around your focal points while staying within the frame of your original graphic. 

Alignment

Create OrderThe strong degree of alignment between its elements creates a sharp, neat and effective layout that is easy to navigate and is pleasing to the eye.

Text AlignmentAlignment is also very important when dealing with type. There are many ways to align your type, but a good rule of thumb for longer pieces of copy is to stick with left alignment as this is the easiest for the eye to navigate and make sense of.

Rule of ThirdsThe rule of thirds is a simple technique where designers divide their designs up into three rows and three columns, and at the points where the vertical and horizontal lines meet is where your focal points should be.

Focal PointsBy placing focal points at each line intersection, his design is made striking and effective. Beachy also notes that “By avoiding a centered design you add some motion and interest.”

Rule of 3rds

Good Luck!

Resources

• https://designschool.canva.com/blog/visual-design-composition/