1
00:00:00,000 --> 00:00:04,758
[MUSIC]

2
00:00:04,758 --> 00:00:07,869
The first time you take on a freelancing
project of your own,

3
00:00:07,869 --> 00:00:11,780
the amount of tasks you have to handle can
seem quite daunting.

4
00:00:11,780 --> 00:00:15,110
It may seem like there are lots of things
you have to do at once.

5
00:00:15,110 --> 00:00:18,410
Wire frame, design and develop multiple
pages.

6
00:00:18,410 --> 00:00:21,620
Then you fill them with content and get
the client to approve on things.

7
00:00:21,620 --> 00:00:23,950
Finally you test and move it to
production.

8
00:00:23,950 --> 00:00:25,370
There's lots to do.

9
00:00:25,370 --> 00:00:26,650
Now if you're like me, and tend to

10
00:00:26,650 --> 00:00:29,010
get bored of working on one thing after
awhile.

11
00:00:29,010 --> 00:00:31,230
It might be tempting to design the front
page and

12
00:00:31,230 --> 00:00:34,380
code that up before moving on to the next
page.

13
00:00:34,380 --> 00:00:37,670
But that's not really the best way to
manage these tasks.

14
00:00:37,670 --> 00:00:41,420
As you take on more projects, you will
develop a more effective work flow.

15
00:00:41,420 --> 00:00:46,180
Breaking down the project into stages and
focusing on few tasks at a time.

16
00:00:46,180 --> 00:00:50,270
But rather than developing that over time,
and making mistakes as you go along.

17
00:00:50,270 --> 00:00:52,460
Let's look at how other freelancers do
this.

18
00:00:53,480 --> 00:00:56,000
Earlier, we created a project proposal
template

19
00:00:56,000 --> 00:00:57,600
in which we outlined a few different

20
00:00:57,600 --> 00:00:59,930
stages for the client, without really
going

21
00:00:59,930 --> 00:01:02,070
over what each of those stages meant.

22
00:01:02,070 --> 00:01:04,110
Let's go over them right now.

23
00:01:04,110 --> 00:01:07,550
We can break our projects down into around
four stages.

24
00:01:07,550 --> 00:01:11,820
Planning, design, development and
pre-launch.

25
00:01:11,820 --> 00:01:14,550
The tasks in each of these phases are
fairly distinct

26
00:01:14,550 --> 00:01:17,540
from one another that we can group them
into stages.

27
00:01:17,540 --> 00:01:20,480
The stages are also structured in a way
that at the end of

28
00:01:20,480 --> 00:01:24,380
each, you have a set of deliverables to
hand over to the client.

29
00:01:24,380 --> 00:01:27,875
And time for them to review it before you
move on to the next stage.

30
00:01:27,875 --> 00:01:31,380
Each stage can also have certain
dependencies.

31
00:01:31,380 --> 00:01:34,350
Whether from the client, or another third
party that has to

32
00:01:34,350 --> 00:01:37,320
be met before the stage can either start
or be completed.

33
00:01:38,470 --> 00:01:41,760
The first stage in our workflow is the
planning stage.

34
00:01:41,760 --> 00:01:45,910
At this point, we have already gone over
most of the tasks in the planning stage.

35
00:01:45,910 --> 00:01:48,340
We just didn't categorize them as such.

36
00:01:48,340 --> 00:01:50,200
The planning stage is very important
because

37
00:01:50,200 --> 00:01:53,240
almost all of the decision making happens
here.

38
00:01:53,240 --> 00:01:58,210
Your initial client interactions set the
stage for the rest of the project.

39
00:01:58,210 --> 00:02:00,780
We start with a requirements analysis.

40
00:02:00,780 --> 00:02:05,310
This is a formal way of saying we gather
as much information as possible.

41
00:02:05,310 --> 00:02:08,460
We achieved this earlier by using a
questionnaire, broken down into sections.

42
00:02:08,460 --> 00:02:12,760
Like client goals, target audience,
feature requests and so on.

43
00:02:12,760 --> 00:02:15,715
This section is crucial to getting the
project off to a good start.

44
00:02:15,715 --> 00:02:20,780
Now depending on who you talk to you, the
second step is creating a project charter.

