samples - web design, blog posts, and infographics

35
Erik Boman Design and Illustration Samples 020913

Upload: erik-boman

Post on 01-Jun-2015

95 views

Category:

Design


0 download

DESCRIPTION

A small selection of design and editorial work.

TRANSCRIPT

Page 1: Samples - web design, blog posts, and infographics

Erik Boman

Design and Illustration Samples

020913

Page 2: Samples - web design, blog posts, and infographics
Page 3: Samples - web design, blog posts, and infographics
Page 4: Samples - web design, blog posts, and infographics
Page 5: Samples - web design, blog posts, and infographics
Page 6: Samples - web design, blog posts, and infographics
Page 7: Samples - web design, blog posts, and infographics
Page 8: Samples - web design, blog posts, and infographics
Page 9: Samples - web design, blog posts, and infographics
Page 10: Samples - web design, blog posts, and infographics
Page 11: Samples - web design, blog posts, and infographics
Page 12: Samples - web design, blog posts, and infographics
Page 13: Samples - web design, blog posts, and infographics
Page 14: Samples - web design, blog posts, and infographics
Page 15: Samples - web design, blog posts, and infographics
Page 16: Samples - web design, blog posts, and infographics

Email marketing, part one: Getting it right and read

This is part one of a blog post on design for email marketing. Check back in the near future for the second installation, which will look at designing emails for the mobile market.

A troubled past Long ago, emails were text. No formatting, images or attachments. For alternative fonts, different colours and other spectacle, you turned to web pages.

Then design options began to seep into emails. Gone was the uniform text; now one could choose between colours and other layout options. With time, HTML emails grew popular, and for a while it seemed as if the walls between web pages and emails were thinning.

But not all was well. Email clients varied wildly in how they handled these new-fangled techniques. What rendered well in one program could in another look like minimalist Martian poetry.

Furious traditionalists called for restraint: Given that the web was turning into a funhouse, surely there was no need for emails to have garish palettes, animated GIFs and big, blinking hyperlinks. Somewhat surprisingly, the reins were pulled back, and most email clients today handle both plain text and HTML.

But that was in the past, right? The above is important to keep in mind when designing emails in general and especially for marketing. Emails can be styled to within an inch of their lives, but they are essentially meant – and expected – to offer fast, efficient communication.

Also, while most browsers have evolved to accept new standards, many email clients have refused to change. (Some have become even less flexible.) Web pages are made for browsing, displaying and informing, and while emails can do much of this, there are major differences.

Follow these eight tips to get the most out of your email campaigns.

1. Basic advice

Campaignmonitor.com offers a few useful points to have in mind when starting to design an email:

• Keep it simple – the more intricate the layout, the more possible it will run into the brick wall of bad support of standards.

• Go back in time – think old-school, use nested tables and inline CSS. • Test – and test again, then test in two weeks’ time. What works in a client right now might

not work next month.

2. The top (important) link

Page 17: Samples - web design, blog posts, and infographics

Sometimes carefully designed emails are shredded by incompatible software, interrupted transmissions or other glitches. For this reason it as an absolute must to have a link (ideally in the top of the email) to a web page version of the email.

Don’t fall for the temptation to use this link for other purposes (eg directing users to advertisements or unexpected sign-up forms). Annoyed visitors are unlikely to return.

3. The all-important landing page

Make these as interesting as possible. Hook, grab and pull your visitors quickly – typically, you have seconds before the move on.

But more importantly, make sure the landing page works. This is omitted surprisingly often. Like most people, I receive regular emails from many large UK businesses, and it is remarkably common that URLs in the emails lead to missing pages.

This is avoided by some testing. It’s a simple but essential step: Even if you bring in massive traffic via an email campaigns, all is in vain if the landing page is unusable, broken or missing.

4. On the subject

An oft-underestimated component of a successful campaign is the subject line. This is the immediate interface between the users and the (expected) content of the email, so it must grab their attention.

Don’t fall prey to any of the most common offenders – we all know them, but they can still sneak into rushed campaigns.

Here are a few tips on how to make subject lines (and much other online copy) striking:

• Make it personal – but don’t go overboard with the name-using • Use a number – seven solid tips, five fantastic points etc • Ask a question – though don’t make the answer obvious • Punchy lines – not jokes, but strong and concise writing • Keep it brief – don’t waffle

