Posts Tagged ‘creative’

10 iPad Apps for Designers

Friday, September 24th, 2010

The iPad may be the greatest device for consuming content ever but how useful is it for those who create content as well? Specifically for designers like myself. Let’s not kid anyone. This is not going to replace your desktop or laptop machine (yet) but there are definitely a good amount of apps out there that you’ll find either useful, interesting or inspiring.

I’ve only had my own iPad for a couple of weeks now but here are 10 apps that, as a designer, I’ve really been enjoying.

1. iMockups
$9.99
iMockups is an app geared towards throwing together quick, low-fidelity wireframes for websites and mobile apps. It gives you a great, simple tool palette to let you easily add items like photos, greek text, buttons, breadcrumbs, navigation, etc. Plus if you are collaborating with other people there are some great markup options like post-it notes, arrows and big red Xs. There is also a whole section of items just for designing iPhone and iPad apps.

Even for print designers I could see this app being used to throw together some quick and dirty page layouts while you’re riding the train or sitting on the couch. You can export your projects or individual pages to various formats and email it to yourself or save it to your iPhoto library.

2. Sketchbook Pro
$7.99
Sketchbook ProThere are a lot of drawing and painting apps out there in the App Store. Everyone is probably already familiar with Brushes from their iPhone app, which gained popularity when people started doing some pretty astounding illustrations with it like this cover for The New Yorker last year. Sketchbook Pro is pretty comparable to Brushes and they each have their own advantages and disadvantages but what I like about Sketchbook Pro is that it is focuses a little more on sketching rather than painting. The interface is actually a bit complicated and takes some getting used to but with a variety of pencil and brush tools and a little patience you can create some pretty nice little drawings. Great for sketching on the go if your sketchbook isn’t handy. Plus you can import images from your photo library to draw on top of and export your finished drawing into a variety of formats including a layered PSD file.

The iPad is not pressure-sensitive like a Wacom Cintiq but you can pick up a stylus like this one that might at least make the drawing process feel more natural and less like finger painting.

Of course you can also just go with the free Adobe Ideas app that will let you draw out up some quick ideas with little fuss.

3. Getty Images
FREE
GettyPhoto searches can be one of the most time consuming parts of a design project. Why not do it while sitting on the couch?

Getty‘s new iPad app let’s you search their image library, access your Getty account and add photos to lightboxes. It’s a nice looking app with an interface that is derived from the main site but updated for the touch screen enviornment. You’ll find that it’s a pretty comfortable way to spend a few hours trying to find the perfect stock photo.

4. Fontbook
$4.99
Another part of the design process that sometimes you just want to do while lying down is browse through fonts. With Fontbook you can load your whole font library via iTunes or Dropbox (though to be clear you’re not actually installing them on the iPad to use with other applications) and preview them in a nice display that really shows off the character of each typeface.

5. Moodboard
FREE or $6.99 for the Pro version
Moodboard allows you to create an arrangement of photos, text and colors that you can use while in the ideation stage of a new project. Import photos from your iPhoto library or grab something from Google Image Search. Crop, rotate, set them in little picture frames and arrange them in layers on one of the backgrounds provided. You can also create a 5-swatch color palette to display alongside the photos. It’s surprisingly enjoyable because the app makes good use of the iPad’s two-finger controls by letting you easily scale and rotate the items.

Upgrading to the paid version basically allows you to do more of everything: more moodboards, more colors, more backgrounds, etc.

As a fan of the online image bookmarking services like Image Spark, this will fill the hole that is needed for pooling together inspirational found images for now.

6. Flipboard
FREE
If you’ve got an iPad and are even a little into social media you probably already know about Flipboard, one of the most striking apps on the market. It aggregates feeds from Twitter, Facebook and other sources and displays them in a beautiful magazine-style format. I find that the aestheticly pleasing presentation makes for the perfect one-stop shop for perusing my usual sources for visual inspiration. Of the many pre-made channel options that you can add to your board are feeds from yay! everyday, Cool Hunting, Behance, Print Magazine and Drawn! Since you can add a section for any of your Twitter lists I’ve created one for all the Design resources I follow like Webdesigner Depot, Design Newz, Design.org and others.

7. Dropbox
FREE
You probably already know about Dropbox so if you’ve already got a free account go ahead and connect to it with your iPad. Very simply this app lets you access a variety of file types on your iPad from your other computers via a shared Dropbox folder.

