In today’s information age, written communication and typography are so commonplace that we often take it for granted. Publishing information was once a specialty role, but since the advent of computing, practically anyone can use computer software to create and publish written information. This brought plenty of freedom to everyone to share information, but it has also diluted traditional principles in regards to good standards for communication. What we often see is waves and waves of written communication that don’t have proper care or attention to typographic detail – and as a result they often look plain and generic, or are difficult to read. Good typographic practice is much more than just font selection – things such as type size, word spacing and sentence length all have impact on how successful your written communication will be. Here’s a few things to consider when you prepare your next visual presentation:

It’s all about contrast

An important goal to have in mind when creating your presentation is to aim for maximum contrast in your text. A high level of visual contrast allows readers to clearly distinguish individual words, sentences, headings and paragraph structures, improving legibility. Contrast can be created in a number of ways – through the use of spacing around text, or through formatting / typeface choice / typeface size.

Looking at word / line spacing, if the spaces between words & lines are too tight, the contrast between words is lost and the text becomes difficult to read. It’s a little like removing all the silent parts from a well known song – all you’re left with is a mish-mash of music notes and nothing can be discerned from the noise. Conversely, if you have too much spacing around words and lines, you will notice that your words will float in space like islands, and the reading flow is disrupted, as the reader’s eye isn’t guided to the next word.

You will need to experiment a little to find the right balance of spacing for your presentation text – the rule of thumb is to ensure that your words “breathe” easily with enough space to be read well, and not be too “breathy”, or be too “breathless”. My particular preference for presentation text is to have slightly tighter letter-spacing, with slightly looser word spacing, to allow word shapes to be formed as easily as possible for the eye to anchor onto as it passes over a sentence. Always be sure to test your presentation on a projector, and stand as far back as you can from the projection to determine if your word / letter spacing is suitable.

Establishing a consistent hierarchy of information

Following on from spacing contrast, you can use formatting, type size, and typeface selections to help distinguish elements in your text, such as headings from bullet points, or an emphasized word from a line of text. The decisions you make in formatting headings and body text help build up a visual “language” that helps the reader determine what is the most important piece of text, followed by the second most, etc. A typographic hierarchy is then established, which is applied throughout your document.

It is important that the hierarchy remains consistent throughout the entire document, and that you stick between 2-3 different typefaces for the entire document. Once again, if you add too much formatting and typeface changes into your document, the flow of the text will be disrupted and readability will drastically fall.

Think about your target audience

Remember that when you create a presentation, you are creating it to share information with a particular audience – and the goal is to share that information with them as easily and clearly as possible. You will want to ensure that your presentation can be read by young and old alike, as well as viewers with low vision. But you will also want to consider appropriate typeface choices as well, as each typeface is like a “voice” that can change the tone or character of the message you are communicating. For instance, choosing a flamboyant script typeface for a boardroom presentation will undermine the seriousness of the message.

Much debate has been made over whether serif or sans-serif typefaces should be used in presentations – the general consensus seems to be that sans-serif fonts are more legible, however serif fonts do have their place in adding a human, approachable quality to your presentation. As long as you don’t use serif typefaces at a small size, you should be OK with serifs.

Now for the fun part!

Now you know a little more about good typographic practice, you can now go out and set up your presentation template with your tweaks and adjustments so your future presentations are ready to go with these principles in place. Remember that the world of typography is much more than just Arial and Times New Roman – there is a world of websites out there that have some fantastic paid and free fonts.

Some of our favorite free fonts for presentations are:

Direct links to download: Aller, Titillum, Share, Bergamo, Museo

And one more thing…

Here’s a little checklist of points we’ve collected over the years to ensure our presentations have the best readability:

• Less is more – keep it simple and don’t add any unnecessary words or sentences that could be communicated verbally in your presentation.
• Don’t read from the presentation slides verbatim – instead, use the points in your visuals as support to your verbal presentation for maximum retention.
• No long line lengths or paragraphs – avoid large blocks of text and long line lengths. Condense your information into bullet points and simple sentences.
• Consider the 6 x 6 rule – no more than 6 words in a heading, and no more than 6 lines per slide. Your communication will be sharper and more to the point.
• Stay clear of narrow / condensed fonts, TYPING IN ALL CAPS (which appears as though you’re shouting!), and font sizes smaller than 28 pt.

