Warning: strtolower() expects parameter 1 to be string, array given in /nfs/c06/h06/mnt/184288/domains/markboulton.co.uk/html/_app/core/private_api/_cache.php on line 337

Warning: strtolower() expects parameter 1 to be string, array given in /nfs/c06/h06/mnt/184288/domains/markboulton.co.uk/html/_app/core/private_api/_cache.php on line 341

Warning: strtolower() expects parameter 1 to be string, array given in /nfs/c06/h06/mnt/184288/domains/markboulton.co.uk/html/_app/core/private_api/_cache.php on line 337

Warning: strtolower() expects parameter 1 to be string, array given in /nfs/c06/h06/mnt/184288/domains/markboulton.co.uk/html/_app/core/private_api/_cache.php on line 337
| Journal | The Personal Disquiet of Mark Boulton

The Personal Disquiet of

Mark Boulton

Blog Category: articles

Start Your Own Business

This article was published in .Net magazine before Christmas last year. I was asked to write a small article on making the leap to working for yourself (as it was still fresh in my mind). It’s by no means a definitive guide (for example, there is no mention of the legal aspects of setting up and running a company). It’s also aimed at a UK market, but a lot of this will work no-matter what country you’re in. Most of it is actually just common sense.

It’s been eighteen months since I went freelance, and almost six months since starting my small design studio. I’m no expert. So, this article documents what I did, and when. It also features a little interview with our very own Colly.

[Article originally published in .Net magazine in November 2007]

So you want to work for yourself? And why not. You can dictate your own hours, have the freedom to take time off when you want it without getting into trouble from the boss; you can do what you want to do, when you want to do it. At least, that’s what I thought when I started working for myself a year ago. I couldn’t have been more wrong.

The freedom of being in control is terrifying. The pressure of knowing it really is down to you whether you succeed or fail can weight heavy.

Where I live, in Wales, almost 400 people a week start their own business. Everybody is different and end up giving it a go for a variety of reasons. However, most of these people share common ground. Things that they need to think about when planning to go it alone.

As I said, I’ve only been my own boss for a year now, so I wouldn’t call myself an expert on this. I can however tell you my story, and the mistakes I made along the way.

Why do it in the first place?

Starting a business is one of the most challenging, but rewarding, things you can do. The reason most people never end up doing it—although I’m sure many would love to—is because they think it takes luck, a clever idea or just knowing the right people. That’s not true. It’s about you.

Maybe you have a great idea that you just can’t keep a secret anymore. Maybe a colleague has approached you to setup business with them on the back of a contract they’ve just secured. Maybe you just hate your job and wish you were your own boss. The catalyst is different for everyone.

For many people, including myself, they’ve found their career take a certain path where self-employment is the next natural progression. I was working full-time at the BBC as a designer when my enquiries to do freelance work reached such a peak that I was doing two jobs. At that point, one of them had to go before my wife did!

Whatever the reason to set up business, it’s a personal one that only you can make.

Do you need a business plan?

A Business Plan is just that; a plan about your business. It’s used to look ahead, allocate resources, focus on key points, and prepare for problems and opportunities. It doesn’t need to be a scary document that you take months to write. However, some banks, investors, or other funding bodies will insist on a well-written, concise Business Plan on which to base their decisions, so in that sense, it’s a very important document.

A standard business plan will contain the following:

  1. Executive Summary:
  2. Write this last. It’s the summary of the document.
  3. Company Description:
  4. This details how and when the company was formed.
  5. Product or Service:
  6. Describe what you’re selling.
  7. Market Analysis:
  8. You need to know your market. Establish the need for your product and why people need it.
  9. Strategy and Implementation:
  10. Be specific. Investors love this stuff. They need to know you have a clear plan of attack.
  11. Management Team:
  12. Include backgrounds of key members of the team.
  13. Financial Plan:
  14. Include a profit and loss account, cash flow breakdown and a balance sheet.

Make no mistake, writing a business plan can be a daunting prospect, but it doesn’t have to be great the first time around. A business plan should be revised throughout the business’ lifetime - it’s not just for startup businesses. I’ve just gone through my third draft in my first year of business.

