Like other more established channels social media teams need to prove their usefulness to a business, but where to begin?

Read more – Social Media Analytics: The Small Business Guide to Metrics and Tools

Scope: Black Snow Communications was delighted to have been commissioned as DGB’s (Douglas Green Breweries) digital partner. Douglas Green Breweries is one of the biggest liquor suppliers in South Africa.

Black Snow was tasked DGB’s to assist with the digital needs and strategies of DGB for their spirit brands and selected wine brands.

Client Profile: DGB (Pty) Ltd was formally established in 1990, although our true roots extend over 300 years when winemaking began at the Boschendal and Bellingham farms in the Cape Winelands. In fact, we were doing things a little differently in the 1940’s already, when Douglas Green pioneered the wholesale sales model for wine in Paarl.

Today, they are one of South Africa’s largest independent wine and spirit producers and distributors. No matter how big they become, the utmost professionalism, pride and dedication of their people permeates every level of their business ensuring that they never forget to take care of the small details. What sets them apart is their continuous quest and capacity to get better as they grow. The combined experience, talent and energy of theier people is clearly tangible in their world-class wine and spirit brands that are marketed and sold with authentic enthusiasm all over the world.

Website: www.dgb.co.za

Conclusion: Black Snow works very closely on a monthly basis with the digital marketing coordinator at DGB to create a unique competitive edge web and digital presence across all DGB brands these include, Zappa, Potency, Boschandal wines and Jagermeister .
 

Much of the excitement we’ve seen so far about HTML5 has been for the new APIs: local storage, application cache, Web workers, 2-D drawing and the like. But let’s not overlook that HTML5 brings us 30 new elements to mark up documents and applications, boosting the total number of elements available to us to over 100.

Sexy yet hollow demos aside, even the most JavaScript-astic Web 2.0-alicious application will likely have textual content that needs to be marked up sensibly, so let’s look at some of the new elements to make sure that your next project is as semantic as it is interactive.

To keep this article from turning into a book, we won’t look at each in depth. Instead, this is a taster menu: you can see what’s available, and there are links that I’ve vetted for when you want to learn more.

Along the way, we’ll see that HTML5 semantics are carefully designed to extend the current capabilities of HTML, while always enabling users of older browsers to access the content. We’ll also see that semantic markup is not “nice to have,” but is rather a cornerstone of Web development, because it is what enhances accessibility, searchability, internationalization and interoperability.

A human language like English, with its vocabulary of a million words, can’t express every nuance of thought unambiguously, so with only 100 or so words that we can use in HTML, there will be situations when it’s not clear-cut which element to use for which piece of content. In that case, choose one; be consistent across the site.