Our next article in this series will focus on colour, and choosing the best colour schemes for your presentation. Stay tuned!

Getting to the heart of the egg

Prick two holes either end of an egg, and blow the contents out!

You can either hard boil the egg or remove the yoke by piercing a hole in the top and bottom of the egg so that you can blow out the yoke – we used some darning needles to make the holes. If you are blowing out the yokes, be prepared to make a huge omlette for dinner! Some people recommend removing the yoke after the eggs have been coloured, but we blew the yoke out first. Another idea is to replace the removed egg yolk with melted wax, that when hardened helps to preserve the fragile shell. Another option is to paint the decorated egg with clear nail varnish for a little more strength. Make sure you rub the eggs with some vinegar to remove impurities on the shell prior to decorating.

Tip: If you are doing this with kids, its recommended that you boil the eggs, rather than blow the yoke out, as they are less fragile to work with. However they will need to be discarded soon after displaying them, as the eggs will rot.

Natural Beauties

As children we remember decorating eggs with our families, and some of the most beautiful effects were achieved, by boiling the egg in a sock with onion skins fastened with a rubber band. The onion skins impart a beautiful marbled effect to the egg. We decided to shake things up and use both brown and red onions to get some interesting patterns. You can also use beetroot, red cabbage and spinach to create other colours. Boil the eggs for about 7 minutes to achieve a dyed effect.

Wrap the egg around some dry onion skins, and place inside a sock tied with a rubber band.

Boil the sock parcels in a pan for 7 minutes.

The finished product!

Food Dye Method

Recipe: ¾ Cup of water, A few drops of food colouring, 1 tspn of White Vinegar

We dipped the eggs in food colouring and then experimented with patterns by drizzling dye directly onto the wet eggs to get some ‘Pollock’ like effects. You can also wrap rubber bands around hard boiled or wax filled eggs and then let them sit in the dye for some interesting compositions or add oil to the dye for a more marbled effect.

A mixture of food colouring, olive oil and water.

Drizzling olive oil over the food colouring created some interesting streaking patterns

What Else Can We Use?

We have enjoyed reading some craft blogs on egg decoration and have seen some interesting approaches, from using nail polish to legumes and dyed rice for egg decoration. Our philosophy is use whatever is on hand – this pushes you to be more creative, it means recycling and doesn’t break the bank!

Have fun and share your creations with us on Facebook or Twitter!

We are pleased to present our Easter gift card designs to you – feel free to share & print them out to add a little extra pizazz on your presents! There are two versions of the artwork in PDF format, and each version is provided in colour and black and white for laser printers. The designs have been arranged in a 2×3 grid on an A4 paper dimension for your convenience. We also suggest that you print these onto stiff card for longevity.

Have a fun and safe Easter break!

	Landscape Colour Download
	Landscape B&W Download
	Square Colour Download
	Square B&W Download

If you can’t open PDF’s on your computer, we suggest downloading Acrobat for free.

While it may not be apparent at first, there are some pretty compelling reasons why you should be ensuring your website works and displays well on a mobile phone. With more than 3.4 billion people owning a mobile phone in the world (50% of the world’s population), and around 2.8 billion connecting to the internet, there’s no doubt that the future of internet access is heading towards the mobile phone as a portal for accessing information about your business. These trends indicate that much of the future traffic to your website could be coming from mobile devices – with potential customers that are searching for you while on the go, or while at a cafe or waiting for the train to arrive, it only makes good sense to ensure your site presents properly, however people may reach it.