5. Horizontally, all the way.

Emails should be designed for horizontal viewports. This is not news to most designers, but it’s less well known exactly how slim the average viewport is. According to MicroMass Communications’s research, the normal size of a preview pane is about 638x86 pixels.

That was not a typo. The average default space is 638 times a meagre eighty-six pixels. This means a majority won’t see the first 100 pixels of an email. And given the shift towards mobile usage of the Internet, including emails, viewports aren’t getting bigger.

To make the most of this small space, use columns, hyper-efficient copy and graphics that engage users with a minimum of fuss.

6. Define or defeat

Page 18: Samples - web design, blog posts, and infographics

Web browsers are forgiving tools. When they come across messy or semi-correct HTML, they often parse the page anyway and ignore snippets of flawed or nonsensical code. Think of them as jolly uncles or aunts, who sigh but smile at other people’s silly ideas.

In comparison, email clients are uptight, surly and have zero patience with less-than-correct manners. CSS is frowned upon. Images arriving undefined are tossed into the room at random. Garbled or faulty HTML is shown the door.

To get a gold star for well behaviour, define the heights and widths of embedded images, use Alt and Title tags, and make links absolute. In short, don’t try anything fancy unless you are absolutely convinced you can get away with it. The email client might be watching.

7. Writing rules

Use images sparsely. While impressive and eye-catching, they are slow to load and transfer. Speed matters, and all the more so in a world going mobile. Also, many email clients don’t show images unless asked to do so.

Instead, rely on text to do the job. Superb copy loads in a flash and is easy to fit in small spaces. See above tips for ideas on writing in an exciting and direct way.

8. If possible, avoid CSS (for now)

In general, CSS and email clients don’t play well. The level of compatibility even in major clients and devices is bewildering. This likely to change but at this point, making CSS render well across all or most email clients is tricky and takes time.

Sometimes, however, CSS is needed for email design – when it is, make sure all properties are inline and not in shorthand.

Recap Keep it simple, concise and quick. When in doubt, test. Consider alternatives if you hit a snag. Respect your recipients – don’t pepper them with emails

The top priorities are to reach your audience, pull them in, and keep them coming back. Give them a reason to click on that link, and make sure they see it.

Soon to come: part two of this post, which will take a look at email marketing for the mobile market.

Page 19: Samples - web design, blog posts, and infographics

Email marketing, part two: Designing Emails for Mobile Devices

The web is going mobile, and so are emails. One in three in the UK says they access mobile email more than ever, and over half do so via a smartphone. Ispreview.co.uk predicts that in 2013, a majority of people will turn to mobile devices for reading emails.

Right now about 30% of all email checks are done from phones and tablets – and the usage grew by some 80% during 2011.

Reading versus scanning This makes sense. Typically, web pages are browsed and read, while emails are checked and skimmed – easy to do while out and about. It also means that if a majority of your target audience is assumed to use modern phones, your emails should possibly be designed primarily for the mobile market.

This switch is changing user behaviour, and estimates point to a growing importance of careful design. Surveys suggest that 40% of European mobile phone users close or delete email not optimized for their devices.

Edialog reports that around 80% of all users find it harder to read email on their phones and sums up the biggest complaints:

• Having to scroll to read all information (15%), • A surplus of textual content (9%), • Images rendering badly or not at all (8%)

Same old, some new

Many tried-and-tested tips for email design apply to all devices. Here is a quick recap:

• Design for small viewports – the average window is small • Reserve the top for CTAs and important content – put mastheads and banners elsewhere • Logotypes are important – but not crucial, so don’t put them in the header • Go easy on images – and don’t use them for critical links or content as they can fail to load • Alt-texts are vital – they prevent confusion and support disabled users. However, not all

email clients display Alt-texts, so think thrice before using images • Social media links do no harm – just keep them out of the way for more important CTAs

But while designing emails for mobile users is akin to creating websites for any email client, there are new challenges, and among the greatest hurdles are viewport size and restricted viewing time.

Page 20: Samples - web design, blog posts, and infographics

Honey, someone shrank the screens Going back to the first point in the above list, the importance of planning for small windows cannot be stressed enough: On a desktop/laptop screen, the average height of an email client viewport is less-than-impressive 86 pixels.

