1 00:00:00,000 --> 00:00:05,780 [? Music ?] [Treehouse presents] 2 00:00:05,780 --> 00:00:10,570 [Exercise Your Creative] 3 00:00:10,570 --> 00:00:13,870 Do you ever find yourself repeating the same style and guidelines 4 00:00:13,870 --> 00:00:15,810 no matter what the project is? 5 00:00:15,810 --> 00:00:19,060 Would you like to broaden your designs but just don't know how? 6 00:00:19,060 --> 00:00:22,480 I'm Mat Helme, and in this episode of Exercise Your Creative 7 00:00:22,480 --> 00:00:26,590 we're going to use the power of chance to select our design guidelines. 8 00:00:26,590 --> 00:00:29,750 In this exercise, we will be designing a static web page 9 00:00:29,750 --> 00:00:31,990 for our dream web conference. 10 00:00:31,990 --> 00:00:35,000 Since the conference is fictitious, we will need to name it. 11 00:00:35,000 --> 00:00:37,380 I'm going to call mine Stop Visual Pollution 12 00:00:37,380 --> 00:00:39,180 or SVP. 13 00:00:39,180 --> 00:00:42,380 As for the design style, color palette, and location, 14 00:00:42,380 --> 00:00:46,020 we will leave that up to chance using the paper fortune teller. 15 00:00:46,020 --> 00:00:49,510 Now, before we start folding paper, let's get a list together 16 00:00:49,510 --> 00:00:51,400 with the following choices: 17 00:00:51,400 --> 00:00:55,040 4 favorite designers, 4 pleasing color palettes, 18 00:00:55,040 --> 00:00:58,180 and 4 possible conference locations. 19 00:00:58,180 --> 00:01:01,770 Again, this is your dream conference, so have fun with it. 20 00:01:01,770 --> 00:01:03,370 Let's take a look at what I put together. 21 00:01:03,370 --> 00:01:08,150 For my favorite designers I have Piet Mondrian, Keith Haring, 22 00:01:08,150 --> 00:01:11,650 Pablo Picasso, and Saul Bass. 23 00:01:11,650 --> 00:01:16,400 For my color palette I have chosen the following 4 color combinations: 24 00:01:16,400 --> 00:01:22,130 yellow, brown, red and white, green, blue, yellow and white, 25 00:01:22,130 --> 00:01:27,490 black, purple, orange and white, teal, blue, yellow and white. 26 00:01:27,490 --> 00:01:31,280 For the locations I have chosen Paris, France, 27 00:01:31,280 --> 00:01:36,200 Tokyo, Japan, New York, New York, and Sydney, Australia. 28 00:01:36,200 --> 00:01:40,190 Next, we simply want to set up a key for all of our choices, 29 00:01:40,190 --> 00:01:43,370 add numbers to the designers and locations, 30 00:01:43,370 --> 00:01:46,610 then use the first color in your combinations. 31 00:01:46,610 --> 00:01:49,680 This is the data we will need for the paper fortune teller. 32 00:01:49,680 --> 00:01:52,380 Now it's time to start folding some paper. 33 00:01:52,380 --> 00:01:57,300 For the following Origami demonstration, I'll be using a paper fortune teller template. 34 00:01:57,300 --> 00:02:03,290 For the first step, I will take the bottom left corner and fold it to the top right corner. 35 00:02:03,290 --> 00:02:08,080 Then take the bottom right corner and fold it to the top left corner. 36 00:02:08,080 --> 00:02:11,340 This will leave us with an upside down triangle. 37 00:02:11,340 --> 00:02:16,200 After making our creases, open the paper back up and rotate it 38 00:02:16,200 --> 00:02:18,050 so it's in a diamond shape. 39 00:02:18,050 --> 00:02:21,370 Then fold each point to the center of the paper. 40 00:02:21,370 --> 00:02:24,990 You will do this 4 times. 41 00:02:24,990 --> 00:02:30,700 Next, flip the paper over and place it in a diamond shape. 42 00:02:30,700 --> 00:02:35,110 Repeat the last step and fold each point to the center. 43 00:02:35,110 --> 00:02:41,590 After the last fold, we want to make sure the 2 center lines have a good crease. 44 00:02:41,590 --> 00:02:45,510 Lastly, place your fingers inside of the paper fortune teller 45 00:02:45,510 --> 00:02:48,310 and make sure we have good folds and creases. 46 00:02:48,310 --> 00:02:54,750 And that's it. We now have a paper fortune teller to select our design choices. 47 00:02:54,750 --> 00:02:58,390 Next, let's add in our key data to the paper fortune teller. 48 00:02:58,390 --> 00:03:02,670 On the outside, we will add 1-4. 49 00:03:02,670 --> 00:03:09,750 Then inside that the colors. 50 00:03:09,750 --> 00:03:14,240 Last, add the numbers 1-4 on the final flap. 51 00:03:14,240 --> 00:03:16,720 Now it's time for our random selection. 52 00:03:16,720 --> 00:03:21,700 To do this, let's get our new intern Dion to blindly select our design guidelines. 53 00:03:21,700 --> 00:03:23,240 Hey, Dion. Dion. 54 00:03:23,240 --> 00:03:25,300 Hey!>>I need your help with something. 55 00:03:25,300 --> 00:03:27,210 Do you think you can help me out?>>Okay! 56 00:03:27,210 --> 00:03:29,250 All right, can you pick a number 1-4? 57 00:03:29,250 --> 00:03:31,400 4.>>4, all right. 58 00:03:31,400 --> 00:03:33,700 1, 2, 3, 4. 59 00:03:33,700 --> 00:03:35,120 Can you pick a color next? 60 00:03:35,120 --> 00:03:37,630 Yellow. 61 00:03:37,630 --> 00:03:39,700 All right, yellow. What have you got? 62 00:03:39,700 --> 00:03:41,360 Number 1.>>Oh, yeah. 63 00:03:41,360 --> 00:03:45,020 Thanks, Dion.>>Okay! 64 00:03:45,020 --> 00:03:48,970 At this stage, chance has determined our design guidelines. 65 00:03:48,970 --> 00:03:54,470 To keep the ball rolling, I need to generate a list of fictitious content for our site. 66 00:03:54,470 --> 00:03:58,240 This will help us distinguish what assets we will need. 67 00:03:58,240 --> 00:04:00,430 The first thing we need to do is name the event. 68 00:04:00,430 --> 00:04:04,310 Again, I'm calling mine Stop Visual Pollution, or SVP. 69 00:04:04,310 --> 00:04:07,420 With that name, we need to create a logo. 70 00:04:07,420 --> 00:04:09,320 Next we will need a tagline for our event. 71 00:04:09,320 --> 00:04:14,250 I'm going to use something like "Join the aesthetic revolution in Paris." 72 00:04:14,250 --> 00:04:16,649 When is the design event happening? 73 00:04:16,649 --> 00:04:20,060 How about January 19th, 2013? 74 00:04:20,060 --> 00:04:22,920 Do we want to keep people up to date with social networks? 75 00:04:22,920 --> 00:04:26,240 Sure. How about linking our Twitter and Facebook? 76 00:04:26,240 --> 00:04:28,390 We will also need a link to get tickets. 77 00:04:28,390 --> 00:04:31,500 This will be our call to action or our CTA. 78 00:04:31,500 --> 00:04:33,740 Every event needs speakers. 79 00:04:33,740 --> 00:04:37,930 I'm going to make a list of, say, 6 speakers I would like to see 80 00:04:37,930 --> 00:04:40,580 and topics I would like them to speak upon. 81 00:04:40,580 --> 00:04:43,570 For the speakers, I have chosen Eric Spiekermann, 82 00:04:43,570 --> 00:04:48,470 George Lois, Jessica Hische, Aaron James Draplin, 83 00:04:48,470 --> 00:04:52,040 Shepard Fairy, and Banksy. 84 00:04:52,040 --> 00:04:56,050 As for the location, Dion selected it for us, Paris, France. 85 00:04:56,050 --> 00:04:58,100 We will also need a countdown. 86 00:04:58,100 --> 00:05:01,720 A countdown is always necessary for an event page to display urgency. 87 00:05:01,720 --> 00:05:06,110 Lastly, we will need to provide our attendees with some basic information 88 00:05:06,110 --> 00:05:11,930 like travel info, hotel info, and maybe a help button if they have any questions. 89 00:05:11,930 --> 00:05:16,510 By establishing this list of content, we are able to pinpoint the exact illustration 90 00:05:16,510 --> 00:05:18,470 we will need for the site. 91 00:05:18,470 --> 00:05:22,230 This speeds up the process when we move to research and sketching. 92 00:05:22,230 --> 00:05:26,360 Now that we have our list of content together and know the design style, 93 00:05:26,360 --> 00:05:29,120 let's gather some inspirational images. 94 00:05:29,120 --> 00:05:31,700 I want to generate 2 categories of images. 95 00:05:31,700 --> 00:05:34,850 The first is for the design style we are going to use. 96 00:05:34,850 --> 00:05:36,820 We will call it Saul Bass. 97 00:05:36,820 --> 00:05:39,650 The second category will be for the rest of the content 98 00:05:39,650 --> 00:05:42,090 such as location, items, and speakers. 99 00:05:42,090 --> 00:05:44,300 We will call this category Paris. 100 00:05:44,300 --> 00:05:47,420 I'm going to use Pinterest to gather all the images. 101 00:05:47,420 --> 00:05:50,640 It's a great way to generate a collection of images 102 00:05:50,640 --> 00:05:53,230 which you can share and collaborate with others. 103 00:05:53,230 --> 00:05:57,900 I like using the Chrome extension, Pinner, for Pinterest. 104 00:05:57,900 --> 00:06:02,160 You can simply right click on any image and add it to any board. 105 00:06:02,160 --> 00:06:05,360 This is a huge time saver. 106 00:06:14,960 --> 00:06:18,670 We now have all of our inspirational images pinned and ready to be printed. 107 00:06:18,670 --> 00:06:22,120 Currently we are unable to print through Pinterest. 108 00:06:22,120 --> 00:06:25,650 The workaround is simple. Let's save all of our images out. 109 00:06:25,650 --> 00:06:28,890 We can do this by simply saving the web page in complete 110 00:06:28,890 --> 00:06:31,450 and extracting the images. 111 00:06:31,450 --> 00:06:35,280 Instead of printing out each image individually I like to use the app 112 00:06:35,280 --> 00:06:37,530 called CollageIt Pro. 113 00:06:37,530 --> 00:06:42,100 This allows me to organize, size, and print all of my images. 114 00:06:42,100 --> 00:06:45,730 We are now ready for the next step, creating our inspirational environment 115 00:06:45,730 --> 00:06:47,460 with mood boards. 116 00:06:47,460 --> 00:06:50,920 After we have printed out all of our images using CollageIt Pro, 117 00:06:50,920 --> 00:06:54,010 let's piece together the 2 mood boards, 118 00:06:54,010 --> 00:06:58,350 the first with Saul Bass images, and the next with the Paris images. 119 00:06:58,350 --> 00:07:04,020 I'm using foam board as the surface and spray glue to apply the printouts. 120 00:07:04,020 --> 00:07:06,070 Perfect. Let's get ready to sketch. 121 00:07:06,070 --> 00:07:09,300 With pencil and paper, I want to simply start sketching 122 00:07:09,300 --> 00:07:11,720 with the inspiration pieces in front of me. 123 00:07:11,720 --> 00:07:16,340 I simply want to make sure I have sketched assets for each one of my content needs. 124 00:07:16,340 --> 00:07:19,890 I can use the list as a reference, which we created earlier. 125 00:07:19,890 --> 00:07:22,420 Don't be afraid to create more than you need. 126 00:07:22,420 --> 00:07:24,910 If you don't feel strong enough about certain assets, 127 00:07:24,910 --> 00:07:27,480 feel free to create extra assets. 128 00:07:27,480 --> 00:07:30,830 At this point, I'm feeling pretty confident that I have fulfilled the content needs 129 00:07:30,830 --> 00:07:33,850 and portrayed the design style of Saul Bass. 130 00:07:33,850 --> 00:07:37,510 Moving forward, I have to remember to keep my illustrations simple 131 00:07:37,510 --> 00:07:40,320 and unsymmetrically blocky. 132 00:07:40,320 --> 00:07:43,590 Let's run down the list to make sure we have everything. 133 00:07:43,590 --> 00:07:45,720 Logo, check. 134 00:07:45,720 --> 00:07:47,470 Social icons, check. 135 00:07:47,470 --> 00:07:49,700 Speaker's portraits, check. 136 00:07:49,700 --> 00:07:52,000 Location, check. 137 00:07:52,000 --> 00:07:55,110 Travel icon, check. Hotel icon, check. 138 00:07:55,110 --> 00:07:57,960 And help icon, check. Perfect. 139 00:07:57,960 --> 00:08:01,120 Now let's bring the images into Illustrator using our phone's camera. 140 00:08:01,120 --> 00:08:04,330 I will simply email myself the images. 141 00:08:04,330 --> 00:08:08,520 Let's import all of the images of the sketches and place them into the Illustrator file. 142 00:08:08,520 --> 00:08:15,270 Next, set up the swatches panel with the color palette Dion selected for us. 143 00:08:15,270 --> 00:08:18,430 Because Saul Bass's style is so minimal and blocky, 144 00:08:18,430 --> 00:08:23,350 I simply want to use the pen tool and trace my sketches. 145 00:08:40,919 --> 00:08:43,820 The key here is consistency. 146 00:08:43,820 --> 00:08:48,490 Try to keep the same look and feel for all of your assets. 147 00:08:48,490 --> 00:08:53,060 Once all of the assets have been established, let's get ready to lay out some wireframes. 148 00:08:53,060 --> 00:08:56,780 With my content list, let's construct a single page layout 149 00:08:56,780 --> 00:08:58,350 for our conference site. 150 00:08:58,350 --> 00:09:02,250 Our first step will be to separate all of the content into sections. 151 00:09:02,250 --> 00:09:04,840 The sections will be in this order: 152 00:09:04,840 --> 00:09:09,140 home, speakers, location, and info. 153 00:09:09,140 --> 00:09:12,920 Next, let's put the content into the appropriate sections. 154 00:09:12,920 --> 00:09:16,040 For the home section, let's add the logo to the top left. 155 00:09:16,040 --> 00:09:18,780 We read left to right, top to bottom, 156 00:09:18,780 --> 00:09:23,150 so that means the top left will most likely be the first place the user will view. 157 00:09:23,150 --> 00:09:26,290 Since this is a single page, I want to always give the user 158 00:09:26,290 --> 00:09:29,530 the option to connect socially and sign up for the event. 159 00:09:29,530 --> 00:09:33,700 This means I want to run the header fixed throughout the page 160 00:09:33,700 --> 00:09:37,340 and have the social icons and sign up within the header. 161 00:09:37,340 --> 00:09:40,520 Also, in the home section I want to have the following content: 162 00:09:40,520 --> 00:09:44,550 tagline, date, a visual indicator of where the event is, 163 00:09:44,550 --> 00:09:48,110 and an arrow indicating the user to scroll down. 164 00:09:48,110 --> 00:09:51,820 Since the eye will flow from top left to bottom right, 165 00:09:51,820 --> 00:09:54,370 I want to put my arrow on the bottom right corner. 166 00:09:54,370 --> 00:09:56,630 Next, we have the speaker section. 167 00:09:56,630 --> 00:10:00,370 This will be a list of speakers with the following content for each: 168 00:10:00,370 --> 00:10:04,870 name, talk title, and portrait of each presenter. 169 00:10:04,870 --> 00:10:09,190 For the location section, I want to list where the event is 170 00:10:09,190 --> 00:10:12,800 and have some cool visual assets for the location. 171 00:10:12,800 --> 00:10:15,340 This should really inspire the user to sign up. 172 00:10:15,340 --> 00:10:18,180 The last section will be the info section. 173 00:10:18,180 --> 00:10:21,060 This is where the countdown bar and helpful info goes 174 00:10:21,060 --> 00:10:24,190 like hotel, travel, and help. 175 00:10:24,190 --> 00:10:27,370 Lastly, let's block out a footer area, and that's it. 176 00:10:27,370 --> 00:10:29,430 Our wireframe is complete. 177 00:10:29,430 --> 00:10:32,650 Let's take a pic and bring it into Illustrator to create a static layout 178 00:10:32,650 --> 00:10:34,550 with our assets we created. 179 00:10:34,550 --> 00:10:37,810 To begin, let's open up our assets file we created 180 00:10:37,810 --> 00:10:40,300 and import our wireframe image. 181 00:10:40,300 --> 00:10:42,940 Now we have our assets, and we have our color palette. 182 00:10:42,940 --> 00:10:46,440 The only thing left to do is find the appropriate fonts for our page. 183 00:10:46,440 --> 00:10:50,170 Since we are basing our design off of Saul Bass, 184 00:10:50,170 --> 00:10:53,480 it would only make sense to use a font similar to his lettering. 185 00:10:53,480 --> 00:10:55,860 Hitchcock is that similar font. 186 00:10:55,860 --> 00:10:59,590 The typeface is nearly identical to Saul Bass's lettering. 187 00:10:59,590 --> 00:11:05,380 For a secondary font, I'm going to use Peralta from Google Web Fonts. 188 00:11:05,380 --> 00:11:11,440 It has a fun and playful feel and complements the Hitchcock font very well. 189 00:11:11,440 --> 00:11:15,660 With the fonts installed, I'm now ready to start the layout. 190 00:11:15,660 --> 00:11:20,380 First, let's create stacked blocks for each section. 191 00:11:29,540 --> 00:11:34,650 Then put the appropriate content in each section. 192 00:12:07,870 --> 00:12:12,980 Lastly, position each piece of content as you feel fit. 193 00:12:12,980 --> 00:12:16,480 This may take some time as you will tweak and position the size 194 00:12:16,480 --> 00:12:18,600 of each object. 195 00:12:18,600 --> 00:12:23,360 Keep reminding yourself to keep the layout simple and blunt. 196 00:12:23,360 --> 00:12:26,900 There we have it. Our final layout. 197 00:12:58,000 --> 00:13:01,080 When designing with chance, you're really able to push yourself. 198 00:13:01,080 --> 00:13:04,140 We took a simple project of creating a web conference page 199 00:13:04,140 --> 00:13:07,130 and gave it specific design guidelines. 200 00:13:07,130 --> 00:13:11,850 In our next episode, we're going to take our static layout and bring it to life. 201 00:13:11,850 --> 00:13:15,930 As always, have fun and exercise your-- 202 00:13:15,930 --> 00:13:20,410 Creative. 203 00:13:20,410 --> 00:13:22,460 Nice. 204 00:13:22,460 --> 00:13:24,460 [Exercise Your Creative]