Sadly, ensuring your site works well on a mobile phone at present is often more complicated than making it work well on a conventional computer – there are much more screen dimensions, pixel densities, and hardware considerations to take into account, and like on a PC, there’s no single web browsing application on all handsets to ensure your site looks perfect in every mobile device. On top of that, many tablet devices like the iPad can access the internet, and they have their own custom screen resolutions that sit somewhere between a smartphone and a PC monitor. If you currently have a website, you may be curious to take a look at it on a mobile phone or a tablet – while it may render well in a modern smartphone, it might not degrade so nicely on a more common candy-bar style phone like a Nokia or Sony Ericsson.

But there are a few strategies that you can employ to ensure you have the best chance for looking your best on a mobile device, even if you have an existing website. Here’s a few things that we consider when building our client’s websites to ensure they render well on mobile devices:

Move away from Flash, and keep it simple

Although Flash has a long, stable presence on desktop computers, it is haphazardly supported by mobile phones, most notably with the iOS operating system which has no current support for Flash on the iPhone and iPad range. If your site is built entirely using Flash, it may load up as an empty blank page on such devices. For this reason alone, it’s worth considering a site redesign to ensure the content on your site can be delivered properly to mobile handsets in text form. There’s also no need to sacrifice special effects such as animation, as much of this can be achieved using JavaScript / HTML5 / CSS3 which are all technologies supported by the modern smartphones of today.

Keeping your website design simple is also a great idea, not just for the benefit of mobile users but also for your desktop users too. Presenting information in a clear, hierarchical manner with properly defined headings, subheadings and paragraph formatting can only help increase the readability of your information and in turn keep the attention of your audience. Use special effects and animations lightly, and only when absolutely necessary, and consider alternate navigation systems for mobile devices that require people to tap on a screen with the tip of their finger or thumb.

Build fluidity in your site design

Another excellent strategy is to add an element of resizability, or fluidity into the design of your site, so that it can scale nicely within a wide range of screen sizes, from desktop to handset size. You can tell how fluid your site design is just by stretching or shrinking your web browser window while viewing it – if the content on your site compresses into the space by wrapping text and images nicely, it is a “fluid” layout, whereas if the text and images stay at the same width, it is “not fluid” (refer to the side note below if you have a non-fluid site design).

One particular method to consider is the Less Framework method, where a site design uses a set grid to define the width of various elements, and these elements collapse nicely underneath each other as the site renders on smaller screens. You can simulate this effect by visiting their website and shrinking the browser window back and forth. (We are currently in the process of implementing this method ourselves in our own website design).

Sidenote: Having a non-fluid website design isn’t a particular problem – in some cases it’s more practical to design a site in this manner as it preserves the site design to be exactly how you planned it – but it is best that your website is as flexible as possible to scale on a range of screen sizes. If your site is non-fluid, people can often zoom into a column of text using their mobile phone to read your content as they would on a desktop PC, or the mobile phone may reformat the content to display in a more friendly format – but then you’re leaving it up to the mobile phone software to determine how your site may look.

Extend your CMS with a mobile-format plugin

If you use a content management system, such as WordPress, you can download a plugin that processes your website content into a familiar presentation format for smartphones. This is often the easiest and quickest way to fit your website out for mobiles, if you have a CMS powering your site. We are currently using the WP Touch plugin that sends our website content to the WP Touch servers for formatting, and returns it to a mobile visitor in a clean, professional layout. This style of presentation is mostly suited for mobiles with touch input such as Androids and iPhones, but also works well on older generation mobiles like the Blackberry or Palm.

Finally, test, test, and test again!

The best piece of advice is to get your hands on as many mobile phones as possible, and test your site out using all of them to see how things look across the board. Determine which phones render your site the worst, and talk to your web designer about how you can improve the presentation for that type of device. While you can never have 100% consistency in design and layout, you can aim for a common standard of readability and ease of navigation. If you don’t have access to mobile phones, try these websites out to see how your website fares in an online mobile simulator:

Opera Mini website simulator - a browser which is commonly deployed on candy-bar / Nokia handsets.

iPhone Browser simulator – simulates your website on an iPhone horizontally and vertically

dotMobi - Emulates the much older browsers seen on candy-bar style phones.

