‘Eiterquellen’ / Photography by Stefan Fürtbauer

[ Go to Source ]

Geraldine Lay Photography

[ Go to Source ]

SnapTags: Will they kill QR codes?

I remember a time when truncating the UPC bar code on the cover of a magazine was a huge coup. Taking the huge, lumbering code, which took up too much real estate on the cover of a publication, was bothersome and affected the design space.

Cutting the bar code by half, in height and width, was celebrated as a major advance in the much-needed item used for scanning the price by, at best, only half the retailers, seems so petty and foolish now.

When printers discovered you didn’t need to place the codes on white boxes, we rejoiced at not having the little lines popping out on what were beautiful covers, interrupted by alien chunks of absurdity. Again, it seems odd no one had discovered this fact for all the years bar codes had been used.

When we discovered that we could play with the bar codes, making fun little designs and jokes; we wondered why something so simple had escaped us for so long. We reveled in the design challenge of playing with the codes while still keeping them functional.

Not long ago The QR Code appeared and changed instant information access via a scanner. Created by Toyota subsidiary, Denso Wave in 1994 to track vehicles during the manufacturing process, they didn’t enforce their patent and everyone has been able to generate their own codes for private and professional use. The little black squares that reminds people of a crossword puzzle, very much like the bar code, was quickly evolved to show the capabilities of a 30% error correction rate when people started designing the codes to accommodate logos and other information (read more here on our article on QR design).

As always, technology marches on. The newest roadside diner on the digital highway is the SnapTag.

SnapTag technology is really no different than a QR Code with a couple of exceptions: Consumers with either a standard or smart camera phone can snap and send a picture of the SnapTag to a designated short code or scan the SnapTag using a SnapTag Reader App to instantly access offers, content, promotions, and information whereas the QR Code needs a smart camera phone with a reader app. By driving activation via text or e-mail the SnapTag adds a CRM element that can then drive a mobile opt-in vs. simply sending a user to a pre-determined location via a QR code, which will also make analytics easier to track. The second thing is; SnapTags are not free.

The Social SnapTag is the product of Denver, CO-based SpyderLynk, whose focus is “connecting brands with mobile marketing opportunities.” SnapTags are rings, with visual information aligned in a pattern of bars and breaks, that tell a reader app what content to pull up. And where the SnapTag is unique is that each tag also has an SMS short code, so people who don’t have smart phones can send and receive text messages that will connect them with a campaign. The SnapTag is a technology that rivals the QR code, but offers specific benefits to marketers who want to reach specific users and demographics through targeted campaigns. Unlike Denso, Spyderlynk is not about to let the technology be generated all over the web for anyone to use.

There’s no denying that the SnapTag is a better looking version of the QR code, because its simple ring wraps around a company’s logo, for automatic visual recognition. Marketers who are using SnapTags would probably agree, along with other differences. Whether inside the ring or outside, the design capabilities are easier than the QR Code.

While marketers may be in a rush to capitalize on growing awareness of QR codes, it’s going to be a while before they hit critical mass. SpyderLynk CMO, Jane McPherson, says that “a significant, but small percentage of the American public have a smart phone with a QR code reader app on it. Just 35 percent of U.S. mobile phone subscribers in the U.S. have a smart phone, and of those, just 17 percent have a QR code reader app. Everyone with any kind of phone at this point has the ability to use SMS.”

Orbit gum recently produced 1 million packages of its chewing gum with SnapTags. When people snap the tag, or text their information, they can be entered to win great Orbit prizes. Of course, to get the full benefit of the SnapTag, you still need to download the app, just as with QR codes.

SpyderLynk founder, Nicole Skogg, was looking at a pair of shoes in a magazine, and would have bought them on the spot if she had access to the Internet. She did have her phone on her though, which is where the idea of the Snap Tag first took off. Skoggs, whose background is in lighting and optics used this knowledge to develop the ring method for storing information. On the back-end, the SpyderLynk platform matches the ring with a specific marketing initiative, and serves up the right campaign on demand.

Still, not a huge difference from the soon to be antiquated QR but enough of one to help the SnapTag reign supreme until something new comes along to fill the gap between smart phone and non-smart phone. Rest assured… something will, but the accessibility of the QR Code to anyone may never be found in any emerging replacement.

class="spacer_" />

Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter @speider

Have you incorporated QR codes into your marketing yet? What were your results? Do you think SnapTags are the “next big thing” and how do you feel about having to pay for the technology to have such tools for your own usage?

Source

[ Go to Source ]

7 Photoshop tips for designing clean and modern websites

Clean, elegant, and beautiful web design is often a matter of personal perspective. I look at hundreds of websites every week, and several of them stand out to me, but not all of them are necessarily effective.

