1 1 00:00:01,859 --> 00:00:03,230 Welcome back. 2 2 00:00:03,230 --> 00:00:07,167 We are finally going to start building our killer web page. 3 3 00:00:07,167 --> 00:00:08,583 Great. 4 4 00:00:08,583 --> 00:00:10,534 But before diving right in, 5 5 00:00:10,534 --> 00:00:12,577 you got to have a very clear plan 6 6 00:00:12,577 --> 00:00:15,224 of exactly what we're gonna do. 7 7 00:00:15,224 --> 00:00:17,790 With a good plan, you're already halfway 8 8 00:00:17,790 --> 00:00:19,373 to a great website. 9 9 00:00:20,892 --> 00:00:24,689 Because building a website is not just writing some code, 10 10 00:00:24,689 --> 00:00:26,546 it's much more than that. 11 11 00:00:26,546 --> 00:00:27,939 It's a whole process 12 12 00:00:27,939 --> 00:00:29,565 from complete scratch 13 13 00:00:29,565 --> 00:00:32,607 to a completely functional website. 14 14 00:00:32,607 --> 00:00:35,939 And I'm going to reveal the seven real world steps 15 15 00:00:35,939 --> 00:00:38,865 of that process right now. 16 16 00:00:38,865 --> 00:00:41,535 Every good website in the world needs to follow 17 17 00:00:41,535 --> 00:00:44,334 at least these seven steps. 18 18 00:00:44,334 --> 00:00:47,306 You should definitely take some notes of these. 19 19 00:00:47,306 --> 00:00:48,306 So let's go. 20 20 00:00:50,510 --> 00:00:54,272 Start off by defining the goal of your project. 21 21 00:00:54,272 --> 00:00:57,453 This can be showing your portfolio to the world, 22 22 00:00:57,453 --> 00:01:01,620 selling an e-book, building a blog, or whatever you want. 23 23 00:01:03,119 --> 00:01:05,569 Also define your audience. 24 24 00:01:05,569 --> 00:01:08,936 Ask yourself which is the typically user 25 25 00:01:08,936 --> 00:01:11,186 that will visit my website. 26 26 00:01:12,117 --> 00:01:15,241 This is important because you should always design 27 27 00:01:15,241 --> 00:01:18,241 with your goal and audience in mind. 28 28 00:01:20,791 --> 00:01:23,148 Once your project is defined, 29 29 00:01:23,148 --> 00:01:25,540 plan your content carefully. 30 30 00:01:25,540 --> 00:01:29,707 This includes text, images, videos, icons, et cetera. 31 31 00:01:33,169 --> 00:01:36,420 Remember what I told you about visual hierarchy 32 32 00:01:36,420 --> 00:01:39,067 in the web design section? 33 33 00:01:39,067 --> 00:01:42,132 It plays an important role when you start thinking 34 34 00:01:42,132 --> 00:01:44,291 about what you want on your website 35 35 00:01:44,291 --> 00:01:46,590 and what you don't. 36 36 00:01:46,590 --> 00:01:50,271 Defining the content before actually starting the design 37 37 00:01:50,271 --> 00:01:53,354 is called the content-first approach. 38 38 00:01:54,288 --> 00:01:57,028 It means that you should design for the content, 39 39 00:01:57,028 --> 00:01:58,955 instead of designing a webpage 40 40 00:01:58,955 --> 00:02:01,955 and then filling it with some stuff. 41 41 00:02:03,890 --> 00:02:06,364 Also define the navigation 42 42 00:02:06,364 --> 00:02:09,348 and the site structure in this step. 43 43 00:02:09,348 --> 00:02:12,518 You can draw a side map in this step if we're talking 44 44 00:02:12,518 --> 00:02:14,435 about a bigger project. 45 45 00:02:17,138 --> 00:02:20,203 Now it's time to get inspired 46 46 00:02:20,203 --> 00:02:22,536 and think about your design. 47 47 00:02:23,385 --> 00:02:26,766 Then get the ideas our of your head. 48 48 00:02:26,766 --> 00:02:28,261 And by that I mean 49 49 00:02:28,261 --> 00:02:31,969 sketch your ideas before you start designing. 50 50 00:02:31,969 --> 00:02:35,498 It will help you explore ideas and create a concept 51 51 00:02:35,498 --> 00:02:37,681 of what you want to build. 52 52 00:02:37,681 --> 00:02:40,908 Using pencils and paper is a great way 53 53 00:02:40,908 --> 00:02:44,325 of quickly retaining your valuable ideas. 54 54 00:02:45,297 --> 00:02:48,746 And make as many sketches as you want, 55 55 00:02:48,746 --> 00:02:51,903 but don't spend too much time perfecting anything. 56 56 00:02:51,903 --> 00:02:53,854 Once you have an initial idea 57 57 00:02:53,854 --> 00:02:56,130 you can concentrate on the details 58 58 00:02:56,130 --> 00:02:58,713 when designing in HTML and CSS. 59 59 00:03:00,820 --> 00:03:04,164 I advise you to never ever start designing 60 60 00:03:04,164 --> 00:03:08,088 without having an idea of what you want to build. 61 61 00:03:08,088 --> 00:03:11,653 Getting inspiration is very important in this phase 62 62 00:03:11,653 --> 00:03:14,820 and I already told you how to do that. 63 63 00:03:17,006 --> 00:03:20,965 Now after sketching start to design your website 64 64 00:03:20,965 --> 00:03:23,682 using all the guidelines and tips you've learned 65 65 00:03:23,682 --> 00:03:25,849 in the web design section. 66 66 00:03:26,770 --> 00:03:29,719 You will do that using HTML and CSS 67 67 00:03:29,719 --> 00:03:32,668 which is called designing in the browser. 68 68 00:03:32,668 --> 00:03:35,779 So designing in the browser is basically designing 69 69 00:03:35,779 --> 00:03:39,228 and developing at the same time. 70 70 00:03:39,228 --> 00:03:41,655 There are actually more and more designers 71 71 00:03:41,655 --> 00:03:45,045 leaving traditional design programs such as Photoshop 72 72 00:03:45,045 --> 00:03:47,344 and start designing in the browser 73 73 00:03:47,344 --> 00:03:50,037 such as we are going to do. 74 74 00:03:50,037 --> 00:03:51,675 The biggest reason for this 75 75 00:03:51,675 --> 00:03:55,785 is that you can't design responsive websites in Photoshop. 76 76 00:03:55,785 --> 00:03:58,368 It also saves you tons of time. 77 77 00:03:59,872 --> 00:04:03,680 And in this phase you'll use your sketches, content, 78 78 00:04:03,680 --> 00:04:05,984 and planning decisions you've made in steps 79 79 00:04:05,984 --> 00:04:07,651 one, two, and three. 80 80 00:04:09,859 --> 00:04:12,320 This step is of course the biggest part 81 81 00:04:12,320 --> 00:04:14,131 of building a website. 82 82 00:04:14,131 --> 00:04:15,850 But don't forget, 83 83 00:04:15,850 --> 00:04:20,017 all the other steps are also very, very important. 84 84 00:04:21,783 --> 00:04:25,243 Now before you can launch your beautiful masterpiece 85 85 00:04:25,243 --> 00:04:26,938 for the world to see it, 86 86 00:04:26,938 --> 00:04:29,680 we have to optimize it's performance 87 87 00:04:29,680 --> 00:04:33,325 and for search engines such as Google. 88 88 00:04:33,325 --> 00:04:36,878 You don't want a slow website or one that no one can find. 89 89 00:04:36,878 --> 00:04:37,711 Right? 90 90 00:04:40,833 --> 00:04:45,365 Your optimized website is then finally ready to launch. 91 91 00:04:45,365 --> 00:04:47,873 All you need for this is a web server 92 92 00:04:47,873 --> 00:04:51,960 that will host your website and deliver it to the world. 93 93 00:04:51,960 --> 00:04:55,877 I will later show you a way to do exactly that. 94 94 00:04:56,918 --> 00:05:01,400 But the launch of your website is not the end of the story. 95 95 00:05:01,400 --> 00:05:04,884 Now it's time to monitor your users' behavior 96 96 00:05:04,884 --> 00:05:09,051 and make some changes to your website if necessary. 97 97 00:05:10,109 --> 00:05:13,383 You should also update your content regularly 98 98 00:05:13,383 --> 00:05:17,818 in order to show your users that your website is alive. 99 99 00:05:17,818 --> 00:05:21,985 For instance a blog can be a very great way of doing that. 100 100 00:05:24,688 --> 00:05:28,047 These steps I just showed you are so incredibly important 101 101 00:05:28,047 --> 00:05:30,903 that I also included them in the course e-book 102 102 00:05:30,903 --> 00:05:34,015 so that you always know where to find them. 103 103 00:05:34,015 --> 00:05:36,801 Also in the e-book is the link to a document 104 104 00:05:36,801 --> 00:05:40,668 called The Periodic Table of Web Design Process, 105 105 00:05:40,668 --> 00:05:42,770 if you want an even deeper understanding 106 106 00:05:42,770 --> 00:05:46,717 of the complete web design and development process. 107 107 00:05:46,717 --> 00:05:49,134 So make sure to check it out. 108 108 00:05:50,154 --> 00:05:52,243 Now over the rest of the course 109 109 00:05:52,243 --> 00:05:53,418 we're going to put these 110 110 00:05:53,418 --> 00:05:56,335 seven real world steps into action. 111 111 00:05:57,225 --> 00:05:59,918 After that we will have a fully functional, 112 112 00:05:59,918 --> 00:06:04,074 beautiful designed and developed website on the internet. 113 113 00:06:04,074 --> 00:06:06,324 Excited? So let's start it.