45
00:02:20,780 --> 00:02:22,640
The charter takes all the information
gathered

46
00:02:22,640 --> 00:02:25,320
in the previous step, during the
requirements analysis.

47
00:02:25,320 --> 00:02:27,500
And summarizes that information.

48
00:02:27,500 --> 00:02:31,010
It serves as a reference document both to
you and the client.

49
00:02:31,010 --> 00:02:33,780
And is usually short and to the point.

50
00:02:33,780 --> 00:02:37,350
You can find varying opinions on the
usefulness of project charters.

51
00:02:37,350 --> 00:02:39,770
Not everyone deems it necessary.

52
00:02:39,770 --> 00:02:42,540
At this point, neither party has signed a
contract.

53
00:02:42,540 --> 00:02:46,220
And there's a high chance that you won't
work on the project at all.

54
00:02:46,220 --> 00:02:49,970
If you spend time writing a project
charter, only to move onto other things.

55
00:02:49,970 --> 00:02:51,580
That's time wasted.

56
00:02:51,580 --> 00:02:53,520
On the other hand, if you do end up
working

57
00:02:53,520 --> 00:02:56,860
on the project, the charter serves as a
good reference.

58
00:02:56,860 --> 00:03:00,440
Like most things we've talked about, there
isn't one right way.

59
00:03:00,440 --> 00:03:02,740
That being said, we won't cover it,
however.

60
00:03:02,740 --> 00:03:05,740
Because I think that this early on in your
freelance career,

61
00:03:05,740 --> 00:03:10,050
you won't encounter very many situations
where a project charter is needed.

62
00:03:10,050 --> 00:03:13,260
With the requirements analysis done, you
have enough information

63
00:03:13,260 --> 00:03:16,680
together to write up your contracts,
quotes and project proposals.

64
00:03:17,760 --> 00:03:20,700
We've covered project proposals and quotes
already.

65
00:03:20,700 --> 00:03:22,870
Contracts are also extremely vital to the

66
00:03:22,870 --> 00:03:25,770
success of both your project and your
career.

67
00:03:25,770 --> 00:03:27,960
But we'll cover that soon enough.

68
00:03:27,960 --> 00:03:30,810
Once the contracts are signed and you
agree to start the project.

69
00:03:30,810 --> 00:03:33,870
There's a few important pieces of
information you need

70
00:03:33,870 --> 00:03:36,670
to get before you move onto the next
stage.

71
00:03:36,670 --> 00:03:38,020
You're going to need a site map.

72
00:03:38,020 --> 00:03:41,510
So, you understand both how the client
wants the site to be laid-out.

73
00:03:41,510 --> 00:03:46,190
And, how you can guide visitors from one
page to next, smoothly and efficiently.

74
00:03:46,190 --> 00:03:50,080
You will also need to gather basic site,
or a database login information.

75
00:03:50,080 --> 00:03:54,690
Or any details that would be necessary for
you to start working on the project.

76
00:03:54,690 --> 00:03:56,070
These items are dependencies.

77
00:03:56,070 --> 00:04:00,125
And the client needs to be made aware that
you need this information to get started.

78
00:04:00,125 --> 00:04:02,740
Now that should be all the information

79
00:04:02,740 --> 00:04:05,240
you need to collect during your planning
stage.

80
00:04:05,240 --> 00:04:08,280
And luckily for us, we've already done
most of that work.

81
00:04:08,280 --> 00:04:12,090
Let's look at the next stage, the design
or the creative stage.

82
00:04:12,090 --> 00:04:15,440
During the design stage, your primary task
is to take all the

83
00:04:15,440 --> 00:04:19,700
information you gathered in the planning
stage, and lay it out visually.

84
00:04:19,700 --> 00:04:21,430
Your goals at the end of this stage are to

85
00:04:21,430 --> 00:04:25,260
have a site structure and a visual
representation of it.

86
00:04:25,260 --> 00:04:29,890
The design process can also be further
broken down into the following steps.

87
00:04:29,890 --> 00:04:31,110
Wire frames.

88
00:04:31,110 --> 00:04:33,650
Before you start doing any of the heavy
design work.

