Breaking Down a Project: Part 16:40 with Pasan Premaratne
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.
[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 up