visual methods and processes
kayla truxton
pinterest boards of design elements
4 icons
53 book covers
55
the 80/20 rule The Pareto Principle in web design
involves the same 80/20 breakdown. It means that your profits can be maximized simply by placing the focus on the 20% of processes, activities or products that are generating 80% of the results that you want from your website.
A visual representation of the breakdown of the Pareto Principle. FOUND ON OneStep4ward.com
Social Media 80/20 Rule: 80% of your content should be informational, and only 20% should be self promotional. FOUND ON visually
“The mobile app is focused on one task (reading the story) while the Web site is chock full of extraneous detours, calls to action, and general interface debris. This detracts from the content and thereby the primary task of reading. No wonder the mobile application user experience is in high demand.� FOUND ON lukew.com
Eyetracking heatmaps with 3 different examples of the F-pattern for reading web pages. FOUND ON nngroup.com
accessibility Accessibility is most effectively and effi-
ciently incorporated into product design when it is addressed with different approaches from the beginning of design. Common pitfalls to avoid in design are focusing only on limited standards and not considering accessibility until the end of the design process.
The use of Braille on this brand’s packaging is a great example of accessibility in packaging design by making it accessible to those who are blind. FOUND ON pinthemall
Another example of the use of Braille in this Rubik’s Cube, designed by Konstantin Datz. FOUND ON yankodesign
This help page on Huge Inc.’s website is an example of a webpage using accessibility in their contact section. By having different locations listed in isolated groups on their contact page, the user can navigate t hroughout the site effectively. FOUND ON hugeinc
This infographic summarizes the most important points which must be taken into consideration according to WCAG and Section 508 guidelines concerning design. Listed are percentages of the U.S. population with disabilites and tips for designing with that population in mind. FOUND ON designbeep
alignment Alignment works best with items that have straight
edges, especially rectangles. Rectangles are the most economical shapes to trim pictures into so pictures are most often seen in that format. Text is made of letters of varying shapes that form lines and blocks that act as rectangles. Most formats are also rectangles.
An example of layouts demonstrating object or text box alignments. FOUND ON 2D design notes
An example of poor use of justified alignment. FOUND ON printwand
An editorial example of a picture center aligned within a text frame, from Harpar’s Bazaar magazine, March 2015. FOUND ON iconographyblog.tumblr
A visual represntation of common types of alignment: center, left, right and justified. FOUND ON printwand
color Color can play a large role in the elements of design
with the color wheel being used as a tool, and color theory providing a body of practical guidance to color mixing and the visual impacts of specific color combination.
A restaurant menu and brand demonstrating consistent color as well as complementary colors. FOUND ON bpando
There are many tools to help generate color combinations, for example, the application Adobe Color CC or Adobe Kuler, can create combinations randomly as well as create palettes from iPhone pictures. It can be used online without the app as well. FOUND ON Adobe Color CC
A commercial office taking the approach of uniform color throughout the brand, including its office design and decoration. By maintaining a specific color throughout your brand, you instill an identity and mood with your brand. FOUND ON archdaily
Colors are often associated with emotions or experiences, in this chart colors are illustrated with common associations listed. FOUND ON coscheduleblog
framing Framing is the presentation of visual elements in an image, especially the placement
of the subject in relation to other objects. Framing can make an image more aesthetically pleasing and keep the viewer’s focus on the framed object(s). It can also be used as a repoussoir, to direct attention back into the scene. It can add depth to an image, and can add interest to the picture when the frame is thematically related to the object being framed.
Framing around the subject's face is used to call attention to the sunglasses in a fashion advertisement. FOUND ON marc tan photo
A Mad Men publication demonstrates the different shapes and combinations object, picture and text can have. FOUND ON multticlique
A restaurant menu using the clipboard as a frame for the printed menu, centered in the middle. In the menu, there are also framed specials and the restaurant's mission statement. By framing these elements, the guest is drawn to information that might have been overlooked. FOUND ON canva
An example of framing in photography using the landscape as the frame for the subject. Here, the enclosed shape of the surrounding buildings create a unique frame for the subject, a plane. FOUND ON boredpanda
closure Closure is a phenomenon when the brain processes an incomplete shape,
it fills in the missing information to create a whole. Thus, an image that is missing pieces will then appear complete. Closure is performed by the brain compulsively, taking place below our own consciousness. Essentially, the brain is creating order out of chaos by applying the patterns it has already learned.
A political illustration using the concept of closure by creating a negative space between two fingers to create the outline of Africa. FOUND ON inspirationfeed
Another example of how negative space triggers the brain to process shapes that aren't directly created. Here, a hand is curved to mimic the top of a lightbulb to accompany the bottom part of a lightbulb. FOUND ON bashooka
In this poster, a broken plate is used to depict a tree, creatively using negative space. The closure effect allows us to see this tree since we are used to the shape of trees. FOUND ON eggbeater
In this J.Crew advertisement, sliced kiwis are arranged to form a triangle by the negative space created in the middle of the three kiwis. The triangular space also provides a frame for the announcement. FOUND ON thekrazycouponlady
layering Layering can decrease the specificity of a
particular image and increase the communicative power of the resulting combination. Layering can also produce more abstract results that can be used as background material or can be cropped and masked within other shapes or silhouettes.
Layering can involve pictures, text, graphics, shapes, etc. In this magazine, they play with graphic elements and textures ontop of pictures. FOUND ON leslie-david
In this publication, pictures and design elements have colored masks with transparency then layered on top of each other, as well as text, for contrast and hierarchy. FOUND ON themeforest
This website layout uses the element of layers to overlap pictures, maps and text that reflect the wilderness theme of their company. By layering images, they create a collage-like imagery throughout their site. FOUND ON dribble
Illustrations often layer text and images to juxtapose ideas and to convey messages with visual clues. Flowers are a common choice when pairing with typography, as pictured here. FOUND ON spoongraphics
readability Readability is a combination of a number of factors
including line length, leading, typeface style, margins and padding, and color and contrast. The use of these factors make text legibile to read for audiences.
By varying text families, line weight, color and margins, this typography illustration is easily readable because it has contrast. FOUND ON canva
Sometimes mixing fonts can be detrimental to the message you're sending if they do not complement each other. This typography example demonstrates how to mix varying fonts properly. FOUND ON designsbynicolina
The layout of this publication is simple, and using a thin typeface and enlarging it creates a hierarchy in the text for the title, and smaller text in paragraphs for more committed reading. FOUND ON gimmebar
The use of color bars behind text creates hierarchy by calling attention with the color yellow, associated with urgency. The text is varied throughout the magazine by typeface, line weight, and color. FOUND ON rgb
affordance Affordance is the design aspect of an object which suggest how the object
should be used; a visual clue to its function and use. Affordances provide strong clues to the operations of things. "Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed."
Zippers are a great example of a design with high affordance. The pulley suggests that it should be pulled downward to unzip, or open. FOUND ON MohamadAlMustapha
This door is an example of a poorly designed handle. It has low affordance because the handle gives a different clue than the label "push." FOUND ON quora
Here, a comparison between a teapot and an online "button" differentiate between physische and Wahgenommene affordances. Physische affordances imply a physical instruction. Wahrgenommene affordances are implied based on previous information or knowledge. FOUND ON demodern
The user interface design of iPhone buttons use a slide technique, where users drag the button left to right or vice versa for a command. On the lock screen, the slider is accompanied with "slide to unlock," identifying a poor affordance design. FOUND ON interactiondesign and quora
mapping Mapping is the relationship between controls
and their environments or effects. Good mapping is primarily a function of similarity of layout, behavior, or meaning - and results in greater ease of use.
This tablet uses mapping to create an intuitive experience by using similar behavior of moving objects with your fingers, pinching to reduce, etc. FOUND ON doctordisruption
Window controls in vehicles are another example of mapping using intuitive design. By pushing down on the control, the window rolls down and by pulling the control upwards, the window rolls up. FOUND ON deninet
Mapping is successful when it makes the user experience easy and enjoyable. For example, Segway's use great mapping by creating a completely intuitive design by leaning forward to move forward and leaning back to stop or move backwards. FOUND ON doctordisruption
Many stovetops are classic examples of poor mapping. In these pictures, the success of each layout is measured in percentages based on the functionality of its design. The 100% layout is the greatest use of mapping because each control is arranged with close proximity to its burner. FOUND ON ergonomicdesign
aesthetic usability effect Aesthetic USability Effect is where a user will perceive an
attractive product as easier to use than an ugly one. It doesn’t actually matter if they are easier to use or not they are perceived as such so users will make subconscious concessions and overlook many difficulties.
iPhones, or smartphones, are a prime example of perceived usability greater than one that is less attractive or popular. FOUND ON pauberti
Cars are a common example of where manufacturers use the aesthetic usability effect to win the preferences of car buyers. FOUND ON zappedbytaiser
“A series of research papers finds that aesthetically pleasing designs are reported as more usable irrespective of whether that is true.� Here, two peelers are compared based on their aesthetic appearances, one more modern and the other a simple, classic design. FOUND ON asis.org
Another example of preferences in technology based on appearances. An Apple Mac desktop versus a Dell or Microsoft desktop. FOUND ON abaxenda
iconic representation Iconic Representation
is the use of pictorial images to make actions, objects, and concepts in a display easier to find, recognize, learn, and remember. Iconic representations are used in signage, computer displays, and control panels.
An example of some food icons for cooking or labeling. FOUND ON behance
An example of a Portuguese restroom sign using icons to distinguish male, female and handicapped restrooms. FOUND ON sinalizarblog
A traffic sign using figurative icons to signal a crosswalk. FOUND ON survivorbucket
An illustration comparing two different types of signs: iconic and indexical. Iconic is an image that physcially represents the object it is substituting, whereas an indexical sign is representing a sensory feature that correlates to the object, in this case, a paw print. FOUND ON dat-hokinh
hierarchy Hierarchy refers to the arrangement or presentation of elements in a way that implies importance. In other words, visual hierarchy influences the order in which the human eye perceives what it sees. This order is created by the visual contrast between forms in a field of perception.
Here is an infographic that includes 15 different aspects of visual hierarchy used in design. FOUND ON designmantic
An environmental poster uses color, text and alignment to create a visual hierarchy for things of importance, in this case, the right side of the page. FOUND ON inspirationfeed
The social media website, Twitter, uses the Golden Ratio in layouts to create a harmony in the visual hierarchy of posts made by users. FOUND ON conversionxl
In this poster hierarchy is subtle, but achieved by repetition and scaling of the fish, creating movement and tension upwards towards the text. FOUND ON shinn
serial position effects Serial POsition Effect describes how list items that are first and last in a list are more likely to be remembered than the items in the middle. Furthermore, the medium of the list, how fast the list items are presented, and the time between exposure and decision, will greatly affect which is better: being first or being last.
An options menu on Firefox shows a list where users are most likely to select options either at the top or bottom of the list because they are more likely to be remebered.
FOUND ON firefox
A chart showing the probability of one to guess certain words based on their location in the list. FOUND ON csus.edu
A chart showing the correlation between memory and word position in sequence. Primacy refers to those in the beginning or first read, whereas recency refers to those at the end ot seen last. Words in the intermediate stage are least likely to be remebered. FOUND ON doctordisruption
An explanation of the recency effect of how it influences our judgement because it is the most recent information. FOUND ON slideshare
von restorff effect Von Restorff Effect (named after psychiatrist and children's paediatrician Hedwig von Restorff 1906–1962), also called the isolation effect, predicts that an item that "stands out like a sore thumb" (called distinctive encoding) is more likely to be remembered than other items.
Pictured here are four pairs of shoes, according to the von Restorff Effect, the pair of Converse stand out from the others because of their red color. FOUND ON flickr
In this advertisement, the subjects are contrasted with the abundance, or lack of, clothing. The naked man is the first thing you notice because he stands out next to others wearing clothes. FOUND ON hongkiat
The Nokia building draws attention with the use of green over dark, bland buildings, while giving the sense that the color was dumped from a paint can, adding interest. FOUND ON flickr
A picture of a simple list illustrates the von restorff Effect with a highlighted line. Use of color helps to distinguish and call importance to a certain area. FOUND ON brainmoda
mimicry Mimicry refers to the use of properties from organisms, objects
and environments to shape a products design, improving its function. Mimicry is very popular in designers as it solves important issues in the advance of technology, especially biomimicry, which analyses organisms with the designer reverse engineering certain aspects of their evolved form.
A great example of nature-inspired design tent inspired by leaves by Ondrej Vaclavik. FOUND ON momtastic
An airless tire inspired by honeycombs, an example of biomimicry in design. FOUND ON unp
Another example of design using nature as inspiration for engneering products, "Oceanwings," created by designer Guillaume Binard in cooperation with “Aqua Lung.” FOUND ON mantorresdesign
In fine art designs, photographer Seb Janiak’s, has manipulated photographs of insect wings to look like blooming flowers. An example of mimicry used to depict another natural object. FOUND ON My Modern Met
rule of thirds Rule of Thirds states that if you take a
canvas and divide it into three equally sized horizontal sections and three equally sized vertical sections, the resulting grid provides a sort of “roadmap� that helps you choose where to place your design elements.
An example of a picture with and without the rule of thirds grid to show where to place subjects. FOUND ON simpleasthat
When capturing movement, it is best to have the focus of the subject on the opposite side of where the subject is movig towards. In this case she is running to the right, so the photographer leaves room on the right side to follow the movement. FOUND ON companyfolders
A poster designed by Quim Marin, shows the subject in the lower right grid of the camera field, demonstrating rule of thirds in print, not just photography. FOUND ON typographicposters
A grid containing percentages of where users focus their eyes first and/or longest in a composition. FOUND ON designmodo
hierarchy of needs Hierarchy of Needs was created by Abrahim
Maslow in 1943 and it stated that people are motivated to achieve certain needs. When one need is fulfilled a person seeks to fullfil the next one, and so on. He created a pyramid to illustrate this hierarchy.
An illustration detailing the principles created by Maslow in depth. FOUND ON elearningindustry
When designers focus on the users problems and the users are at the top of hierarchy, designs are less problematic. Apple's remote is very simple when next to other remotes, yet it is very successful because it focuses on what the user needs most. FOUND ON zapier
“The people who designed this knew that there was something wrong because they built a telephone into it,” Balkan says. That’s a machine built to solve the system’s problem of making sure its riders pay their fare. An example of misplaced hierarchy. FOUND ON zapier
A comparison of the original hierarchy of needs conceptualized by Maslow with hierarchy of needs in design. FOUND ON doctordisruption
consistency Consistency involves agreement, harmony,
or compatibility, especially correspondence or uniformity among the parts of a complex thing. In design, areas of elements, content and interaction should be consistent.
A brand demonstrating consistency in layout design throughout products in their baking products line. FOUND ON studioh
Coca-Cola is a great brand that maintains consistency throughout their products. Keeping their can design simple, but varied with color and text, is a successful way to maintain their brand identity. FOUND ON doctordisruption
When websites expand to mobile sites and apps, it is important to maintain consistency throughout all media platforms. FOUND ON pixelpi
An example of framing in photography using the landscape as the frame for the subject. Here, the enclosed shape of the surrounding buildings create a unique frame for the subject, a plane. FOUND ON boredpanda
chunking Chunking breaks up long strings of information into units or
chunks. The resulting chunks are easier to commit to working memory than a longer and uninterrupted string of information. Chunking appears to work across all mediums including but not limited to: text, sounds, pictures, and videos
An example of what the before and after results of chunking in content. Chunking information into pieces helps the brain digest information. FOUND ON theelearningcoach
Answers.com is an example of a website using chunking to group information, making it easier for readers to retain what they have just read. FOUND ON answers.com
The use of chunking can be successful when designing restaurant menus and categorizing foods or ingredients in recipes. By chunking information, readers can distinguish between the foods and information. FOUND ON michiramen
The use of chunking in phone numbers in Apple's contact information helps users remember numbers easily. FOUND ON ui-patterns
attractiveness bias Attractiveness Bias refers to a tendency, described by psy-
chologists, to assume that people who are physically attractive also possess other socially desirable personality traits.
Babies are often used in advertisements to draw audiences in with a cute face, like in many McDonald's ads. FOUND ON inspirationfeed
An example of framing in photography using the landscape as the frame for the subject. Here, the enclosed shape of the surrounding buildings create a unique frame for the subject, a plane.
Women are often used to advertise for male audiences because of their attractive qualities. In this Budweiser advertisement, a woman is smiling while being poured a beer, signaling that women are happy with this brand of beer. FOUND ON pinterest
In Apple's iPod, colors are used to cater to every individual. The use of color has an appeal that makes people think these MP3 players are better than others, according to the attractiveness bias. FOUND ON 4.bp.blogspot
biophilia effect Biophilia Effect states that environments rich in
views and imagery of nature can reduce stress and increase focus and concentration.
New York-based designer Nao Tamura created a collection of dishes inspired by cherry leaves demonstrating the biophilia effect. FOUND ON designswan
Another example of an advertisement that has been installed with real trees on a bilboard to demonstrate Coca-Cola's efforts in reducing pollution. FOUND ON inspirationfeed
An example of a printed brochure incorporating biophila elements to set a tone for the publication. FOUND ON behance
McDonald's utilizing the biophilia effect in demonstrative advertising, located in a city center. The installation involves a garden-like setup with real carrots growing inside, promoting fresh ingredients. FOUND ON inspirationfeed
gestalt Gestalt is a psychology term which means "unified
whole". It refers to theories of visual perception developed by German psychologists in the 1920s
The logo for Black Cat Lounge, designed by Jacob Weaver, demonstrates gestalt by use of negative space. FOUND ON dribbble
An exmaple of a poster using figure-ground relationship to create the images of the two singers in the duet group, She & Him, from the form of an apple. FOUND ON piccsy
This illustration utilizes gestalt with elements of nature, flowers, petals, stems and butterflies are delicately arranged to create a womans face for a piece of the composition. FOUND ON tumblr
Another illustration demonstrating the principle of gestalt with white space to create a figure-ground relationship between a monkey and lion with a tree in the background. FOUND ON mentalfloss
story telling Storytelling supports the exploration of the service
idea. Through the use of simple words or illustrations, the teller will illustrate the solution as it is a story.
A breakdown of what makes a story. Storytelling helps brands develop and share their identities. FOUND ON jthcurated
In this advertisement for LandRover, the company uses a picture of a man backpacking with text information layered on top of the picture to tell a story of the man's journey. FOUND ON qz
Borrowing some tricks from parallax design, design agency Humaan tells a fun interactive story with hover-to-reveal copy and scroll-triggered animations relating to their staff. FOUND ON thenextweb
Austin Kleon’s bestselling book, Steal Like An Artist, is a great example of storytelling. Using typography, he tells a story about the boo. Kleon wrote the original blog post as an illustrated transcription of a talk he gave at Broome Community College in New York. FOUND ON speckyboy
Icons for The University of Florida
For the book covers, I wanted to make a collage-like layout and incorporate images into the background with a fading gradient to create a tone that represented the theme of each book.
FOR WHOM THE BELL TOLLS
THE CALL OF THE WILD
CLOCKWORK ORANGE