Original subtitles

1 1

Welcome back. 2

2

We are finally going to start building our killer web page. 3

3

Great. 4

4

But before diving right in, 5

5

you got to have a very clear plan 6

6

of exactly what we're gonna do. 7

7

With a good plan, you're already halfway 8

8

to a great website. 9

9

Because building a website is not just writing some code, 10

10

it's much more than that. 11

11

It's a whole process 12

12

from complete scratch 13

13

to a completely functional website. 14

14

And I'm going to reveal the seven real world steps 15

15

of that process right now. 16

16

Every good website in the world needs to follow 17

17

at least these seven steps. 18

18

You should definitely take some notes of these. 19

19

So let's go. 20

20

Start off by defining the goal of your project. 21

21

This can be showing your portfolio to the world, 22

22

selling an e-book, building a blog, or whatever you want. 23

23

Also define your audience. 24

24

Ask yourself which is the typically user 25

25

that will visit my website. 26

26

This is important because you should always design 27

27

with your goal and audience in mind. 28

28

Once your project is defined, 29

29

plan your content carefully. 30

30

This includes text, images, videos, icons, et cetera. 31

31

Remember what I told you about visual hierarchy 32

32

in the web design section? 33

33

It plays an important role when you start thinking 34

34

about what you want on your website 35

35

and what you don't. 36

36

Defining the content before actually starting the design 37

37

is called the content-first approach. 38

38

It means that you should design for the content, 39

39

instead of designing a webpage 40

40

and then filling it with some stuff. 41

41

Also define the navigation 42

42

and the site structure in this step. 43

43

You can draw a side map in this step if we're talking 44

44

about a bigger project. 45

45

Now it's time to get inspired 46

46

and think about your design. 47

47

Then get the ideas our of your head. 48

48

And by that I mean 49

49

sketch your ideas before you start designing. 50

50

It will help you explore ideas and create a concept 51

51

of what you want to build. 52

52

Using pencils and paper is a great way 53

53

of quickly retaining your valuable ideas. 54

54

And make as many sketches as you want, 55

55

but don't spend too much time perfecting anything. 56

56

Once you have an initial idea 57

57

you can concentrate on the details 58

58

when designing in HTML and CSS. 59

59

I advise you to never ever start designing 60

60

without having an idea of what you want to build. 61

61

Getting inspiration is very important in this phase 62

62

and I already told you how to do that. 63

63

Now after sketching start to design your website 64

64

using all the guidelines and tips you've learned 65

65

in the web design section. 66

66

You will do that using HTML and CSS 67

67

which is called designing in the browser. 68

68

So designing in the browser is basically designing 69

69

and developing at the same time. 70

70

There are actually more and more designers 71

71

leaving traditional design programs such as Photoshop 72

72

and start designing in the browser 73

73

such as we are going to do. 74

74

The biggest reason for this 75

75

is that you can't design responsive websites in Photoshop. 76

76

It also saves you tons of time. 77

77

And in this phase you'll use your sketches, content, 78

78

and planning decisions you've made in steps 79

79

one, two, and three. 80

80

This step is of course the biggest part 81

81

of building a website. 82

82

But don't forget, 83

83

all the other steps are also very, very important. 84

84

Now before you can launch your beautiful masterpiece 85

85

for the world to see it, 86

86

we have to optimize it's performance 87

87

and for search engines such as Google. 88

88

You don't want a slow website or one that no one can find. 89

89

Right? 90

90

Your optimized website is then finally ready to launch. 91

91

All you need for this is a web server 92

92

that will host your website and deliver it to the world. 93

93

I will later show you a way to do exactly that. 94

94

But the launch of your website is not the end of the story. 95

95

Now it's time to monitor your users' behavior 96

96

and make some changes to your website if necessary. 97

97

You should also update your content regularly 98

98

in order to show your users that your website is alive. 99

99

For instance a blog can be a very great way of doing that. 100

100

These steps I just showed you are so incredibly important 101

101

that I also included them in the course e-book 102

102

so that you always know where to find them. 103

103

Also in the e-book is the link to a document 104

104

called The Periodic Table of Web Design Process, 105

105

if you want an even deeper understanding 106

106

of the complete web design and development process. 107

107

So make sure to check it out. 108

108

Now over the rest of the course 109

109

we're going to put these 110

110

seven real world steps into action. 111

111

After that we will have a fully functional, 112

112

beautiful designed and developed website on the internet. 113

113

Excited? So let's start it.