On mobile devices such as phones (we’ll leave tablets aside for now), this average area can in fact be more – but there are other factors to consider:

• Actual screen size – top-notch resolutions means screens the size of postage stamps are better, but not bigger.

• Eye-to screen distance – some don’t mind pressing their phones to their faces while ambling down the street, but the majority of us prefer to see where we are going and hold our phones accordingly.

• User and native settings – for the above reasons, some force large font sizes in their software, which can leave otherwise tidy layouts in disorder.

• Standards support – the CSS support of the Gmail app for Android is notoriously unreliable, and there are more shaky mobile email clients out there.

An audience on their feet In my last blog post, I compared some email clients to grouchy dinner hosts who don’t hesitate to give badly formatted emails an earful. This may be unjust to irritable hosts in general, but to stick with the analogy, think of mobile email clients as just as bad-tempered – and rushed.

Marketing on the web has always been about grabbing a visitor’s attention. On a homepage, there are many ways to do this: Rouse people’s curiosity or use humour (or both, for a legendary campaign). Of course, you can also be smart or simply plain weird.

But websites are thankful for these kinds of campaigns: People linger on pages while they glance at their inbox. And even if the average web user doesn’t stay long on a given page, mobile users tend to be even less patient.

Another important factor does not concern the make or model a device, but the location of the user. Those who check their inboxes on smartphones are often on the move – either physically or mentally (eg glancing at the phone while juggling projects on the screen.) This means they are surrounded by distractions competing with your brilliant copy.

Steps for better results Building on the points made earlier in this post, here are a few additional ways to optimize your emails, wherever and whatever a user’s location or device:

1. Make sure to include a plain text version By including a plain text version with every HTML email you send, you offer an alternative. This is crucial for old mobile phones and makes life easier for disabled users.

2. Summarize the contents in the subject line Use this space to give recipients the gist of your message. Make the subject interesting to

Page 21: Samples - web design, blog posts, and infographics

sidestep the click-to-archive reflex. Intrigue, entertain, surprise.

3. The copy has it Putting key messages and links in the top of the email has never been more important. Make sure the writing is sharp and concise. Simple and quick tweaks, such as editing a few lines of the content, can make a difference.

4. Don’tcrowdyourlinks Give the user space to tap. Using a menu should not resemble a round of darts.

Simplicity is a good place to be There are ways to design emails that are rich in content and style, however not without cost. Making your carefully crafted code render properly on the plethora of devices in the wild takes time, patience, resources and testing – and it can still go wrong.

Campaignmonitor offers an insight into how they put together a sophisticated email template, but the development took much effort and tweaking (and going by the comments, the template isn’t bulletproof despite tests and workarounds).

This approach might be interesting to those who feel it is necessary to send highly polished content to a recipient’s inbox, but the first question should be: Does a link to a web page work almost as well? And there are also unavoidable obstacles, such as poor connections and small screens, which no fix in the world can overcome.

So I use only plain text and dashing copy. Problem solved? As often is the case in marketing and design in general, there are no be-all and end-all solution to emails for mobile phones. The ideal approach depends on the content, and sometimes, elaborate and content-rich emails are necessary.

For example, extensive newsletters and job advertisements, often supplemented by short snippets of information and links to several external websites, can be convenient to read in the client.

So there are occasions when elegant and fact-filled emails are absolutely needed. Here are four ideas on how to improve these:

1. Use a fluid layouts that adjust to any viewport Just as fluid layouts are becoming all the rage for web design in general (and rightly so), they work well for mobile email design. A year ago, there were over 500 screen sizes on android alone, and they aren’t getting fewer. But test fluid layouts thoroughly – for example, some clients can stretch texts to unreadable line lengths – and tread carefully around CSS.

2. Use one-column layouts This can help to avoid disastrous results when the user zooms or scales up texts.

3. Identify and leave out troublesome CSS Test, test and test again to be certain your CSS don’t wreak havoc with apps or clients.

Page 22: Samples - web design, blog posts, and infographics

4. (Lessen the) Great Expectations

Not so much a technical tip as a psychological, but still: Lower your demands and focus on the essential components, and you’ll be spared from much headache. The web and its standards are in turmoil but new opportunities emerge from the confusion. Embrace the chaos, concentrate on the core aspects of email marketing, and keep your recipients happy.

Page 23: Samples - web design, blog posts, and infographics