Too often designers boil a concept down too far, producing a final design that is nothing more than text and a grid. While these minimal designs have their aesthetic appeal, particularly when paired with excellent typography, they risk falling short of notice.

Personal opinions aside, there are certain features of a design that allow it to be proudly labeled as clean or modern and enhance its usability and likability on a universal level. Simplicity is not a design trend, but rather an attribute of good design.

Photoshop grants us a versatile set of tools for creating depth and interest, and invites us to integrate subtle detail where we would leave a blank space. You need only a handful of these tools to infuse the qualities of modern design into a layout. By mastering them, you can create clean designs that express functionality clearly and effectively.

1. Space

White space allows for the visual separation of design elements without the use of boxes, lines, or additional graphics and is possibly the most important aspect of modern design. It is essential to content presentation and readability. When used correctly, white space gives your layout its clean and elegant feel.

Guides and Grids are available in Photoshop to help you position elements precisely. The grid overlays your entire document whereas the guides can be set manually. Use guidelines early to set invisible borders, margins, and padding used to define your white space.

Create a guide by hitting Ctrl+R (Win) or Cmd+R (Mac) to enable the ruler and then click the top or left ruler to drag a guideline to your desired position. Here are some additional shortcuts to help you manage guides while you work:

• To move a guideline: Ctrl(Win) or Cmd(Mac) and click the guide
• Show/Hide guides: Hit Ctrl+; (Win) or Cmd+; (Mac)
• Show/Hide the grid: Hit Ctrl+’ (Win) or Cmd+’ (Mac)

Enable your Smart Guides under View > Show > Smart Guides. Smart Guides appear automatically when you draw a shape, align text, or create a selection or slide and will save you the work of setting up guidelines for these elements in advance.

Aligning objects using guides and grids makes your design easier to digest and will give the overall result a more polished look.

class="spacer_" />

2. Depth

Depth created with light and shadow makes your elements appear crisp and real. Shadow effects can be applied to any object, selection, or text layer, but the trick is to choose a color that matches the background and forgo the default black.

Not all shadows must be dark. Combine the Inner Shadow effect with a white or light-colored Drop Shadow to create a sunken or “letterpress” feel with text or form fields.

class="spacer_" />

3. Detail

Both the gradient tool and the gradient layer effects play a large role in clean and modern design. Gradients are present in every aspect of modern styling, from shadows and highlights to backgrounds and buttons.

To access the gradient tool, hit Shift+G. To create a gradient, click the canvas, drag, and release. This tool is best used for large areas such as backgrounds, lights, or radial shadows. When working with individual elements such as sections, buttons, or icons, the Gradient Overlay layer effect is a more efficient means of establishing surface styles or textures. This tool is accessed by double-clicking the element layer and selecting the “Gradient Overlay” checkbox.

Use this effect to give subtle dimension to your buttons and navigation bars, or to mimic the style and texture of paper or metals.

class="spacer_" />

4. Definition

By over-defining edges and borders, you ensure your elements have proper contrast.

The Stroke layer effect will outline elements such as text or buttons where you need an equally weighted outline on all sides. Using this effect will free up the Inner and Drop shadows to extend your options.

It is tempting to head for the pen tool to draw straight lines and horizontal rules, but if you want to apply gradients or shadows to the line, it is easier to use the Single Row Marquee Tool, which is tucked discreetly behind the Rectangular Marquee Tool. Use the Single Row tool on a new layer and a white or light-colored drop shadow to create highlight lines along section borders or separators where you are not able to apply an effect to the element itself.

class="spacer_" />

5. Interest

Clean and modern does not need to equal boring, white, or minimal. Clever use of texture and pattern will make your design stand out, while communicating style and brand. Use subtle techniques such as adding noise (Filter > Add Noise) or the Texture Overlay layer effect on background areas or interface elements to help set them apart. The more real and clear an element appears, the more enticing it is to the viewer.

class="spacer_" />

class="spacer_" />

6. Perspective

Perspective is the most underused technique in modern web design simply because ongoing trends focus consistently on symmetry and grids. By applying perspective to images and elements in your design, you can introduce depth, dimension, modernism, and interest to your design in one easy step.

Perspective can be given to any shape or image by choosing the “Free Transform Path” option in the right-click menu and clicking the “Warp” button located in the tool options bar.

The illusion of perspective can also be produced by creating asymmetrical shapes or frames and using gradients and shadows appropriately to place the objects apart.

class="spacer_" />

7. Readability

Strong type is well loved in the design community, and an even stronger component of clean design. It can replace imagery and graphics that may otherwise overcomplicate a design and convey the total essence of the above techniques in a simple and straightforward way.