Finally, here’s a list of other emulators for a wide variety of platforms like the Android or Blackberry phones.

Have fun, and don’t worry if your site doesn’t look right on a mobile phone – it’s often surprisingly easy to correct!

At Daydream, we have road tested many techniques to keep the ideas flowing for our design projects, and we wanted to share some of our favorite techniques with you. These techniques are demonstrated below as an application to solving design problems, however they can easily be applied to any kind of problem, from personal to work challenges.

1. The Mind-Map Approach

This is a classic and commonly used method of idea generation, mainly because of its ease of use and power. but it can be great to create a basis for solving a problem. We usually start here to get our brains oriented to the problem that requires solving and then try a variety of other techniques. The problem is written as a brief statement in the middle of the page, and then associative words are added outward, and then finally these words are connected together to create new thinking paths and associations. (This process is repeated until you find yourself writing off the page and on the table!) This creates a spreading map diagram and is a great way to expand your thoughts when you need fresh ideas.

We find that performing this technique on a large sheet of paper or whiteboard works best – the more space you have to write, the more ideas you can capture – and using visual stimuli such as symbols, different coloured pens and thumbnail sketches can also help free up your thinking.

2. “Broaden the problem”

Open your mind and think about how the problem might be described – using sounds, tastes, feels, smells, it’s color, it’s mood, favorite music, hobbies. Try to think of the problem as if it has a personality – what kind of person would the problem be? What animal would the problem be? What would you feed your problem? Where would it travel? What era does your problem fit into? This seems like a strange task at first, but it helps you to get much deeper into your subject and create a “profile” of the problem so you help find a solution to it.

3. “What not to do”

This is a personal favorite of ours, generally because it tends to end in peals of laughter and some real idea gems can come out of it. Laughter and fun are an important ingredient to the creative recipe, and it can bring about many unexpected solutions.

Begin by thinking about typical ways you might solve the problem, and then come up with opposite ways to tackle the issue. How could you solve the problem in the worst possible way? What wouldn’t you do, or say, or think, about the problem? These ideas tend to spark more useable ideas, but the technique frees up your mind and allows you to find more innovative and non-traditional approaches to the problem.

4. The 100 Ideas Approach

The biggest enemy to creativity is critical thinking – idea rejection and limitation. While it is an important step to filter out weaker ideas later down the track, it’s essential that this doesn’t occur in the initial brainstorming stage, or else your creative scope is too limited and you fall into a comfortable path of thinking which stifles creativity.

If you find yourself thinking; “that is a terrible idea, I can’t write it down!” or “You are not doing it right!”, you may need to clear out the cobwebs surrounding the problem first in order to let the fresh air of creativity in. This is where idea overgeneration can help.

Right now, if I asked you to come up with 100 creative methods to promote your business, you might list 20 or so and then start to feel like you can’t think of any more. Those 20 ideas are likely to be common, comfortable suggestions that you may have implemented in the past or have seen others perform. But if you push yourself to generate 100 ideas, no matter what you wrote down, after about 50 or 60 ideas you will start to break into a world of free thinking that may hold some fantastic solutions to your problem. The 100th idea will certainly be much more creative and free than the first idea!

In order to get to the creative gems, you first have to state these obvious assumptions about solving the problem, so you can put those aside and move forward – This involves listing all the mundane, cliched, and stale methods to tackling the problem first. Its so much easier to cull after an idea explosion than to limit yourself initially. What is important is that you stick to the goal of generating your batch of ideas, and don’t stop until it’s done – much like running in a marathon. In the past, we have sat in cafes with pen and pencil, and vowed not to leave until we have 100 ideas on the paper – often it not until idea number 95 and your second or third coffee that you find yourself saying, “Hey, I didn’t think about that earlier, what a great idea!” Sometimes it also helps if you set yourself a time limit – eg. 50 ideas in 5 minutes, and to keep a clock by your side so you can race yourself to the finish line.

Further Information & Resources

Mycoted – An excellent resource for idea generation techniques, covering a wide range of methods and activities to generate new ideas.