Responsive Web Design: Beyond the Breakpoints

Making responsive web designs that work for ‘anyone anywhere’ is a goal rather than a real prospect. We can only aim high and hope to cater for as many as possible, and the task is often both challenging and frustrating. But the constraints have brought with them, or made necessary, some trends that are quite positive for usability and flexibility.

For example, whitespace has become vital for manoeuvring space, often leading to designs that are simplified, vibrant, and practical. Buttons and links have changed for the better too, as microscopic menus and CTAs are abolished in favour of large objects that are easy to spot and click.

Neat – but what about the actual content?

The ramifications of this brave new world of design reach farther than grids and scalability. Content strategy is more crucial than ever, and must be part of the earliest stages of wireframing. Websites that aim to work on screens both big and small need to feature carefully selected images, effective texts, and sensible layout hierarchies.

Here are some content-specific areas that require thought, preparation, and testing:

Images re-imagined

Visually appealing, striking and scalable, large JPEGs are widespread in every sense. Aside from the possible issues of hitting mobile users with hundreds of kilobytes of jazzy pixels, consider how your image of choice will appear on 28-inch widescreen compared to an early iPhone. If the image relies on fine details or faint nuances to make sense, it’s no good.

This is readily countered with a measure of work: Simply choose images that jump out at every size. Employ the same principles as when designing a logotype, and find an idea that works from billboards down to pencils.

Glares galore

Light has also become an important factor when targeting a wide and varied audience. Images must stand out in bright daylight as well as in office environments, and that requires imagery that is immediate and clear.

The implications go beyond saturation and hues: The key factor to high clarity is contrast, as this affects how well we can make out images in varying lights and from different angles.

This is a tall order. Pictures meant to work everywhere must adhere to brand guidelines, pop on smalls screens in direct light, but not come across as a storm of colours on larger monitors. The remedy is to discuss potential issues with those who pick the images and tweak photographs when necessary.

Fighting the TL;DR syndrome

Page 24: Samples - web design, blog posts, and infographics

One benefit– or straightjacket, depending on whom you ask – of RWD (Responsive Web Design) is the increased need for tight copy. Typically, text reflows when boxes and columns grow narrower, and short texts surrounded by ample whitespace make for easy changes between layouts. Conversely, wordy and keyword-packed descriptions are the kryptonite of effective transitions.

Added to this is the small amount of time typical visitors spend on websites. Today’s web users are a hurried crowd and want the gist of messages now. Consequently, shrewd organisations revise their copy to be as efficient as possible. Be to-the-point, tantalise, hint and hook.

Think of texts as competitors, fighting distractions such as work, social media, overflowing inboxes, sudden noises and general boredom. This has always been the case; mobile devices have only made the situation worse.

Also, tread carefully around vague terms such as ‘solution’. If you can, point to the possible benefits of your service or product. Examples: ‘We increase your conversions, kick-start your social media presence, and bring more people to your website.’

Hide or show

Consider what to show and which elements to hide for small resolutions. Dropping non-critical texts and images can make for much quicker and slicker browsing. Current users are reported not to mind scrolling, but scrolling on small screens still makes it easier to miss content.

While the once-crucial fold is held as less important – not to mention harder to define – these days, there is still the matter of hierarchy. Keep important features near the top of the page, lose redundant elements when scaling down, and keep in mind that smart copy and imagery can spark curiosity while using up very little space.

Conversion-critical websites should take care to ensure that CTAs (calls-to-action) and key messages are prioritised. Crucially, any long page should feature whitespace as well as clear pointers to content below the fold.

Design for the future

This is not to be confused with removing access to any part of the website. I’m a strong believer in retaining all content and functionality, no excuses or exceptions. If a section is cumbersome to use or outright unavailable, the navigation – or perhaps the overall structure – is probably flawed.

Some might argue that certain areas are likely to be of minimal (or no) interest to visitors using mobile devices, and that behaviour analyses can point to key user journeys that should be prioritized. This is correct, and useful when scopes and budgets limit what can be done – otherwise, everything should be available and easy to use, regardless of what device is used to access the website.

The reason is straightforward: More and more people use mobile devices. What was been true for behaviour patterns might be wrong tomorrow. Always give the visitor the opportunity to navigate and act as she or he wants, and then draw conclusions.

