Está en la página 1de 17

There was only one way to react upon hearing that Dan and Didier were going to begin

a publishing venture, which was going nuts in anticipation.

To say that Dan and Didier are talented is to say Iceland is cold; youre just covering the obvious, dahling. Ive spent many an afternoon volleying thoughts and ideas back and forth with both of them, I know that what youre about to read is a work of no small value.

Neither are strangers to producing quality work under tight deadlines and low budgets.

budgetdesign *
*
Increase Profit by Improving Process

This publication offers valuable advice to the beginner and professional alike, and will help adjust your own workflow for better results. To have an opportunity to learn from these two is a chance to learn from some of the best in the business.

Dave Shea
Vancouver B.C., Canada, March 2004

Didier P. Hilhorst and Daniel S. Rubin


Foreword by Dave Shea

Introduction ~
The dazzling days of the dot.com hype are over. In addition past and recent geo-economical developments have not improved the already sluggish market.

Contents
Introduction Planning DIscovery Setting Expectations En Garde! Take Out Your Pencil

2 3 4 6 7 8 9 10 10 12 13 14 14 15 16 17

No beating around the bush or sugarcoating: its back to bare-bones reality, whether you are starting out in the web design business or are a seasoned professional.

budget projects while preserving respectable profit margins. However, bear in mind that low budget projects are not a goal in isolation, rather a means to an end (be it quick cash, portfolio building or community involvement). And

Speed Up The Design Process Smart Recycling in Practice Why Modular Elements Work Preparing For Markup Code, Markup and Everything Else Speeding Development The Finish Line Round Up Top 10 List Resources Credits

Budgets are under pressure and clients request tight deadlines, to boot. Moreover offshore web design is getting increasingly popular through online marketplaces such as Elance, more often than not resulting in preposterously low bids on projects. We do not condemn nor ignore these practices. Instead we introduce a structured process focused on cost leadership and efficiency in order to productively deal with low

remember, do not sell your soul. Its not worth it.

This publication will provide practical advices and tips to improve output, effectiveness and efficiency on low budget projects. We think the content is best suited for freelance web designers, developers and coders alongside smaller web teams or companies, both novice and experienced.

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

Getting Started ~
While most of this document focuses on techniques specific to budget design, there are some very important first steps you should never overlook on any project, regardless of budget or scope:

Another critical step that should not be overlooked is communicationmany small agencies and freelancers may shy away from regular contact with their clients, especially on low-budget projects (the client is getting our work for next to nothing, why should we let them have more of our time?), but the fact is that staying in close contact throughout the project will keep things on track and on time. And email alone doesnt cut

1 2

Make sure you get a signed contract, describing the work to be performed,

ect maintenance and bug fixing (remember, you are helping them out by working on a tight deadline and with a small budget, so it is important to make sure you are not taken advantage of). This information will likely be pre-discovery, so you wont have every detail,

it, even across time zones: Call, and call often!

specifying how much you are getting paid and when payment is expected (this protects both you and your client).

Discovery
The discovery phase is just as important to the success of a low-budget project as it is to a multimillion dollar endeavorthe devil is definitely in the details. Knowing exactly what to expect is important to both sides of the agency/client relationship (as noted above, if you can afford to complete this stage before the contract is signed,

Be certain there is an understanding between you and the client regarding

but you can protect yourself from major scope creep by having an agreed upon outline, if nothing else.

the specifications of the project in general (deadline, budget, hosting, etc.) and if possible, draw up a project brief and attach or reference it in the contract. Be as specific as possible with regards to the scope of the project, including approval cycles, post-proj-

Complete the steps above before you get started on any actual work; you will thank yourself in the morning.

it will benefit you in the long run).

Remember that low-budget projects must have different goals from their big-budget cousins.

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

One important difference is future expansion: When designing to a tight deadline on an even tighter budget, you dont have time to worry about the long-term flexibility of what you produce. Budget design is less about creating a structure for future content and more about fitting around the content that is currently available. Make sure your client is aware of this limitation, and things should go smoothly (you will also get some repeat business when they are ready to add more content or additional layouts).

For example: Welcome About the organization PR/News Product/Service Details Contact Information (mailing address, phone, fax, primary email contact, etc.) CEO Photo/bio Organization logo (specify the file format) Abstracting the items in the list from the structure of the site will keep the client focused on the