[Editor's note: Have you already got your copy of the Smashing Book #2? The book shares valuable practical insight into design, usability and coding. Have a look at the contents.]

Some Presentational Elements Are Gone

Purely presentational elements such as center, font and big are now obsolete. Their role has been perfectly usurped by Cascading Style Sheets. Now, this doesn’t mean you have to rush out and recode all of those ancient pages; HTML5 makes them obsolete for authors, but because HTML5 strives not to break the Web, browsers will still render those cobwebbed legacy pages.

For the same reason, presentational attributes have been removed from current elements; for example, align on img, table, background on body, and bgcolor on table.

The evil frame element is absent in HTML5. Frames caused usability and accessibility nasties. If you get the urge to use them, use an older DOCTYPE so that your pages still validate.

Beyond this short overview, see the W3C’s exhaustive list of removed elements and attributes.

Some Presentational Elements Have Been Redefined To Be Semantic

Not all presentational elements have been taken out and shot. Some have undergone an extensive re-education program and emerged with shiny new semantics. For example, the small element no longer means “use a small font,” although it will display that way in browser style sheets. Now it represents side comments, such as small print:

• Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.

Some of the redefinitions feel to me to be a mop-up. While I can get behind <b> for drawing attention to product names, keywords and so forth, without any special emphasis implied, specifying the semantics for marking up ship names (<i>, if you’re so inclined) feels weirdly precise. But I get seasick, and your nautical mileage may vary. With similar niche precision:

• The u element [now] represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.

You can read more about changed elements and attributes on the W3C website.

Sexy New Semantics

We all know about video and audio. And canvas is particularly popular at the moment because it allows for 3-D graphics using webGL, so game designers can port their products to the Web. Like good ol’ img, these semantics are embedded content, because they drag in content from another source — either a file, a data URI or JavaScript.

Unlike img, however, they have opening and closing tags, allowing for fallbacks. Therefore, browsers that don’t support the new semantics can be fed some content: an image could be the fallback for a canvas, for example, or a Flash movie could be the fallback for video, a technique called “video for everybody.”

The source and track elements are empty elements (with no closing tags) that are children of video or audio.

The source element gets past the codec Tower of Babel that we have. Each element points to a different source file (WebM, MP4, Ogg Theora), and the browser will play the first one it knows how to deal with:

In this example, Opera, Firefox and Chrome will download the Ogg version of Master Bieber’s latest toe-tappin’ masterpiece, while Safari and IE will grab the MP3 version. Chrome can play both Ogg and MP3, but browsers will download the first source file that they understand. The fallback content between the opening and closing tags is a link to download the content to the desktop and play it via a separate media player, and it is only shown in browsers that can’t play native multimedia.

For video, you could use an embedded Flash movie hosted on YouTube:

This way, users of older browsers, such as IE 6-8, will see a YouTube movie (as long as they have the Flash Player), so they will at least be able to see the video, while users with modern browsers will get the full native-video experience. Everyone gets the content, then, which is what your website is there for, after all.

The track element is a newer addition to the HTML5 family and is being implemented by Opera, Chrome and IE at the moment. It points to a subtitle file that contains text and timing information. When implemented, it synchronizes captions with the media file to enable on-demand subtitling and captioning; useful not only for viewers who are hard of hearing, but also for those who do not speak the language used in the audio or video file.

Semantics For Internationalization

Less woo! than the semantics for multimedia and games are the semantics for internationalization. It may surprise the cool kids in Silicon Valley to learn that a worldwide Web of people use languages other than English and even use different writing systems.

Languages such as Arabic and Hebrew are written right to left, unlike European languages, which are written left to right. On pages that use only one writing system, this doesn’t present a problem, but on pages with bi-directional (“bidi”) writing, browsers have to decide where to put punctuation, bullets, numbers and the like. Browsers usually do a pretty good job using the Unicode bidirectional algorithm, but it gets it wrong in some cases, which can seriously dent the comprehensibility of content.

HTML5 gives us a bdi element, which enables authors to override the Unicode bidirectional algorithm and make their text more comprehensible. For a further description of the problem and to see how bdi solves it, see “HTML5’s New bdi Element” by Richard Ishida, the W3C’s internationalization activity lead.

Some languages have scripts that are not alphabetic at all, but that express an idea rather than a sound. Occasionally, an author will have to assist readers with pronunciation for especially rare or awkward characters, usually by providing an alternate script in a small font above the relevant character. In print, this was traditionally done with a very small 5-point font called “ruby,” and HTML5 gives us three new elements for marking up ruby text: ruby, rt and rp.

For more information, see “The HTML5 ruby Element in Words of One Syllable or Less” by Daniel Davis.

Structural Semantics

Most people are aware that HTML5 gives us many new elements to describe parts of a Web page, such as header, footer, nav, section, article, aside and so on. These exist because we Web developers actually wanted such semantics. How did the authors of the HTML5 specification know this? Because in 2005 Google analyzed 1 billion pages to see what authors were using as class names on divs and other elements. More recently, in 2008, Opera MAMA analyzed 3 million URLs to see the top class names and top IDs used in the wild. These analyses revealed that authors wanted to mark up these areas of the page but had no elements to do so, other than the humble and generic div, to which they then added descriptive classes and IDs.

(HTML5 Doctor has many articles about HTML5 semantics, so we won’t bloat this article by going in depth here. Warning: some were written by me.)

The new semantics were built to degrade gracefully. For example, consider what the specification has to say about the new figure element:

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc…

This isn’t a new idea. HTML3 proposed a fig element (which never made it into the final HTML 3.2 specification). It looked like this:

There’s a big problem with this. In browsers that do not support fig (and none do), the image wouldn’t be displayed because the fig element would be completely ignored. The contents of the credit element would be displayed, because it’s just text. So you’d get a credit with no image on older browsers.

In HTML5, you would code the same example like so:

Unlike the aborted HTML3 syntax, the HTML5 version is backwards-compatible: a browser that doesn’t “know” about the figure element will still show the img and the text inside figcaption (as the HTML3 credit element would similarly display its content). Note that we’re using the redefined small element, instead of minting a new credit element. Remember that “Small print is also sometimes used for attribution.”

HTML5 also gives us a new figcaption element. Originally, the specification’s authors tried to reuse caption, as suggested in HTML3, but there were legacy problems, because caption had previously only been a child of table.

One of the design principles on which HTML5 is based is that new features should degrade gracefully. When they can’t, the language allows for fallback content. It tries to reuse elements rather than mint new ones — but it’s a pragmatic language: when minting something new is necessary, it does so.

Interactive Semantics

The structural elements of HTML5 currently don’t do much in visual browsers, although software that sits on top of browsers (such as screen readers) are starting to use them (see “HTML5, ARIA Roles, and Screen Readers in March 2011“ and “JAWS, IE and Headings in HTML5.”)

Other elements do have a visual effect. The details element, for example, is a groovy interactive element that functions as “a disclosure widget from which the user can obtain additional information or controls.”

Most browsers will implement it as an “expando box”: when the user clicks on some browser-generated icon (such as a triangle or downwards-pointing arrow) or the word “Details” (which can be replaced by the author’s own rubric in a child summary), the element will slide open, revealing its details within. The details could be a full description of an image or graph, a description of a complex table, advanced options for a search form, or just about anything else. This is a common need on the Web today, now made native and obviating the need for custom JavaScript.

Most of us have seen HTML5’s new form semantics. Most of these are attributes of the input element, thereby ensuring graceful degradation to <input type=text> in older browsers. New elements include datalist, output, progress and meter.

Do We Have The Right Semantics?

So, we have many new semantics, but are they the right ones? After all, the Google research on which they were based was conducted in 2005 — quite some time ago! Perhaps the semantics are already somewhat behind the times? Many have noted that they’re document-centric rather than application-centric. Do we need more application-centered semantics, such as a login or share element, or some kind of modal element for modal dialogue boxes?

I don’t know; I’m not an app developer. But at least HTML is a “living standard,” and so these can be added if strong enough use cases are presented to the Working Group.

I think most coders would welcome a new way to embed images that respond to the device’s context. Borrowing from the video element, which displays source video according to what media queries instruct, I can imagine a new element such as picture:

This would pull in hires.png for widescreen devices, midres.png for devices between 480 and 800 pixels wide, and lores.png for everything else, thereby rendering moot the question that designers currently ask themselves, “Do I make every browser download a high-resolution image and then squash it down for small screens, thus wasting bandwidth, or do I send a low-resolution image to every browser and scale it up for big screens, potentially sacrificing quality?”

Taking a leaf from the other popular semantics we’ve seen, there would be a fallback in the middle — in this case, a conventional img element — so everyone would get the right content.

Sending the right-sized image to devices without wasting bandwidth is one of the knottiest problems in cross-device and responsive design at the moment. Perhaps we’ll see a solution to this in HTML6. At the moment, the best solutions, which include Matt Wilcox’s Adaptive Images and Filament Group’s Responsive Images, require JavaScript and tweaks to the server’s htaccess file. The worst solutions require old-fashioned techniques, such as browser-sniffing, now rebranded as “device detection” but still the same old user-agent string-pattern matching, which is hilariously fragile, not future-proof or scalable, and straight out of the days of “Best viewed in Netscape Navigator at 800 × 600” badges on websites.

When, Where, Who?

A lot of data depends on three pieces of information: when, where and who?

HTML5 has a time element (which has been a bit of a battleground lately). This enables you to annotate a human-readable date with an unambiguous machine-readable one. It doesn’t matter what goes between the tags, because that’s the content for people to read. So, you could use either of the following:

Whichever you choose, the machine would still know the date you mean because of the datetime attribute, formatted as YYYY-MM-DD. If you wanted to add a time, you could: separate the time from the date with a T, and then put the time in 24-hour format, terminated by a Z, along with any time-zone offset. So, 2011-11-13T20:00Z would be 8:00 pm on 13 November 2011 UTC, while 2011-11-13T23:26.083Z-05.00 would be 23:26 pm and 83 milliseconds in the time zone lying 5 hours before UTC. A Sri Lankan-localised browser could use this information to automatically convert dates into Buddhist calendar. Search engines could use timestamps to help evaluate “freshness”.

It’s perhaps surprising that, even though geolocation is so prevalent now, we don’t have a location element that simply takes three attributes: latitude, longitude and (optionally) altitude. It would be great to be able to write the following:

The browser would then offer to show you a map or give you directions from the current GPS location or any other location-based service.

(Since I gave the talk that this article is based on, Ian Hickson, the HTML5 editor, said that he expects to add a new element. If I could choose, I’d prefer place, so I could wear a T-shirt with the slogan “I’ve got the time if you’ve got the place“.)

HTML3 had a person element, “used for names of people to allow these to be extracted automatically by indexing programs,” but it was never implemented. In HTML4, the cite element could be used to wrap names of people, but this has been removed in HTML5 — controversially (see “Incite a Riot” by Jeremy Keith). In HTML5, then, we’re left with no way to unambiguously denote a person. People’s names are, however, a hard problem to solve. Whereas times and dates have well-known standardized ISO formats (YYYY-MM-DD and HH:MM:SS.mmm, respectively), and location is always latitude, longitude and altitude, personal names are harder to break down into useful parts: there are Russian patronymics, Indonesian single-word names, multiple family names, and Thai nicknames to consider. (See Richard Ishida’s excellent article “Personal Names Around the World” for more information and discussion.)

The new data element, which replaces time, has a value attribute that passes machine-readable information, but it has no required or implied format, so there is no way for a browser or search engine to know, for example, whether 1936-10-19 is a date, a part number or a postal code.

Microdata

HTML5, like HTML4, is extensible (but not in the oh-so-dirty eXtensibility way of XML formats, so loathed by the Working Group). You can use the tried and tested microformats, which use HTML classes, or the full RDFa specification, which doesn’t validate in HTML4 or HTML5. Because RDFa was considered to be too hard for authors to write (Google has conducted research that finds that authors make 30% more mistakes with RDFa than with other formats), HTML5 specifies microdata, a mechanism for adding common semantics via agreed-upon markup patterns. HTML5 Doctor has more information on HTML5 microdata, and Opera 11.60 supports the Microdata DOM API.

Like microformats and RDFa, the extra semantics added to the markup make sense only if you have a cheat sheet that tells you what each piece means. This means that the data has to point to a vocabulary that tells any crawler how to interpret the lump of data it finds. For microdata, there is the newly established Schema.org, which is “a collection of schemas, i.e. HTML tags, that webmasters can use to mark up their pages in ways recognized by major search providers.”

Do Semantics Matter Anyway?

Now that more and more markup is generated by JavaScript, some people are tempted to think that semantics don’t matter. We see various products marketed as HTML5 which simply make divs fly around the screen with JavaScript  —  simple DHTML techniques unchanged from 10 years ago.

I’ve even seen some Web pages with no markup at all. Some frameworks emit skeletal HTML with empty body tags and inject all the HTML with script. If you’re squirting some minified JavaScript down the wire, with no markup at all, you’re closer to Flash than you are to the Web.

In the same way that 47 minutes is (apparently) too long to to struggle making a CSS layout, at which point you should just give up and use tables, some people suggest that thinking about which element to use is a waste of time. “There are two types of developers: those who argue about div’s not being semantic and those who create epic shit” writes Thomas Fuchs, as if the two activities were mutually exclusive.

A better argument is that no software cares about or consumes semantics anyway, so why bother? This isn’t true (work is underway already to map assistive technologies to new semantics), but even if it were true, it ignores that this is a chicken-and-egg argument. It assumes that no new search engine will ever come to the market and be able to use new elements, or that browsers will never release new versions that can make use of these semantics, and that developers will write no new extensions  —  in short, it assumes that the evolution of the Web is complete.

Semantics do matter. Semantics communicate meaning, and once that is established, machines can do something meaningful with that data, without having to develop and use algorithms to guess. A browser extension might allow a user to jump straight to the nav with a single keystroke. It can do this because it looks for nav rather than having to employ heuristics to find a div with an id or class that would suggest it’s being used as navigation (assuming the author decided to use something sensible like nav, navigation, sidebar, or menu  —  and a restaurant site with a div called “menu” might be a list of foods rather than other pages…ah, the ambiguity of natural language). A crawler might dynamically assemble articles on a timeline. There are many more possibilities than my meagre imagination can dream up.

The Web is based on simple technologies, mashed up together to bring surprising results  —  results which have certainly surpassed the inventors’ original intents or expectations. The Web will continue to do so. What makes the Web so great, so flexible and so powerful is the fact that content is in open formats that can be parsed and mashed up in new and surprising ways.

These can happen if the content is marked up for meaning by the author  —  and if the language has the right markup elements for authors to use as a vocabulary. HTML5 extends our vocabulary. We’ll need more words  —  and those will come about with HTML6 etc.

If, like me, you believe the Web to be a system that works across browsers, across operating systems, across devices, across languages, that is View-sourcable, hackable, mash-uppable, accessible, indexable, reusable, then we need to ensure that we use the small number of semantic tools at our disposal properly, and we’ll all benefit.

(This article is based on a talk I gave at the Fronteers Conference.)

HTML5 Semantics

• By Bruce Lawson
• November 18th, 2011
• HTML5
  

If you haven’t heard, HTML5 is taking the web by storm! It is currently being enhanced by experts to provide us Web Designers & Developers with awesome new revolutionary web page features!

HTML5 Background Information

For those of you who are new to HTML5, here is some quick background information to get you up to speed.

• HTML5 is the new language for presenting content on the Internet (at the time of writing this article it is still in beta but soon to be released in 2012).
• HTML5 brings new features making it easy to incorporate video, audio, fonts, drag & drop, web graphics & animations into your web pages.
• HTML5 is backwards compatible to don’t worry about your old designs in HTML 4 or XHML1 they will work just the same!
• jQuery has started killing Flash, HTML5 will finish it off for sure.

HTML5 Online Tools & Resources

Not known to many web designers, there are some really good online tools & resources which web designers should definitely take advantage of to help create those new innovative designs and stay ahead of the field! We have collected 10 of the best Online HTML 5 Tools & Resources for Web Designers. Enjoy!

Online Sprite Box Tool

Compressing images is all the rage these days and putting all your images in a “sprite” will both increase the speed of your image transitions and loading times. This Online Sprite Box Tool can help you design your images into sprites using this awesome jQuery, CSS3 and HTML5 tool.

Online 3D Sketch Tool

This is no ordinary sketch tool, it uses the power of HTML Canvas to create 3D drawing. To rotate the canvas in 3D, you need to hold down SPACE and then DRAG horizontally with your cursor. You can also make the drawing vibrate and draw in dashed lines too. Pretty Cool.

Online Font Testing Tool

As a designer, choosing a decent font can be a tough process! Use this awesome font bookmark to instantly view any web page in a new font without changing any HTML or CSS! Harness the power of HTML5 and @font-face by dragging the font.ttf files into the top toolbar and they will appear in a list for quick view. There are hundreds of free websites just type in “Free Fonts” into Google.

Online Velocity Sketch Tool

Velocity sketch is a unique online HTML5 canvas drawing tool which you can create strange looking web like things. I did a quick one (in the screenshot) but I’m sure you web designers can be creative with such a tool and create something quite awesome.

Online Pattern Generator Tool

This online tool coule be pretty useful for web designers when it comes to creating page and header backgrounds or even heading backgrounds. I uses the power of HTML canvas to provide you with the pattern your looking for in seconds! It has heaps of options and is really easy to use! Great stuff.

Online XRay Tool

With Online XRay Tool can quickly view details of page elements on any webpage at the click of a button! Simply drag the bookmarklet on their website into your bookmarks, visit the webpage you want to analyse, click Xray bookmar then click any element on the page. It also can handle HTML5 elements such as canvas and provide you with the design information you need.

Online Automatoon (animation) Tool

Automatoon is pure HTML5. Since no Flash is used, your animations will play just fine on iPhones, iPads, Android devices, and all common web browsers. Awesome-atoon!

Online HTML5 Audio Maker Tool

I think with the introduction of the the audio tag in HTML5 we will start seeing more and more websites utilize the power of audio. This is an online audio maker tool which can help introduce you to the new audio features HTML5 has to offer. There is also a online HTML5 video maker tool which does a similar thing.

Online SVG to HTML5 Canvas Tool

Most vector art packages (Illustrator, Inkscape etc) can export as SVG (Scalable Vector Graphics) and with this tool you can convert your SVG file into it’s HTML5 canvas equivalent.

Chrome Ajax Animator Tool

A HTML5 powered web-based animation suite (that has evolved from it’s Flash IDE alternative). It is now a cross-platform/cross-format animation tool that works both online and offline! You’ll need to have Google Chrome installed, see a quick video tutorial to get you started. Great tool for HTML5 animation beginners.

The cool part is that anyone can make them. Yes, that includes you. Just Google “QR code generator” and you’ll have a plethora of websites that make it incredibly easy to make your own QR code. But that’s not even the best part. Once you have a QR code, you can mix things up, add color and graphics, and so much more. The key is to know how to keep your code scan-able.

Some people have already cracked this code, like Marc Jacobs. Others, like Yellow Pages, still have some homework to do. So how can you tell which edits will ruin your code and which ones will still allow it to be scanned? The question you should be asking is “what can’t I edit?”

The “No-Zones”

QR codes are made up of black squares and white squares. Each of these squares is called a module. In every QR code, there are certain modules that must not be covered or edited, else the code won’t scan. Here, they are all highlighted in different colors:

• The three large squares highlighted in red are the position markers. These tell the scanner where the edges of the code are.
• The smaller red square is an alignment marker. This acts as a reference point for the scanner, making sure everything lines up properly. In bigger codes, there are several of these squares.
• The red strips of alternating black and white modules are called timing patterns. They define the positioning of the rows and columns.
• The green sections determine the format. This tells the scanner whether it’s a website, text message, Chinese symbols, numbers, or any combination of these.
• The modules highlighted in blue represent the version number. Basically, the more modules in the code, the higher the version (up to v40, which is 177×177 modules). If the code is version 6 or smaller, the version does not need to be defined here because the scanner can literally count the modules and determine the version on its own.

Everything Else

So now that you know what you can’t edit, that means everything else is free game, right? Almost. All the remaining modules are grouped into sections of 8 modules. These groups (which I will call “bytes” from now on) fit together in the gray area like a jigsaw puzzle:

Now, when a smartphone or scanner reads a QR code, each byte is determined to be either completely readable or completely un-readable. That means that if you change one single module (e.g. turning a black square into a white square), the entire byte containing that module is rendered un-readable. At first, that sounds like a bad thing, but it actually makes things a lot easier. More on that in a second.

The Really Cool Part

In the Marc Jacobs code I linked to earlier, there was a sketch of a small girl covering part of the code. In spite of the fact that some of the code is covered up, it is still fully scan-able. This is because of the Reed Solomon error correction method. Basically, all QR codes are created with built-in error correction algorithms that allow them to be scanned even if a few bytes are missing/covered/replaced by a picture of your cat. The larger the version, the more bytes you can edit.

You can use the Version and Maximum Data Capacity Table on Denso-Wave’s website to determine exactly how many bytes you can turn into awesome graphic art. You need to know the version of your code (also found in the version table), and how many characters the message contains (i.e. if your code is built from the website “http://www.your-awesome-website.com”, that would be 35 characters).

The table will give you a letter that represents the level of error-correction contained in your code. Here’s what these letters mean:

• Level L – You can alter up to 7% of the code without ruining its scan-ability. If your code has 154 bytes, you can edit 10 (maybe 11) bytes and it will still scan successfully.
• Level M – You can alter up to 15% of the code.
• Level Q – You can alter up to 25% of the code.
• Level H – You can alter as much as 30% of your code.

So now you should be able to do the following:

-          Generate a QR code

-          Identify the No-Zones

-          Figure out the placement of the bytes

-          Figure out how many bytes you can edit

Now that you know just about everything involved in creating and understanding a QR code, let’s dive into how to turn it into a unique piece of graphic (or even hand-drawn) art.

Ready, Set…

At this point, it all comes down to asking yourself “what if,” and then finding the answer to that question. Look at your QR code, figure out which bytes you want to try to change, and then change them. Scan it to see if it still works. If it still works, make another change. If not, go back and figure out why. I’ll show you an example of what this process might look like.

I started out with a regular QR code, isolated which bytes I wanted to play around with, and outlined them in red (top left). First, I just scrambled all the modules within the red border (top right). It still scanned. Then, I took out all the modules completely (bottom left). It still scanned. Lastly, I filled the red border with a portrait of one of the most influential aliens from my childhood.

…Go!

It’s a matter of experimentation. Think of an idea, try it and scan it. Then work from there. Go online and look for other creative QR code graphic art, to see what boundaries other people are pushing. Pretty soon, you’ll end up doing something like this:

Resources:

http://www.systemid.com/qrcode/
http://www.denso-wave.com/qrcode/qrgene2-e.htmlhttp://raidenii.net/files/datasheets/misc/qr_code.pdf
http://www.itcsolutions.eu/2011/08/29/how-to-insert-a-logo-or-image-into-a-qr-code-using-photoshop/
http://hackaday.com/2011/08/11/how-to-put-your-logo-in-a-qr-code/

These graphic design tools will not only give you the power when it comes to actually designing, but they will also help streamline your workflow and maximize your productivity.

If you like our roundup of graphic design tools, check out these posts:

• 100 Best Illustrator Tutorials of All Time (From Newbie to Pro)
• Character Design Tutorial Roundup: Best Illustration Tutorials
• 50 Best Photoshop Text Effect Tutorials
• The Top 50 Best Photoshop Tutorials of 2010
• The Top 20 Photoshop Tutorials from August 2010
• Best Photoshop 3D Text Effect Tutorials
• 30 Best Adobe Photoshop CS5 Video Tutorials

Contribute your essential graphic design tools in the comments!

1) Adobe Photoshop: Ok, this one is a bit obvious, but in case you’re new to the field, we thought we’d list it.  Included in the Creative Suite package, Adobe Photoshop enables you to modify images, design websites, adjust features of a photograph and even create graphics from scratch. Photoshop is equipped with many advanced tools such as layering, editing manipulation, color correction, graphic creation and more.

2) Basecamp: This software is good for graphic designers interested in simplified management, and in collaboration with other freelancers online. You can supervise multiple projects online and refine details of said projects with the Basecamp features, such as project templates, to-do lists for each project and advanced communication devices.