8. Palettes
FREE or $5.99 for the Pro version
Palettes let’s you create and modify color palettes and (with the paid version) email them to yourself for use in various creative applications. I found the interface to be a little complicated and unintuitive at first but there’s a lot you can do with it once you figure it out. One of the neatest features is that you can import a photo from your iPhoto library and it will create a color palette based on that photo.

9. iFontmaker
$6.99

As far as fonts go, Fontbook may be more useful on an ongoing basis but this one makes good use of the iPad’s touchscreen and for some people may be a good selling point alone in getting an iPad. iFontmaker is a font editor that let’s you create your own hand-made font and export it as a TTF file. A lot of people, like me, have been meaning to try making a font out of their own handwriting for a while and this is an easy and fun way to do it.

10. Guardian Eyewitness
FREE
To tell you the truth, this one is probably my favorite of all of these apps. Every day, Guardian.co.uk uploads a new photograph that has appeared on their news site and gives you a little description about the subject as well as really interesting “Pro Tips” that display specific info about how the photograph was taken. Each and every one is breathtaking when viewed on the iPad’s screen, making this a great app to go to for some daily inspiration.

What other apps have you tried? What are your favorites? Even better: What apps do you want to see someday? Feel free to comment below.

10 Tips for HTML Email Programming Success

Thursday, December 3rd, 2009

HTML coding for emails is tricky; inboxes are crowded, and attention spans are short.  So, it’s important to get your email–and email coding–just right.

  1. Appropriate Design. The design of your email must be idiomatic for the medium. HTML/CSS support among email clients is rife with pitfalls. Know what is and is not possible.
  2. Target Email Client Support. In designing the email, you walk the line of email design versus client support versus spam score. Too advanced design will have a smaller email client support. Heavy images will increase spam score. Wider email client support requires simpler design. More text, less images will improve deliverability.
  3. Plan First. Mock up your entire HTML email, from the header at the top to the legal copy at the bottom. You can use a previous email that you created or one you received recently from another company as a model.
  4. Maximum Width and Height. The email header shouldn’t be too tall – remember that some users may see only the header in the preview pane of their email clients. 200 pixels high should be the maximum height. Emails should never be more than 600 pixels wide.
  5. Love Your Text. Use graphics sparingly. Whenever possible (other than, say, logos), put text in HTML. Remember, many emails are delivered without images, so readers will see only the text. Text formatting is one of the most important factors in programming a successful HTML email.
  6. Be Friendly, Be Social. Always include social media links, view online links, as well as a “forward to a friend” links in your emails.
  7. Lowest Common Denominator Programming. Email clients are the dummies of HTML rendering. Many desktop clients use inferior HTML rendering engines. Web-based clients restrict what HTML and CSS you can use in order to keep your email’s HTML from interfering with their GUI. No floats, no margins- nothing more complex than tables.
  8. Don’t Use Background Images. Background colors are fine, but background images are problematic in some email clients, especially Outlook.
  9. Specify Height and Width. Always add the height and width to images to ensure that the blank placeholder image doesn’t throw your design out of proportion. It’ll also help retain proper formatting during loading so your email doesn’t “jump” when the images load in place. Always specify the height and width of <div>s, <table>s <td>s, etc.
  10. ALT Attributes. Put ALT attributes in all <img>s. Users will see no images until they click the load images button in their email client. The ALT text will be visible, however.
  11. Specify Font Settings in CSS. Do not use <font> tags anymore. They are not supported in all email clients. Place them in the <style> attribute of the parent HTML entity. For segments of text, use <span>.
  12. Specify CSS in Style Attributes.CSS must be programmed in-line (stated within tags using style=”your styles”) Web-based email clients ignore most of what’s in the HEAD of your HTML. <style> declarations should be avoided as web-based email clients ignore those definitions to keep the client’s GUI CSS declarations intact.
  13. Test, Test, Test How do you get to Carnegie Hall? Practice. Test your emails. Set up test accounts with every online email program (such as Gmail, Hotmail, and Yahoo! Mail). Set up local email programs (such as Outlook and AppleMail) on your in-house computers. Send them to multiple email programs, use Litmus or similar programs, ask friends, and proofread. Then do it all again, then send your email. Also test after any change, no matter how small. Your change may have hit an email client’s quirk.