Thinkertoys – This book has a permanent spot on our library shelf and is an invaluable resource to help you solve problems of any kind.

Edward De Bono – One of the more prominent authors and speakers on creativity, who is well known for his books on lateral thinking.

Visual Thesaurus – Type a word into this tool and you will see a visual map of connected words and concepts; very useful for the mind-mapping technique.

The feature I’m talking about is called the Admin Bar – when you are logged into the backend of your website, and you visit the front end, you will now see a little grey bar at the very top of your screen, giving you instant access to some commonly used functions within WordPress:

The new Admin Bar in action on our website.

Why is it so useful?

Previously, if you wanted to edit content on your site, you either had to include a snippet of code in your theme that produced an “Edit” link, or you had to log into your site, navigate through 4 or 5 clicks in the backend to get to your content, and then edit away. As for adding new pages or posts, or performing other common tasks like moderating comments, you had no choice but to take the long winded route as well, and hunt for the articles you wanted to review.

This Admin Bar gives you much more options to maintain your site than by just editing and adding content. You can do other things such as:

• Moderate new comments that have been left by visitors
• Quickly alter the content of widgets and menus
• See which plugins / core services need an update on your site
• See vital information generated by other plugins (for instance, we use the Yoast SEO plugin, and from this our Admin Bar gives us abbreviated information about the SEO performance of the page we’re looking at)
• Search for a particular item quickly, so you can edit it in seconds
• And loads more, as more plugins begin to support this feature

We’re glad to see that WordPress is listening to its users and tailoring their CMS to support a wider range of uses and implementations, and we’re excited about this development as it will help our clients maintain their websites with greater ease than ever before.

How you can upgrade

Upgrading to WordPress is simple if you are currently using version 2.7.1 or higher – you will see a yellow box appear at the top of the Dashboard once you’ve logged into the backend – click the Update link and then choose “Update Automatically” (don’t forget to back your site up first, just in case you have any issues during the upgrade process). If you do need help upgrading, get in contact with us and we are more than happy to help.

It can be hard to part with something you’re familiar with – I remember downloading IE6 on a dial-up connection in 2001 (taking a good few hours to do so!) and running it for the first time – marveling at how clean the interface was, and how snappy it was compared to Netscape and other browsers of the day. We all got used to typing in a website URL in a Windows Explorer window, and magically seeing that window transform into a glorious site filled with animated GIF’s and flashing blocks of text :-D Those were good times, but now the wagon has rolled on and today’s demand for services like streaming multimedia and responsive, dynamic page content have called for a new generation of web browsers to handle this change.

Microsoft is pushing hard to encourage the abandonment of IE6, having recently launched the IE6 Countdown website that shows a detailed map outlining which countries have been most progressive in dropping this browser. Microsoft also rationalises that using IE6 is as dangerous for you as “drinking nine year old milk“, due to the amount of security flaws and incompatibilities with today’s websites.

But it’s not just Microsoft calling for the end of IE6 – Google, Facebook and other major internet authorities now display prominent notices on their websites to encourage a switch to an alternative browser, should you cross their path using IE6. Their argument is that they can no longer afford to support IE6, while delivering the newest interactive experiences on their websites. It’s an argument that we agree with, and we have now decided ourselves that we will no longer develop websites with IE6 support.

Why we no longer design for IE6

The number one reason why we think it’s a good idea to drop IE6 support is that it takes some amount of extra time to force a website to work under IE6 – and this extra time translates into higher costs of development. No matter how good a website designer you are, it’s the tools you use that end up breaking IE6 – for example, using alpha transparency PNG’s, or using modern web technologies that work fine in most other browsers, but behave terribly in IE6. The workaround solution is to use various “hacks” in your code to skirt around these issues, but ultimately doing this creates extra inefficiencies in a website, and makes it more prone to messy management of the site later down the track, as more of these hacks become redundant and threaten to break the site in current web browsers.