Don’t leave the content hanging

Page 25: Samples - web design, blog posts, and infographics

In short, while the technical constraints of RWD in themselves are a case for simplicity, they’re also an argument for looking closely at bland images and longwinded copy. Much can easily be updated – and should be so, to be more effective for an increasingly diverse group of users.

Now that unique, helpful and entertaining texts are recognized for their worth, it’s critical to make certain they get read. Dazzling and inspiring pieces are challenging to write; making mobile web users take part of them is even tougher. Creating and perfecting them must be allowed to take time.

Likewise, images should be picked based on their appearance on large widescreens down to thumbnail size. This too can take more effort than expected. Obviously, this is the case for all websites whether or not they’re responsive, as most devices shrink pictures down one way or another.

Agency work rarely allows for long planning, so the case for content must be made early in the process. Explain – or better yet, show – clients the effects to underline your point. Instead of suggesting that your taste in images and words is superior, use numbers to highlight what your creative involvement has done for others in terms of conversions and traffic.

Effective content demands hard work, but the end result is a website that truly stands out for (almost) everyone, everywhere.

Page 26: Samples - web design, blog posts, and infographics

Developers and Designers Unite

One agency, two cultures

Our office is full of incurable coffee and tea addicts, and as we take turns to serve up beverages, we keep a list of everyone’s preferences. The variations are many – vivid green, black as sin, sweet to the point of tears and so on. But there’s a pattern: Almost every developer in our office takes sugar, while the designers don’t.

I once suggested that developers, in difference to designers, need energy for late hours and harsh deadlines. That idea found some support, but the list also made me reflect on a more genuine issue found in many web design agencies: The split between designers and developers.

Designers and developers face disparate challenges and work in different ways. Many companies have found ways to bridge this split: Some employ mavericks who can juggle both roles, while others use agile development and rely on close co-operation to avoid snags.

However, some agencies are strictly waterfall model-only and don’t promote collaboration. This is understandable: Treating interface design as an isolated process has worked for a long time. As long as designers have had a grasp of technical possibilities and constraints, it’s been a straightforward route – until now.

New times need new tactics

Our use of the Internet is undergoing fast and wide-ranging change. For a long time, a screen was a screen, and when web-capable mobile phones became common, dedicated sites sprung up. Now that smartphones sales are seeing massive growth, solutions that cater for all devices are becoming important – but such solutions can be complex.

At the same time, trends and possibilities in web design change on a weekly basis. Some predict that we will see more large images; others argue in favour of minimalistic websites. The role of typography is being rethought and scalable graphics are on the rise.

In order to produce websites capable of meeting these new demands, programmers and designers must break away from dated workflows and get savvy about how the other team works. Otherwise there’s a greater risk for problems that delay projects, annoy clients and lead to finger-pointing.

A good start is to be aware of why conflicts happen. Here are a few common causes for problems and ways to prevent them:

Page 27: Samples - web design, blog posts, and infographics

1. Chronological consequences

First impressions matter, and designers are required to cook up striking designs that convince the client. In pitches, the suggested look and feel of a website can secure a project. Concepts, even at the wireframe stage, set expectations and start discussions.

Meanwhile, developers must build, test and deliver the promised product. Their deadline is the deadline. A website without functionality isn’t even icing without the cake; it is merely an idea of a cake. While late changes and unexpected additions can take hours to mock up visually, producing these elements can take days – or be outright impossible.

This can result in the nightmare scenario when features that in the design stage amazed a client turn out to be undeliverable. Such mistakes easily sour relationships, and also damage chances to future assignments from the client.

Solution:

Run all proposed designs by the responsible developers before presenting these to a client. Even the most experienced designer can accidentally propose unworkable features that trip up development. Whether producing wireframes, designing in a browser or drawing sketches, make sure all ideas are technically feasible.

2. What You See Is…Not What You Expected

Until a website is live, its final appearance is a vision in the heads of all involved. For that reason, there’s a risk that the final version is far from what the client anticipates, and many agencies therefore work closely with their clients.

The same pitfall can appear during production if designs and planned functionality are misinterpreted. Lack of instructions passed on along with the concepts may lead to guesswork, which can be frustrating and time-consuming.

Also, unforeseen factors crop up in almost every project. Browser quirks and adaption to certain screen sizes can require developers to come up with ad-hoc solutions. These fixes might need to be based on the website’s general appearance as they typically have to be done before lunch.

