1 1 00:00:01,280 --> 00:00:05,854 Welcome to the first lecture about web design. 2 2 00:00:05,854 --> 00:00:09,848 I hope you already downloaded your copy of the course ebook. 3 3 00:00:09,848 --> 00:00:13,006 If you didn't, you should do that right now. 4 4 00:00:13,006 --> 00:00:15,444 It is in the previous lecture. 5 5 00:00:15,444 --> 00:00:18,741 So besides all the things you will learn in the course, 6 6 00:00:18,741 --> 00:00:22,340 I also share a lot of resources with you in the course ebook 7 7 00:00:22,340 --> 00:00:25,986 as we go over the different topics of this course. 8 8 00:00:25,986 --> 00:00:29,771 This will make your life as a web designer a lot easier. 9 9 00:00:29,771 --> 00:00:32,975 This ebook actually contains material that is not covered in 10 10 00:00:32,975 --> 00:00:35,831 this course, but in my other course, 11 11 00:00:35,831 --> 00:00:39,221 which is about web design and web development. 12 12 00:00:39,221 --> 00:00:42,554 So take a look at that material as well. 13 13 00:00:44,097 --> 00:00:46,977 Now before we start, let's first distinguish 14 14 00:00:46,977 --> 00:00:50,018 between web designer and web developer. 15 15 00:00:50,018 --> 00:00:51,505 The designer is the one who creates 16 16 00:00:51,505 --> 00:00:54,221 the look and feel of the web site. 17 17 00:00:54,221 --> 00:00:57,867 The developer then actually builds a web site based 18 18 00:00:57,867 --> 00:01:00,653 on the design from the designer. 19 19 00:01:00,653 --> 00:01:02,975 A front-end developer uses languages 20 20 00:01:02,975 --> 00:01:06,017 such as HTML, CSS, and JavaScript 21 21 00:01:06,017 --> 00:01:07,875 for the front-end which is 22 22 00:01:07,875 --> 00:01:11,056 the visible part of the web sites. 23 23 00:01:11,056 --> 00:01:13,703 Now the lines between designers and developers 24 24 00:01:13,703 --> 00:01:16,480 are becoming more blurred as learning to code 25 25 00:01:16,480 --> 00:01:18,593 is getting easier for designers 26 26 00:01:18,593 --> 00:01:22,470 and designing is getting easier to developers. 27 27 00:01:22,470 --> 00:01:25,884 So if you're already familiar with HTML and CSS, 28 28 00:01:25,884 --> 00:01:29,297 or Photoshop or some other graphical software, 29 29 00:01:29,297 --> 00:01:31,805 you can take the guidelines and rules you will learn 30 30 00:01:31,805 --> 00:01:34,521 in this course, and start using them today 31 31 00:01:34,521 --> 00:01:37,726 to design beautiful web sites. 32 32 00:01:37,726 --> 00:01:41,464 Now there's actually a good reason why it's getting easier 33 33 00:01:41,464 --> 00:01:43,693 to get started with web design. 34 34 00:01:43,693 --> 00:01:46,271 And I'm talking about flat design, which is 35 35 00:01:46,271 --> 00:01:49,243 the big, new design trend popularized 36 36 00:01:49,243 --> 00:01:51,160 by Microsoft and Apple. 37 37 00:01:52,215 --> 00:01:55,141 The introduction of flat design completely changed 38 38 00:01:55,141 --> 00:01:57,834 the way we design today. 39 39 00:01:57,834 --> 00:02:01,758 I will explain this based here on Apple's iOS 40 40 00:02:01,758 --> 00:02:04,289 that we can see here in this picture. 41 41 00:02:04,289 --> 00:02:07,215 So on the left side, you have the old iOS6, 42 42 00:02:07,215 --> 00:02:08,496 with all those shadows, 43 43 00:02:08,496 --> 00:02:12,385 color gradients, textures, and bubbles. 44 44 00:02:12,385 --> 00:02:16,147 On the right side, the new iOS7 look and feel. 45 45 00:02:16,147 --> 00:02:18,376 Now flat design gets rid of all 46 46 00:02:18,376 --> 00:02:21,720 those shadows, color gradients, textures, 47 47 00:02:21,720 --> 00:02:24,971 and so on, leaving us with a two-dimensional design 48 48 00:02:24,971 --> 00:02:28,245 without losing their functionality. 49 49 00:02:28,245 --> 00:02:30,451 Most people perceive flat design 50 50 00:02:30,451 --> 00:02:33,887 as being simple, clean, and modern. 51 51 00:02:33,887 --> 00:02:35,815 I personally think that interface on 52 52 00:02:35,815 --> 00:02:38,462 the right side looks really much cleaner 53 53 00:02:38,462 --> 00:02:40,545 and more elegant as well. 54 54 00:02:42,688 --> 00:02:45,822 Or maybe look at these two login forms. 55 55 00:02:45,822 --> 00:02:47,401 I mean, would you find it easier 56 56 00:02:47,401 --> 00:02:50,606 to design the left or the right interface? 57 57 00:02:50,606 --> 00:02:52,533 And that's what I'm talking about. 58 58 00:02:52,533 --> 00:02:54,553 So this is a huge opportunity 59 59 00:02:54,553 --> 00:02:57,220 for new designers just like you. 60 60 00:02:58,849 --> 00:03:02,378 Or look at these beautiful flat web designs. 61 61 00:03:02,378 --> 00:03:03,702 Now I'm not saying that it's easy 62 62 00:03:03,702 --> 00:03:07,510 to design these sites because it really is not. 63 63 00:03:07,510 --> 00:03:10,226 But for a complete beginner, I think it's easier 64 64 00:03:10,226 --> 00:03:12,864 to get started with this type of design 65 65 00:03:12,864 --> 00:03:16,231 because it's technically easier to do. 66 66 00:03:16,231 --> 00:03:17,926 You will see lots of web sites 67 67 00:03:17,926 --> 00:03:21,548 like these over the next lectures. 68 68 00:03:21,548 --> 00:03:25,403 So that's it about the introduction to web design. 69 69 00:03:25,403 --> 00:03:27,911 I think it's very important that you start to get a feeling 70 70 00:03:27,911 --> 00:03:32,369 for what's happening in the world of web design right now. 71 71 00:03:32,369 --> 00:03:35,318 So that's why I gave you this short introduction. 72 72 00:03:35,318 --> 00:03:36,827 And now we will start learning 73 73 00:03:36,827 --> 00:03:39,312 some guidelines about typography. 74 74 00:03:39,312 --> 00:03:41,812 Make sure you don't miss them.