As usual, the web has some great resources to offer. The BBC has a good overview of ‘How to Write a Business Plan’ (http://news.bbc.co.uk/1/hi/business/2943252.stm).

Get help

This is perhaps the most important step in setting up your own business. You will realise you can’t do it on your own. You will need good advice from the following people:

  1. An accountant:
  2. Preferably a small business specialist.
  3. A bank manager:
  4. All new businesses should be allocated a small business specialist from their chosen bank.
  5. A financial advisor:
  6. You will need the advice of somebody who can assist in the financial direction of the company.
  7. The Government:
  8. Yes, the government can help.

Out of all of these, I’d advise you spend the most time trying to find a really, really good accountant. Many businesses owners will tell you that a good one is worth their weight in gold. In addition to the usual accounts stuff they can give you invaluable advice.

A great source of business advice for England and Wales is the Business Link website. (http://www.businesslink.gov.uk) Here, you can find information on starting up and funding options, to Health and Safety and employing people.

The different kinds of ‘company’

To register as self-employed in the UK, you have to register with the Inland Revenue as one of several company types:

Sole trader

Being a sole trader is the easiest way to run a business, and does not involve paying any registration fees. The downsides are you are personally liable for any debts that your business incures and, if you do well, you could be paying high income tax.

A Partnership

A partnership is like two or more Sole Traders working together. You share the profits, but also the debt.

A Limited liability partnership (LLP)

An LLP is similar to a Partnership. The only difference is the liability, or debt for example, is limited to investment in the company.

A Limited liability companies

Limited companies are separate legal entities. This means the company’s finances are separate from the personal finances of their owners.

Franchises

A franchise is like a license to an existing successful business.

Social enterprises

This one probably doesn’t apply to web development. According to Business Link, Social enterprises are ‘… businesses distinguished by their social aims. There are many different types of social enterprises, including community development trusts, housing associations, worker-owned co-operatives and leisure centres.’

This is something you must do in order to pay your taxes. Speak to your accountant about which will suit your needs better.

How to finance yourself

Before I made the leap into full-time self-employment, I read a lot of articles which said I’d need six months salary in the bank before I went out on my own. Although that is good advice, depending on your salary, that is quite a hefty chunk of cash that will be hard to save.

Like most people, I didn’t have that sort of money knocking about so I had to have a close look at cash flow over the first few months of business to ensure I could pay myself. This cash came from several sources.

  1. Money in the bank.
  2. I did have some money in the bank. Not a huge amount, but I had some.
  3. Contracts.
  4. I had a number of contracts signed and ready to go when I went on my own. These proved invaluable in kick-starting my cash flow.
  5. Funding.
  6. There are many funding options available. Grants, loans and private investment. All of them except grants require you to pay them back though, and for that you need a good business plan and an idea of how you’re going to pay them back. Grants (and small business loans) are available from local government bodies for example. I’d advise making an appointment with your local Business Link to discuss your options.
  7. The Bank.
  8. Get an overdraft facility. Mostly, even for limited companies, these will have to be personally guaranteed - which means if you default on paying it back then you’re personally liable - but they can provide a vital buffer for cash flow in those early days.
  9. Charge up-front.
  10. When you get a contract in, especially if it’s for fixed cost, then charge a percentage up-front. This will help with the cash flow. If you can’t charge up-front, then make sure you charge monthly. Again, it will keep the cash flow nice and happy.

Basic accounting

What is Cash Flow?

Cash Flow is the life blood of your new company. It’s the ebb and flow of cash coming in and going out. The aim is to have a positive cash flow, so there is more cash coming in than there is going out once you deduct all your overheads.

You will also need to forecast your cash flow. This is still one of the most sobering things I have to do regularly because is clear shows the current state of your business. Every month I review my cash flow and I forecast for three months, and for six. I make a list of all the invoices which need to be sent in those two time periods and make sure I’m hitting my monthly and quarterly cash flow targets. Like I say, it can be scary at times.

Tax

There are two types of tax: Income Tax and Corporation Tax. For Sole Traders, Partnerships and LLP’s, you will be charged income tax on your profits. That’s important, so I’ll say it again. You’ll only be taxed on your profits. Things like equipment costs, rent, phone and other office expenses are deducted from this.

Limited companies are charged Corporation Tax on their profits. The employees of that company are charged income tax on their income. As with a Sole Trader etc. Limited companies are only taxed on their profits.

VAT

If your business earns £64,000 or over in a financial year, you have to register for VAT. If you think you might hit that target during the year, you can voluntarily register before hand.

Being VAT registered means you have to charge your customers for VAT on top of your services. Currently in the UK, VAT is 17.5%. You’re in effect collecting taxes for your government. Nice aren’t you? One of the advantages of being VAT registered is that you can claim VAT back of purchases for your business. Say you bought a new computer, you could claim the VAT back from that purchase.

All this VAT gets added up and you have to pay the government every quarter.

For more information of your obligations as a business to pay your taxes, go to the Inland Revenue website. There are some great tools on here to help you - you can even file your taxe return online.

Establishing a customer base

Prior to starting my own business, I worked full time. As a designer, or developer, you will probably get enquiries to do freelance work in your spare time. This is the time to start building up your customer base whilst you still have the security of a full-time job. Sure, it means burning the candle at both ends, but it does ensure a smoother transition from employed to self-employed.

Schmoozing

A good way to drum up business is to network. This can be done traditionally, such as Business Club lunches and events organised by your local authority. One of the most effective ways of getting your face known is by attending the many web conferences, workshops and meetups going on throughout the country. From Pub Standards and the Oxford Geek Nightsto the larger conferences such as @Media and dConstruct. They all provide a great platform to meet people in the industry who may require your services.

Contribute and Interact with your market

If you’re a design studio who designs websites but has a strong focus on User Experience design, then write a company blog about that subject. If you write interesting content, and give it away free, then traffic to the site will increase as will your page rank in Google. This means that if a potential client searches for User Experience, they will get your site in their search results and there is a clear path into your site from some quality content.

Giving a little quality content away for nothing may make the difference in landing that big next project.

Making the switch from being employed to self-employed

The power of the Day Job

If you’re employed, but planning to go freelance, then keep your day job for a while. Get work in to work in your spare time, but use the cash that generates as a buffer for when you do go it alone. Make sure the two worlds don’t collide though. Keep your boss happy in work, but now is the time to be a bit of a jobsworth. Get in on time, leave on time, take an hour for lunch - do everything you can to maximise the time you have available to work on the freelance projects.

A smooth transition

Working two jobs is hard, and you won’t be able to keep it up for long. This stage in starting up your business is perhaps one of the most difficult. The aim is to ensure a smooth transition from being employed to self-employed. You will need some cash in the bank, a few contracts for your first couple of months of being on your own. The hard thing is keeping you current boss happy in the process. It’s not easy.

There are a number of great job boards which advertise design and development projects regularly. The two I’ve used successfully in the past to drum up some business are the 37Signals Job Board, and Cameron Moll’s Authentic Jobs.

How to achieve long term success

Keep one eye on the future

Forcasting business can be quite difficult. How does cash flow look in three months time? Are you saving enough money for the end of year tax bill? To succeed in business I think you need one eye on the present and one eye fixed firmly in the future. The short-term future. Whilst it’s great to have dreams and aspirations for your new business, that shouldn’t be at the expense of ensuring you have enough work coming in over the next six months.

Customer service

Remember if you’re a designer or developer, you’re providing a service. We’re in a service industry and with that comes Customer Service. I know it may sound a bit trite, but treat clients as you would like to be treated. Treat them with respect and never lose sight of that fact that they are paying the bills.

Wrapping up

Making a leap of faith is the first step to starting a business. However, for your business to grow and flourish, you will need much more than faith. First off, you must have upmost confidence in your ability to make it work. You need to be aware of the risks, but not scared to death by them. You’ll need to have good organisational skills, flexibility and a high degree of commitment. Most of all, you need to have fun and love what you do.

Interview: Simon Collison

[The following is an interview conducted in Nov 2007]

Q. Why did you end up working for yourself?

After four happy and successful years with another great agency, I did start to dream about being in control. I’d sometimes receive offers to work for other people, but nothing ever grabbed me. I’d get a few people emailing me every week with requests for websites, and I grew in confidence, realising that I could actually earn enough money to survive. Generally, I just wanted to nitpick clients and decide who to work with on projects.

Q. What do you love about working for yourself now?

The autonomy. I love making my own decisions and being in total control of the direction in which we are heading, the clients we choose to work with, and being able to handpick colleagues!

Q. What don’t you like about it?

Hmm, lots. The hours (I did over 100 hours last week). In general, it can take over your life if you want to produce quality work with no cutting of corners. Sacrifices are inevitable – everything from working the majority of evenings and weekends to missing your best friend’s birthday. If there is an immovable deadline and the work needs doing, the buck stops with you, and no excuses are good enough.

Perhaps the biggest shock to the system is the unavoidable responsibility for ensuring that cash flow is steady and that we have enough money coming in to pay the wages, cover office rent and general overheads.

Q. If there where three key pieces of advice you could give to someone who was thinking of going into business for themselves, what would they be?

Just three? OK. One. Achieve a work/life balance and stick to it as best you can. Ultimately though, except for crisis stuff, you’ll end up putting work first, so be prepared for that.

Two. Trust yourself. You will make mistakes, but generally the decision to work for yourself won’t be one of them. Have the courage of your own convictions and just go for it! You will know when you are ready and have enough work or contacts to ensure you break even and can pay yourself.

Three. Realise that you are not an expert at everything, so get people to help you. Get business advice, get to know your bank manager, and use an accountant. When you are seriously busy, the last thing you’ll want to be doing is invoicing, or doing anything at all in Excel.

Q. What’s the biggest mistake you’ve made since you started up?

Under-charging in the first few months. The temptation from day one is to bring the work in and build up a client list. This kind of thing will not wreck your business, as you’ll simply put the extra hours in, but it is seriously detrimental to your health and lifestyle, and even the quality of the work you produce.

Q. Where do you see your business in two years time?

Thriving – you gotta be confident, right? We’re lucky in that word of mouth and recommendations bring the work to us. We don’t take this for granted and never will, but the hard work in our first year is paying off, and we now have a solid foundation to build upon.

I never dreamed there’d be five of us within a year, and we hope to grow to about ten soldiers in the next 24 months. When you work this hard, you have to remember to be proud and enjoy what you do.

[Finally, rounding off with a couple of boxouts from the article]

TIMELINE: Six months to making the plunge

6 Months to go—Start building a customer base. Trawl the freelance websites (job boards - authentic jobs etc) and get yourself a few freelance gigs. Register your business with the Inland Revenue. (see section on deciding what business you should be). I’m afraid for the next six months, you’ll be working two jobs. If you can get funding for your venture, start researching what you can get and when.

5 Months to go—Continue to get those freelance gigs in. Begin to research a good local accountant. Book an appointment with several banks - you’ll need to get a business bank account - but it’s worth shopping around. Have meetings to discuss funding opportunities.

4 Months to go—Found a good accountant? Right, you need to have a meeting with him/her regarding your new venture. Finalise your bank account with your chosen bank. Continue to build up your customer base. Now is the time to speak with some local companies to see if they need freelance help. Are you going to be working from home? If not, you need to start looking for somewhere to work from.

3 Months to go—You should be getting some money in from your freelance gigs by now. Save it—you might need it in a few months.

2 Months to go—You should be working like a dog now and really looking forward to working for yourself. At this stage, everything should pretty much be in place for you to make that smooth transition from employed to self-employed.

1 Month to go—Hand in your resignation. If possible, try and get some work booked in for the first three months of being on your own. Make sure you also get paid by these clients monthly so cashflow isn’t an issue.

Ten things I wish I’d known

10. Wearing many hats

Before I set up business, I’d read a fair few ‘how to’ books and a number of blogs that talked about the many roles you would have to adopt whilst running your new business. I still struggle with it. On a typical day I am a designer, a project manager, a salesman and a book-keeper. Each role requires a different mindset and it can be very difficult to switch between them.

9. Home is for home things

Keep work and home separate. When you work at home, this can be difficult. When I had my workplace in my house, I made sure it was a completely different room which was furnished like an office—not just your spare room with a desk in it. One tip which worked for me: wear your shoes during the day, when you’re working, and at night, take them off. It’s a silly little thing, but you will soon associate shoes with work. So, when you take them off, that’s home time.

8. What goes around comes around

Be nice to people. Business doesn’t have to be unpleasant. Treat people how you expect to be treated. Be fair, professional and above all, polite.

7. Don’t take on too much

This one is a killer. I still do it and probably will for many years to come. When you don’t have any work booked in in three months time, the tendency is to get more work in now with the hope that, financial, you’ll be more stable in the months you don’t have work. It makes sense, but you end up working too hard. As a result, quality dips, customers get a bad service and, over time, your business will dry up.

6. Hire somebody before you need to

I’ve recently had this problem. I’ve been so busy recently that I needed help. After hiring someone, I realised I’d been in this position for too long. I needed help about three months before I thought I did.

5. Don’t under-charge

Work out your costs on an hourly, or daily, basis and then add 30%. It covers costs and, until you get the hang of it, you’re probably under-charging anyway. I was.

4. Confidence

Remember, you’re the expert. You’re not doing this job because you’re average at it. If a customer wants to buy your product, or hire you, it’s because you’re good at what you do.

3. Customer Service

If you’re a web designer or developer, unless you’re producing and selling a product, you will be providing a service. With a service comes Customer Service and, yes, customers are always right.

2. Accounting Software

I was using a homemade system coupled with an Excel spreadsheet for my accounting needs. As the business grew, I needed something a little robust. I wish I’d learnt Sage or something sooner because now I don’t really have the time.

1. Plan for tomorrow

I have three to-do lists. A Month list, a Three Month and a Six Month. Each list has a bunch of things I need to do for that time period. This allows me to have short, mid and long term goals. I class Six Month as long term here as, in this industry, I believe you need to be adaptable and can’t really plan for more than six months in advance.

Just the way I like it

As I said, this is just the way I set things up, and some of the many thoughts and conclusions that I came to over the past couple of years of running my own business. Hope it may help some of you thinking of taking the plunge.

Filed in: articles, business, design, personal. on February 20th, 2008

Icons, Symbols and a Semiotic Web

{title}Semiotics, loosly speaking, is the study of signs. Simple enough. What becomes difficult is defining what a ‘sign’ actually is.

When we think of signs we think of the things on the left there don’t we? We think of something visual like a signpost. But, ‘signs’ are made up of many different components - words, sounds, body language and context - all of which combine to create a visual language which help us understand something, be that the way to the beach, or if somebody doesn’t really like us the first time we meet them.

What this article isn’t about

This article is not about semiotics. I’m not going to go into great depth about it as it is such an indepth field I’ve barely scratched the surface over the past few months. What I am going to talk about is the usage of semiotics in Information Architecture, Wayfinding and Icon design for the web. It’s a big subject so this will probably be an introduction to something I will cover in more depth in a chapter of a book I’m currently writing (more about that another later).

Starting at the beginning

We’ve established that semiotics is the study of signs, and signs can be made up of all sorts of stuff like language, pictures, body language etc. but what does all this mean in a practical sense? Well, it might help to give you a brief overview of the field of semiotics, then go into some of the theories that help make up it’s core.

Modern day Semioticians, not only study ‘signs’ - it goes much deeper than that - they study how meaning is formed. They study how people first of all interprate a sign, how they then draw on cultural or personal experience to understand a sign. In that sense semiotics is about communication (see the parallels with design?).

There are three main areas of semiotics; the signs themselves, the way they are organised into systems and the context in which they appear.

We’ll have a look at the first of these in this article.

The Signs themselves

Charles Sanders Peirce is an American philosopher recognised as the founder of modern semiotics. Peirce was interested in how we make sense of the world around us and in this sense was less concerned with the linguistic aspect of semiotics pioneered in the early 1900’s by the Swiss professor of linguistics, Ferdinand de Saussure.

Peirce proposed that signs could be defined as three categories; Icon, Index and Symbol.

  1. {title}Icon - An Icon sign is a sign that resembles something, such as photographs of people. An icon can also be illustrative or diagrammatic, for example a ‘no-smoking’ sign.
  2. {title}Index - An Index signs is a sign where there is a direct link between the sign and the object. The majority of traffic signs are Index signs as they represent information which relates to a location (eg, a ‘slippery road surface’ sign placed on a road which is prone to flooding)
  3. {title}Symbols -
  4. A symbol has no logical meaning between it and the object. Unfortunately the web is littered with bad examples of this type of sign, but there are good one’s - a homepage icon which is a house for example. Other off screen symbols which may help explain the difference are flags. Flags are symbols which represent countries or organisations. Again, the crossover to design and branding is very evident in these signs.

Saussure however proposed a simpler structure of what a sign is:

  1. a ‘signifier’ (signifiant) - the form which the sign takes; and
  2. the ‘signified’ (signifi?) - the concept it represents.

For Saussure, a sign is the combination of the two. But, what does this all mean in terms of the web?

Semiotics and the web

The web is full of signs. Think about it.

Most users want to accomblish a task on a website, in order to do that they have to navigate to the right place. In order to do that, they have to follow signs. See?

Not only visual signs either. Let’s consider Information Architecture for a moment.

IA is a field of web development concerned with the organisation of information. I once had a good IA friend of mine describe to me what got her excited about her job. ‘I make lists’, she said with a big smile. ‘Then’, she continued, ‘I make lists within lists’. Sounds thrilling doesn’t it? We went on to discuss words and how they effect what she does.

‘Words matter’, she said. ‘Probably more than anything. You can have a bad design, but if the words are right and in the right place, the user will generally find what they need.’

The conclusion from this conversation was that words are also signs on the web. The right word in the right place - isn’t that what navigation is all about? Context. Let’s move now into something a little more visual.

Let’s take the example of designing an icon system for an online application. The parallels to software design are obvious - well designed GUI’s have pretty good icons, or should I say signs. So what should you do to make these icons understood by the user?

Here’s my top three:

  1. Be conspicuous - Be bold.
  2. Leave ‘creativity’ to the bad designers - This is not the place to do something different. If a convention exists, use it.
  3. Location, location - Be in the right place.

There are more, but that’s my top three to creating successful signage (don’t forget that icons on the web are signage and when designing them you are designing a signage system, like it or not.

So, what about signage systems?

Well, I’m not going to get into that for this article (you’ll have to wait for the book for that one). Signage systems are as important as the individual signs. Collective meaning and overall association are the elements that make signage systems work (next time you’re in an airport, have a look at the signage system!)

One last thing…

Be sure to check back over the next couple of months for updates on the book, which will include a chapter on semiotics and icon design. It’ll probably be self-published initially (with a pdf download and options to buy a bound full-colour book) and be available here for a modest sum. Oh, and it’s a got a working title of ‘Five Simple Steps on Design’. That should give you an idea of what it’s about :)

Filed in: articles, design. on October 15th, 2005

Five simple steps to designing grid systems - Part 3

The third installment to this series is going to be a little different. The previous installments have been talking through some of the basics of grid construction using ratios as the primary device. They’ve also dealt with grid construction for print media. Unfortunately, as designers for web media, we don’t have some of the luxuries as our print designer collegues.

Rather than go through tutorials (I’ll be covering these in the last two installments), I’ll be using this installment as a platform to discuss some of the challenges and rewards of designing grid systems for the web.

A whole load of considerations

Designing grid systems for print is considerably more straight forward than designing grid systems for the web. First off,in print, the designer has a fixed media size - the paper size (or packaging, poster, whatever). Let’s say a print designer has designed a magazine. The reader of this magazine can’t suddenly increase the font size if they find it difficult to read - well they just move it closer to their eyes I guess. This is just one consideration, there are more but I’m sure you get the point.

So, that’s media size. On the web you have other considerations such as the browser, the OS platform, the screen size and the actual devices that web sites can be viewed on, from PDA’s and Mobile’s to assistive technologies such as screen readers. How do you design a grid for all of this? It’s a really good question and I’m not claiming I have the answer.

In an ideal world

We all know about the problems with websites rendering differently across different browsers, platforms, devices etc. But, just for a moment, let’s forget about that.

Designing a grid for the web should not be difficult, in fact, it shouldn’t be any different from designing a grid for an media. As discussed in the previous parts of the series, you can construct a grid in the same manner for screen as you do for print. Base it on ratios, experiment with form and white space etc. Use pixels as your base measurement and go from there in the knowledge that your design will look exactly the same in every browser. After all, you, the designer, knows best for your reader right? You know they want light grey, 10px verdana with a measure of 600 pixels.

In the real world

Good designers for the web know that the users who use their sites may want different, and know, with the web, they have the power to change things. The designer has lost, to a degree, the ability to control. For a lot of designers (including me), this has been a tough transition. We’re taught for years to create the delicate balances of white space, the manicured typography and delicate colour palettes, all designed to create harmonious designs which do their job very well.

Then some short sighted user comes along and increases the text size… and… and… totally breaks your design.

I think you get the idea. We can’t be upset when the user wants to change something like the text size. What we can do is design grid systems to adapt to those changes.

Not just columns

Over the past couple of years, coupled with the increase in CSS based sites, we’ve seen a rise in certain grid configurations which are all based on the amount of columns. 2, 3, 4 column layouts - float this, position that etc. Why, even this site falls into the ‘750 px, 3 column’ category. These grids have quickly become a convention, and for good reason too. They are quick to create, fairly stable across many platforms and don’t degrade to the same degree as table based layouts. This is all good. What isn’t so good though is the general lack of understanding of grid systems when perhaps the question on most designers lips when they sit down to begin a design is, ‘how many columns should I have’. This is not grid system design.

Grid systems for the web

The next two installments of this series will go through details of creating considered grid systems for the web and the implementation using CSS. I thought it would be useful to just go through some of the considerations before hand.

The series

This is the third installment of this “Simple Steps…” series.

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid

Filed in: articles, design, simple-steps, typography. on August 9th, 2005

Five simple steps to designing grid systems - Preface

Following my article in Design in Flight I’ve received countless emails to elaborate, in some way, on how to correctly design grid systems. It’s quite a complicated field and so distilling it into ‘Five Simple Steps’ has proven to be quite tricky, so much so that I thought I needed to write some sort of preface before we get on to the first part.

What is a grid?

Before we even begin to tackle designing grid systems we need to have a basic understanding of what they are, why we use them and where they came from.

In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images. The grid is a child of Constructivist art and came into being through the same thought processes that gave rise to that art movement. Clear links can also be drawn between the Concrete-Geometrical art of the Zurich school in the 1930’s and several notable artists of this movement made important contributions to typography through their fine art.

It was around this period that the grid system moved from the domain of art and into one of typography and commercial design.

It’s about mathematics… mostly

First of all when talking about grid systems we have to mentally separate form and function. We have to think about aesthetics and proportions as a result of considered construction. This can be quite tricky for designers who have been schooled in the ‘you’ll know it’s right when it feels right’ school of composition. But as I’ve written about before, feel is an emotional reaction to construction, to mathematics.

Ratios and equations are everywhere in grid system design. Relational measurements are what defines most systems, from simple leaflet design to the complex of newspaper grids. To design a successful grid system you have to become familiar with these ratios and proportions, from rational, whole-number ratios such as 1:2, 2:3, 3:4 and those irrational proportions based on the construction of circles, such as the Golden Section 1:1.618 or the standard DIN sizes 1:1.4146.

These ratios are ubiquitous in modern society, from the buildings around us to patterns in nature. Using these ratios successfully in a grid system can be the deciding factor in whether or not a design, not only functions, but has aesthetic appeal too.

What is a grid system?

A grid system is a grid design which has been designed in such a way that it can be applied to several different uses without altering it’s form. An example of this would be a grid system for a book whereby you have many different page types - part-opening, title, half-title etc. - and would need only one grid to use on all the page types.

The danger with designing a system to cope with many different varients is complexity. When you add complexity, you decrease usability and there is a danger the grid would become so complex the designer can’t use it. This thought should always be running through your head when designing a grid system - keep it simple, but comprehensive.

Why design a grid system?

It is often said of grid systems that they limit the scope for creativity or leave no freedom. Karl Gerstner, one of Switzerland’s preeminent graphic designers, was aware of this conflict with the designers adoption of grid systems.

The typographic grid is a proportional regulator for type-matter, tables, pictures and so on. It is a priori programme for a content as yet unknown. The difficulty lies in finding the balance between maximum formality and maximum freedom, or in other words, the greatest number of constant factors combined with the greatest possible variability.

The grid is a regulatory system which pre-empts the basic formal decisions in the design process. it’s preconditions help in the structuring, division and ordering or content. I’m not saying a well designed grid will solve all of your compositional problems, far from it, but it goes some way in creating a coherent structure in design which in turn creates the aesthetic values all of us are after in our designs.

The Five Simple Steps

You should now have a clearer understanding of what grid systems are, where they came from and what they should do, if designed well. Within the next Five Simple Steps, I’ll go through the elements which make a successful grid system and how these elements can be brought together to create simple and complex systems which can be applied to a number of media outputs.

The first in the series will be ‘Combining Ratios’

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid

Filed in: articles, design, typography. on June 26th, 2005

Five simple steps to better typography - Part 5

{title}The final part in this series, I’m glad to say is a little more cut and dry than the last in the series. It’s more about historical typographic theory but with a simple, practical guide to ensuring a balanced use of typeface weights.

Typeface weight, and the choice of weight, is perhaps one area of typography that to most designers is simply a matter of choice. That choice is dictated by answering a design problem which is aesthetically, or content, motivated. What many designers do not realise is that there are rules which should govern the choice of weight - a typographic pecking order - which when followed, aids the designer’s typesetting and can produce stunning results.

Solving the design problem

Let’s start by addressing the root of the decision to set type in different weights - solving a design problem. I mentioned that this problem stems from two main areas:

  1. An aesthetic problem. This is where the designer sets type differently to add style or solve some kind of visual or compositional issue.
  2. A content problem. The designer needs to set a different weight because the content dictates it. The language of the content may dictate special typographic treatment, the tone of voice may be different, it may be a quote, it may be a structural device such as folios.

There may be other reasons as well, but I believe these are the main cause.

First off a bit of history

I like these history bits, they really are informative. To research where the rules came from and why they should be followed goes a long way to ensuring they are used.

Uppercase and Lowercase, and the relationship between them, have been around for over twelve hundred years. Small Caps, ornamentals and arabic figures were early additions to the roman.

Italics were a strange bunch to begin with. They didn’t associate themselves with lower case roman, as we usually see today, but with roman caps and small caps. It’s only in recent times that usage of italic, within roman, was deemed to be typographically correct.

Some of the newest additions to the weights of typefaces came with bold, and condensed, as late as the early nineteenth centry. These were generally used in place of italics and small caps. Bold typefaces have now become a standard way of differenciating in typesetting, particularly on screen where italics are a little more difficult to read.

A type family with all of these weights forms a balanced series which is no only historically accurate but creates harmonious typography. If the setting of copy was reversed, so italics were used as body copy, Caps was used as pull-quotes and bold was used as access structure (folios, running heads etc) not only would the body of text look terrible, it was also be very difficult to read.

The practical bit

So, we have these weights of a typeface and they all relate to each other, and there’s a hierachy. How is this practical in everyday use?

First off we need to show the different weights and how they are related to each other. Then we categorise them into a hierachical list, from primary to sextary. This is shown in the diagram below.

{title}

Execution of diagram inspired by Robert Bringhurst’s ‘Elements of Typographic Style’

This list, as it stands, may not be that useful. It does illustrate however the relative importance of certain typeface weights. It comes into practical use in the following diagram.

{title}

Execution of diagram inspired by Robert Bringhurst’s ‘Elements of Typographic Style’

Here you can see some of the weights set out and joined by lines. The red lines represent the core typeface family. Some typographers would argue that without these core weights, typefaces are reduced to being used for titles only. I’ll leave that one open for debate!

The other lines show how designers can move along the lines when setting type. for example, if a designer has set type in roman and they need to add emphasis to a certain point in the copy. They would follow the lines to any on the second line - bold lower case, small caps, full caps, italic lower case or sloped small caps. If they were to jump to, say, bold italic lower case, or a more extreme example, bold sloped caps, the effect would be horrible.

If the designer is setting type in bold lower case they could go on to add bold caps, or bold italic lower case without much bother. You get the idea?

So, following this simple roadmap can ensure that your typography adheres to some simple hierachical rules and as a result your typography will take on a harmonious feel. don’t just take my word for it though, set some type, use the rules and you’ll see.

A final word

I’ve enjoyed writing this series. What initially started as a quick five tips turned into something a little more involved and has sparked quite a lot of debate. I’m pleased it’s bringing traditional design stuff into the web standards realm, there really is so much more we can learn and put to good practice in this particular corner of the industry.

Typography is one of those things that has unfortunately suffered from the advent of technology (and i’m not just talking about computers here). Designers on the whole have divorced themselves from the letterforms and the setting of them. As a result they’ve forgotten, or not been made aware of, the simple typesetting rules which were core to the old system of printers apprentice.

Typography to me is about design. It’s about words and the conveying of meaning. It’s about setting words that people read. A certain amount of it is creative, a certain amount is expression and aesthetics, but mostly it’s about people reading stuff. Do them a favour and don’t make it difficult.

This is the fifth, and last, installment of this “Simple Steps…” series.

  1. Measure the measure
  2. Hanging punctuation
  3. Ligatures
  4. Typographic Hierarchy - size
  5. Typographic Hierarchy - weight

Filed in: articles, simple-steps, typography. on May 18th, 2005

Five simple steps to better typography - Part 4

{title}I’ve struggled a bit with the latest addition to this ‘simple steps’ typography series. Mostly because it’s not so simple and it’s a bit more of a grey area than the previous three articles.

Typographic hierarchy, put simply, is how different faces, weights and sizes of typefaces structure a document. Some of these hierarchical devices are well-established conventions, such as cross heads and folios, so I’m not going to touch on them in this post. To keep it simple I’m going to concentrate on two things - size and weight. The first of which is size.

First off a bit of history.

Early typographers created their manuscripts by using one font, one size, one colour mostly, interspersed with hand painted illuminations. The products of such typographers has a flat quality to the information, almost mesmeric.

Take a look at some early manuscripts and the typefaces themselves, especially the older Black letter styles, appear similar - m’s look like u’s, y’s look like p’s and so on. As beautiful these manuscripts are, other than the illuminations, they are devoid of structure within the content. There is no typographic hierarchy.

Evolution of the scale

In the sixteenth century, European typographers developed a series of typeface sizes, a scale (the musical analogy is a good one - stick with me). As shown in the diagram they are sizes we’re are all familiar with. Six point through to Seventy-Two point type has remained pretty much intact for over four hundred years. In fact, they are the default font sizes in many applications (give or take a few.).

{title}

So, what’s so special about these sizes? Well, because this scale of sizes has been used for centuries, if set correctly, type set in this scale will appear more pleasing to the eye and therefore more legible.

An interesting point. Originally the sizes in the scale were referred to by name instead of by point size. here’s a few examples of some of the older names:

  • 6pt: nonpareil
  • 7pt: minion
  • 8pt: brevier or small text
  • 9pt: bourgeois or galliard
  • 10pt: long primer or garamond
  • 11pt: small pica or philosophy
  • 12pt: pica
  • 14pt: english or augustin
  • 18pt: great primer
  • 21pt: double small pica or double pica
  • 24pt: double pica or two-line pica
  • 36pt: double great primer or 2-line great primer
  • New software, and modern methods of typesetting, has allowed character heights which fall outside of, and within, this scale. this freedom has resulted in a typographic free for all, allowing designers to pick sizes which may not be related to one another as according to this scale. Is this a bad thing? I’d argue that it is.

    Let’s go back to the music analogy. It’s like composing a discordant piece of music. Clashing notes, clashing type. but, if it’s clashing you’re after, that’s fine. If, however, you’re after harmony and melody that stands the hairs up on the back of your neck, stick to the notes in the scale folks!

    Application of the scale

    So let’s put some of this into practice. I’m going to be using this very website as an example.

    I started off designing this website with something very specific in mind - typography. I wanted to make sure this site would work by a simple, clear hierarchy of typography set against a simple modular grid, with plenty of white space on which to ‘hang’ a number of design elements (in my portfolio for example).

    Following the typographic scale described in the previous section, I set about applying this to the CSS based design.

    These are the elements for the typographic hierarchy. Note, I’m using pixels as my base measurement, not points. And yes I do know the pixel’s are different on different platforms.

    The thing about type sizes in CSS is if you want to remain true to typographic tradition, you have to specify em’s or percentages based on an absolute unit of measurement, in this case a pixel. If you use the relative - small, x-small etc. - there aren’t enough declarations to complete the scale and the sizing of each increment is fixed at 1.5 going up the scale or 0.66% going down. (apparently this depends and was also changed to somewhere between 1.0 and 1.2 in CSS2.) But anyway, I don’t want to get fixated on the best CSS approach to this. This article is about typography.

    These are the pixel sizes for my main headings:

    1. 11px /16.5px - Body copy and leading.
    2. 24px - Main heading used as section headings on the Homepage, Portfolio homepage and entries.
    3. 18px - Headings for journal entries and portfolio subheadings.
    4. 16px - All navigational and content tertiary headings.
    5. 13px - All other headed elements.

    This would give me the following styles visually

    {title}

    These translate into the following way into CSS, using percentages for scaling purposes.

    1. 11px /1.5em - Body copy and leading.
    2. 218% - Main heading used as section headings on the Homepage, Portfolio homepage and entries.
    3. 164% - Headings for journal entries and portfolio subheadings.
    4. 145% - All navigational and content tertiary headings.
    5. 118% - All other headed elements.

    So, within my CSS file, it looks like this:

    body {
    font: 11px/1.5em "Lucida Grande";
    }
    
    h1, h2, h3, h4, h5, h6 {
    font-family: helvetica, arial, verdana, sans-serif;
    font-weight: normal;
    }
    
    h1 {
    font-size: 218%;
    }
    
    h2 {
    font-size: 164%;
    }
    
    h3 {
    font-size: 145%;
    }
    
    h4 {
    font-size: 118%;
    }
    
    

    Using these values for the size of the headings creates a natural relationship between them. The typography is harmonious as a result and it only took about five minutes to implement. Not long at all.

    Size really does matter

    It really does. If you take anything away from this series, please let it be this. Stop and think about your type sizes, just for five minutes. Plan them, don’t just choose whatever you feel like from the dropdown in Photoshop. Make sure they are ‘in tune’ and then apply the theory to whatever medium you are designing to.

    Next up the series we follow on from this with weight.

    The series

    This is the fourth installment of this “Simple Steps…” series. Next up we have Typographic Hierarchy - weight

    1. Measure the measure
    2. Hanging punctuation
    3. Ligatures
    4. Typographic Hierarchy - size
    5. Typographic Hierarchy - weight

    Filed in: articles, simple-steps, typography. on May 9th, 2005

    Design In Flight - Issue 4

    {title}Well, here it is. After a few weeks in February, several late nights and a lot of help from my wife and the Design in Flight’s Editor Andy, my article “Feeling your way around grids: Making sense of the Golden Section when designing grid systems.” has been published in the latest edition of Design In Flight.

    Design in Flight is a fantastic PDF magazine and a bargain at just $3 an issue, which is about ?2. There are some superb articles in this issue from the likes of Khoi Vinh, Suw Charman,

    Veerle Pieters and Molly E. Holzschlag.

    It all started with a post I wrote on Design and the Divine Proportion a few months ago. The post sparked quite a lot of debate and is still amongst the most popular on this site. In the post I touch on the Divine Proportion, or Golden Section, and how it affects design.

    In the new article I take that a step further and show how grid systems can be designed based on the Golden Section and how that not only aides the designers process but also increases legibility and usability.

    Hope you enjoy it.

    Filed in: articles, design, news. on April 12th, 2005

    New article

    Just posted the first the series of the Grid Articles. The first in the series - Why use a grid? - explains just that. The rest of the grid series:

    1. Why use a grid?
    2. A grid for the printed page
    3. A website grid
    4. A purists view on website grids
    5. Where next?

    Any comments about the latest, and upcoming, articles can be posted here.

    Filed in: articles, design, markboulton-co-uk. on October 1st, 2004

    Articles to come

    Here’s some articles I was thinking of writing. Let me know if any of these would be of interest…

    • Ten usability tips for normal people - you don’t have to be a guru to have a usable website.
    • The do’s and don’t of labelling.
    • Design a grid- properly.
    • Introduction to proper typography - A dying art, especially on the web. Bridge the gap between traditional book design and cutting edge web standards.
    • Typography - Create subtle relationships between your headers, sub heads, leading, point size and measure.
    • Movable Type - How I build this site in Movabletype.

    Filed in: articles, markboulton-co-uk. on August 25th, 2004