Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed How to Freelance !
You have completed How to Freelance !
Preview
The first step to successfully completing a project is breaking down your project into distinct stages. To start, we are going to break our project down into a Planning and Design stage.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
The first time you take on a freelancing
project of your own,
0:04
the amount of tasks you have to handle can
seem quite daunting.
0:07
It may seem like there are lots of things
you have to do at once.
0:11
Wire frame, design and develop multiple
pages.
0:15
Then you fill them with content and get
the client to approve on things.
0:18
Finally you test and move it to
production.
0:21
There's lots to do.
0:23
Now if you're like me, and tend to
0:25
get bored of working on one thing after
awhile.
0:26
It might be tempting to design the front
page and
0:29
code that up before moving on to the next
page.
0:31
But that's not really the best way to
manage these tasks.
0:34
As you take on more projects, you will
develop a more effective work flow.
0:37
Breaking down the project into stages and
focusing on few tasks at a time.
0:41
But rather than developing that over time,
and making mistakes as you go along.
0:46
Let's look at how other freelancers do
this.
0:50
Earlier, we created a project proposal
template
0:53
in which we outlined a few different
0:56
stages for the client, without really
going
0:57
over what each of those stages meant.
0:59
Let's go over them right now.
1:02
We can break our projects down into around
four stages.
1:04
Planning, design, development and
pre-launch.
1:07
The tasks in each of these phases are
fairly distinct
1:11
from one another that we can group them
into stages.
1:14
The stages are also structured in a way
that at the end of
1:17
each, you have a set of deliverables to
hand over to the client.
1:20
And time for them to review it before you
move on to the next stage.
1:24
Each stage can also have certain
dependencies.
1:27
Whether from the client, or another third
party that has to
1:31
be met before the stage can either start
or be completed.
1:34
The first stage in our workflow is the
planning stage.
1:38
At this point, we have already gone over
most of the tasks in the planning stage.
1:41
We just didn't categorize them as such.
1:45
The planning stage is very important
because
1:48
almost all of the decision making happens
here.
1:50
Your initial client interactions set the
stage for the rest of the project.
1:53
We start with a requirements analysis.
1:58
This is a formal way of saying we gather
as much information as possible.
2:00
We achieved this earlier by using a
questionnaire, broken down into sections.
2:05
Like client goals, target audience,
feature requests and so on.
2:08
This section is crucial to getting the
project off to a good start.
2:12
Now depending on who you talk to you, the
second step is creating a project charter.
2:15
The charter takes all the information
gathered
2:20
in the previous step, during the
requirements analysis.
2:22
And summarizes that information.
2:25
It serves as a reference document both to
you and the client.
2:27
And is usually short and to the point.
2:31
You can find varying opinions on the
usefulness of project charters.
2:33
Not everyone deems it necessary.
2:37
At this point, neither party has signed a
contract.
2:39
And there's a high chance that you won't
work on the project at all.
2:42
If you spend time writing a project
charter, only to move onto other things.
2:46
That's time wasted.
2:49
On the other hand, if you do end up
working
2:51
on the project, the charter serves as a
good reference.
2:53
Like most things we've talked about, there
isn't one right way.
2:56
That being said, we won't cover it,
however.
3:00
Because I think that this early on in your
freelance career,
3:02
you won't encounter very many situations
where a project charter is needed.
3:05
With the requirements analysis done, you
have enough information
3:10
together to write up your contracts,
quotes and project proposals.
3:13
We've covered project proposals and quotes
already.
3:17
Contracts are also extremely vital to the
3:20
success of both your project and your
career.
3:22
But we'll cover that soon enough.
3:25
Once the contracts are signed and you
agree to start the project.
3:27
There's a few important pieces of
information you need
3:30
to get before you move onto the next
stage.
3:33
You're going to need a site map.
3:36
So, you understand both how the client
wants the site to be laid-out.
3:38
And, how you can guide visitors from one
page to next, smoothly and efficiently.
3:41
You will also need to gather basic site,
or a database login information.
3:46
Or any details that would be necessary for
you to start working on the project.
3:50
These items are dependencies.
3:54
And the client needs to be made aware that
you need this information to get started.
3:56
Now that should be all the information
4:00
you need to collect during your planning
stage.
4:02
And luckily for us, we've already done
most of that work.
4:05
Let's look at the next stage, the design
or the creative stage.
4:08
During the design stage, your primary task
is to take all the
4:12
information you gathered in the planning
stage, and lay it out visually.
4:15
Your goals at the end of this stage are to
4:19
have a site structure and a visual
representation of it.
4:21
The design process can also be further
broken down into the following steps.
4:25
Wire frames.
4:29
Before you start doing any of the heavy
design work.
4:31
You can quickly sketch a wire frames
4:33
to depict the visual hierarchy of the
website.
4:35
Wire frames allow you put down on paper
4:38
or on software, how the entire site will
flow.
4:40
Since wire frames are simple line
drawings, its very easy to make changes.
4:43
So if you don't like something or the
client wants certain changes.
4:47
You can implement them fairly quickly.
4:50
Once you have the wire frames done, the
next step is to mock-up the website.
4:53
Visually representing as close to the
final product as you can get.
4:57
[SOUND].
5:00
While in the past mockups meant
predominantly
5:01
working in Photoshop, and sending the
files over.
5:03
Lots of designers now mockup their
websites straight in HTML and CSS.
5:06
Technology has improved vastly enough to
allow them to do so.
5:10
This practice is on the rise, not only
because it makes for a better workflow.
5:14
But also because changes can be
implemented with more ease if needed.
5:18
Next is review and approval, for both the
wire frames and mock-ups.
5:22
Get the clients approval, before you
progress.
5:26
Make the review process as flexible as
possible.
5:29
Allowing the client and yourself to tweak
5:32
the design, until both of you are
satisfied.
5:34
Don't be afraid to offer your opinion
here.
5:37
Educate the client on your design choices.
5:39
And why your solutions can provide the
desired outcomes.
5:42
The client won't agree with you on
everything, of course.
5:45
But the point is to come to a solution
that benefits both parties.
5:48
Once you have the wireframes and mock-ups
set, you can move on to coding it up.
5:52
Unless you did your initial mock straight
in CSS of course.
5:56
Regardless of how you set up your stages,
make sure each stage has deliverables.
5:59
So after a certain period of time,
6:04
you send the client your wireframes and
mock-ups.
6:06
Give them plenty of time for review.
6:08
And then spend the remaining allotted time
during
6:10
the design stage, coding up the visual
elements.
6:12
Budget yourself enough time to take care
of these tasks.
6:16
Allowing for sufficient review time is
critical to keeping the
6:19
client happy and reducing the number of
headaches on your part.
6:22
Don't worry, you'll get better at
estimating the time you need
6:26
to set aside for this as you take on more
projects.
6:29
So that covers our planning and design
stages.
6:33
Lets see how we can break the rest of the
project down, as we move along.
6:35
[BLANK_AUDIO]
6:39
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up