Paying attention to these simple programming rules may mean the difference between an undeliverable email and a successful campaign!

Email Newsletter Best Practices

Wednesday, November 11th, 2009

woman_field_smThe email newsletter has changed a lot in the past few years. While some newsletters are comprehensive broadsheets, for the most part the newsletter has become a conduit, an open system communication vehicle. It’s slimmed down and sped up. They’ve become more visually rich and less verbose—snazzier, more intriguing, smarter. The average user spends less than a minute with your email newsletter – scanning more than reading. Here are a few tips to maximize your newsletter minute.

Scan-ability
Email newsletters should be easy to scan. Most users  scan, search or graze. They don’t read every word. The average time allocated to a newsletter after opening it is only 51 seconds. (UseIt.com)
See: UseIt.com Eyetracking

Enticing
An email newsletter should be intriguing more than comprehensive (of course there are some exceptions). Be engaging, be open. Use imagery and language that interests the user and makes her want to click, read, act.

Visual
Email newsletters are visual as much—if not more than—text dominated. Tell your story in pictures with headlines and subheads that users find interesting, and they will click on a link to read more.

Above the Fold
Vital info and links go “above the fold” (or the “preview pane” area in most email clients).  It’s important to keep key elements of your email in this area.  These key elements should include your call-to-action, primary subject matter, logo, header, and possibly lead image and table of contents.  Having your call-to-action above the fold gives your email a higher chance of click-throughs.  If someone has to scroll and search for the key information or call-to-action they may end up closing your email before taking any action at all.

Structure
Think about one-column v. two-column, how to handle links, video, social media. For deep content, a sidebar table of contents and/or navigation at the top of the email might help users find the information they need.
See: One Column vs. Two Columns

Format

An email newsletter is not an email letter. For the most part email newsletters are also not comprehensive repositories. Of course, for invitations, fundraising and news announcements, you’re going to want to send an email letter. On the other hand, if you send a monthly digest to a paid subscriber base, chances are you do want to build a long, comprehensive newsletter.
See: The Art of the Email Letter

Share
Make it easy to forward and share with network. Sharing email with a network boosts email visibility by 40% or more.

Subject Line
Subject line: 60 characters max. Brevity. Soul of wit.
See: The Art of the Subject Line

5 Ways To Keep The Magic Alive In Your Email Design

Tuesday, September 8th, 2009

refresh_01_optin_croppedHow long has it been since you spent some quality time updating your email template design? Is the spark beginning to fade a little? Even if you’re not ready for a complete redesign there are ways you can spice it up so that your readers eyes don’t begin to wander or glaze over.

Here are 5 ways to keep the magic alive by updating the design of your email template.

(more…)

Email is a Pitch: Five Fundamentals for Winning Emails

Monday, May 18th, 2009

businesscard1

In his new book, How to Win a Pitch, veteran business coach Joey Asher provides five fundamentals for winning business. The five sales rules are also a good rubric for creating winning emails.

Focus on a Business Solution
Your email should be focused on a client need, on solving a problem or providing a solution. Just like a good sales pitch, an email should not simply tell your audience about your company or product. Instead, offer them a solution based on their needs or challenges.

Organize the Message
Like a sales pitch, an email should be clearly organized around memorable points. Remember, people don’t read every word and don’t pay full attention. Asher recommends simple organization: “Ask yourself what are the three things I want my listeners to remember at the end of the presentation?” A good question for email creators.

Demonstrate Passion
Your email should show your passion for your business, your customers, your solution. The look and feel and tone of every email you send is part of your brand, part of what makes customers feel comfortable enough to click the order button or pick up the phone.

Involve Your Audience
A good business pitch is interactive, a conversation. The right email can be personalized to the user, customized based on demographic or psychographic information, and like a good presentation, it’s a conversation— a virtual permission-based dialogue between you and your customers and prospects. Make sure you’re letting your audience talk back, and provide a mechanism for them to let their friends in on your conversation.

Rehearse and Revise
How do you get to Carnegie Hall? Practice. How do you send a winning email? Test, try out new creative ideas, kick the tires, revise, revise again. Asher reckons a well-rehearsed pitch separates your firm from two-thirds of the competition. The same is true with email. Well designed, well written, smart, audience-focused emails, coded and delivered correctly will distinguish you from the other guy.