3) Font Doctor: For their work with multiple fonts, you can use this software to effectively handle multiple fonts. You can repair damaged font files, locate the missing postscript of fonts, organize the font cache, convert fonts to other formats and generate reports. All the usual issues with fonts can be easily solved.

4) BrowserShots: A free open-source web application available online, it produces screenshots of your website uploaded onto different browsers. It is a good method to check the appearance of your website, the screen resolutions and color depth on different web browsers. It is possible with this to check out the test screenshots of other graphic designers too.

5) Blender: It is a free 3D animation program for graphic designers to work on 3D projects. The software has numerous features to enable graphic designers to create integrative 3D applications. Amazing keyframe animation tools are available in the software along with a node-based compositor, stimulation tools, textures, modifiers and much more to produce quality graphics. A strong user interface makes this software worth having.

6) Adobe Kuler: A flash site that is color focused, giving users the ability to create their own color schemes, alter uploaded themes, browse a cache of themes and access their personal Mykuler account. A community support group gives users the extra inspiration they need.

7) Favicon Generator: Favicons are small icons that are displayed next to the web site’s bookmark menu or in the address bar of its browsers. With this software, it is easy to upload a picture and produce a Favicon for your website as a method of branding.

8) Subtle Patterns: Perfect for downloading free patterns for Photoshop to be used on web projects. The subtlety of the patterns allows its use discretely in your web design.