Helpful Tip: Use a Content Management System


If you have the talent and the time, consider building a simple content management system (CMS) for use on this type of project. It should be reusable without requiring much customization. If time or ability is in short supply, use a pre-existing CMS that suits your needs, such as MovableType, or WordPress (it is important to choose a system that you can learn quickly and easily reuse for new projects, to save development time).

And speaking of fitting around the content, find out as much as you can about what the client has available and if possible, obtain all content from the client up front. You can make this process easier for your client by providing them with an example list of basic content types, with room for their own submissions. This should be a simple, fill-in-the-blanks list, without references to page names or locations (such as homepage or page footer).

task at hand: providing you with all their content.

Planning
By now, you should have a thorough understanding of the projects requirements, a signed contract and most or all of the clients content. Now it is time for the secret ingredient required for a fast turn-around: planning the remainder of the project. for the design, layout and navigation, you need to know what (and who) you are designing for. Before you can settle into your graphics editor Before you start structuring your markup and Using a simple CMS can speed up development, while giving you the added benefit of easier site maintenance in the future.

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

document flow, the content needs to be organized. Does the project need a database? Are there any functions that require scripting?

asked them for, and all in digital format no less (of course, you shouldnt expect this to happen in real lifelots of tugging, coaxing, and potentially tooth-pulling will be required, not to mention

Experience is the best teacher, and were always finding new items to add to our planning list. The decisions you need to make might include the following (customize this list as needed for your own projects or areas of expertise)

data-entry and image scanning). What do you do with it all? You will almost always need to apply some level of organization to the information; a simplified information architecture (IA) process.

You may find yourself tempted to spend a lot Minimum Screen Size/Resolution (e.g. 800x600, 1024x768) Target Browsers/Minimum Versions (e.g. Mozilla 1.3, IE 5.5, Safari 1.0) Server Side Language (e.g. PHP, ASP; this choice may be limited by platform requirements as determined during the discovery phase) Is a database required? (for data storage, mailing list) of time on this stage, and while we wont argue against it, we will say this: manage your time wisely, and only spend as much time as is strictly necessary. The goal is to take the stack of content your client has provided, and make sure it is organized into logical groupings (which should be basic on most small sites, and your client may even give you a head start if they have their act together), with enough structure to give you a good idea of the navigation requirements.

Now its time for the content. Your client has come through and handed over everything you

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

Streamline the Design Process ~


Creative thinking is exemplified by its tendency to be frivolousliberated from structure, regulation and formality. Yet the term low budget is often associated with adjectives such as discounted, unattractive or inferior.
Moreover, common belief suggests that whichever product or service bears the highest asking price is de facto of superior aesthetic and functional quality. We view it as an unfortunate misconception. Therefore, limited funding is by no means a valid excuse to deliver efforts and results of lesser quality.

Tip from the Trenches: Project Management


We use a project management tool that allows clients restricted access to their account and project information. In doing so we offer them the chance to get involved (through comments and discussion) and follow the projects progress more closely. This gives the project a more personalized feel for the client, while requiring minimum effort or customization on our part.

Setting Expectations
It is essential to have clients agree in writing to a simplified or limited design stage, specifically, one design, with a limited number of revisions and approval cycles. We are aware of the golden rule of three, a widespread practice that offers clients three compositions to choose from; we use it ourselves on many projects. Nevertheless we

If you dont already use a system like this, take a look at options such as Basecamp by 37 Signals (web-based, hosted) or Copper by Element (web-based, stand-alone), which are both affordable and useful.

Although were not suggesting you limit or neglect efforts put into the creative process, it is evident that we need to systematize adjacent issues in order to remain productive and profitable. This section looks at how we keep our design process streamlined, within budget and on time.

have come to the conclusion that this method is unfortunately not a viable or efficient option in relation to low budget projects. Moreover, we have found that most clients are not opposed to these limitations, rather they trust our judgement, ability and experience and are conscious of some

necessary trade-offs.

As mentioned earlier it is important to commu-

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

nicate clearly and often. With each project comes a little education towards the client. Education is about setting expectations and informing clients, not moaning or expressing dissatisfaction. Keep in mind that clients are presumably not aware of your design process or expected timeframe. Along with an explanation, present them with a visual representation of the process, including milestones, approval dates and expected final delivery (see Figure 1).

