1stwebdesigner

Posted by | Posted on 17:33

1stwebdesigner


Freelance Series Wrap-Up: Moving Through the Project

Posted: 18 Mar 2011 03:00 AM PDT

As we finish up this freelance series, I thought it would be great to go through the phases that every project needs to be successful. I’ll touch on things like analysis, sketching, design, development, content, and testing. Now, remember that I’m coming from a web design perspective so there will be some phases in here that wouldn’t be applicable to a graphic designer or someone who’s project doesn’t require development. But all in all, I think that the majority of freelancers would use a very similar process. Here we go.

Projection and Timeline

We’ve talked about project scope in the previous post but we didn’t mention the timeline to make sure this thing gets done smoothly and on time. I personally don’t create a timeline until the client has accepted the project because of these reasons:

  1. It may take them a month to accept it, then you have to rework all the dates
  2. It takes up too much time to invest before you know you have the project
  3. If they choose to not go with you, it’s all wasted time

So I tend to veer away from doing a formal timeline until I know I have the project. Then I’ll provide them with something that will show them how long each phase will take, specify dates, specify their involvement, and tell them what is expected of them throughout the process. Something similar to the below.

  • Week 1 – Analysis, Wireframes, Sitemaps – I will need your assistance thoroughly this week to insure we are nailing down the correct links and structure for your site. It’s important that I get feedback from you within 24 hours.
  • Week 2-3 – Design – This will be where the actual design takes place. I’ll be using what we completed in the first week to help us through this process. I need feedback within 48 hours, sooner if possible.
  • Week 4-5 – Development – This process will be a break for you where backend development will be completed before we move into the content implementation phase. Little communication will be needed during this time.
  • Week 6-7 – Content Implementation – This will be a very hands-on phase. I will be providing training during this phase and much of the work will fall on you to be putting content in and learning the system we’ve built it on. I do this because it’s much easier for you to learn the site and system while we are still in development instead of working on a live site and making changes.
  • Week 8 – Testing and Launch – This final week will be for testing, tweaks, final content input, and project launch. I’ll be working closely with you this week as well.

Something like the above provides the client with a very specific outline and information for each section without taking up too much of your time. I usually also put in there that the timeline is not set in stone and will vary depending on client communication and/or if the project scope changes at all. I then also ask them to note any days or weeks they will not be available so we can allow for that.

NOTE: The timelines never look the same. It depends on the project scope as to what can be accomplished in 6 weeks or 3 months. The complexity of the project and availability of resources can and will change this.

Analysis

Website Analysis

by karola riegler photography

As for the analysis, I mostly just take what the client wants to push about their company and help them to make that idea a reality. Every client has an image or a message they want to promote on the site so you can almost center the site around communicating that message. Make sure that you’re focused on what the end user will get, how they will navigate it, and remind the client that their users are the ones that need to find the information. Since I work with mostly small companies, it’s very common for me to end up working directly with the owner. The owner could very well have some great ideas, and you must listen to them if nothing else, but remind them that they need to target their audience above themselves. They know their product, their potential customer may not. I like to use the illustration of how I am with computers to help them understand what I mean. I do something like the following:

“I understand what you’re going for here, but lets remember that the users may not understand your product like you do. For instance, I understand how to navigate websites like the back of my hand. I know what should be on one, and mostly what should not. I also quickly recognize if a site is going to be worth my time or not. And, since I’m on a computer so much, I often forget that others may not understand how something works when it’s second nature for me. The same is true with your business. Remember that your customers may be as foreign to your products as you are to mine.”

Most of the time, it’s a variation of that and I say it very light-hearted so they know I’m not coming down on them. It’s important to get your message across without making them feel stupid…that’s no way to run a project. Well, that’s all for this section.

Sketching/Wireframes/Sitemap

Website Sketching

by ajleon

There’s a lot of thoughts on whether sketching is necessary, if wireframes are worth the time it takes to make one, and if sitemaps are truly needed. I’m still fine-tuning this section of my work but I’ll give you what works for me at this point.

Sketch

Do it. Sketch everything out. I often take a sketch pad and marker to meetings…helps to make them realize I can work without a computer. I’m not just a robot they can tell exactly what to do in Photoshop or whatever. It simply helps to establish that I know what I’m doing and I’m serious about it. For the most part, the sketch is my wireframe…and no, you don’t have to know how to draw to be able to sketch. Sketching also removes the constraints of  “perfection” that many of us designers fall prey to when using a computer. There is no need for details, just keep it simple and map out how things should basically look and flow.

Wireframes