89
00:04:33,650 --> 00:04:35,310
You can quickly sketch a wire frames

90
00:04:35,310 --> 00:04:38,308
to depict the visual hierarchy of the
website.

91
00:04:38,308 --> 00:04:40,210
Wire frames allow you put down on paper

92
00:04:40,210 --> 00:04:43,640
or on software, how the entire site will
flow.

93
00:04:43,640 --> 00:04:47,330
Since wire frames are simple line
drawings, its very easy to make changes.

94
00:04:47,330 --> 00:04:50,540
So if you don't like something or the
client wants certain changes.

95
00:04:50,540 --> 00:04:52,180
You can implement them fairly quickly.

96
00:04:53,430 --> 00:04:57,170
Once you have the wire frames done, the
next step is to mock-up the website.

97
00:04:57,170 --> 00:05:00,635
Visually representing as close to the
final product as you can get.

98
00:05:00,635 --> 00:05:01,380
[SOUND].

99
00:05:01,380 --> 00:05:03,590
While in the past mockups meant
predominantly

100
00:05:03,590 --> 00:05:06,350
working in Photoshop, and sending the
files over.

101
00:05:06,350 --> 00:05:10,690
Lots of designers now mockup their
websites straight in HTML and CSS.

102
00:05:10,690 --> 00:05:13,140
Technology has improved vastly enough to
allow them to do so.

103
00:05:14,190 --> 00:05:18,320
This practice is on the rise, not only
because it makes for a better workflow.

104
00:05:18,320 --> 00:05:21,850
But also because changes can be
implemented with more ease if needed.

105
00:05:22,980 --> 00:05:26,800
Next is review and approval, for both the
wire frames and mock-ups.

106
00:05:26,800 --> 00:05:29,690
Get the clients approval, before you
progress.

107
00:05:29,690 --> 00:05:32,510
Make the review process as flexible as
possible.

108
00:05:32,510 --> 00:05:34,460
Allowing the client and yourself to tweak

109
00:05:34,460 --> 00:05:37,650
the design, until both of you are
satisfied.

110
00:05:37,650 --> 00:05:39,840
Don't be afraid to offer your opinion
here.

111
00:05:39,840 --> 00:05:42,230
Educate the client on your design choices.

112
00:05:42,230 --> 00:05:45,720
And why your solutions can provide the
desired outcomes.

113
00:05:45,720 --> 00:05:48,390
The client won't agree with you on
everything, of course.

114
00:05:48,390 --> 00:05:52,690
But the point is to come to a solution
that benefits both parties.

115
00:05:52,690 --> 00:05:56,630
Once you have the wireframes and mock-ups
set, you can move on to coding it up.

116
00:05:56,630 --> 00:05:59,970
Unless you did your initial mock straight
in CSS of course.

117
00:05:59,970 --> 00:06:04,750
Regardless of how you set up your stages,
make sure each stage has deliverables.

118
00:06:04,750 --> 00:06:06,630
So after a certain period of time,

119
00:06:06,630 --> 00:06:08,860
you send the client your wireframes and
mock-ups.

120
00:06:08,860 --> 00:06:10,950
Give them plenty of time for review.

121
00:06:10,950 --> 00:06:12,830
And then spend the remaining allotted time
during

122
00:06:12,830 --> 00:06:16,220
the design stage, coding up the visual
elements.

123
00:06:16,220 --> 00:06:19,640
Budget yourself enough time to take care
of these tasks.

124
00:06:19,640 --> 00:06:22,770
Allowing for sufficient review time is
critical to keeping the

125
00:06:22,770 --> 00:06:26,770
client happy and reducing the number of
headaches on your part.

126
00:06:26,770 --> 00:06:29,500
Don't worry, you'll get better at
estimating the time you need

127
00:06:29,500 --> 00:06:33,170
to set aside for this as you take on more
projects.

128
00:06:33,170 --> 00:06:35,870
So that covers our planning and design
stages.

129
00:06:35,870 --> 00:06:39,538
Lets see how we can break the rest of the
project down, as we move along.

130
00:06:39,538 --> 00:06:40,320
[BLANK_AUDIO]