Given that less than 4% of users are running IE6 worldwide, it seems like an unnecessary risk to force the support of a browser that is quite outdated and hardly used, both for the designer and for the client. At the end of the day, a designer should be trying to create the most consistent and enjoyable web experience possible for the users of the site, and while IE6 was once a consideration as part of this, it’s no longer justifiable in terms of time and cost.

If you are using IE6

It’s quite easy to upgrade your browser, or install an alternative – you only have to visit the homepage of Google to informed on how to do it, and if you have Automatic Updates turned on in XP, Microsoft would be nagging you as well! But if you are after a particular browser that you can use, try Firefox, Chrome, Safari or Internet Explorer 8. Once you have upgraded, you won’t look back!

4:3 format – This is suitable for older CRT and early LCD monitors.

16:9 format – These widescreen wallpapers are supplied in 1080p format and are suitable for HD monitors and HDTV sets in the widescreen format.

16:10 format – Certain laptops have widescreens in this format, so if the 16:9 format looks distorted on your widescreen monitor, try this format.

Click on an image below to choose which format you would like to download. In most browsers, the full sized image will display in your browser and you can right click on it and choose “Save as image” or “Set as desktop wallpaper”. If the image looks squashed, try downloading a different format.

4:3 format Older monitors	16:9 format for HD 1080p monitors	16:10 format for other widescreen monitors

Thanks for downloading our wallpapers – and please feel free to share them with anyone else who might appreciate them! (If you do post these wallpapers on your site, all we ask is for a link back to this website.)

Our original logo from 2008

When we first began Daydream in 2008, we developed a logo that was youthful but simple – this logo carried our business through for 3 years, but recently we re-evaluated our branding and discovered that there was a disconnection between our image and the work we were producing.

We were also embarking on an expansion of the business into an office in the city, and  wanted to update our image to reflect our new direction.

In order to develop our new logo we began to research extensively to find out how our business was perceived by others. Daydream can be described as a small, boutique studio that has a strong client base in the creative industries, using a design style that is expressive, artistic, and slightly “vintage”, whilst still using clean functional overtones and drawing on a strong technical background. We are also a highly personal studio, but our old logo didn’t quite reflect these aspects.

We are inspired by design styles of the past, from art nouveau & art deco, through to the modernist period of the mid-20th century, and we drew upon the aesthetic styles of each period to develop a script logo that brings a little bit of the past into the 21st century. In particular we drew inspiration from etchings, engravings and decorative script signage – the kind you might find adorning a glass window on a Paris street.

An early draft of the new logo

The script logo was roughed out  in a series of sketches, to develop the basic shapes and letterforms that would make up the final design. (Hand drawn sketches are an often-forgotten, but vital step in the design process and we always insist that concepts are created by hand first, before they reach the computer!) From there, we decided which letters would be ligatured together and which would not, and where the flourishes should go , with a view to retaining legibility at all sizes.

Redrawing the logo in Illustrator

Once we were satisfied with the sketch, we scanned this into Adobe Illustrator and began reworking the sketch into a clean vector outline. Each curve was re-drawn by hand, and outlines were carefully checked to ensure that the thicknesses and angles of each stroke were carefully balanced. We started making  decisions about the “visual language” of the elements – should all letters have a spur at the bottom? should the top of downstrokes be rounded, or straight? And we also wanted to make the curves as “clean” as possible, eliminating any unnecessary points & nodes along the way.

One particular detail we are pleased with is the small triangular nicks you can see at the crossbars of the flourishes (eg. at the midsection of the tail of the “y”) – we did this to ensure that the logo was readable at a small scale, and that these areas would not give the optical illusion of being “thicker” at these particular junctions. It also helps the eye trace the path of a particular stroke without  interference.

The finished logo design

Once the final trace was complete, it was a matter of saving the vector logo for use on a wide variety of print and web applications . We opted to keep the magenta colour, since this was a strong identifier and helped to distinguish us in the market place. It also maintains a level of connection to our old brand, while introducing changes to our audience. The new logo has given strength and energy to our business, and it affirms our direction for the future.