Solution:

Designers should provide developers with enough guidelines to make production easy. The onus is on the designers to make sure they have covered all thinkable parameters. Two areas that need extra attention are those that designers are picky about or, sometimes, completely overlook. For example:

• Specify padding and margins in every mode of the layout, from HDTV down to small and old mobile phones.

• List all colours of fonts, backgrounds, panels and so on. Include white and black so that developers don’t have to guess or sample.

Page 28: Samples - web design, blog posts, and infographics

• State every font that is used and where these are displayed. • Error states and validation messages must be taken into consideration so that they don’t

wreak havoc with pixel-tight layouts. • Animations are especially important – do they work as intended in all resolutions? • Maximum texts lengths must be identified so that layouts aren’t broken by unpredicted two-

hundred character headlines.

In turn, developers should be in frequent communication with designers when the code is written. Assumptions can save minutes but require hours or tweaking when things go wrong. At every uncertainty or ambiguity, chase down the designer and ask for a quick clarification.

This not only prevents many glitches; regular discussions also challenge involved parties to question ideas and consider new approaches. The end result will be all the better for it.

3. All those precious features

Most of us are prone to favouritism to some degree. Commonly, designers have preferred colours, fonts and structures; developers have favourite workflows and practices. This is to be expected and often makes life easier – there’s no need to upturn tried-and-tested ideas.

But occasionally, small design details turn into major obstacles. The exact alignment of a textbox or ideal repositioning of an image can demand Olympic efforts. If the client has signed off the concepts, backing down can look amateurish and at worst risk the assignment. Cue sighs, frowns and late hours.

Solution:

Check your darlings at the door and prioritize objectives over objects. The Holy Grail is a usable, visually appealing and technically flawless website. Never let irksome elements or minor details turn into absolute must-haves unless the entire website hinges on them. Instead, be prepared for reversals, repeated changes and complete overhauls.

Also, tread carefully around ultra-cutting edge features. They might daze prospective clients, but read up on requirements before offering first-of-its-kind contraptions. Unscheduled weeks of bullet-proofing code to make extravagant visual effects work in Jurassic browsers don’t make for happy developers.

More ways to sidestep problems

There are a number of ways to improve communication and grease the cogs of everyday development. Notably, most of these work in all areas of life. Here are a few examples:

• Be humble and know your limitations. Asking for explanations or confessing that something is unfamiliar signals professionalism, not inexperience.

Page 29: Samples - web design, blog posts, and infographics

• Clarity is essential. When briefing someone from another professional role, weed out heavy terminology and get to the point in a tactful way. What is obvious and trivial to one person may be utterly invisible to someone else.

• Never, ever take a change as a personal slight. When time is short, leave your ego at the door (right next to that red-hot special feature).

Lastly, add some sugar to your coffee

Or, depending on where you come from, leave it out. If you’re a designer, learn the basics of web programming and databases. If coding is your trade, read up on rudimentary graphic skills. What you discover will make you a better team member – and pave the way for hiccup-free development.

Page 30: Samples - web design, blog posts, and infographics

Better Content for your Marketing

Content marketing is currently held as a must-do for promoters of companies and brands. This trend has emerged in the wake of major search engine updates that overturned traditional SEO techniques: Gone is the need for repetitive texts great for ranking but eye-wateringly dull to the human eye. Now content is king (again – it has been said before). Defining the Undefinable This movement is unsurprising: Few things attract visitors more than content they actually want to see and read. But the term content is general in the extreme, and for that reason, discussions about content (in the context of content marketing) are often rich in sweeping statements. For example, many explanations stress the importance of well-produced content that adds value, but don’t elaborate on how to source this material. Others caution against shovelling generic text into websites, however this is merely stating the obvious. Few discussions tackle the creation of actual content – which is easy to understand, as there are no grand solutions that work for all types of content. Consider the challenges of texts on a typical e-commerce website: Outside product descriptions, what content will attract customers and make them return? Which types of articles will actually drive sales? The answer depends on audience demographics, the nature of the product, current market tendencies, and other factors.

Getting under the hood of texts

For this reason, the right copy is unique for every product and organisation, but there are universal guidelines that are effective. Some tried and triple-tested methods can help producing content that more readily snags the attention of visitors pressed for time and money.