> Buy the book

5 Tips for Designing Successful Emails

Thursday, May 14th, 2009

kiddrawingDesigning a successful email is not as easy as it looks. A common mistake is to think of an email as a mini-webpage or print brochure but that line of thinking will get you into trouble. Designing an email comes with its own set of rules and you need to approach it with some specific thoughts and methods.

The following is a list of 5 things to think about when designing your next email campaign. By no means is this all you have to think about but covering this ground will result in a marked improvement in the success of your campaign.

1. UNLEARN ALL YOUR TRICKS
If you’re a website designer then you’ve probably picked up a set of tricks using CSS (Cascading Style Sheets) that you’ve come to live by. Well, you’d better sit down for this: CSS doesn’t work in most email software. At least, not in the way you’re probably used to using it. Background images, positioning, padding, floats… You’re going to have to unlearn all of those tricks. To be sure that your email looks the way you intended it on all email browsers you’re going to have to go back to the old way of doing things. That means relearning tables and inline styles.

When designing your email, stick to a grid that can easily be cut up into a table. Be careful about how you make elements break out of that grid and be aware of the variable heights of HTML text and how it can affect adjacent elements. Use basic inline styles on your text (like: font size=”2″, remember that?).  And whatever you do, don’t use background images. They just don’t display properly in several email clients.

2. DON’T OVERDO IT
People don’t have a lot of time so you have to grab their attention. If one simple, bold photograph will do, don’t use three. If a concise headline and a paragraph of copy gets the point across, don’t make readers scroll to read multiple paragraphs. Plus, factor in things like image load time for people on slower connections (depending on your target audience these people do still exist).  It pays to keep your design simple. But keep in mind: simple does not mean boring.

3. THINK OUTSIDE THE BOX
If you follow the first two points too closely you might end up with a boxy looking email – a rigid grid structure; headers and footers a little too clearly delineated from the content; a boxy, uninteresting email. It doesn’t have to be like this if you get a feel for the space that the email is living in. Try not putting a border around everything and see how your content interacts with the white area around it. Try using rounded corners. Create graphics that contain some of the background in it so that the elements can give the appearance of breaking the grid without actually doing so. Set your header on white and your body copy contained below it in a colored box with the footer text floating freely on white underneath it. Or even set your entire email against a colored background. Any of these tricks can help give you a compliant, yet un-boxy, email.

4. BE REPETITIVE BUT DON’T BE REDUNDANT
As you’re probably aware, a lot of popular email browsers, like Outlook and Gmail, block all email images by default – leaving viewers with just the text, alt tags and their own free will to enable the images if they’d like. Therefore, you can’t count on the message to be conveyed solely through the images. Alt tags are very important in this case so don’t be afraid to pack them with pertinent info that may be missed by people that don’t load your images.

If your email contains a mixture of both text and images, it’s a good idea to utilize that text to repeat offers and call-to-actions that you already have inside graphical buttons. If a call-to-action is important, it’s worth repeating a couple of times in the email but in different contexts. Mention it with a nice underlined text link in the body copy. Throw it at the top of a sidebar. End the email with a shiny, red, clickable button.

5. WHERE IS THIS ALL GOING?
Though designing an email may be smaller in scale than designing a website it is still a project that has certain goals in mind that you need to consider.

As a designer, you’re orchestrating a dialogue with a reader. What is the ideal end result of that dialogue? Is your email meant to entice readers to click to a website? A landing page? A sign-up form? Or is the email itself the final destination containing a printable coupon or a newsletter with useful information that would be relevant to the reader?

These two results can require very different design approaches. It’s always important to keep in mind “Where is this all going?” Make sure that your design choices work towards answering this question.

…………………………………………………………………………………………………………………………

Photo used with a Creative Commons license courtesy of Yukon White Light

Designing Great Emails — 10 tips

Sunday, April 1st, 2007

Most companies send frequent email campaigns, but many don’t consider their design and layout in terms of how recipients actually receive their message. Most recipients view their email in software that has preview panes, and most people do not see the entire email upon first glance. Additionally, email software may turn off images and disable links by default, thereby creating a very non-compelling email from a visual perspective.

