This presentation explains different techniques and concepts relevant to transitioning best practices in print design to those of the web and other digital media. It covers universal principles that apply across-the-board as well as those unique to each discipline and offers specific insights on easing your transition from one to the next.
14. See? This is not very enjoyable reading. It This is way easier on the eyes, especially
strains the eyes. It’s one thing if it’s a very for on-screen reading. Be nice to your
short amount of text and enhances the users and make it easy for them to read
design and user experience, but in what you are trying to tell them.
general don’t set body copy like this,
especially not on the web. Pellentesque nibh felis, eleifend id,
commodo in, interdum vitae, leo. Praesent
Pellentesque nibh felis, eleifend id, eu elit. Ut eu ligula. Class aptent taciti
commodo in, interdum vitae, leo. Praesent sociosqu ad litora torquent per conubia
eu elit. Ut eu ligula. Class aptent taciti nostra, per inceptos hymenaeos.
sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl.
Proin auctor lorem at nibh. Curabitur nulla
Maecenas elementum augue nec nisl. purus, feugiat id, elementum in, lobortis
Proin auctor lorem at nibh. Curabitur nulla quis, pede. Vivamus sodales adipiscing
purus, feugiat id, elementum in, lobortis sapien. Vestibulum posuere nulla eget
quis, pede. Vivamus sodales adipiscing wisi.
sapien. Vestibulum posuere nulla eget
wisi. Integer volutpat ligula eget enim.
Suspendisse vitae arcu. Quisque
Integer volutpat ligula eget enim. pellentesque. Nullam consequat, sem
Suspendisse vitae arcu. Quisque vitae rhoncus tristique, mauris nulla
pellentesque. Sed dapibus vehicula odio. fermentum est, bibendum ullamcorper
Quisque pellentesque. sapien magna et quam. Sed dapibus
vehicula odio.
Proin bibendum gravida nisl. Fusce lorem.
Phasellus sagittis, nulla in hendrerit Proin bibendum gravida nisl. Fusce lorem.
laoreet, libero lacus feugiat urna, eget Phasellus sagittis, nulla in hendrerit
hendrerit pede magna vitae lorem. laoreet, libero lacus feugiat urna, eget
Praesent mauris. hendrerit pede magna vitae lorem.
Praesent mauris.
41. Make Your Developers Happy
• Backbone of the design
• Easily plug in content on
each new page
• Creates consistency
• Careful when breaking it on
the web
Design principles that transition well across media formats.\n
What is the take-away on this slide?\n
Atlanta Magazine Article\n
Fast Co Design\n
Design pages (print, web, media, etc.) so that they take advantage of the natural way one’s eyes travel across a page.\n
- The Gutenberg Diagram\n- Same as books, users tend to read/experience a web page by starting at the top left and working their way down to the bottom right.\n
Primary Optical Area:\n- top left\n- logo\n- 1st read\n
Primary Optical Area:\n- top left\n- logo\n- 1st read\n
Terminal Area:\n- bottom right\n- calls to action\n- buttons\n
Mightybytes example\n
- have to be more careful with colors vibrating on screen, even more than when on print\n- red on gray or green\n- orange directly on blue\n- need to talk about values/saturations and how they need to balance between colors to avoid bad vibrations (INSERT PIC OF BEACH BOYS? GOOD VIBRATIONS?!... “the only kind of vibrations we want are...” lol okay maybe not)\n- talk more later on RGB vs. CMYK later\n
\n
\n
\n
\n
\n
Chroma = purity of a color, so its lack in white, gray and black\n
\n
\n
Eyes tend to be more sensitive to brighter colors on the web than in print.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
If you comp something up in 300dpi, you’re packing more information into each pixel, \nwhich MAJORLY increases load time\n