9) BG Patterns: A small web application for mixing and creating background patterns.

10) Dropbox: A data storage device for ensuring a backup for your files, videos and pictures in addition to syncing them up. You can also share files with other graphic designers, clients and associates involved in a group project. This updatesautomatically between your android phone and computer.

The following is a list of honorable mentions that serve graphic designers well in their artistic endeavors:

Inkscape: Simple user interface and capable of producing quality graphic designs.

What the Font: Curious about a font you discovered on the web, the software will tell you which font it is.

Five Second Test: Analyzes the highlights of your design and measures your site’s content.

TypeChart: Aside from retrieving CSS, the site allows for an in-depth study and comparative research on web typography.

With the proper tools, anyone can succeed in his chosen field. The array of graphic design tools can bring life to the imagination of a graphic designer.

Client Profile: Europ Assistance SA and Care Assist merged to become Europ Assistance South Africa on 1 October 2002. Care Assist had been operating locally since 1993 and Europ Assistance SA since 1984. With the acquisition of MRI Criticare, effective 1 May 2003, Europ Assistance SA is undoubtedly the market leader in terms of product offering and client base. The consolidated company is now the most comprehensive assistance service provider in the country and celebrated its 20th anniversary in November 2004.

Europ Assistance SA is a solid and established service provider that assists corporates, brokers, clubs, medical aid funds etc. in providing value added services and benefits to their clients.

They have introduced innovative products and services to the South African market that have revolutionised the legal, medical, insurance and value-added services fields. Their business and products are continually re-engineered to ensure that they remain at the forefront of developments. They currently assist over eight million end-users on their range of products and handle an average of 2 million inbound calls per month.

They provide telephonic advice, assistance and consultation facilities which include Health, Travel, Emergency, Professional Consultation & Cover, Labour, Education and Recoveries.

Europ Assistance SA provides all assistance services in-house, and therefore ensures service quality. All contact centre case managers, nursing staff and legal advisors are housed in their call centre in Constantia Kloof, Johannesburg.