Some tips for designing a great email:

  1. Use Images to Enhance, not Deliver. Much of the latest email software does NOT show images in the default view. Recipients must actively elect to “View Images”. Therefore, you cannot rely on images to deliver your email message. Use descriptive text to get your message or offer across, and support this copy with relevant imagery. Never use images for important content like headlines, links and calls to action. And if you do use images, use ALT text to provide descriptive text for those who cannot see the graphics.
  2. Get to the point in the top 3 inches. Because of preview pane use, many recipients will only see the top 3 to 4 inches of your email. You need to get your offer or key message across in that top-most space or risk losing the interest of your readers.
  3. Use Friendly Fonts. There are only a handful of fonts that work on both Mac and PC computers. You must use these fonts when designing an email or risk having your text appear in a font you didn’t intend. It’s best to stick with Arial, Helvetica, Times, Times New Roman, and Courier. Other options that work cross-platform include Palatino, Garamond, Bookman, Avant Garde, Verdana, Georgia, Comic Sans, Trebuchet MS, Arial Black and Impact.
  4. Keep the width in check. Most email software includes a preview pane, so the area for displaying the email is less than the overall width of your screen. Subtracting the preview pane area leaves 600 pixels in which you can display your message. So keep your emails to 600 pixels (or under). Otherwise, your recipients will have to scroll horizontally to view your message, making for a frustrating experience.
  5. Keep Layout clean and simple. Clean, easy-to-read emails nearly always outperform heavily designed messages. In addition, complex tables and aligned images may not display properly in several email clients, so a simple, clean approach is usually the best option for email design.
  6. Get to the point ASAP. Readers want to get to the point of your message immediately, so provide key information right away and draw the focus of the attention to your main offer or message.
  7. Concise and Precise. By nature, an email message should be a brief, quick communication. Emails that go on and on run greater risk of immediately being deleted then those that get their point across immediately. If you need to provide a lot of information, link the readers back to your web site.
  8. It’s not the supermarket…. Loud colors draw attention in the supermarket, but you’re not in competition with other emails when a recipient is viewing your message. Keep your colors professional and appropriate, and limit the use of loud, aggressive color palettes.
  9. Keep file size in mind. The faster your email loads, the faster readers will see your message. Even in today’s broadband world, it may take a couple of seconds for large graphics to load in your message. Using graphics sparingly and compressing images properly will create a lean message that will be instantly viewable on high or low bandwidth connections.
  10. Test, test, test!. Yes, testing is probably the one thing that we all should do better. Test your emails in different email software and test them using different views (in horizontal and vertical preview panes, for example). Also test with images on and off. By testing thoroughly and adjusting for various issues, your email campaigns will deliver better results and return more value to your business.

Creating Successful Landing Pages

Wednesday, November 15th, 2006

Nearly every email marketing campaign contains a link to your website. In most cases, this link and the page that it links to on your site — known as the Landing Page — form a determining factor in the success of your campaign.

Whether that link is intended to sell a product or service, to provide a path for a specific user activity (such as filling out a form or registering for an event) or to offer valuable information, the Landing Page needs to be aligned with the goals of your campaign to help you achieve your desired success.

In many campaigns, marketers do not think beyond their email message. It is common practice to link to an existing page on your site rather than one specifically created to achieve your goals. Even if you have a logical destination, a landing page designed specifically for your campaign will help increase your conversion rates.

To achieve maximum value, plan and create your landing page strategically using these guidelines:

  1. Achieve your Goals
    Align your landing page content and message so that it works towards achieving your campaign goals.
  2. Continue the Theme
    Extend the creative design of your email campaign and the campaign copy onto the landing page. Make the user’s path seem like a seamless process.
  3. One Path Only
    If you have one goal, provide only one way to get there. Make sure that no extraneous links divert your audience.
  4. Keep it Simple
    Although this is always the best practice, it’s even more important when you want a specific result. Keep the email and the landing page as simple as possible to lead to audience toward your goal.
  5. Test and Track
    Test your campaign both internally and with a test audience. Track the flow of user activity and determine where people may be falling off (not clicking through, not continuing past the landing page, not converting, etc). Then revise your campaign or landing page accordingly until it achieves the level of success you require.

Landing pages are as important as your email message for maximizing the performance of your campaign. Your email and your landing page must work together to create a unified, focused experience if you wish to achieve the best results.