Transcript

Learning About Contrast in Design

HE'S HARD TO SEE BECAUSE THERE ISN'T ANY CONTRAST BETWEEN HIM AND THE BACKGROUND HI I'M BRAD AND THIS IS MY PET PIG HECTOR. LET'S CHANGE THAT. CONTRAST IS A FUNDAMENTAL ELEMENT OF ANY DESIGN. THERE IS COLOR CONTRAST LIKE THE PANELS ABOVE. HMM, THAT WASN'T WHAT I HAD IN MIND. I SHOULD PUT OUR OUTLINES BACK ON. SIZE CONTRAST, AND SHAPE CONTRAST, TO NAME A FEW. HAVE YOU EVER LOOKED AT SOMETHING AND THOUGHT IT WAS A LITTLE OFF, BUT COLULDN'T PUT YOUR FINGER ON IT? THE COLORS ARE DIFFERENT, BUT THERE ISN'T ENOUGH CONTRAST BETWEEN THEM. IF WE DESATURATE THE IMAGE YOU CAN SEE THEY ARE ALMOST THE SAME SHADE OF GRAY H20 Н.О IF WE USED A BOTTLE OF MILK YOU CAN SEE HOW THE WHITE THIS ISN'T JUST FOR ILLUSTRATION, IT APPLIES TO ALL DESIGN. LOOKING AT THE GRAY SCALE WE CAN SEE THE WHITE TEXT STANDS OUT AGAINST THE BACKGROUND BECOMES EASIER TO READ AS THE BACKGROUND COLOR BECOMES DARKER. ABCDEFGHIJKLMNOP MILK IDEALLY YOu WANT TO HAVE ENOUGH CONTRAST BETWEEN THE TWO COLORS TO MAKE IT EASY TO READ. IF THE TEXT BECOMES SMALLER IT'S GOING TO BECOME HARDER TO READ. DARKENING THE BACKGROUND A LITTLE HELPS READABILITY. Oh, that's Cynthia's dog. I think it's a Pomeranian. I Oh, that's Cynthia's dog. I think it's a Pomeranian. I Oh, that's can't leave him home alone can't leave him home alone or he cats the furniture. I'm watching him while Cynthia and Marty Ackerman are in Hawaii. or he eats the furniture. I'm watching him while Cynthia and Marty Ackerman are in Hawaii. Cynthia's dog. TAKE A LOOK AT OWLTASTIC, MEAGAN FISHER'S BLOG. OWLTASTIC HOME WORR ABOUT XTRAR ZOOMING IN ON SOME OF THE ELEMENTS YOU CAN SEE AN ALMOST IMPERCEPTIBLE DROP SHADOW WO THE SHADOW ADDS A LINE OF DEFINITION ALONG THE BOTTOM OF THE BUTTON. IT'S EASIER TO SEE WHEN COMPARED WITH A BUTTON WITHOUT THE DROP SHADOW. IF TOO MUCH WAS USED THE BUTTON WOULD LOOK TACKY AND OUT OF PLACE. WORK WITH M WORK WITH ME WORK WITH M AS A DESIGNER YOU HAVE AMAZING POWERS. YOUR JOB IS TO COMMUNICATE A MESSAGE (OR MESSAGES) TO YOUR AUDIENCE. READERS ARE CONDITIONED TO LOOK AT LARGER AND DARKER ITEMS AS BEING MORE IMPORTANT THAN SMALLER LIGHTER ONES. CONTRASTING COLORS AND TO BUILD A HIERARCHY OF INFORMATION. THE DESIGNERS AT 37SIGNALS ARE MASTERS OF THIS. Track Your Contacts Leads, and Deals Always Be Prepared 17ignals . Manage Projects and Collaborate with Your Team & Clients. A Better Way To Work. YOUR EYES MOVE EASILY FROM LEFT TO RIGHT. THE MESSAGE BLOCK IS LARGER AND DARKER. THE PRODUCTS ARE LIGHTER AND SMALLER BUT STILL VERY PROMINENT ON THE PAGE. Over 3 million people use our web-based apps to get things Basecamp Manage Your Projecs Highrise Organize and Share Information Across Your Business. Real-Time Chat. File & Code Sharing for Remote Teams SECONDARY INFORMATION, LIKE THE TESTIMONIALS AND THE BLOG, ARE PLACED LOWER ON THE PAGE. THE IMPORTANCE IS EASILY DETERMINED BY ITS SIZE. "One of the Net's riaing star-TIME - "Reader's Cholce" Backpack Organe Your Business Campfire Chat wth Your Gove More praise trom the press EAR curowERS HE TO S Every day the wocdis most respected brands, small businesses, non-profits, and entrepreneurs depend on our products to make their businesses run smoothly. Safe, secure, and reliable. Since ao04 Webelvet Getting Real is our book about building software and running a buniness. LOOK AT THE BUZZ. THEY WANT PEOPLE TO KNOW THAT THE PRAISE FOR THEIR BUSINESS IS CURRENT AND REAL. THE TIME IS BOLD AND BLACK AND WHAT IS SAID IS GRAYED OUT BUT STILL READER FRIENDLY. SUBCONSCIOUSLY LETTING THE READER KNOW WHAT IS SAID IS NOT AS IMPORTANT AS HOW MANY AND HOW OFTEN PEOPLE ARE SAYING IT. BUZZ FROM AROUND THE WEB 3 days ago ReneCunningham: rea of the best online books on Software Project practices. http://gettingreal via Twitter 3 days ago thijsbaars: Great videa magic of business http://bit.ly/imw via Twitter CONTRAST ALSO ADDS BALANCE AN INTEREST TO A COMPOSITION. AND WE HAVE JUST SCRATCHED THE SURFACE. TAKE A LOOK AT SOME OF THE OTHER DESIGN RESOURCES BELOW TO LEARN MORE ABOUT CONTRAST. THERE ARE LINKS BELOW TO THE SITES MENTIONED HERE. THE END H i

Learning About Contrast in Design

shared by rmmojado on Jan 17
3,341 views
14 shares
6 comments
In this comic, you’ll learn about the fundamentals of contrast, which is an important part of design. This comic touches on key areas of contrast like grayscale, tints, readability of text, along wi...

Source

Unknown. Add a source

Category

Computers
Did you work on this visual? Claim credit!

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size