Here are seven tips for writing better straplines, feature articles, and anything in between:

1. Good writing takes time Copy is a powerful tool and should never be treated as an extra. Sharp writing underpins good design and functionality, while rushed and slapdash efforts can make any website look amateurish.

Page 31: Samples - web design, blog posts, and infographics

Treat copywriting as a central part of the project, whether it is a large website or one-off campaign, and schedule enough time for writing, editing, and proofing. Content templates can be useful in larger projects to make the process easier.

2. Dare to be original Text can spark interest at glance, yet uninspired and redundant texts litter the Internet. Blandness is the bane of curiosity, but it’s easily remedied with planning and a little pluck. Don’t settle for dated truisms or promotional copy that means little to anyone outside the office. Instead, draw on your organisation’s identity and use it to make your copy come alive. See the J. Peterman Company for a great example of what can be done with product text.

3. Kill the clichés In conversation, platitudes whizz past almost unnoticed. On pages, both printed and digital, humdrum jokes and snazzy jargon leave readers uninterested or cringing. The reason is simple: clichés are by their very definition common, and therefore unsurprising. As a result, they’re also boring.

The remedy is simple: Think of new comparisons or hooks to pique interest. Again, be original and personal. Everyone knows how hard a rock is, but they don’t know you.

4. Don’t bury your message deep in paragraphs This straightforward rule is surprisingly easy to miss. There’s a widespread fear that getting to the point quickly is offensive, old-fashioned or – strangest of all – suggests a lack of education. In truth, readers enjoy getting the core idea served without having to skim through endless waffling. Unless there is need to frame the central message in context, too many introductory lines risk turning readers away. The average visitor is stressed - don’t make them wait.

5. Clarity and brevity above all Any good writer knows the value of tight and clear copy. Conciseness is a virtue, especially in an online environment. Many first drafts are too wordy, and the solution is editing, testing, discussion, and more editing.

6. Grammar is vital...

Page 32: Samples - web design, blog posts, and infographics

Correct spelling suggests reliability. Conversely, one typo can undermine a page of polished, balanced and brilliant copy. Proofreading is a task often accompanied by sighs and winces, but it’s an absolute necessity. Ideally, involve several people – proofing is a tricky chore at best.

7. ...but creativity matters just as much. Copywriting is not spelling. Flawless grammar is important and finished texts should be blotch-free, but this doesn’t guarantee creativity behind the writing. Solid grammar is equal to faultless alignment of graphic elements – it’s essential, but separate from a good design or a compelling message. In (very) short Make room in the schedule and write with gusto. After that, edit until you cannot stand seeing the text. Ask for opinions and edit again. Proofread and publish. Your readers will thank you, and come back for more.

Page 33: Samples - web design, blog posts, and infographics

White Space: Important, Invisible, and Ignored.

Defending whitespace in web design concepts can be hard but it’s worth the fight because it makes websites easier to understand, quicker to interpret and as a result more profitable. Even though the empty space is an established and researched asset that can help turn cluttered websites into sleek conversion engines, arguing in favour of what cannot be seen is a challenge.

Real Estate or Breathing Space

It’s easy to view a website as containers that should be brimming with content for maximum value. For this reason, whitespaces has many names and labels: unused pixels, available real estate, strange gaps or weird empty areas. Bitter arguments and poor compromises have been sparked by misunderstandings and lack of defined reasons for why whitespaces are important. Luke Wroblewski has documented the importance of whitespace and his struggles to protect it in the workflow.

Advantages for Everyone

Ironically, disagreements over whitespace are often due to unawareness of its benefits. Clients want to inform, impress and generate revenue, and whitespace makes this more possible – but to some the idea is counter-intuitive. For the sake of the client and good design in general, designers must explain the advantages.

To do so, we must stay clear of vague arguments that make little sense to others. It’s difficult enough to argue for the absence of content in an information-cluttered environment. Knowing the facts is crucial, as is explaining them.

Here are few advantages outlined:

1. Whitespace speeds up interaction

Whitespace is key to get the message through and to make the visitor act on it. At its heart, it’s a matter of clarity and incentive: The users should see where to go, and be given a reason to take action. But frustrated or confused users are less likely to respond the way websites owners hope. Visitors are typically in a hurry and don’t enjoy searching for the content they want. Instead, to accelerate and increase interactions, offer fewer options and present them with ample space around them. This prevents distractions that slow the visitor down.