En Garde! Take Out Your Pencil


Before we start fiddling around in our preferred graphics editor we make small sketches, using an old fashioned pencil and a pad of paper. We like to call them vignettes: Quick, usually descriptive sketches (Figure 2). Vignettes capture the general idea of page composition without the mandatory level of detail required for final compositions. Vignettes are useful to determine positioning of collective elements such as navigation, sidebar, content, search, advertisement and artwork, among others. Vignettes do not require much
Figure 2

time: They can be quickly sketched allowing swift concept iteration. But what if I make a fool out of myself by sketching out some silly placement idea? No problem: Just turn your sketch into a ball of paper and make sure you have one of those fancy mini baskets hanging in your office. Not very productive, but great fun!

4 days
2 1 Planning & Discovery

1.5 weeks
3

1.5 weeks

Design Phase
IA & Compositions

Production Phase
XHTML, CSS & Testing
Although sketching individual vignettes for various sections is a useful process, we take it one step further by linking them (Figure 3). Linked

Content + Client Material


Figure 1

Feedback + Final Approval 4 days

vignettes give you the opportunity to visualize

4 days

Product Launch

how different sections of a web site interact. We use classic post-it notes (to depict individual

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

sections) which we stick on a larger canvas to indicate relations and connections. Not only does it reveal direct and indirect relationships but it will show which sections, items or elements serve a generic purpose and can be deployed site-wide. As noted earlier, due to budget restrictions we need to quickly assess the information architec-

Vignettes are very useful tools, but make sure you do not waste too much time defining concepts. Moreover, if you work in a small team let everybody participate and get input from others. Keep the best and ditch the rest.

across a number of models (low-end and midrange cars) they share common technologies such as the chassis, transmission and engine, but also parts such as doors, lights, knobs, and seats, to name just a few.

Speed Up the Design Process


The key to efficiency is recycling. In a digital environment duplication is a breeze. The concept were introducing is not commoditization, but clever reproduction, along with sufficient diversification and distinctiveness. This concept is not new and has been applied in the automotive industry since Ford introduced the Model T in the early twentieth century.

We use a similar approach in web design when working on low budget projects. In this case there

is a striking analogy between automobiles and web development: Graphic design is related to

Fast forwarding to the twenty-first century, we observe similarities between cars made by Volkswagen and Audi, yet they carry distinct appearFigure 3

aesthetics and code is related to technology, while parts relate to modular elements in both design and code. The trick is discovering the possibilities to effectively reuse and recycle design elements and guarantee distinctiveness at the same time.

ances. Volkswagen, Seat, Skoda, Audi, Bugatti, Bentley and Lamborghini are divisions of the same automotive groupknown as VAGbased in Germany. In addition to aesthetic similarities

ture requirements. By using linked vignettes we can combine basic information architecture and preliminary steps in the design process.

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

Smart Recycling in Practice


The concept is fairly simple: Build on practical experience acquired in the past, both in professional and personal projects. Whether you just started out or have a few years experience under your belt, the concept remains applicable. Nonetheless we would like to note that the process of smart recycling becomes easier and more productive as your portfolio grows. To illustrate smart recycling in practice well use a 3 step example as depicted below.

to look like a reasonably decent tab, but we arent done just yet. Step 2, we change the color to make sure we introduce enough distinctivenessa simple procedure of adjusting hue and saturation values. In step 3 we duplicate the original tab to create a multi-tab navigation, convert one to grayscale to denote an active state and add a few

details. Et voila, from shopping cart button to tabbed navigation. Most importantly, the entire process required less than 15 minutes.

Smart recycling is great fun. We are continually surprised by how elements and widgets created for past projects can potentially serve a similar or

While working on a recent project we developed a custom shopping cart button. During the design phase of a subsequent project we decided to use this shopping cart button as the foundation for widgets constituting the main tabbed navigational system (Figure 4).

In step 1 we get rid of all the specific elements that make up the original button, leaving a fairly generic element. Next we crop the button just to leave the area we are interested in. It clearly starts
Figure 4

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

completely different purpose in future projects, while preserving uniqueness. Moreover it becomes a real challenge to find innovative and creative ways to reuse elements as much as possible. Become productive: Recycle!

