Before&After BAmagazine.com ® i U X DesignTalk9 FiveDesignIdeas A Site of Squares Fun Lines YES, I’M INTERESTED Photo Name High-Style Multi-Caption Picture-Frame Cover NATIONAL PARKS VISITOR PROJECTION 07 Continued Design talk 0650 Before&After ® Design talk of BAmagazine.com i U X Image A line is fine Artwork drawn with a single line (technically, a stroke) can convey looks from sublime to electric It can simplify a busy image and add interest to a plain one It’s a great way to salvage weak photos, and on the Web it makes extremely efficient use of bandwidth Bathroom Restoration design > remodel > restore Center it Classy cover is made with soft color, small type and plenty of open space Line widths, including the border, are all the same Different strokes Find an object with a good profile, trace it with the Pen tool (left), and apply a stroke You can combine parts of different photos Even easier is to stroke letters, numbers and dingbats, which require no tracing Strokes can be thin, wide, dotted, colored and so on (below) Super-fine lines are sublime Be artistic! • Outline • Wide line 916.555.4687 w w w B a t h r o o m R e s t o r a t i o n c o m • Dotted line • Overlap of Design talk 0650 Before&After ® Design talk BAmagazine.com of i U X Cover Make a picture-frame cover Been to the art store lately? Picture frames with multiple-image mats are hot! The clean, gridlike presentation looks as good on your wall as it does on your page Designers have been using grids forever, so let’s borrow back the idea for our next cover: Multiple-image mats have neatly replaced those cockeyed arrangements hanging on our walls, and work equally well on our pages Note, right, the depth created by dark and light accents on the neutral-value field NATIONAL PARKS Below, make your photos the same size, then arrange in rows, columns or groups symmetrically toward the center (stable, placid) or asymmetrically to one side (tense, exciting) Above, keep the type small, aligned with an edge or centered VISITOR PROJECTION 07 One Two Three Five Six of Design talk 0650 Before&After ® Design talk of BAmagazine.com i U X Layout Multiple captions in high style Awhile back in DesignTalk 0638, we told you we love this multiple-caption technique, in which a photo is given several captions, not just one We like it for its big-picture, sound-bite value, and especially because every image has so many stories to tell Here’s a high-style take on it: Eye Shadow PERIWINKLE by Jann Haan Sheer translucency Glamour is about image, so start by making your photo wall-to-wall BIG, then set your captions atop it Use fine lines, a simple typeface and translucent fills, which yield a kind of airy, weightless quality To make the rectangles translucent, fill with light gray set to Multiply Texture and flasp net exating end mist of it snooling Spaff forl isn’t cubular but quastic, leam restart that can’t prebast It’s tope this fluant chasible Silk, shast, lape and behast the thin chack Spaff forl isn’t cubular but quastic $18.00 USD JannHaanCosmetics.com Lip Gloss ROSE MIST by Marc Philips Elesara and order is fay of alm A card whint not oogum or bont Pretty simple, glead and tarm Leam restart that can’t prebast it’s tope $25.00 USD MarcPhilips.com of Design talk 0650 Before&After ® Design talk BAmagazine.com of i U X Signature Put a photo in your name Sometimes a name and a product go together well The product can be pictured with the name or as part of the name Try it Words and pictures together can be stronger than words alone ik ko Use it as an interrupter The Bonsai tree is a visually descriptive, easy-to-”read” photo that interrupts the IKKO name Below, treat the photo like you would a letter, and space it evenly c erry Use it as a character It’s rare that your product not only fits your name but is the shape of a letter like the h shown above! Below, balls and other round objects are more common Also, try replacing part of a letter like a crossbar SUNRISE ik ko T YS! F U N AT T H E S U N R I S E G A L L E R I A of Design talk 0650 Before&After ® Design talk of BAmagazine.com i U X Web site A site of squares Whenever you repeat an element, color or arrangement at visible intervals, you create a pattern If the repetition is prominent, it can be used as a theme A theme is easy to “read” and memorable To illustrate, note how Parc Rittenhouse uses squares and springtime colors as the theme of its site: www.parcrittenhouse.com Small squares, big squares (Left) Five small squares form the navigation bar, and a big square headlines the page In each square, white text aligns to the lower left corner, creating pattern-making similarity Above, clicking a navigational square turns it white and moves its color to the headline square, which is also applied to the smaller heads on the page below it In contrast to all the straight edges, the organic logo is a leafy interrupter of Design talk 0650 Before&After Design talk ® BAmagazine.com of i U X Article resources Typefaces 6b 6a Bathroom Restoration design > remodel > restore NATIONAL PARKS VISITOR PROJECTION 07 1 916.555.4687 Adobe Jenson Pro Light 6c Myriad Pro Semibold 6d Helvetica Neue 73 Bold Ext 6e Helvetica Neue 45 Light Ext C50 M19 Y37 K0 C45 M55 Y70 K65 C29 M36 Y45 K42 10 C25 M30 Y37 K0 Images (a–f) iStockphoto.com a b c d e f w w w B a t h r o o m R e s t o r a t i o n c o m Adobe Garamond Regular Colors 10 6f Eye Shadow PERIWINKLE by Jann Haan Texture and flasp net exating end mist of it snooling Spaff forl isn’t cubular but quastic, leam restart that can’t prebast It’s tope this fluant chasible Silk, shast, lape and behast the thin chack Spaff forl isn’t cubular but quastic $18.00 USD JannHaanCosmetics.com of Design talk 0650 Before&After ® Design talk BAmagazine.com of i U X Article resources Typefaces 7a ik ko c erry Colors Trajan Regular | 65 pt C20 M75 Y70 K15 Zapfino One | 15 pt Helvetica Neue 35 Thin | 97 pt Helvetica Neue 45 Light | 11.5 pt (a–b) Myriad Pro Bold a) 12 pt, +350 letterspacing b) pt, +185 letterspacing Griffith Gothic Ultra Cond | 52 pt 7b Images (a–c) iStockphoto.com | a b c 7c SUNRISE T YS! F U N AT T H E S U N R I S E G A L L E R I A 5a 5b of Design talk 0650 Before&After ® Design talk BAmagazine.com of Subscribe to Before & After Subscribe to Before & After, and become a more capable, confident designer for pennies per article To learn more, go to http://www.bamagazine.com/Subscribe E-mail this article To pass along a free copy of this article to others, click here Join our e-list To be notified by e-mail of new articles as they become available, go to http://www.bamagazine.com/email i U X Before & After magazine Before & After has been sharing its practical approach to graphic design since 1990 Because our modern world has made designers of us all (ready or not), Before & After is dedicated to making graphic design understandable, useful and even fun for everyone John McWade Publisher and creative director Gaye McWade Associate publisher Vincent Pascual Staff designer Dexter Mark Abellera Staff designer Before & After magazine 323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995 E-mail mailbox@bamagazine.com www http://www.bamagazine.com Copyright ©2007 Before & After magazine ISSN 1049-0035 All rights reserved You may pass along a free copy of this article to others by clicking here You may not alter this article, and you may not charge for it You may quote brief sections for review; please credit Before & After magazine, and let us know To link Before & After magazine to your Web site, use this URL: http://www.bamagazine.com For all other permissions, please contact us of | Printing formats Design talk 0650 Before&After BAmagazine.com ® i U X Before & After is made to fit your binder Before & After articles are intended for permanent reference All are titled and numbered For the current table of contents, click here To save time and paper, a paper-saver format of this article, suitable for one- or two-sided printing, is provided on the following pages For presentation format Print: (Specify pages 1–9) For paper-saver format Print: (Specify pages 11–15) Print Format: Landscape Page Size: Fit to Page Save Presentation format or Paper-saver format Back | Paper-saver format Photo Name DesignTalk9 YES, I’M INTERESTED Different strokes Find an object with a good profile, trace it with the Pen tool (left), and apply a stroke You can combine parts of different photos Even easier is to stroke letters, numbers and dingbats, which require no tracing Strokes can be thin, wide, dotted, colored and so on (below) Super-fine lines are sublime Be artistic! • Outline • Wide line • Dotted line • Overlap Design Talk 9: Five Design Ideas 0650 FiveDesignIdeas A Site of Squares VISITOR PROJECTION 07 NATIONAL PARKS High-Style Multi-Caption Picture-Frame Cover design > remodel > restore Bathroom Restoration 916.555.4687 w w w B a t h r o o m R e s t o r a t i o n c o m of Before&After | www.bamagazine.com Artwork drawn with a single line (technically, a stroke) can convey looks from sublime to electric It can simplify a busy image and add interest to a plain one It’s a great way to salvage weak photos, and on the Web it makes extremely efficient use of bandwidth Image A line is fine Fun Lines Center it Classy cover is made with soft color, small type and plenty of open space Line widths, including the border, are all the same 0650 Design Talk 9: Five Design Ideas Multiple-image mats have neatly replaced those cockeyed arrangements hanging on our walls, and work equally well on our pages Note, right, the depth created by dark and light accents on the neutral-value field Cover Make a picture-frame cover Three Five Six Lip Gloss ROSE MIST by Marc Philips $25.00 USD Elesara and order is fay of alm A card whint not oogum or bont Pretty simple, glead and tarm Leam restart that can’t prebast it’s tope MarcPhilips.com Design Talk 9: Five Design Ideas 0650 Two Below, make your photos the same size, then arrange in rows, columns or groups symmetrically toward the center (stable, placid) or asymmetrically to one side (tense, exciting) Above, keep the type small, aligned with an edge or centered Been to the art store lately? Picture frames with multiple-image mats are hot! The clean, gridlike presentation looks as good on your wall as it does on your page Designers have been using grids forever, so let’s borrow back the idea for our next cover: VISITOR PROJECTION 07 NATIONAL PARKS One Layout Multiple captions in high style of Before&After | www.bamagazine.com JannHaanCosmetics.com $18.00 USD Texture and flasp net exating end mist of it snooling Spaff forl isn’t cubular but quastic, leam restart that can’t prebast It’s tope this fluant chasible Silk, shast, lape and behast the thin chack Spaff forl isn’t cubular but quastic Eye Shadow PERIWINKLE by Jann Haan Awhile back in DesignTalk 0638, we told you we love this multiple-caption technique, in which a photo is given several captions, not just one We like it for its big-picture, sound-bite value, and especially because every image has so many stories to tell Here’s a high-style take on it: Sheer translucency Glamour is about image, so start by making your photo wall-to-wall BIG, then set your captions atop it Use fine lines, a simple typeface and translucent fills, which yield a kind of airy, weightless quality To make the rectangles translucent, fill with light gray set to Multiply 0650 Design Talk 9: Five Design Ideas Signature Put a photo in your name Design Talk 9: Five Design Ideas 0650 F U N AT T H E S U N R I S E G A L L E R I A T YS! SUNRISE Use it as a character It’s rare that your product not only fits your name but is the shape of a letter like the h shown above! Below, balls and other round objects are more common Also, try replacing part of a letter like a crossbar c erry Sometimes a name and a product go together well The product can be pictured with the name or as part of the name Try it Words and pictures together can be stronger than words alone ik ko Use it as an interrupter The Bonsai tree is a visually descriptive, easy-to-”read” photo that interrupts the IKKO name Below, treat the photo like you would a letter, and space it evenly ik ko Web site A site of squares www.parcrittenhouse.com of Before&After | www.bamagazine.com Small squares, big squares (Left) Five small squares form the navigation bar, and a big square headlines the page In each square, white text aligns to the lower left corner, creating pattern-making similarity Above, clicking a navigational square turns it white and moves its color to the headline square, which is also applied to the smaller heads on the page below it In contrast to all the straight edges, the organic logo is a leafy interrupter Whenever you repeat an element, color or arrangement at visible intervals, you create a pattern If the repetition is prominent, it can be used as a theme A theme is easy to “read” and memorable To illustrate, note how Parc Rittenhouse uses squares and springtime colors as the theme of its site: 0650 Design Talk 9: Five Design Ideas 6a Article resources design > remodel > restore Bathroom Restoration 916.555.4687 w w w B a t h r o o m R e s t o r a t i o n c o m Eye Shadow PERIWINKLE by Jann Haan VISITOR PROJECTION 07 NATIONAL PARKS 10 6b 6c 6d 6e 6f 5a Typefaces Adobe Garamond Regular Adobe Jenson Pro Light Myriad Pro Semibold Helvetica Neue 73 Bold Ext Helvetica Neue 45 Light Ext Images (a–f) iStockphoto.com a b c d e f Typefaces Zapfino One | 15 pt Trajan Regular | 65 pt Helvetica Neue 35 Thin | 97 pt Helvetica Neue 45 Light | 11.5 pt (a–b) Myriad Pro Bold a) 12 pt, +350 letterspacing b) pt, +185 letterspacing b Griffith Gothic Ultra Cond | 52 pt Images (a–c) iStockphoto.com | a c C29 M36 Y45 K42 C45 M55 Y70 K65 C50 M19 Y37 K0 Colors C20 M75 Y70 K15 10 C25 M30 Y37 K0 Colors Design Talk 9: Five Design Ideas 0650 1 Texture and flasp net exating end mist of it snooling Spaff forl isn’t cubular but quastic, leam restart that can’t prebast It’s tope this fluant chasible Silk, shast, lape and behast the thin chack Spaff forl isn’t cubular but quastic JannHaanCosmetics.com $18.00 USD Article resources 7a ik ko 7b SUNRISE 5b of Before&After | www.bamagazine.com F U N AT T H E S U N R I S E G A L L E R I A T YS! c erry 7c 0650 Design Talk 9: Five Design Ideas Subscribe to Before & After Before & After magazine Before & After has been sharing its practical approach to graphic design since 1990 Because our modern world has made designers of us all (ready or not), Before & After is dedicated to making graphic design understandable, useful and even fun for everyone John McWade Publisher and creative director Gaye McWade Associate publisher Vincent Pascual Staff designer Dexter Mark Abellera Staff designer Before & After magazine 323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995 E-mail mailbox@bamagazine.com www http://www.bamagazine.com Copyright ©2007 Before & After magazine ISSN 1049-0035 All rights reserved You may pass along a free copy of this article to others by clicking here You may not alter this article, and you may not charge for it You may quote brief sections for review; please credit Before & After magazine, and let us know To link Before & After magazine to your Web site, use this URL: http://www.bamagazine.com For all other permissions, please contact us Design Talk 9: Five Design Ideas 0650 more capable, confident designer for pennies Subscribe to Before & After, and become a per article To learn more, go to http://www.bamagazine.com/Subscribe E-mail this article To pass along a free copy of this article to others, click here Join our e-list To be notified by e-mail of new articles as they become available, go to of Before&After | www.bamagazine.com http://www.bamagazine.com/email 0650 Design Talk 9: Five Design Ideas [...]... wide, dotted, colored and so on (below) Super-fine lines are sublime Be artistic! • Outline • Wide line • Dotted line • Overlap Design Talk 9: Five Design Ideas 0650 FiveDesignIdeas A Site of Squares VISITOR PROJECTION 07 NATIONAL PARKS High-Style Multi-Caption Picture-Frame Cover design > remodel > restore Bathroom Restoration 916.555.4687 w w w B a t h r o o m R e s t o r a t i o n c o m 1 of 5 Before&After... typeface and translucent fills, which yield a kind of airy, weightless quality To make the rectangles translucent, fill with light gray set to Multiply 0650 Design Talk 9: Five Design Ideas Signature Put a photo in your name Design Talk 9: Five Design Ideas 0650 F U N AT T H E S U N R I S E G A L L E R I A T YS! SUNRISE Use it as a character It’s rare that your product not only fits your name but is... T H E S U N R I S E G A L L E R I A T YS! c erry 7c 0650 Design Talk 9: Five Design Ideas Subscribe to Before & After Before & After magazine Before & After has been sharing its practical approach to graphic design since 1990 Because our modern world has made designers of us all (ready or not), Before & After is dedicated to making graphic design understandable, useful and even fun for everyone John... can be used as a theme A theme is easy to “read” and memorable To illustrate, note how Parc Rittenhouse uses squares and springtime colors as the theme of its site: 0650 Design Talk 9: Five Design Ideas 6a 1 7 8 9 Article resources design > remodel > restore Bathroom Restoration 916.555.4687 w w w B a t h r o o m R e s t o r a t i o n c o m Eye Shadow PERIWINKLE by Jann Haan VISITOR PROJECTION 07... space Line widths, including the border, are all the same 0650 Design Talk 9: Five Design Ideas Multiple-image mats have neatly replaced those cockeyed arrangements hanging on our walls, and work equally well on our pages Note, right, the depth created by dark and light accents on the neutral-value field Cover Make a picture-frame cover Three Five Six Lip Gloss ROSE MIST by Marc Philips $25.00 USD Elesara... & After magazine, and let us know To link Before & After magazine to your Web site, use this URL: http://www.bamagazine.com For all other permissions, please contact us Design Talk 9: Five Design Ideas 0650 more capable, confident designer for pennies Subscribe to Before & After, and become a per article To learn more, go to http://www.bamagazine.com/Subscribe E-mail this article To pass along a free... ROSE MIST by Marc Philips $25.00 USD Elesara and order is fay of alm A card whint not oogum or bont Pretty simple, glead and tarm Leam restart that can’t prebast it’s tope MarcPhilips.com Design Talk 9: Five Design Ideas 0650 Two Below, make your photos the same size, then arrange in rows, columns or groups symmetrically toward the center (stable, placid) or asymmetrically to one side (tense, exciting)... letterspacing b 6 Griffith Gothic Ultra Cond | 52 pt Images 7 (a–c) iStockphoto.com | a c 8 7 C29 M36 Y45 K42 C45 M55 Y70 K65 C50 M19 Y37 K0 Colors 9 C20 M75 Y70 K15 10 C25 M30 Y37 K0 Colors 8 Design Talk 9: Five Design Ideas 0650 1 1 1 4 5 Texture and flasp net exating end mist of it snooling Spaff forl isn’t cubular but quastic, leam restart that can’t prebast It’s tope this fluant chasible Silk, shast,... to others, click here Join our e-list To be notified by e-mail of new articles as they become available, go to 5 of 5 Before&After | www.bamagazine.com http://www.bamagazine.com/email 0650 Design Talk 9: Five Design Ideas ... dedicated to making graphic design understandable, useful and even fun for everyone John McWade Publisher and creative director Gaye McWade Associate publisher Vincent Pascual Staff designer Dexter Mark Abellera Staff designer Before & After magazine 323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995 E-mail mailbox@bamagazine.com www http://www.bamagazine.com Copyright