Miraz Tutorials

This tutorial teaches you step by step of how you can use simple proven techniques to optimise your entire web design workflow meaning you can stick to a solid routine when working on your projects in effect giving you the extra time and efficiency to take on more work and please every one of you’re client’s requests in a timely fashion. Images are also provided.

 

 

They key is to stick to a set of small goals to achieve the larger goal. When you stick to smaller goals it will mean that you’re more organised in your work and that you’re not working on random sections of a project at different times all over the place. This is a set system you can use to make sure you do every thing in order and stay consistent every time in effect saving you a lot of time and head ache.

What the client wants

I am going to cover this in quite some detail as I see it’s as the fundamental part of starting and completing a project. Now unless you only make sites as a hobby or for yourself to look at, this section is the most important of all as it’s the base of your entire client based work. The key aspect in this step to streamlining your web design workflow is ascertaining the image that your client wants the website to present and making sure every aspect of the client’s goals and requirements are covered.

Think of it as if you are designing the perfect advertisement for that client to relay their message to their audience. You have to be quite firm with your clients on this subject as most of them who probably don’t know a thing about web design will tell you to just go off and make them a master piece of a website by them only providing you with what they want the name of the website to be! It’s not as simple as that but this is where your communication skills will also need to come into play.

Make sure you advise the client that when their website eventually goes live on the web it will be possibly seen buy hundreds if not thousands of people a day all of which will take an opinion of the client and/or their business.

Questions to ask the client in any order you choose

1. What is your budget for this project (my personal favourite)
2. Ask the client what they’re trying to communicate through their website.
3. What type of information they want each reader to see and to remember.
4. What they want the website to achieve for their business or themselves
5. What are their long term goals for their business (this may seem personal but if a client has a long term view of their business or personal goals it gives you the indication that they are professional and will be easier to work with).
6. What makes you the best at what you do?
7. What is unique about your product or service?
8. What special features do you offer?
9. Why should a reader read any more about you?
10. What solutions can you provide (for what ever niche the client is in).
11. what are your turnaround/delivery/dispatch times for customers

I’m sure you get the gist of it, include any other things that may reflect on that particular client’s field or niche. Gathering all this information will help you throughout the entire project a lot more than you know. Remember your skill is to design and develop websites so that’s the easy part. Your client is hiring you set them up a marketing strategy Getting the information across the way the client wants it is something only the client!!! CAN TELL YOU.

Write all client gathered information into a list

Great so you have done the hard part now your task is to work all this information into an organised list. At this point I would be putting in references as to what I want to go on the landing page and what I want to go on the about page or other pages. This also optimises your work flow in the sense that you are strategically planning how you are going to construct this information before you have even begun to design anything.

Get that pencil and pad out

So you’ve got a basic idea of where the information is going to go or at least where it all is (thanks to the list). Its time for the age old best practice of drawing up your design as a pre mock-up (yes with a pencil and sketch pad). I can’t stress how much of a timesaver this techniques is, it can also be quite fun to. Drawing it out on paper means you’re blasting out possible designs in minutes and not hours. You do not need to draw artful master pieces just pre mock-ups that show the basic layout of the navigation, information and images.

By doing this you can still give the client an idea for you to work on and they may even draw one up for you. I have also had clients draw up for me with a pencil and pad what they want their site to look like, don’t be afraid to ask them to do this as in the long run its to better benefit them as it will more clearly outline what the client wants.

As oppose to doing all your mock ups in Photoshop/fireworks and then showing your client with you having put in a lot of work time and effort only to have the client reject the design. I would draw up 3 common designs used by most websites and 3-4 not so common ones, this gives the client a good variety of layouts to choose from or to ask you to improve or redraft changes to any one of the layouts you provided. something along these lines would be fine.

Fireworks/Photoshop mock-up

Now after having had such a laff at how bad the clients drawing skills are its time to do the fireworks/Photoshop mock up. It is up to you which software package you use they both can get the job done fireworks being the better for making websites mainly because of the seamless interaction it has with Adobes Dreamweaver. Photoshop as with the name is the industries standard for photo editing and image manipulation but is mostly used for mock-ups by many designers. With the launch of CS3 software by adobe all these wonderful software’s now integrate with each other, leaving the only 1 problem, being able to afford them all.

Now you can design with details, remember its only still a mock-up so no need for the perfection just yet may still be a visit or two back to the client before its finalised. I would recommend keeping the design in greyscale and change the colours with each presentation for the client this way you can easily start from base 1 so to speak, each time you need to adjust or totally revamp the colour scheme. That is all you need to worry about at the moment the colours, layout and how the information is set out.

Mock up pick

 

 

 

Get clients approval make all minor adjustments and finalise

Finalise all following

1. colours
2. layout
3. sizes
4. text used
5. adjustments
6. typographic changes
7. menu / navigation
8. Final price for design completion

What I recommend is to set two prices one for design and the other for coding and scale them out at 40% and 60% of the entire project price.

Reasons for this are

• Shows the client how the process works
• Means you get paid for exactly the work you do
• Shows the client how complicated the process is
• Makes you look more professional for repeat business (as it looks to the client as you have 2 professional skills and not only one.

Code up in what ever you want to code in (XHTML/CSS is Standard)

Now if you have a copy of Dream weaver or can code yourself then you’re fine with this part but if you don’t have the relevant software or are not a coder then I would recommend getting a coder from any of the major freelance websites to help you code your website. Another good reason for splitting the design and coding prices as I mentioned before.

I hope this has helped to all that are reading it, I never had this help when I first started out so count your selves lucky you have just had a full working and tested web design workflow system laid out for you to follow.

Any images/layouts or mock-ups used within this tutorial are for demonstration purposes only your own designs will be constructed to each individual clients needs.

The final website

PLEASE DO COMMENT

Thanks

Shaz

 

 

 

 

If you liked this tutorial then click the donate button

Subscribe to Miraz Tutorials by Email

 

Similar Posts:

• 13 web development workflow resources you will love?
• Go Freelance the best way to get Freelance work
• Sexy black Web 2.0 header +Menu +Title tutorial
• Web 2.0 header tutorials resource list
• 11 Web developer Resources and Tools You may not know about ?