The similarities between the different sets of buttons are apparent, yet appropriate in the context of individual web sites. Once created, variations and possibilities are endlessthe sky is the limit. Naturally some projects require specific elements, therefore we emphasize that this method is best

Why Modular Elements Work


The concept of modular elements is similar to smart recycling, but comparatively more intuitive and apparent. Most websites are inherently constituted of small elements and widgets duplicated over several pages. Bullets, icons, arrows and buttons are generic elements which can serve different purposes. Hence, we try to reuse these elements as much as possible to accelerate the design process when working on low budget projects. With minimal effort we can create buttons for almost any purpose. The distinctiveness required for smart recycling is of lesser concern in relation to modular elements. Case in point, buttons do not dictate the overall look and feel of a website, rather they compliment the total package (Figure 5).
Figure 5

used when time is scarce and/or your budget is tight. While modular elements are fine, its a good idea to create new elements regularly. We usually dedicate a small number of hours per week to try new things and experiment with current graphics and new ones alike. Innovation is as fundamental as effectively deploying existing widgets in current projects.

Preparing for Markup


The vignettes created earlier illustrate both the placement of elements and which of the elements will be deployed site wide. We reproduce the vignettes in a graphics editor and include details along the way, choosing style, colors, fonts, photography, buttons etc.until satisfactory. These steps might be in part or as a whole repeated with

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

10

each client approval cycle. Once we have converted all the vignettes into compositions which contain all the details and elements required, its time to get ready to break down the beast into (X)HTML and CSS (with the occasional table for tabular data, of course). But before we go on, one primordial yet ambiguous question remains: Mark-up or design, which comes first? So many souls, so many answers

methods, we prefer to start out in a graphics editor for its freedom and flexibility during the creative process. Compositions are not limited by technologies such as CSS, (X)HTML or an assortment of browser bugs. While its fine to abstract from real-world implementation requirements during the creative process (innovation), we recommend you take into account basic limitations to avoid disappointment or infeasibility (efficiency). Knowledge and understanding of Using one layout for all pages might seem like a simple idea, but many people overlook this time-saving shortcut. This way, when broken into XHTML/CSS, you can create one template page and just duplicate it for the rest of the site. The vignettes created earlier will give you an idea of the common elements needed.

Tip from the Trenches: One Layout Throughout

The egg and the chicken Freelance workers, small web shop owners and employees are often both designers and coders at some given point in time. On the one hand a designer might start out with compositions and end up by working on the code. On the other hand a developer might follow the opposite routefirst creating a skeleton using (X)HTML and CSS then finishing his work by adding graphics. The process you use and apply is eventually a matter of preference (or experience).

languages such as CSS and (X)HTML is crucial in streamlining the conversion from composition to mark-up (whether you use a WYSIWYG editor or not).

formatting model. Once you get comfortable with your knowledge of CSS and its limitations you might instantly visualize the mark-up requirements.

While the grid has been criticized and received some negative publicity in the past we still think of it as a powerful and critical tool not only to base the design itself on but also to effectively convert compositions. Currently CSS-P (positioning HTML Elements with cascading style sheets) is inherently based on grids and blocks.

Regardless of the differences between the two

Unfortunately, as such CSS is a limited visual

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

11

Code, Markup and Everything Else ~


Youve done the thinking, the planning, preparation, organization and design. Now its time to put it all together, quickly and efficiently.

Important Note! Dont Steal Layouts


When reusing CSS, make sure it is your own, or from sources that intend reusedont copy someone elses stylesheet for your own purposes! What if I dont have any previous work? Well then, follow this simple example:

The main focus should be converting the visual design into a working page and doing so in a short amount of time, with as little effort as possible. As with the design phase, reuse is your key to success.

others). These are great tools if you do not have any previous work or experience to draw from they can be helpful to even seasoned developers in a real crunch for time (see the Resources section for a list of links).

BAD: surf to Zeldman.com, Save page as, use in your project GOOD: use layout generators and free templates Follow this guideline, and you will be able to

