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.