2. Guide users around your page Closely related to the above point, whitespace can steer the user to desired places on a page. Padding around objects frames them and draw attention to these areas. Several such elements arranged with care can guide the user from one place to another, e.g. first to a header, on to a snippet of copy, and from there to call to actions (CTAs).

Page 34: Samples - web design, blog posts, and infographics

3. Whitespace highlights CTAs

Experienced web users tend to ignore banners and, unsurprisingly, graphic items that look like them. Make links and buttons stand out to ensure visitors don’t snub them. Whitespace is perfect for this: Objects and copy framed by empty space are stressed and catches the eyes of users.

4. Cluttered means Cluttered There’s an essential difference between order and amount. Website can have pixel-perfect layouts and margins so straight they put rulers to shame but still leave visitors puzzled. A spotless visual structure is always desirable, but central to quick understanding is restraint. Limiting options can be just as important as aligning them to grids. This is a rising trend, most likely due to the growing number of mobile users: The upshot of fewer options is often faster load times.

5. The see-saw effect When considering whether or not to add more elements to a web page, it can be wise to think of the user as someone who can see only a restricted number of options. Obviously, this isn’t true, but it reflects the limited time an average visitor spends on a page. More objects competing for attention means greater risk for distraction and confusion, which results in more time spent scanning the page – and less chance of users staying. For this reason, sidecars, banners and other options irrelevant to the content can lead to visitors leaving the website.

6. The colourfulness of whitespace

The key part of the word whitespace is ‘space’. The term is old and was coined in print design, where absence of content naturally meant white spaces. In web design, the expression refers to the space or distance between or inside objects, no matter what their colour.

It’s interchangeable with the more rarely used term ‘negative space’, which better explains the subject matter: Whitespace is the opposite of content, in the sense that it doesn’t attract attention to itself. For this reason, whitespace can be any colour as long as it helps to emphasize and frame other content.

7. Tidy equals trustworthy There is a solid link between aesthetics and conversion. A visitor gauges a website’s professional level based on how it looks at a glance. Experience adds to this: To veteran users, evaluating a website’s apparent level of sophistication is second nature and is done in a flash.

What’s less well known is that “appealing” translates into “dependable”, as good web design suggests reliability. Solid layouts, tantalizing images, good colour schemes – all these elements add to the impression a website makes, but whitespace is especially important as it indicates expertise. Cluttered designs runs the risk of striking users as cheap and suspect, while plentiful padding and whitespace signals quality and trustworthiness.

Page 35: Samples - web design, blog posts, and infographics

This is important for any website, but it’s crucial for conversion – an apparently unreliable website sees fewer transactions. In this sense, less really means more.

8. Avoid fuzzy expressions Whitespace isn’t neat or nice; it’s effective and valuable. Fewer alternatives look tidier, but more importantly, they can lead to more interaction. Generous padding around links and CTAs don’t just make them look better; it makes visitors more likely to click on them. Proper line height is not lavish extravagance but helps ensure that users read the copy.

Developing Relations

Just because concepts include copious whitespace, the battle isn’t won: Sometimes, layouts are passed on to developers, the website goes onto an internal stage – and looks very different to what the designer intended. Suddenly, the large margins you championed are gone. Vertical spacing? Not there. Padding to allow for easy tapping on touchscreens? Shrunk down to a pixel.

This is common and understandable: Developers often work on tight deadlines and focus on functionality. They rarely expect designers to understand the full intricacies of coding, and likewise, designers shouldn’t expect developers to see abstract or obscure design features – especially if these features, as in this case, concern the invisible.

Designers and developers need to close this gap by co-operating better. Before office moods deteriorate to salt-in-your-coffee cup guerrilla wars, designers should ask themselves:

• Did wireframes and concepts highlight and emphasize padding, margins and line heights? • Did we allow enough time for collaboration between designers and developers before coding

started? • Did the responsible designers tap into the work in progress to make sure all was going well?

Empty space isn’t fresh air that lets the web page breathe – it’s active space that makes the website better in every way. So if the aim is to make users take action, help them do so. They don’t need to see how it’s been achieved, but they’ll appreciate you for doing it.