Blog Category: simple-steps
Designing for the Web: Available to buy and download now
In the hubbub of the launch this morning, I totally forgot to blog about the launch of Designing for the Web. So, there, I’ve said it. It’s available and ready to download now. I hope you like it.
PS. If you signed up for a coupon, they’re trickling out over the course of today and tomorrow. We’ve had some mail server issues (typical!).
Managing the expectation of the new book has been interesting. When I first announced it, I used to still blog quite a bit. People seemed excited – which was nice – so was I. Then, I stopped work on it for a while, all the expectation and buzz died down as the project did. Since we pinned a release date on the book, buzz has steadily increased once again, but with it the expectation. And I don’t mind telling you, that expectation is weighing a little heavy on my shoulders.
You see, this book isn’t really like a lot of other graphic design books. Most of them are coffee table ‘inspirational’ books filled with other people’s work. But, it’s not a typical web development book either. They tend to be task, or ‘lesson’ focussed - walking the reader through a series of case studies and examples – half of which require a computer to be next to you as you work through the chapters.
My book is a little of both, but purposefully unlike either.
I wanted more of a conversation. More informal, more of me. The content is still practical, but it’s not a lesson plan. Weaving through the book is a strong sense of traditional graphic design and how I think it applies to the web today. There are tips and tools to support the theories, but it’s not a ‘for dummies’ book. I’d like to think it’s written in plain english, and not magic-designer-speak. It’s about the practicalities of designing for the web, but only represents some approaches that I feel work.
So, it’s not meant to be a definitive guide to all that is ‘designing for the web’. As I say in the introduction to the book:
…it’s a little book about graphic design and how it applies to the modern web. It’s not a book about CSS or usability… it’s aimed at people who want to learn some basics of graphic design and apply them to their web designs - producing more effective, polished, detailed and professional sites.
There. Don’t say I didn’t warn you.
Dipping a toe in the book production process
The interesting thing about trying something completely new is that you learn almost all the time. True, you make plenty of mistakes along the way. That’s how it’s been writing this book. But, it’s not just the writing you see. Book publishing involves a whole team of people, from editors and proof-readers to project managers and designers. I’m lucky that I have a semi-experienced team at Mark Boulton Design to help me get the book finished and out of the door.
Robert Mills is our Project Manager. He comes from a media research and journalism background, so is not scared of the written word. It was his job to really push the publication over the past four months or so. I asked him to pen a few words on our approach, and this is what he came up with…
A Practical Guide to Designing for the Web started out as a few blog posts. Though it has evolved significantly since then, those blog posts provided a great stepping-stone for Mark to write the book, and proved early on that people were interested in this subject and Mark’s thoughts on it.
The main thing was just to write, to get the majority of the copy down on the page. Until draft one is done there is nothing to edit, delete, proof read and add to. The key to writing is time and location, forming a timetable and isolating yourself may be useful, whatever works for you, but it takes dedication, sacrifice and many, many hours.
There were many hours spent researching and planning the book before pen could be put to paper or finger could be put to keyboard. Beyond the initial planning and discovery it was a case of writing, writing some more and then writing even more.
Mark had written the chapters. Next we were to turn them from bland word documents to impressive, visually stunning pages in a design book. Nick, the designer at MBD with a fair amount of publishing experience, was tasked with typesetting the copy under Mark’s art direction. This immediately created an issue as Nick was working out of Manchester and we were working out of Cardiff. Skype proved to be an invaluable tool at this stage of the process, not only for keeping each other in the loop with the latest developments but in order to design via webcam!
Some elements of the design were agreed early on before the process had even started (it was always going to be A5 and in full colour), but naturally it was a case of putting into practice the work method we adopt with clients – iteration and refinement. Some of the pages in the final copy are original versions, some have changed dramatically throughout the design process – it has been painstakingly tough at times as a book about design clearly had to be a visual feast.
Having an author who happens to be well known within his field, and a book that has been promised for the last two years, all helps build the publicity momentum.
We created a Flickr account. Throughout the process we uploaded sneak peeks of the various pages to give people a taster of the finished book but also to document some of the initial sketches and behind the scenes process.
A Five Simple Steps Twitter account was also set up. As I write this we have 874 followers! (Thanks to you if you are amongst that group) Again the purpose of tweeting was to publicise the book but also to connect to the potential readers. Our tweets ranged from quotes lifted straight from the pages of the book, links to the Flickr group, to more general news updates and countdowns to launch day.
Blogging was also a fundamental part of the process simply because the book idea evolved from one of Mark’s blog posts about five simple steps to better typography so we took the book right back to where it originated from and Mark has blogged about why he chose to self publish, and about the technical requirements involved in writing and distributing your own book.
Thankfully some elements were straightforward, all the information we needed on purchasing ISBN numbers was readily available online and it was nothing more than a simple application form outlining the content and specification of the book. Having to buy them in blocks of ten also ensured we have ISBN numbers for nine future publications (if we decide the publish more that is!).
Although not a necessity, there is the option of submitting a copy of the book to the British Library. For printed books this is a legal requirement, whilst they agree on the policy for electronic books, they recommend depositing the book in the interim.
Many hours also went into researching print on demand offerings, Amazon fulfillment, and other printing and distribution methods. There are many options and it is a case of finding one that meets all your needs. For us it was self publishing (please see Mark’s other blog posts for more information on this).
At the moment we don’t know if all the hard work, blood, sweat and tears has paid off. We hope so as we are immensely proud of the book but all we can do now is sit back and wait for the feedback and reviews to roll in.
Designing and building an eBook delivery system
When I first looked into writing Five Simple Steps to Designing for the Web, I looked at a bunch of options for delivering the PDF over email. I thought about building something myself or hosting it with various web applications used for delivering digital products. The first option just wasn’t an option at all in the end - I’m no programmer. The second option, although perfectly viable, saw the potential profit of the book undermined by a monthly, or per unit, charge. I made the decision, quite some time ago now, to commission the software to be built by the super-talented Steven Teerlinck, using the Code Igniter PHP Framework.
This isn’t a particularly complex bit of software, but Steven’s done a fantastic job in simplifying it to a number of core user and system flows:
So, I wanted to sell a PDF. Ideally, I wanted the following functionality:
- Have a discount coupon, so people could redeem them for, say, £3 off
- A discount period. For example, over the Christmas period.
- Multiple licenses. From single user, to ten.
- The delivery of the PDF itself.
The user flow
The user flow through the system is this:
- User selects book, and fills in license details - they enter a code here if they have one.
- The user is directed to Paypal where they part with their hard-earned cash
- Upon a successful transaction, the user is redirected to a ‘thanks very much’ page.
- The user receives an email from Five Simple Steps whereby they can download their PDF for up to 72 hours.
The system flow
The system does this:
- Upon receiving an ‘order’, the system checks to see if the Paypal purchase is valid.
- The system to generate a unique code for that sale
- This all sits in a queue that is set up on a CRON to send every 10 minutes
- The code is emailed, along with a handy link, so the user can download the book
- Upon clicking, the code is checked against the user, license, and to see if they sale is valid
- The code triggers a PDF stamper to dynamically stamp the PDF on every page
A large majority of initial sales will come from the money-off coupon that has been running on the site for a while. The coupon system works thusly:
- I can create one-off coupons, or bulk import from a comma separated file
- The coupons are queued up and processed every 10 minutes by a CRON job
- A user is sent an email with a unique coupon code.
- The user clicks a link which directs them to the purchase page and populates the coupon field.
That’s probably about it. The system is small, trim and effective for my needs. As time goes on, I’m hoping to add further functionality to support shipping physical books in addition to (possibly) more titles. We’ll see. Being involved in building a bespoke bit of software for the delivery of the book has been very interesting over the past six months or so. Not only has it shown what a flexible framework Code Igniter is, but also how important it is, as a (soon-to-be) publisher, to be in-touch with your distribution software and process.
Why Self Publish?
Two weeks today, I’ll be releasing the long-delayed self published book of mine, Five Simple Steps: Designing for the Web. Since I originally thought of writing my own book, producing it, and distributing it, I’ve been asked several times, ‘why not go with a traditional publisher?’
I’ve had several offers for this title, from big tech-book publishers, design publishers, through to smaller outfits and literary agents. I’ve turned them all down. Why? Well a few important reasons:
Several of my good friends have written books, and I’ve design reviewed a couple, and written a a chapter in one. Not a massive amount of experience, granted, but enough to sour the taste of traditional publishing in my mouth. The biggest concern of mine was losing my ‘voice’. I want a book I’ve written to sound like me. Not some watered down, ‘internationally-toned’ amalgam of me, my editor, a proof-reader, and tech reviewers. I want it to sound like me, and I’m hoping, my readers do too.
Writing this book has been really difficult. Luckily, I’ve got a good team around me - a designer, a project manager, a proof-reader, and an editor to shape the book (that was particularly helpful early on). But, there’s just no way I could’ve written a book in the last two years if it hadn’t had been on my terms alone. My wife and I had a daughter, we built an extension on our house, and I’ve been building a business in challenging times. To fit a book around this has been tricky, and I needed to have the flexibility imposed by my own schedule, not someone elses.
Most web design books are terribly designed. I mean, really bad. If I was going to write a book, I was going to design it too. As it turned out, I’ve art directed the production of this book, rather than designed every single page and diagram. But, the point is, it will be a design I’m happy with. I know several designers who have written books who ended up doing the design for them for free!
Although not the motivation for the book, the financial potential of just one PDF book far outweighs the traditional process (if you have an audience that is). Most author royalties are miniscule compared to the profit the publisher makes. With a PDF distribution my only costs are the time taken to write the book, and the ongoing hosting and Paypal fees.
A Printed Book
Luckily we have the skills in-house at Mark Boulton Design to design, produce and distribute a hard copy book. Currently, we’re looking at producing a limited edition case bound (hard back), high-quality book. BUT, this will only be if the sales of the PDF can support the initial outlay in getting a print run done.
Of course, there are advantages for a more traditional approach. As much as the process of writing and editing is painful, you can be assured of a good product at the end of it – even if it doesn’t sound like you. You don’t have to design it, typeset, proof (again, and again), artwork, production, delivery, customer service. There’s a lot that goes into publishing and I’m learning the hard way. But, it’s fun. The book is coming along nicely, and two weeks today, will finally be released.
It may not be a work of beautifully crafted prose. But it will be me. Warts and all.
Five Simple Steps. Available 2nd February, 2009
A long time ago, two years ago in fact, I sort of announced I’d have a book ready the other side of Christmas. Ha! Embarrassingly, that deadline came and went as life, and work, got in the way. And, writing a book, especially a self-published book it turns out, is incredibly difficult. But, a few months ago, this project has had new life breathed into it, and I’m pleased to say, the book will be available on February 2nd 2009 in PDF format.
Not much has changed
During the last two years, the basic concept of the book hasn’t changed, even though the web has. This book is about practical graphic design theory, and how you can apply it to the web. As I said back in 2006 (!)
Like my Five Simple Steps articles, the book will be based on five steps you can work on to improve your design. These vary from very short and simple things like how to set a list correctly, to how to design a complex, modular grid system. They’re not meant to be a complete design lesson in the varying fields. More like a refresher for those people who have design schooling and a brief, practical lesson for those who don’t.
There’s a new website
We have a new website for the book: http://www.fivesimplesteps.co.uk. The release version of the site was beautifully built by Steven Teerlinck http://steventeerlinck.be using the Codeigniter framework. There’s some clever stuff in there for me to manage sending coupons, timed discounts (eg a christmas sale period), and automated PDF licence encoding.
Will there be a physical book?
Over the past two years, and more recently, this question has been asked a lot. The short answer is yes, but it kind of depends on sales. I’d like to produce a really special, beautiful limited edition hardback. But, the thing is, it’s a considerable investment for even a run of 1000. That’s not including storage and fulfilment. The plan is to have the PDF available through Lulu for those who want it, but, as it’s a full colour book, it probably won’t be that cheap.
So, yes, I hope there will be a hardback. I can’t wait to design a real, physical book again.
Can I still use my money-off voucher?
Yes you can. You’ll be emailed a unique code a few hours before the release of the book.
So, that’s it. The project is not dead, it’s very alive and I’m working feverishly to get it released in 9 weeks time. No doubt I’ll blog about it nearer the time anyway.
A couple of books
A couple of books coming up which may be of interest. Firstly, Web Standards Creativity is up on Amazon for pre-order. It’s a sumptuous full-colour paperback covering topics like Typography, PNG transparency techniques and Grid Design from the likes of Ethan Marcotte, Simon Collison, Cameron Adams, Aaron Gustafson, Jeff Croft, Derek Featherstone, Dan Rubin, Andy Budd, Ian Lloyd, Rob Weychert, Andy Clarke, and me.
Secondly, Five Simple Steps: Designing for the Web is nearing completion. It’s not quite finished yet, and yes I’m going to miss the January deadline, but it will be worth the wait. To keep you going until then, here’s a few tasters…
Self-publishing your own book is tough. I was naive to think I would get this finished by Christmas and ambitious to think it would be finished this month. These things take time, especially if you consider I’m writing, art-directing and designing and publishing this book. That said, it’s only a little overdue and I’m sure it’ll be worth it.
Thanks to everyone who has already signed up for the launch discount. There will also be a bulk licence available for £25 for five copies for you and your collegues. There is still time to sign up for the discount too if you haven’t done already.
Right, that’s enough talk, I’ve got a book to finish.
Five Simple Steps to designing with colour part 3: Colour combinations
Colours chosen from different spokes on the Colour Wheel will provide a variety of colour combinations. Deciding upon and selecting a colour combination that works for you will very much depend upon the job at hand.
Will it communicate what you want it to? Or are you just choosing them because you, or the client, like them? These are very difficult questions to answer because any designer or client will let their personal style and preference interfere with their decision-making. Colour combinations tend to evoke certain reactions either by cultural, or personal experience. Understanding these experiences will help you create colour combinations that tell a story. That is what good colour theory can give you; designs that tell a story.
I’m going to go over a few combinations here to demonstrate my thinking. But before I get onto that, it’s worth noting how palettes can be presented to potential clients or in design documentation.
I’ve always presented palettes in two different ways depending on the amount of colours. In a broad palette, with many colours, I display these left to right with dominance and usage being denoted by the size of the square, or block, of colour. For smaller palettes and combinations, I use the rectangle containing a line and a square. I was taught this simple device in university but it is similar to many other examples I’ve seen. You can use circles, blobs, lines, squares. It’s up to you. The important thing is to indicate the relative weight of colour.
The colours within this combination (I was tempted there to call this a Triad. However, if you think back to the Colour Wheel, this is not the case. Just because there are three colours does not make this a Triad combination) are given the following names:
Subordinate, or Base colour. This is a visually weak, or subordinate, colour. It should contrast or compliment the dominant colour.
Dominant. The main colour. It is this colour which defines the communicative values of the combination.
Accent, or Highlight colour. The Accent colour can be two things: either sympathetic to the Subordinate or Dominant colour, or it can be visually strong and striking, therefore appear to be competing with the dominant colour. This can provide tension within a combination
Examples of colour combinations
Active / Vibrant
Active combinations are intense. They feature bright, often complimentary, colours on the colour wheel and are combinations of primary, secondary and tertiary colours. To many people, colour combinations such as this evoke feelings of noise, flamboyance and energy. It’s a young combination, although there will be cultural differences, aimed at young adults. Many of the hues are not really ‘natural’ colours, but they are more intense tones of the same colours, therefore they could be used for ‘natural’ applications such as the travel industry.
Muted / Calm
Muted palettes have a lot of white in the hues. This example uses blues and introduces lavender as the dominant colour. The resultant colourway is balanced and calming. Hues in the blue, green and violet areas of the Colour Wheel convey a visual quietness. The Accent is almost always used as sympathetic to the Dominant. Often used in the cosmetics industry, the visual softness of the colours often portrays a feminine quality.
A pastel combination is similar to the Muted combination in that is often based on colours containing a lot of white (or lack of white depending on your colour model right?). Where they differ is that Pastel combinations combine warm and cool tones readily. This combination can portray youth and innocence (babies!) and has a warmth that the Muted combination fails to deliver.
Natural combinations are those colour which are borrowed from the great outdoors. Rusty reds, browns, sky blues and warm pinks are the order of the day. I find the easiest way to create these combinations is to go outside, take a photograph and then choose some colours from that, you really can create some stunning combinations. When you need to communicate rustic charm or the feeling of walking through autumn leaves, then this is the type of combination you’re after.
This is a good one. Hues of royalty, tradition, often religious and above all; wealth. Rich colour combinations are perhaps the combinations which are so engrained in culture. True, the actual colours used may differ, but the overall effect is seen throughout the world. Maroon is often mixed with gold and full shades of green. They can be combined with Natural combinations for a fuller palette.
Part of the design solution
I hope I’ve indicated how important colour is in communicating part of the design solution. By selecting the best combination of colours you can go a long way to ensuring the success of your design. We’ve looked at some colour combinations here but what about the individual colours? They also have meanings and go a long way on their own to set the mood and tone of a given design. Next, I’ll move onto discussing colour and mood. What do different colours mean?
Five Simple Steps: Designing for the Web
This article is an extract from the upcoming book; Five Simple Steps: Designing for the Web. Available later this month.
PDFs: A quick poll
I need your advice. As you may know, I’m writing and self-publishing a little book on designing for the web. It will be published in two ways: initially, a pdf for download and shortly after, a printed version which you can buy from Lulu. These two media require different design considerations.
Firstly, pdfs are read on screen and can be printed out on individual sheets of paper and probably on a black and white printer. Secondly, the printed book (from Lulu) is bound and needs the margins adjusted accordingly. So, my question is this. Do you think it’s necessary for me to typeset two versions? One, a pdf with minimal flat colour (so as to not waste toner) and even margins. And two, a version which has facing pages etc for the printed book?
Five Simple Steps to designing with colour part 2: A few basics
In the last part of this Simple Steps series I talked about designing without colour. But before applying colour, it’s always a good idea to have a basic understanding of colour theory. There is a great deal of complex terminology surrounding colour theory, so in this part I’m going to outline some of the basics.
In any book on colour I’ve read, this chapter was without doubt always the most complicated: Colour Theory. At its heart, colour theory is concerned with the creation of colour combinations via relationships. The relationships are created by the position of the colours on the colour wheel. The complexity of colour theory really kicks in when you start taking into account different hues, shades and tones. It can all get a bit too much. So here, I’m keeping things very simple and I’m starting at the beginning with primary colours.
Primary colours can be divided into two different types: Additive and Subtractive. The additive primaries are those which are obtained by light; red, green and blue. They combine to form white and form the basis of colours on screen (your TV works in RGB, as does your computer screen). Subtractive primaries are those obtained by the subtraction of light: cyan, majenta and yellow. They form the basis for four colour printing and combine to form black, the K in CMYK.
The additive primaries combine (as shown in the diagram below) and where they overlap, the secondary colours, these are the subtractive primaries. The same happens when the subtractive primaries overlap.
The Colour Wheel
Now this little chestnut has been part of my life for about, ooo, twenty years. I remember painting my first colour wheel in secondary school. I had absolutely no idea why I was painting one (other than being told to) and how it would help me in my work. Even today, the practical use of colour wheels in every day design situations is questionable. However, the familiarity of a colour wheel will certainly help you understand where colour palettes come from.
The colour wheel not only helps understand the relationship of different colours but also the classification of colours. It also, as I said, provides a quick reference to the primary, secondary and tertiary hues.
Primary, Secondary and Tertiary colours
The primary, secondary and tertiary hues are shown in the diagram below. As you can see, it’s pretty straight-forward to see how each is produced; Primarys combined create Secondary colours. Tertiary colours are created by combining a Primary and a Secondary. Things start to get interesting when you isolate different combinations of colours and this is when we get into the realms of colour wheel selections.
Colour Wheel Selections
Colours, when selected from from the colourwheel in certain combinations, interact together. This is the basis of colour palettes; the interaction of colours. Knowing the basis of these colour combination types is essential in creating palettes. True, you can rely on gut instinct (as many designers do), but more often than not these decisions are based on experience of seeing these colour combinations everywhere in everyday life. Really, once you start to notice these different combinations, it will drive you bonkers.
Monochrome selections are simply one colour from the colour wheel.
Complementary colours are contrasting colours. Sometimes they look horrible, they can really not work. However, sometimes, they are just the ticket. I generally use them if I want a vibrancy in a palette or if I need to draw the readers eye to something. Hues of these colours work great as a highlight colour. They are defined by the colours opposing each other on the colour wheel.
Triads are really interesting. They provide a real tension in a colourway as their strength is pretty much equal. Using triads in differing hues is where they come into their own though. Triad colours are any three colours which are equidistant on the colour wheel. As all three colours contrast with one another they can clash and this is where the tension is created.
Other colour wheel selections
There are other selections which can be used to form palettes: Analogous, Mutual compliments, near complements and double complements. However, practically, I rarely use these conciously. Analogous colours for example are colours which sit either side of a selected colour on the colour wheel. Choosing these colours for example, is a fairly unconcious decision for any designer as they appear around us naturally so often (think similar tones in nature for example).
So, now we have designing without colour and training your eye to see just tone, and we have the basic terminology of colour theory. Next up, we’re going to apply them to creating colour combinations; the basics of palette creation.Next