Like I said, my sketch is a wireframe. I don’t use some fancy program to do this, I simply lay out where I feel the links need to be and where the content is going, 1, 2, or 3 column, all those sort of things. I typically sketch out a few pages of thumbnail layouts (4 to a page or so) and then I’ll go from there to make one “final” wireframe. Just send it to them as a PDF or jpg for review. Be sure to go over it with them so they know what they’re looking at. Just sending them a sketch with no explanation will make them question what the heck they hired you for. Seriously though, don’t waste much time on this unless it’s a huge project and then you’ll probably need to get some outside help to understand what level of effort is required to complete the project.

Sitemap

Now the sitemap really goes hand in hand with the two above and, in all honesty, these 3 flow perfectly together for me. I will often end up doing a content flow in place of the sitemap to help them understand how I think the site needs to be setup. Remember to double check with them that you understand everything they offer and aren’t putting it in some random spot on the site where it doesn’t make sense. Working with them closely on this is important.

Design

Website Design

by KillerBeeCreative

Well, we’re finally here. I bet you didn’t know there was so much to it before you actually get to be the designer. Well, you probably did actually. So, in the grand scheme of things, the designer in us actually plays a pretty small part if you’re talking about making things pretty. Being a designer encompasses much more than that though. We have the duty of making sure things work how they need to be for the end user. It’s our job to be user experience designers as well as visual designers. I won’t get into the whole user experience design definition but I do feel it’s thrown around a lot today. The gist of it is to make sure things work great and make sense.

So, back to the visual design. While it’s important to make it functional, it should make sense, and of course be beautiful. You also have to take into account that the client likely wants their personal spin on it. This is where you often have to stand up for yourself as a designer and explain to them that they hired you to do this because of your expertise. You are the expert in this field and you need to inform them of that. Unfortunately, some clients need to hear it more often than others. But make sure you’re not a jerk about it. Sometimes it is best to relate it back to their business. Just spin it to where it reminds them in a light-hearted way.

During this phase I usually end up doing the homepage design first, then some iterations of that. I’ve yet to go past 2-3 different designs but often have 4-5 revisions on the one they choose. Some people put this in their project scope to define it, and that’s not a bad idea at all. The second page I do is a style-guide for the site. I lay out how every type of content will look. It will be everything from basic paragraphs to images floated left and right to block quotes. Basically, if it’s something they will be using in the content, it needs to be designed out for approval. Then I finish up by applying those styles to some different inner pages to show them what they will look like with real content. And if there’s any special pages like for pricing packages or something along those lines, we’ll nail down the look of that.

Finally, I remind them that once we leave this phase, it makes changing the design of things much more difficult so we need to make sure they are happy with it. Once they’ve approved, we move onto the development phase.

Development

Website Development

by schoschie

Development doesn’t really require much for me to write here. It’s basically a hands-off time for the client while I work through getting it built out. Sometimes, I will do the front-end development myself; others I’ll outsource it to local freelancers. If I’m going to need some back-end development done, I will have already setup the time frame with my developer and get the files they need to them during this time. Now, I mentioned in the timeline at the top that there are two weeks for development. This will vary, actually. If it’s just a WordPress theme or something simple, I can do it in a week. If it’s more complex, I’ll need a couple weeks up to a of couple months. So the timeline it self will vary depending on project and it complexity.

Content Implementation

About 95% of my projects are built on a CMS platform. It’s usually WordPress but I also have sites on Magento and CS-Cart. Since there is a way for clients to add, and manage, their own content, I have them put in their own content for the most part. I take this time to do some training, usually over the phone or Skype unless they are local, and I follow behind them to do some clean up and make things look prettier. This also usually involves me adding some more styles or changing a few things in the CSS that may or may not be to my liking after we actually get the real content in. This also varies greatly depending on how much time the client wants to dedicate to the project. They are often the deciding factor on how long a project will actually take.

Testing and Launch

Website Launch

by jurvetson

Now for the final phase of the project. The notorious and not so glorious testing phase. If you’re new to development, accept the fact that IE will display your information wrong, somewhere. I’ve yet to develop a site without an IE issue. They can be resolved, but they’re almost always the culprit. Also remember to test multiple versions of the browser and cross-platform as well.

Once you’ve gotten approval that everything is a “GO” from the client, it’s time to get that project launched! There are tons of ways to launch a site depending if it’s WordPress or Magento or some other platform. My advice here is to research how to take a site from development to production for whatever platform you are using.

Best of Luck!

I hope this series has encouraged you and helped you through this process. It’s been a real growing experience for me to write it all down and be able to share it with all of you. Keep up with me following this article as my next several articles are going to be much more related to design. Take care!

Comments (0)

Post a Comment