Speed Up Your Design Processes While Reducing Errors
Posted Sunday, August 2nd, 2009A developer friend of mine once taunted me with the fact that all I do is ‘make things look pretty‘. Well as a web designer you strive to make every design you create as unique and special as possible. You cant simply dive straight into a design, there is a lot of ground work to cover off before even laying down your Pen to Tablet. In an attempt to avoid churning out generic looking websites I follow a very structured design process. Every stage in this process must be unique and covered off correctly.
If you work as a solo freelancer then you will have to cover all stages in a project, some of which are usually handled by other members of staff in an team environment such as Information Architecture, writing Functional Specs, Quotes & Proposals right the way through to some basic Development work, Cross Browser and Usability Testing and a range of Accessibility Checks. So it is very important to stick to your processes, not to rigidly to restrict your design, but enough to make sure all your bases are covered.
Don’t get me wrong, If I am inspired and have a great idea in mind, I don’t wait to write a functional spec before I visualise it! But before I show it to a client I always back track and make sure what I have visualised can actually be built!
With all these steps involved we need to have some way of simplifying and speeding up the process. So here are some general tips and tricks to help take away some of the leg work in a web project.
Milestones & Sign off
Setting milestones for a project is a good way of managing workload and time frames. It can be done as simply as adding dates into your iCal, or using some project management software like Basecamp which is ideal for this sort of thing. In a general web project I work to some specific milestones, these can be summarized and ordered into the following:
-
Information Architecture Phase
-
- Client Personal Persona – Highlighting an overview of your client is very important. Finding out their likes, dislikes, trends and expectations will make your life much easier in the long run.
- Website Schematic – (See Schematic & Key overview below)
- Wireframes – (See Wireframes overview below)
- Functional Spec – This can become a pretty hefty document, but should be produced and detailed for every unique page on a site. It should highlight what content and elements are to be on a page, and more importantly ‘how’ you intend elements to work. If there is an interactive section on a page, this document should cover either a visual or descriptive work flow and goals for the element in question.
- Sketch work – It wont harm to brainstorm and sketch out your ideas at this stage.
- Client Sign off of all above
-
Design Phase
-
- Design Stylesheet – This can also be referred to as an enhanced wireframe. I use it to display snippets of ideas on how I intend an element to work, and also add some colour to different sections, possibly even a patch of texture here and there. This sometimes helps clients visualise the final product and make any final amends before you waste a lot of time changing your final designs.
- Layered PSDs – (See PSD set up below)
- client Sign off of all above
-
Build Stage
-
- Slicing – Cut out and create all your textures, background images and interactive elements first, use a well formatted naming structure. I generally use BTN-name.jpg for buttons, BG-name.jpg for Backgrounds, ICON-name.jpg for Icons, IMG-name.jpg for inline images and LOGO-name.jpg for logos. This will help when searching for images in the build stage.
- CSS – (See Global CSS settings below)
- HTML/PHP - Writing from scratch and after every page written check it against web standards
- Client Sign off all above
-
Testing
-
- Cross Browser Checks – Try to test on as many browsers as possible, and on different Operating Systems. I test on both Mac and PC, generally on the following browsers: IE 6-8, Firefox 2-3, Safari, Chrome and Opera
- Accessibility – If you haven’t got it installed, Web Developer toolbar for Firefox is an absolute must and will totally speed up and improve your testing processes.
- Client Sign off all above elements before hosting
Site Schematics & Keys
Site schematics are a great way to improve you and your clients overview of a project and cover off any late changes or additions to a site build. I use Illustrator to create my Schematics, but there’s some great software out there like Omnigraffle which does a lot of the hard work for you. Tip to speed the process up if doing it manually is to create a key of elements which you can use over and over rather than creating everything from scratch.
Wireframe Elements
Wireframes are so important in the creation of websites. There is nothing worse than spending hours creating a PSD design which shows a three column layout, a large header and three paragraphs of text nicely fitted around 3 images aligned to the left, then the client decides they want the ‘exact’ opposite of what you have designed! Following the above processes should narrow down these sorts of errors, but it generally takes about 30 mins – 1 hour to create a wireframe, where as it can take 3-4 hours to create a full PSD, so even though you are adding time on, in the long run you will save time on error correction. Again, I do my wireframes in Illustrator, but you can use software like Giffy to do this.
Tip here would be similar to the Schematic tip, if you create an archive of elements such as blocks, image placers and link blocks, then it will speed up your wireframe creation.
PSD Set-up & Layers
I would highly recommend this little tip, if you have a PSD template already set out it will save you time, maybe only 5 minutes, but it all adds up! My template is a blank PSD, 1600px wide x 1200px high. It has no background set, and has all my layers already set for me. Setting up your PSDs with sensible names layers will also help when slicing your design up as you can block out say the whole Footer area and Header area. The PSD also has the following enabled and ready:
Grid Layout
I have a grid set out using guides. They are set centered on the document, one centre line, then some boundary lines to highlight 1024px and 1280px widths (Common screen widths), and 768px and 610px high to highlight the fold and average browser view. I also have a line set for 1000px wide which gives me a max width on a 1024px x 768px browser when there is a scroll bar present. (Don’t forget the scroll bar!) And also a width marker for 960px wide which is usually what I design to. 960px is a nice width as it allows for a decent border either side of your content.
Snap to Guides and Smart Guides
Having this enabled in Photoshop is a great way to get exact size layouts quickly and easily. It can be enabled in Photoshop by going to View > Show > Guides
I have uploaded the PSD template I use in most of my designs, it can be downloaded here.
Global CSS settings
Another time saver is to have a master CSS document set up with all the basic Global reset settings already written. The Global reset was introduced by Eric Meyer, his version can be found here: Eric Meyers Global CSS reset This is a pretty intense reset and is not always needed for most designs, but a simple reset can be produced by doing something like:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, em,
h1, h2, h3, h4, h5, h6, strong, th {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
a {
text-decoration: none;
}
Have a play around with your own reset and then save it to re-use in the future.
Posted Saturday, Jun 5th, 10
August 2nd, 2009 at 2:22 pm
Hi,
Im a Spanish Web designer who graduated two years ago from Northumbria University. I use the same steps as you mencioned here in every web project. I wanted to download your psd template and I also wanted to ask if you knew any program to create nice and fast wireframes. I normally use illustrator or Indesign to make them but it just takes too long some times. Clients think that wireframes are the actual design of the site!
Thanks!
August 2nd, 2009 at 3:30 pm
Awesome design process and great explanation as to why each stage is taken – will look into tailoring this for myself in the near future!
August 2nd, 2009 at 5:20 pm
[...] A developer friend of mine once taunted me with the fact that all I do is ‘ make things look pretty ‘. Well as a web designer you strive to make every design you create as unique and special as possible. You cant simply dive straight into a design, there is a lot of ground work to cover off before even laying down your Pen to Tablet. More: Speed Up Your Design Processes While Reducing Errors [...]
August 3rd, 2009 at 9:32 pm
Great post on the major steps in website development! Getting client sign-off on each milestone is extremely important – it can really save your butt (or your company’s) when a client drastically changes his/her mind at the last minute (I’ve been there before).
Getting sign-off on your wireframes can be difficult at times, however. Clients don’t always understand the purpose of the wireframes when they are static. You mentioned that you use Illustrator. I would like to point you to ProtoShare, which is a web-based software solution that lets you create interactive wireframes, thus allowing clients to see how each page is related. You can also export a detailed spec document that has all these actions in place.
ProtoShare offers a free 30-day trial and I’d be interested in your feedback on how it works with your current process.
Thanks again for a very educational post!
Cheers,
Andrea
August 3rd, 2009 at 9:39 pm
Hi Andrea,
Thanks for the comment and for your link to your software. I will take a peek and let you know what I think!
August 5th, 2009 at 11:55 am
Hello, these are absolutely time-saving and phenomenal tips for those who are freelancers like me:)
Thanks a lot!
August 8th, 2009 at 3:55 pm
‘allo mate!
I hope you weren’t suggesting I was the ‘developer friend’? Even if all you did was make things look pretty, you do a damn good job at it too :)
Although..
http://hicksdesign.co.uk/download/desktops/full/liningup.jpg
August 14th, 2009 at 8:49 pm
[...] The rest is here: Speed Up Your Design Processes While Reducing Errors · Branded07 [...]
August 23rd, 2009 at 6:29 pm
nice thanks for this
August 24th, 2009 at 8:56 pm
Hi Rob, this is a great article! I sure will apply your offers to my own design process soon.
I would like to join Nicolas’s request – Can you please publish your PSD template?
One last thing. You have mentioned designing to a width of 960px; Have you heard of http://960.gs/? Do you use this system?
Thanks!
August 24th, 2009 at 9:03 pm
Hi Ronny,
Thanks for your comment. I have heard of 960 yes but I do all my own bespoke CSS and PSD layouts as each job is slightly different.
Still definitely worth a look for those who don’t!
The template can be downloaded on the link in the article under the ‘Snap to Guides and Smart Guides’ section.
August 28th, 2009 at 2:35 pm
[...] Speed Up Your Design Process While Reducing Errors – branded07 [...]
August 28th, 2009 at 3:53 pm
Thanks Rob!
I’m trying to figure out now which ruler is which, but handle that soon enough.
Keep up the great work, and please keep posting helpful articles like this.
August 28th, 2009 at 7:17 pm
i like ur suggestion, Ur site is very creative, i liked it very much,
from where u got this type of ideas. u r doing great job.
Thanks
August 29th, 2009 at 12:36 am
[...] Speed Up Your Design Process While Reducing Errors – branded07 [...]
August 29th, 2009 at 6:18 pm
Nice use of Moo on this site man :) Always nice to see smooth effects and crisp designs!
September 1st, 2009 at 10:24 pm
Aghh….you don’t include any usability testing in the process! But the designer is so close to the project they don’t see things a fresh user would see. UserTesting.com has a panel of user who will record their screens and voices as they use your site (or look at you static designs). $29 and 1-hour turn-around…..there’s no excuse not to do it! (except you didn’t know it existed :))
September 2nd, 2009 at 9:11 am
Wow! What a very great post! I’m looking forward to implementing these steps in my future projects.
Many many thanks Rob! =)
September 9th, 2009 at 10:27 pm
Lovely coincidence! I was just setting up some files to reuse on every project so it saves me time, and then I end up on this post :o Brilliant :)
Thanks for the tips!
September 15th, 2009 at 11:37 am
Setting milestones is important. Like you, I usually break down my projects into a series of small tasks each with a description and a timeline. It helps you to manage your work and gives the client a sense of how the project is progressing. Great post.
September 20th, 2009 at 2:04 am
[...] Speed Up Your Design Processes While Reducing Errors · Branded07 Good read on Design Process speed up (tags: design webdesign userexperience planning web html freelance productivity usability freelancing news career process read job projectmanagement project freelancer) [...]
October 1st, 2009 at 12:01 pm
Great article, I really think you nailed it with the outline of milestones.
Like other who have commented I have found 960.gs a massive help. It speeds up my design process a load! The templates are great for wire-framing and PSD design. -Thanks for this article!
- lovin’ ya work!
- J
October 18th, 2009 at 10:32 pm
big thanks for this info.
October 20th, 2009 at 7:55 pm
Thank you! I love the way you have simplified the process. Sometimes as designers we want to just jump in and start creating without thinking through all the steps. I think one of your most important points is having the client sign off on each stage, this will greatly reduce the amount of time spent on going back and making changes.
I also have to know what the “Hero” layer is for? Thanks
October 21st, 2009 at 7:01 pm
[...] Speed Up Your Design Processes While Reducing Errors · Branded07 (tags: web planning webdesign productivity usability freelance project) [...]
November 2nd, 2009 at 1:51 am
You should check out Hotgloo for wire framing and flow charting. It is seriously the bomb!
I would also add, that SEO is pretty important these days. I know you know because you came up first when I typed Web Design Portfolio’s.
Nice work!
November 6th, 2009 at 12:08 pm
Pretty site doesn’t mean the correct site. Following the rules of usability one can avoid some gaps in web design but if we try to consider any incredible and glamorous designs from CSS Zen Garden Portfolio – I doubt they will be perfect from the point of usability. As a pity being simple is more effective for correct implementation of custom oriented web projects.
January 15th, 2010 at 6:20 am
Thank you so much for sharing. This narrowed everything down. I agree with the rest of the readers that you did an AMAZING job explaining the whole process. I have downloaded your templates and have customized it to suit it with my own perimeters and structure. This is a first for me (leaving a comment) which means to say that, you have definitely made a difference :) Great job! I would say 2 thumbs up for you but I guess you deserver more thumbs so, I’ll give you a “Hi-five” instead!! Keep it up!!
February 1st, 2010 at 12:34 pm
Thanks for sharing this, found it very useful, I already use a psd file like this but it’s not as well structured, I will definitely be making more use of the wire-frames and creating my own check list. loving the website too.
February 8th, 2010 at 6:06 pm
Great tips, As a new freelance designer i appreciate tips to help me deal with my clients and run my business in a better way.
Thanks
March 11th, 2010 at 3:26 pm
[...] Website Schematic – (See Schematic & Key overview below) [...]
March 11th, 2010 at 3:53 pm
Great (&very true) tips! Justinmind Prototyper will let you create sketches, wireframes, functional specs and even fully functional dynamic & interactive prototypes (without coding) to carry out user tests before u start developing! All in one, godd tool!
March 12th, 2010 at 1:59 pm
Hi am a freelance.. really ur tips are helpful for freelancers who actually have to work every thing on his own… Thanks…
March 13th, 2010 at 1:48 pm
Thanks mate.
I as well use a very simular design process as you mentioned above, but it’s always good to get sign off from the client.
Some client’s don’t particularly care about wireframes sometimes, so they just look at it like its a half ass job…
So sometimes with the smaller clients, I just show them the first concept rounds. I still do the wireframes but only for my own use.
Thanks for the tips though, great blog mate.
Lee
March 16th, 2010 at 4:27 pm
I am teaching young high school web designers in the States and one of my students stumbled upon this and shared it with me. Fantastic points that help me illustrate the process (well close to that in which you so eloquently share) we use is also used by top notch professional designers in the “real world”. Thanks so very much for sharing Rob. (as well as to all the commentators…)
April 27th, 2010 at 8:30 am
Great comments, well done site…
Everything you said I surprisingly already implement! Always glad to get validated.
All of the above is definitely necessary. I am leading development at a small web dev company. So we constantly make sure stakeholders are all playing the same game.
Any suggestions on speeding up PSD to HTML? My boss has been advocated terrible fireworks exports, but I just keep ignoring him. I feel there needs to be some sort of mechanical implementation. To many variably experienced hands cause too many stains.
May 29th, 2010 at 8:13 pm
Great article! I’m still in school for web design and development and approaching the end, and we’re yet to receive a clear layout of handling an entire project with a client so this was really helpful to me!
July 9th, 2010 at 2:52 am
as well use a very simular design process as you mentioned above, but it’s always good to get sign off from the client.
Some client’s don’t particularly care about wireframes sometimes, so they just look at it like its a half ass job…
So sometimes with the smaller clients, I just show them the first concept rounds. I still do the wireframes but only for my own use.
Thanks for the tips though, great blog mate.
Lee