We use XHTML and CSS to get our work done fasta properly structured XHTML document flow is easy to create (because the markup is abstracted from the design, it allows fast, logical ordering of elements and content), and CSS is incredibly easy to reuse, whether you are recycling your own rules and styles, or using one of the many available online CSS layout and element generators (such as Accessifys Listamatic and body { text-align: center; min-width: 600px; } Reusing design elements with CSS is much easier than with table-based layouts. For instance, if you want to center your fixed-width layout in the browser window, just use the following rules:

look yourself in the eye when you wake up each morning.

#wrapper { margin:0 auto; width:600px; text-align: left; }

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

12

These rules can be copied and pasted to center any layout (try doing that with the outermost nested tables without having to make additional tweaks). Simply adjust the width and min-width sizes, and youre good to go. We keep a master file of styles to reuse in new projects (this is especially useful with styles that require browser testing and tweaking; once they are working, just copy and paste to use them again). Another good example is link styling: a, a:link { color: #f90; text-decoration: none; padding: 0 0 2px 20px; border-bottom: 1px dotted #f90; background: url(images/arrow.gif) no-repeat 0 50%; } a:visited { color: #333; border-bottom-color: #333; } a:hover { color: #960; border-bottom: none; }

If you want to use this same link style on another project, just copy and paste the rules (make sure any referenced images are created) and thats it!

Helpful Tip: Server-side Includes are the Shiznit


If your server platform supports it (most do), become comfortable with using dynamic includes (via SSI, PHP, ASP, etc.) to more easily reuse modular site elements (i.e. sidebar, navigation, footer, etc.) this will shave time off the entire development process, while also making the entire site more extensible, and easier to maintain (need to add a new link to the main navigation? Just change one include file).

Speeding Development
If you only have to support one web browser, then good for you (though the intended use had better be a very closed intranet or similar project), but more likely you need to support most popular browsers, and that means you will probably need to use some CSS hacks. To minimize the use of hacks and to reduce the amount of time it takes to get your layout looking good across browsers and platforms, we prefer to develop using a Mozillabased browser for the initial testing (Netscape 7, Firefox, and Mozilla itself) because (as of this writing) their rendering engine is the most correct of all browsers on the market. In contrast, Internet Explorer has the worst engine, and most of the CSS hacks you will need to use are intended to fix problems with IEs rendering (see the Resources section for more information).

Therefore, you will decrease development time (and the number of headaches suffered) by using the following process: Initial Development/Platform Testing: Mozilla et. al. Browser Test on all other browsers except IE, and fix any problems Test on IE (whichever versions you need to support), and apply CSS hacks

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

13

Another helpful tool is the online markup and CSS validation suite provided by the W3C (see Resources). These free web-based utilities can save you from hours of sifting through your XHTML and CSS documents looking for the tag thats managing to screw up everything about your layout. Validate your markup and CSS early and often as you convert your visual layout, but dont try to validate during the entire development processafter the first template page is complete, forget about validation: chances are, if the initial page validates, you wont break it as you create the rest of the site.

Dont forget to perform at least basic user testing (if all else fails, use family members as your test subjects) to make sure no glaring usability problems exist. Its important to have someone other than you or your client view the site before it goes live, as they are likely to see things you will take for granted.

Roundup
By incorporating these techniques and methods into your approach to low-budget projects, they will begin to make better business sense (optimized workflow = faster development = higher profit). As long as you can keep a good balance

The Finish Line


All that remains is to add your content (following the organization you defined earlier), and test each page of the site to make sure everything is properly displayed, and that no layout bugs have been introduced since your initial browser testing (bugs and related fixes at this stage will be limited if you follow the development process above).

between time saving tricks and a quality end product, both you and your clients will be happy with the results.

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

14

Top 10 Rules of Budget Design ~

and just duplicate it for the rest of the site.

1 2 3 4

Make sure you get a signed contract, describing the work to be performed, specify-

present them with a visual representation of the process, including milestones, approval dates and expected final delivery.

8 9

When reusing CSS, make sure it is your own, or from sources that intend reuse

dont copy someone elses stylesheet for your own purposes!

ing how much you are getting paid and when payment is expected.

Be certain there is an understanding between you and the client regarding the

5 6 7

The key to efficiency is recycling. In a digital environment duplication is a breeze.

To minimize the use of hacks and to reduce the amount of time it takes to get your

The concept is not about commoditization, but clever reproduction, along with sufficient diversification and distinctiveness.

layout looking good across browsers and platforms, develop using a Mozilla-based browser for the initial testing (Netscape 7, Firefox, and Mozilla itself) because (as of this writing) their

specifications of the project in general (deadline, budget, hosting, etc.) and if possible, draw up a project brief and attach or reference it in the contract.

Most websites are constituted of small elements and widgets duplicated over

rendering engine is the most correct of all browsers on the market.

The discovery phase is just as important to the success of a low-budget project as it is

several pages. Bullets, icons, arrows and buttons are generic elements which can serve different purposes. Reuse these elements as much as possible to accelerate the design process.

to a multi-million dollar endeavorthe devil is definitely in the details.

10
styles.

Use XHTML and CSSa properly structured XHTML document flow is easy to

create (because the markup is abstracted from the design, it allows fast, logical ordering of ele-

Keep in mind that clients are presumably not aware of your design process or ex-

Use one layout for all pages. Its a simple idea, yet this way, when broken into

ments and content), and CSS is incredibly easy to reuse, such as recycling your own rules and

pected timeframe. Along with an explanation,

XHTML/CSS, you can create one template page

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

15

Resources ~
General Interest
Starting a Business: Advice from the Trenches http://www.alistapart.com/articles/ startingabusiness/

Designing for Limited Resources http://www.boxesandarrows.com/archives/ designing_for_limited_resources.php

Layout Generators
Max Designs List Generators http://css.maxdesign.com.au/

One Approach To The Design Process http://www.designbyfire.com/000026.html

List-o-matic http://www.accessify.com/tools-and-wizards/ list-o-matic/list-o-matic.asp

CSS Crib Sheet Time Management: The Pickle Jar Theory http://www.alistapart.com/articles/pickle/ http://www.mezzoblue.com/css/cribsheet/ Layout-o-matic http://www.inknoise.com/experimental/

Management Tools
Getting Paid http://www.alistapart.com/articles/gettingpaid/ MovableType http://www.movabletype.org/

layoutomatic.php

The Amazing Rolloverer http://www.inknoise.com/experimental/

The Importance of Process in Web Design http://www.andybudd.com/blog/archives/ 000142.html

WordPress http://www.wordpress.org/

rolloverer.php

Development Tools
Copper Project XHTML Validation http://validator.w3.org/check/referer http://www.copperproject.com/

A Design Process Revealed http://www.stopdesign.com/also/articles/ design_process/

Basecamp http://www.basecamphq.com/

CSS Validation http://jigsaw.w3.org/css-validator/check/referer

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

16

Credits ~
Didier Hilhorst
d.hilhorst@sinelogic.com

Dan Rubin
d.rubin@sinelogic.com

Dave Shea
dave@mezzoblue.com

Didier Hilhorst is a founding partner at Sinelogic and has several years experience in user interface design working with different clients, including non-profit organisations. Didier holds a bachelors degree in economics and is presently pursuing a masters degree in Informatics and Economics at the Erasmus University in Rotterdam, The Netherlands, where he currently resides. Didiers focus has always been on improving the way users interact with systems and applications by exploring graphical representation of information and interactive elements. Didier publishes a monthly column on interaction design at Digital Web Magazine.

Dan Rubin is a founding partner at Sinelogic and is a highly accomplished graphic designer and usability consultant, with over ten years of experience designing and developing interactive user interfaces. Dan is a leading designer and developer in the field of web standards, specifically focusing on the use of Cascading Style Sheets (CSS) to streamline development and increase flexibility and accessibility. His usability contributions to the web development world have been published online and in print. Dan is a contributing author to the 2nd Edition of Cascading Style Sheets: Separating Content from Presentation, published by Apress.

Dave Shea is principal and creative director at bright creative, a firm specializing in graphic design, print design, web design, CSS design, (X)HTML coding, e-commerce, content management strategy, systems analysis and weblogs. Dave is the cultivator of the internationally acclaimed css Zen Garden and a member of the Web Standards Project. A graphic designer by trade, he writes about all things web for his daily weblog, mezzoblue.com. Hailing from Vancouver, Canada, you can usually find him at the local farmers markets or independent coffee roasters.

Budget Design: Increase Profit by Improving Process. March 2004. Copyright 2004 Sinelogic. All Rights Reserved. E-mail: publications@sinelogic.com. http://www.sinelogic.com/publications

17