To add textures to text, convert your text layer to a Smart Object first by right clicking the layer and choosing “Convert to Smart Object.” You are limited to layer effects by default unless your text is rasterized, a practice you want to avoid, even when designing for the screen. Converting to Smart Objects allows you to apply filters and other techniques to the text while preserving your editing capabilities in the event you need to change what the text says later.

Remember that you have tracking and kerning options available to you when setting up text elements. Even if your text is destined to be reproduced in CSS, you should experiment with line and letter spacing early on to better visualize how your content will appear within the space you have given it. Also, remember to use “Crisp” or “Sharp” text to retain definition and clarity.

How you present your content in clean design is more important than any other style simply because there is less going on visually to distract the viewer. By using the tips above to space text and objects appropriately, add definition and interest, and set the content apart from the interface, your design will achieve optimal effectiveness.

class="spacer_" />

[ Go to Source ]

What’s new for web designers – Oct 2011

Radi

Radi is a Mac app for creating visual web content with HTML5, without coding. You can create everything from images to animations and vector graphics. You can use it to create interactive content, too.

class="spacer_" />

Coderdeck

Coderdeck is a tool for creating interactive live-coding presentations for the web. Basically, Coderdeck combines Deck.js with the CodeMirror2 highlighting code editor so that you can teach HTML, CSS, and JavaScript live on the web, directly in your browser.

class="spacer_" />

Jwerty

Jwerty is a JavaScript library that lets you bind, fire, and assert key combination strings against elements and events. It’s only 1.5kb minified and gzipped, and has no dependencies but is compatible with jQuery, Zepto and Ender.

class="spacer_" />

Share Count JS

Share Count JS is a simple JavaScript share counter that combines the total number of shares your content has had across a number of different sites, including Digg, Twitter, Facebook, and Delicious.

class="spacer_" />

Google+ UI Buttons

Google+ has a really nice UI, and now Shrapp.nl has created a framework of Google+ styled buttons, icons, and dropdown menus. It’s free and simple to install on your own site.

class="spacer_" />

Fulcrum

Fulcrum is a new project management tool. You can get a real-time overview of your project plan, and it adjusts your plan based on your team’s past performance. It’s goal is to be as agile and instantaneous as a traditional whiteboard for project management.

class="spacer_" />

WooCommerce

WooCommerce is a new, free WordPress e-commerce plugin created by WooThemes. It’s customizable and very flexible, with smart dashboard widgets, powerful reporting, and great tools for managing your customers, stock, and orders. It even allows your customers to set up and manage their accounts on the front end of the site.

class="spacer_" />

Fluid Baseline Grid

Fluid Baseline Grid is an HTLM5 and CSS3 dev kit for starting off with a solid foundation. It includes a mobile-first responsive grid that is device agnostic and resolution independent.

class="spacer_" />

Print.css

Print.css is an open source print stylesheet that aims to conserve paper by only printing the necessary parts of a page, and formatting it so that it doesn’t unnecessarily use paper, thereby making it more environmentally friendly.

class="spacer_" />

Emailology

Emailology is an online design guide for creating awesome HTML emails. It includes an email boilerplate, standards guide, client tips and tricks, and a character converter.

class="spacer_" />

Urtak

Urtak is a new tool for collecting opinions. Urtak is more accurate because participants can’t cherry-pick questions, and their algorithm makes sure that better questions get asked more often. Community asked questions keep the experience fresh, while instant results keep things interesting.

class="spacer_" />

CSSload.net

CSSload.net is a generator for creating CSS spinners and load bars. Just select the style of animation you want, set your parameters, and get your code.

class="spacer_" />

phiRatio

phiRatio is an iOS app that lets you calculate different kinds of proportions: 1:1.618, 4:3, 16:9, and 3:2. You just input one side of your rectangle and you can then calculate the width or length from that number. It will even round the calculation if necessary.

class="spacer_" />

Cheat Sheet for Designing Web Forms

The free cheat sheet is provided by Smashing Magazine, and created by Joe Leech. It includes a ton of information on how to create highly usable forms that get users through the process and quickly and painlessly as possible.

class="spacer_" />

Gauges

Gauges is a real-time analytics program that lets you see your traffic live, and focuses on the most actionable metrics (how much traffic you’re getting, where it’s coming from, and where’s it going).

class="spacer_" />

Docpool

Docpool is a repository of useful web design documents, available for free. Included are things like an invoice template, a basic client contract, and a web client worksheet.

class="spacer_" />

What does a website cost?

Very few people outside the web design and development industries understand what goes into a website, and even some in the industry don’t have a complete grasp of it. This page gives you a number of questions to ask yourself or your client so you can get an idea of the full scope of the project before supplying a proposal and estimate.

class="spacer_" />

Skipper

