Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
The Future of the Web is Printed34:39 with Chiara Aliotta
Style guides are a hot topic in web design today. On the web, a project already delivered can now be handled and further developed by new web designers and developers, as a company or project progresses over time. So creating some kind of documentation is crucial in order to maintain a consistent style and prevent parts of the work that were previously done from getting lost. Style guides contains important, fundamental principles that have been helping graphic designers create beautiful messages in print for a long time. Thousands of theories and blog posts on how to pair typefaces or how to use grids have been extensively discussed in many old, fantastic books about print that many young web designers have never heard of. Chiara argues that print design, which is often declared long-dead and forgotten, is today teaching us how to deliver great, functional websites that look consistent on all modern devices. In this talk she will take you on a journey to the 'Lost CMYK World'. She invites you, the audience, to travel with her, discovering the beauty of 'traditional' graphic design as a way to inspire and create new concepts for your next web projects. After this talk you will look at the RGB World with fresh, new eyes.
[MUSIC] 0:00 [APPLAUSE] >> Thank you, 0:12 good afternoon. 0:15 So before I start I'd like to thank the organizers for the warm welcome. 0:20 For the way you organize these events is really incredible what they have done. 0:27 Every single detail was just perfect. 0:32 So I hope you are having a really nice time here. 0:36 As I do. 0:40 As you can see 0:41 from the title of this presentation today we are now going to talk about the future. 0:44 Oh better say today we are going to talk about the future but 0:48 from a different and completely different point of view, the past. 0:53 I consider myself a visional person but even visionary people, 0:59 like Robert Zemeckis, director of Back to the Future, predict something wrong. 1:07 In 2015, we were supposed to dress like this, and 1:13 to hover short distances using a flying skateboard. 1:17 I still hope we can make it, there is still a few months left. 1:22 [LAUGH] But, keep for sure predict something correctly 1:25 that we are going to use glasses to receive phone calls or 1:30 interact with the reality around us. 1:35 So just the one to set the wrong expectation. 1:40 I don't have a De Lorean parked outside this venue. 1:43 And my name is not Marty McFly. 1:47 I'd like to introduce myself. 1:50 So my name is Ciano Liotta. 1:51 And I am an Italian designer living on a beautiful island in 1:55 the middle of the Aegean Sea in Greece. 1:59 I have a big passion for everything related in illustration and 2:03 I have a collection of children's books and I love illustrating by hand and 2:08 I love everything related to typography. 2:13 In fact I can go around cities that I visit and 2:16 take pictures of everything that I like from vintage signs or windows. 2:21 Anything that just inspire me. 2:29 So the world actually is my inspiration. 2:31 And then I use the computer as a canvas. 2:35 I am also founder of my own agency, until Sunday. 2:40 We work developing great brands. 2:44 We try our best to make feel our clients welcome, 2:48 like it's a Sunday morning, like you welcome Sunday morning. 2:52 And I also do my brand manager. 2:58 My daily life is implied that I work for 3:00 a lot of digital, all the things application websites. 3:03 Everything's digital but it's still like physical things. 3:07 Like writing my deadlines or 3:11 organize my day on my own agenda which is a physical agenda. 3:14 As an Italian, I like tea >> [LAUGH]. 3:19 >> Yeah, that's strange, I know. 3:23 I do love tea. 3:25 We have leer. 3:26 I have a lot of tea when I work, 3:27 especially when it comes with rich tea biscuits. 3:31 You may know what I'm talking about, or that's waffles. 3:33 And oh, yeah. 3:39 By the way I have a cat. 3:40 It is the most famous cat on Instagram and Facebook. 3:42 If you just follow me you will find thousands of picture of him. 3:45 And he's the reason why we stopped having the clock in our office. 3:49 Because if you have a cat you know that they know when it's time to have lunch, 3:54 when it's time to have a break, and when it's time to close your computer and 3:58 go to dinner because you need to feed them. 4:02 And there's no way you can snooze him, 4:04 he will meow all the day long until you feed him. 4:07 So that's me in brief. 4:12 And let's start talking about a presentation of today. 4:13 And how this idea came out. 4:20 It was 2013. 4:23 And I was a keynote speaker at an event, a Joomla event. 4:27 And maybe you're not aware but Joomla is a CMS platform, 4:32 quite known in the market. 4:39 The audience of those events are programmers and developers. 4:44 So I am usually a minority. 4:48 I am, we are just three designers and we try to be aware that we are in enemy seas. 4:50 But the topic of my talk at that time was really interesting. 4:58 Because it was about how designers and 5:03 developers can work together without fighting. 5:09 I most of the time imagine the designer and the developer stay on top of 5:17 two different mountains, looking at each other's works and rarely communicating. 5:22 During the web process, this is not really what you want. 5:27 Because this lack of communication most of the time 5:35 creates problems in terms of the final project. 5:42 What do I mean? 5:44 What I mean is that most of the time you end up disappointing the client. 5:46 Disappointing the people that are working with you. 5:55 And also, if you think about the website or any part of your following with your 5:58 team, you're going to disappoint the final users. 6:03 Because we need to consider that the client is not really the final user that's 6:06 going to use, really, the website, but all the other people that are going 6:10 actually to browse the website and use it for their for their needs. 6:14 So at the time, this talk was a little bit, probably a step ahead of its time. 6:20 Because I was talking about standards, I was talking about rules. 6:26 And everybody was looking at me like, whatever you have smoked was really good. 6:31 Because you are saying things I don't understand. 6:35 And it was just 2013. 6:38 So just two years ago. 6:40 Now things are a little bit different. 6:43 Why? 6:46 We have style guides. 6:47 I know you are aware of what I'm talking about. 6:49 And I'm so happy because at that time in 2013 when I was talking about standards. 6:53 People were like but this is not possible. 7:01 I mean it's difficult. 7:03 How can you actually create rules for a developer that similar to designers? 7:05 And how can be helpful for both of us? 7:10 And I can say the saga finally brought this for I mean make this happening. 7:14 Style guides are really important tools. 7:21 And has been around in print for many, many years. 7:24 I will say centuries. 7:28 With a style guide you establish and enforce the styles. 7:29 You name your brand, stewardship. 7:34 You create consistent design that is easy to maintain 7:36 after as soon as you developed it. 7:41 And you most of all, are able to improve communication between people. 7:44 If you think about, wherever there is an organization, 7:50 wherever there are people working together, you need to set rules. 7:53 Style guide is born to do exactly this work. 7:59 You would be surprised how old they are. 8:06 The first star guide they print can remember was printed in 1893. 8:08 And it was for the university press of, Oxford University Press. 8:15 And they're called the arts rules. 8:20 Oras Horus Hart was working for the University Press of Augsburg, 8:23 and he created a really simple A-force spreadsheet with some rules that today 8:29 are still in use, and the most notorious styles that you can find for print. 8:35 This set things like grammar, 8:42 punctuation, and how you need to write for in general for print. 8:44 How you need to create the visually out. 8:50 And now the book, now his book it start, it was just a simple a form and 8:53 now is a real book. 8:58 And the last version was published in 2012. 8:59 And also lawyers needs style guide. 9:04 For example, the blue book was published in 1939 to 9:08 collect all the legal citation system of the United States. 9:12 Until today it's the most famous book among people that are working on legal, 9:19 they're working on legal systems, they are involved in legal professions. 9:23 And because it's so famous, 9:28 in 2012 they created a digital version of this style 9:31 guide that was included inside every book up. 9:37 So that people could easily check on their mobile devices. 9:42 And chemistry too. 9:48 The American Chemistry Society released 9:49 it's first style guide in 1986. 9:54 And to write because they want to improve the way scientific 9:58 communication was written and any kind of documentation. 10:02 So they published this book in 1986 and now we are in the sixth edition. 10:07 The last one was published in 2006 and I'm sure you love beer. 10:13 You're gonna show this tonight and I'm sure you're gonna have a lot of beers. 10:19 But I want you to think about that also to brew the perfect beer, 10:22 you need style guides. 10:26 The beer judge certification program released the first style guide in1985. 10:29 They used those standards to select more than 10:36 1 million beers and ranking them. 10:41 Now, the last style guide was released at the beginning of 2015, so pretty new. 10:46 So as you can see, actually, 10:54 style guides can be applied on anything, any kind of field. 10:55 And finally, we can enjoy the fact the we have style guides also on web. 11:00 And it's funny, because the web has grown so fast, and 11:06 it was forced to borrow rules from print. 11:11 And this is where our story and our journey is going to start. 11:17 Most of the design principles, like brand identity, 11:20 like typography, like layout, and 11:25 how we display images, and how we work with them, 11:29 actually come back to century ago when print was founded. 11:33 You would be so surprised how print can be so relevant even today and 11:39 how actually you can be inspired by print and 11:44 on print publishing to get the best for your web project. 11:48 So we are now going to travel together. 11:54 We are now going to embrace this traveling time and space. 11:58 And we're going to see how actually the CMYK World 12:04 can inspire the LGB world, how print can actually marry digital. 12:10 So we need to jump back in time and in place also. 12:17 We are in Germany, 1906. 12:24 Peter Burns was a design consultant for 12:28 the German electrical appliance company, AG. 12:30 The AG needed that time a logo. 12:35 But Peter Burns was a visionary person saying no, you don't need a logo. 12:38 You need a corporate identity. 12:42 And this was the first time the word corporate identity existed. 12:45 It was the first time that a company had a corporate identity, a unified system for 12:50 anything related to the company itself, so the corporate. 12:56 And he took every aspect from advertising, from logo, 13:00 from colors and typography and then move everything for 13:04 advertising, packaging, anything related to the company. 13:09 Today brand guidelines and 13:13 identity are widely spread on online publishing. 13:16 And you can find really great style guides where you 13:22 can understand how to use a logo line, a different background, how much space you 13:28 need to keep around the logo and what kind of color you should apply. 13:33 When? 13:38 How? 13:39 How is the interaction of colors in a user interface? 13:39 And so on. 13:42 But going on, moving forward. 13:44 1947. 13:47 You would be really surprised how old Penguin Books are. 13:49 In 1947, Jan Tschichold joined Penguin Books. 13:54 He is a German typographer. 14:00 It was quite all the at that time. 14:02 But he worked for two years and a half for Penguin Books. 14:05 And when he left, he gave them a specific 14:09 set of rules that were contained inside the Penguin composition rules. 14:15 Penguin Book was published in 1935. 14:21 It was a time when books were really expensive. 14:22 And Allen decided it was good to have a set of mass production books, 14:26 novels, anything, so that people can buy. 14:34 They were affordable. 14:38 When you want something that is easy to produce and must be affordable, 14:39 you really need to have standards. 14:44 Otherwise, everything starts to be really expensive. 14:47 Think about when you customize things on web. 14:50 When you start to customize the price rise up so the client needs to 14:53 pay a little bit more because you are giving them an extra service. 14:57 Same in print. 15:02 So Jan Tschichold arrived at Penguin, he took all the design. 15:03 He redesigned over 500 different books. 15:08 He redesigned all the standards related to how you can create the cover. 15:11 For example, it introduced the golden ratio, so 15:16 now the three band is what we see right now. 15:19 He also introduced Eric Gill's Gill sans. 15:23 And many other typefaces. 15:26 He was a really great typographer, so he knew what he was talking about. 15:27 He knew that he was going to do something great, and in fact today, 15:31 Penguin books is celebrating 80 years old and we all recognize this brand. 15:35 We all know who they are and they can merchandizing, 15:42 and you know what, it's because they have a really strong guidelines, and 15:45 because they have a really strong brand identity. 15:49 You can stop them everywhere in every part of the world, 15:52 because they know how to present themselves. 15:55 They have a really strong identity. 15:58 And when we move online publishing, things get a little more complicated. 16:03 Style guidelines needs to be a little bit more comprehensive. 16:09 That's why I choose Monocle. 16:14 Monocle started as a magazine. 16:17 I hope you all know this magazine. 16:20 It's a lifestyle magazine Tyler Brûlé founded in 2007. 16:23 You may know him because he also was the founder of Wallpaper. 16:29 So [COUGH] when he started this launch the magazine. 16:35 But it also had rules. 16:38 So you all recognize Monocle by the black color, by the yellow, 16:40 and the use of Plantin typeface together with Helvetica and other typefaces. 16:47 You can also recognize the magazine by the way they use headings and 16:54 hierarchy and the way they use photography. 16:59 There are a lot of things coming together in this magazine. 17:02 And how the magazine, the print magazine, is so 17:06 similar to the web or publication is also amazing. 17:10 The print magazine is an extension of the online publishing or vice versa. 17:17 [COUGH] Today, Monocle is what is called a global media brand. 17:23 That means that they were able to extend their brand on everything. 17:29 They have a retail, they have a shop, and 17:34 you can see the brand even applied to the shop. 17:37 They have a series of different broadcast components that they use. 17:41 And what they did is to, actually with all these single elements, 17:45 we're able to give even more strength to their brand. 17:49 So that today, Monocle is not just a brand, it's a lifestyle. 17:54 In fact there is a big community behind it that wants to lead the Monocle lifestyle. 17:59 And if you know Marty Neumeier, he's a quite really famous brand [COUGH] guru, 18:05 he said that if you have a parade, you have a brand. 18:11 When you have a community behind you, you have a brand. 18:16 And now about typography. 18:26 Typography is really an extremely important element in our projects, 18:28 whether it's print or online publishing. 18:32 We need to go back to 2006, I still remember how I was 18:36 designing website in 2006. 18:42 Do you remember? 18:47 No? 18:50 Yes. 18:51 I think you know what I'm talking about. 18:52 In 2006, there were really few typefaces available. 18:54 And there was also a really nice talk about Oliver Reichenstein. 19:01 Not talk, sorry. 19:07 A blog post by Oliver Reichenstein. 19:08 Oliver Reichenstein is the founder of Architecture Information, 19:10 a Japanese company, and he wrote this blog post at that time. 19:15 Web design is 95% typography, period. 19:19 And you know that what we are talking about. 19:23 When we talk about typography we are talking how people read and 19:26 we are talking mostly how people read online, 19:30 which is completely different how people read in print. 19:32 So we need to go back in 1966 and I want to show you 19:37 a really great booklet designed that time by Wim Crouwel. 19:42 He was a Dutch designer, and he created visual illustration 19:47 of this book of poetry of the poet Remco Campert. 19:54 In this book you can see it's a really nice type of book. 20:00 Big headings, he was able to underline keywords. 20:05 It was creating really nice plain around the page with typography. 20:10 He's using helvetica. 20:15 And you can really catch it was an emphasizing concept, 20:18 picking out key words and use them big around the page. 20:22 So it's quite interesting way of presenting a poem. 20:25 And at that time in Crowell, for we are in 1966, 20:30 he was considered like a modernist. 20:36 And traditionalists were looking at him and 20:40 people like him like they were encouraging illiteracy and drug abuse. 20:45 1966 is just 50 years before, so not that far. 20:52 Today, we can see that this kind of elements can be easy to apply in a lab. 20:58 And according to Jacob Nielson, he's an expert at in useability. 21:04 He said that when if you want people to read your tax online, 21:10 you need to be able to give them the possibility to scan the page. 21:14 People don't read words by word as they do in print. 21:20 They scan the page, they look for what they need and 21:23 then, you have like three seconds, which is nothing, 21:26 to let them perform the action you want them to perform. 21:31 This is a really nice website by a French company called [FOREIGN]. 21:36 And you can see some important elements applied in typography. 21:41 They were able to create big typography around on the front page. 21:46 Like underlining important key words. 21:50 And they are able to create hierarchy. 21:56 Hierarchy is really important if you want people to scan the page. 21:58 When the people understand that this is in headings, the other is a leading text, 22:02 and then you have paragraphs, and then you have citation and so on. 22:06 When you create bullet lists, you actually help people to read the content. 22:11 You don't have so much time so you have to go straight to the point. 22:16 And don't forget to front load your content. 22:20 When you want people to read your content and you want them to perform an action, 22:25 it's always good you have everything above the fold. 22:30 Which, by the way, is a word that comes from designing newspaper, above the fold. 22:33 So, and when we talk about typography and when we talk about identity. 22:39 Of course they don't live alone. 22:45 They need to live on a page somehow. 22:48 And you need to balance them as well. 22:51 So when we talk about layout, usually we talk about grid system. 22:54 I'm sure you all use Grids on web. 22:59 Who is using Grid? 23:02 Yeah. I use Grid. 23:05 I use Frameworks. 23:07 I use Moosetrap, but there are many people who prefer Formation better. 23:08 So there are many people. 23:15 Or you have done maybe your own grid for online things on your webpage. 23:16 And we not quite knew on print. 23:21 We need to wait until the middle of the 20th century, 1959. 23:25 That's the time when the grid system was applied to print. 23:32 And we need to wait for Joseph Mueller Brockman. 23:36 And he was the first person talking about a flexible brain system, 23:40 which is what we are using right now. 23:45 It's no different, actually I invited you to look for 23:47 this book, they're really really interesting. 23:50 You can really get inspired by his teachings. 23:53 And so talking about grid. 23:57 What are they doing? 24:01 For most developers grid, for most developer well I will say for 24:02 most web designers grid is just a how. 24:06 Because if you're not used to use them probably you will be like, I don't know. 24:11 Whatever it is, I will just create a boxy design. 24:16 And we'll be fine. 24:19 Developer will know what to do. 24:20 But if you know how to use in a smart way to grid, 24:22 you can create really astonished websites. 24:25 So we need to go back in time in 1926. 24:30 This is the time when Karen Tigger. 24:35 He was a Czech designer created this booklet called Abeceda, the alphabet. 24:38 In this booklet you can already see how he was able to break the grid. 24:46 I was able to create consistency of how he's moving the picture around the pages. 24:51 He's moving the illustration around the pages but 24:57 still you can feel that kind of familiarity between the different pages. 25:00 You can still understand that those pages belong to the same book. 25:05 Was really good. 25:10 And this booklet was considered really provocative. 25:11 We need to think this. 25:14 We are in 1926. 25:16 And he was using the picture of women that at the time was considered naked. 25:18 So, she was a dancer and she was playing with pictures and 25:23 she was playing around really in the background in shorts. 25:28 So it was a really provocative book at that time. 25:33 And today, using green could be a really interesting thing, 25:36 especially because they are really interesting tools. 25:41 And I found that magazine online about fashion and 25:44 lifestyle are really experimental. 25:48 And I advise you to have a look at the fashion magazine online, 25:51 mostly because they are inspired by the print version of the same magazine. 25:55 So this is an interview Magazine, it's a fashion magazine. 26:01 And if you check this website, they have a really strange way to display content. 26:05 You balance content inside a white page. 26:09 And each page is different. 26:13 But still you feel like there is a kind of consistency. 26:14 And the consistency is due by the use of the grid. 26:18 It's just a simple 6-columns grid and 26:23 they are able to break it and create a really fluid layout. 26:26 So when you think about grid, don't just think about a box design. 26:30 Don't just think to align things perfectly. 26:35 Play around. 26:38 Just try to break it. 26:39 Once you find the grid, try to break it. 26:40 Try to be different. 26:43 Don't be boxy. 26:46 Don't be rigid. 26:47 And do you know this magazine? 26:50 It's a news magazine, Bloomberg Business? 26:51 Well, Don Depolski is the editor of this magazine, it was released last year. 26:54 This is a magazine about politics, news, really serious stuff. 27:02 He was playing around with the greed. 27:08 In fact when he released a really nice, it is a really nice interview 27:11 to Wired Magazine and you'd say, "When I designed Bloomberg Business I 27:16 wanted to show that you can create a really interesting news magazine and 27:21 going out the constraints, thinking a little bit out of the box. 27:27 Thinking a little bit out of the constraints of the greed. 27:32 As you can see, you can really read the grid as well. 27:38 I mean, you can already see on this box it says here is a 6-column grid. 27:42 But he's able to break it, to span images in six columns rather than one, 27:47 to span texts in different columns as well. 27:52 So this is a really nice way to engage with your readers. 27:56 When you're able to create this subtle balance between the elements on your page. 28:01 And now, let's talk about images. 28:09 And images are really important element when we work on the website. 28:12 And also in print. 28:17 But for print it was a quite difficult path. 28:19 We need to remember that photography was not that easy in print, 28:22 especially because of created first film in 1906, so 28:27 it was really, sorry 1904, but it was a really, really difficult process. 28:33 It took ages, centuries, to have photography in print. 28:39 For this reason I choose a really great Dutch designer 28:44 that in 1931 created this booklet that was target at clients for 28:49 interests having completely different advertising campaign. 28:55 So we are in 1931 and this is the dot designer Pete Schwartz. 29:02 He was a really great genius when it comes to photography. 29:07 He was a photographer himself, and output this, 29:12 looks to you quite like yeah, oh I opened in design, 29:15 I would put inside some picture, change color in Photoshop, done, five minutes. 29:20 This was a lot of work at that time. 29:24 Photo composition was really difficult. 29:27 Everything was done by hand. 29:29 Everything was positioned by hand so a lot of work and Pitswear was a great designer. 29:31 It was a great, it was great to execute this kind of work. 29:37 Probably the only one at the time. 29:42 So he was using, you can see already in this booklet, Reclaim. 29:45 You can see the use of timelets, the font used indifferent sizes. 29:49 He was playing with images a lot, creative composition, changing color. 29:54 Cutting them in different shapes, using them big. 29:59 So that was difficult work for that time. 30:02 He was already setting a really great mood in this booklet. 30:07 You can already perceive the mood for this booklet, it was quite experimental. 30:12 Talking about experimental things, 30:17 you can create really nice websites using images and illustrations. 30:19 You can set to really interesting mood here using the right images. 30:23 Think about images and rules. 30:28 Material design, for example, dedicate like two pages just only 30:31 to define what kind of images you need to use, what kind of icons you need to use, 30:35 when you design for the application. 30:40 The rule is that you need to be really careful when you 30:44 decide to use images on your website. 30:47 Because they express a concept. 30:50 You need to be careful what kind of concept the image you're using right 30:52 now for your website is going to express. 30:57 If it's connected to the brand, 30:59 it's connected with the values of the brand or the website. 31:02 So for example this is a really nice website of a festival French Canadian 31:06 festival called [FOREIGN]. 31:11 I need some water. 31:16 And you can already see that the station song, already set the song on the website. 31:20 You already understand you're not going to listen to 31:28 classic music on this website, right? 31:31 It makes sense that probably it's going to be a little more experimental. 31:33 You will understand it by the color of the illustration, the characteristic, 31:37 the way they are designed, when you open a webpage, they already make you understand 31:41 that you're coming to this festival, it's going to be something different. 31:47 It's not going to be the grandma festival. 31:51 In talking about images and about digital. 31:56 You can be really experimental when it comes to online publication, 32:01 because in print, everything is a little bit static. 32:06 You may consider, some people may consider print boring. 32:10 I don't, because I like, I enjoy so much creating printed stuff. 32:13 But, for example, this magazine is using images in a really nice way, and 32:17 it's combining online with print, in really interesting ways. 32:22 So they're using magazine as a normal fashion magazine, 32:27 they're using normal images as a normal fashion magazine but then you 32:30 would be surprised because those images you can move them all around the page. 32:34 You can create your own magazine 32:39 because you can enlarge an image based on the way you want to read them. 32:41 So the magazine becomes your magazine based on your tastes and 32:47 your interests, so you can change things around. 32:50 And this is the beautiful thing about digital, 32:53 because you can really have a strong interaction with the user. 32:55 They can play with things, so the website again is completely different from what 32:59 you have designed, the reason why you need style guides. 33:04 So. 33:08 Talking about digital and we have seen that digital, the digital here 33:11 is really pushing the boundaries today and I'm sure in these talks. 33:16 Of the talks of today show you how actually we are going really far away 33:22 and it's not we are not far from the time when we will be able to 33:28 answer phone calls with a blink of our eyes or a snap of our fingers 33:33 but print is still here and is gonna stay for 33:40 a long time and there are a lot of things you can still learn and 33:45 if you think about all these things that we are talking about digital. 33:49 They look so new so like, really, from the future, but 33:54 actually, they're coming from the past. 33:58 It's just an evolution process, and 34:01 it's like what the scientists call the law of transformation. 34:04 And I want to close the presentation with this beautiful sentence by 34:11 the scientist Antoine Lavoisier. 34:16 They say nothing is lost. 34:18 Nothing's created. 34:20 Everything is transformed. 34:22 Thank you so much. 34:25 [APPLAUSE] 34:26 [MUSIC] 34:32
You need to sign up for Treehouse in order to download course files.Sign up