Skipper is a new app for team relationship management, currently in private beta. It’s designed to help distributed shops manage and grow their business, and makes it easier to recruit and scale your team.

class="spacer_" />

Trello

Trello is a new, free project management app that organizes your projects into boards, with lists and cards (tasks) within those boards. Cards can be dragged from one list to another, to chart progress. There are tons of tools for sharing, as well as fine-tuned permissions controls.

class="spacer_" />

Tinkerbin

Tinkerbin lets you code HTML, CSS, and JavaScript without creating files or uploading to servers. It has auto-updating preview, and lets you view just one type of code at a time, or all three.

class="spacer_" />

Mou

Mou is a Markdown editor for developers, rather than general writers. It includes syntax highlighting, live preview, full screen mode, auto-save, incremental search, custom themes, HTML export, and more.

class="spacer_" />

Front-end Patterns

Front-end Patterns is a web stack pattern reference for use with LESS. It includes patterns for forms, tables, layout, and boxes, among other things.

class="spacer_" />

jQuery Timelinr

jQuery Timelinr is a simple plugin for creating more beautiful and functional timelines. It supports both vertical and horizontal layouts, and you can specify parameters for most attributes, including speed and transparency.

class="spacer_" />

Tinyproj

Tinyproj is a service that connects developers, designers, and other creatives with paid, short-term projects. It was created by Forrst, and was created to help fight spec work. Project listings receive an average of 75 links, and most projects have a budget of around $2100 USD.

class="spacer_" />

iOS Boilerplate

iOS Boilerplate is inspired by the HTML5 Boilerplate, and provides a base of code to start working with, without being a framework. Solid, third-party libraries can be included if needed. Currently, it’s tested to work with iPhones and iPads running iOS 4.0 and later, and in the future it might support universal applications (iPhone and iPad).

class="spacer_" />

Kendo UI

Kendo UI is a framework for creating modern web apps with HTML5, CSS3, and jQuery. There’s thorough documentation on the website, as well as plenty of impressive demos.

class="spacer_" />

Lanbito

Lanbito is an online form builder for creating forms that look and feel native on iPhone, iPad, PC, and Mac. You can create as many forms as you need, and save your data to Google Spreadsheets.

class="spacer_" />

Novocento Wide (free – $45.50)

Novocento Wide is an uppercase-only sans serif font inspired by European typography from the late 19th and early 20th centuries. It’s designed primarily for use in headlines, and comes in 32 styles.

class="spacer_" />

Corda (free – $297.70)

Corda is a stylized serif typeface, with an easygoing, flowing ductus. Even in heavier styles, it still appears light and free-flowing. It can be used for body type or headlines.

class="spacer_" />

Lady Fair ($79)

Lady Fair is a display typeface based on the hand-lettered posters and promotional material for 1965′s My Fair Lady. It has a feminine, 1960s vintage feel to it.

class="spacer_" />

Skunkling ($15-$19)

The Skunkling family includes both Skunkling Inline and Skunkling Fill. It was inspired by a real-life incident with a spraying skunk, and was created for the Design Your Own Alphabet Contest put on by Veer and Design*Sponge.

class="spacer_" />

Space Font (free)

Space Font is a display sans serif font with a futuristic look. It was created by Bernardo Osegueda.

class="spacer_" />

Little Sparrow (free)

Little Sparrow is a stylized handwriting font with some fantastic details and plenty of variation in the stroke width, which gives it a more organic feel.

class="spacer_" />

Nika ($45)

Nika is a quirky display font, with a thin body and chunky serifs. It was designed as part of an experiment in contrast, and feels at home in various applications.

class="spacer_" />

Sanchez ($126)

Sanchez is a blocky slab serif font that bears a striking resemblance to Rockwell, but with rounded edges that give it a more casual and friendly feeling. It comes in 6 different weights.

class="spacer_" />

Dublingers ($5-$40)

Dubliners is a very stylized script font designed by Matt Frost. It’s well-suited to retro designs, and has plenty of character.

class="spacer_" />

Cassia ($189)

Cassia is a slab serif font with a classical appearance and contrasting italics. It’s much more agile than most slab serif fonts, and works well in large or small sizes.

class="spacer_" />

Ember ($59)

Ember is a stylized, informal script font with ligatures that give it a freehand look. It’s elegant but friendly, and very stylish.

class="spacer_" />

Plebeya ($14.98-$53.92)

Plebeya is a formal script with both regular and swash styles (there are four versions in all).

class="spacer_" />

Rapazola ($125)

Rapazola is a geometric display typeface, inspired by the play of childhood. There are five different weights available.

class="spacer_" />

Granby Elephant ($60)

Granby Elephant is a very bold sans serif display typeface, based on the Granby family of typefaces first designed in 1930.

[ Go to Source ]