Redesigning Text-Heavy Fliers

Here’s a recent response (with a few edits to protect confidentiality) to a question by a PR person who wanted to know how I’d redesign some single page fliers for a client of theirs.

“I think {your client’s} projects are as much “information design” as they are graphic design. In other words the project isn’t just “how do I make this look better” but also involves thinking about how to categorize and “chunk” the information so it has more of an impact, and then design a layout that does a good job of both branding the client and getting the information read.

I’d be looking at the text not just as a graphical element, but also offering suggestions as to what parts of the text could be pulled out of the text body and be placed as bullet points at the top of the page for a quick scan (to increase the chance that {specific target} will see a point that matters to them and read the whole page), what generic information needs to be repeated on all printed items (similar to the “about us” footer on many press releases) so the documents could have all that in a unified header or footer area, and what fonts/colors/sizes need to be used to make the information read more quickly (since I feel that’ll be more beneficial to your client than just having the information look nicer).

Since the website uses photographs to make the message friendly and welcoming, I’d also be looking at how to integrate a key image or two with the same friendly feeling (maybe as sketches based on photos) into the layout, perhaps as part of the header/footer area so they aren’t taking up real estate needed for the main text — that way there’s more consistency between the website and the printed talking points than just using the same logo, which hopefully will make the information and the overall mission of {end client} more memorable. And finally, I’d also be looking at how those design choices could possibly be re-purposed in email footers and Word templates to make all the {end client} communication consistent.”

one page flier

Sample of one page flier created for a client

Throw-Back Thursday Website Design from 2000

This “Throw-Back Thursday” post is about LMT Investment Company’s website. This design went live in mid-2000 and they kept the same design through the end of 2003.

screenshot of website

LMT Website Design

The claymation-style graphics were stock images that were sourced for their friendly look — as a family-run commercial real estate group LMT wanted a look-and-feel that stood out from the standard “corporate blue and grey with photos of buildings with lots of windows” design that dominated their local competition’s websites. Done in standard HTML with the Featured Properties information coming from a text file they uploaded once a week (exported from their in-house database). The home page news box was an “include” of a text file that they also uploaded whenever they had something new to say. We enjoyed the project and liked the final look of the site.

Never Stop Learning

Technology is constantly changing, and our skills need to keep up. But that’s not what this is about — it’s about learning all the other stuff, not just the technical bits.

Bruce has been busy re-learning golf. His work with Tailored Solutions has helped him learn a lot about everything from building apps to incorporating a signature pad into a technical solution, but it’s the golf that has him smiling these days. He was a dedicated golfer in his younger days, and when the folks at Tailored hired him on they also dragged him out golfing again. Twenty years after the last time he worked toward a handicap he’s hard at work again. The downside is the garage is cluttered with golf equipment again, but the upside is that fresh air, exercise, and stress relief all at the same time makes for great weekends. And as an added bonus Tamra’s camera has been getting a huge workout on the golf course, which is a fun challenge from doing studio photography for clients.

Golf photo

Bruce at Seaside Golf Course

But it’s not just photography that Tamra is working on. She’s taking a multitude of classes this month to expand her creative side. The Make It In Design summer school program in surface pattern design, a Lynda.com class called “Draw 21 Days” that challenges with a new illustration exercise every weekday for 3 weeks, and Creative Live classes in both surface design and photo compositing. She’s also working on digital paintings of some of the golf photos, and has even pulled out the paints this summer.

watercolor of Tardis

watercolor painting

We love to learn and grow, and we’re very happy that 2014 has given us so many opportunities to expand our skills.

Dynamic Text Scroller for Client

Last week we spent some time updating a long-term clients’ website with new links to press releases, new client quotes on the testimonials page, and new items added to their long list of clients and associated products. We do maintenance updates like this every few months for this client, a busy software company that doesn’t want the overhead of a web person in-house. But the big addition to their website for this round of changes is a small box that shows 29 different quotes from satisfied customers of theirs on a scrolling basis. Client quotes are a big part of their marketing, and the company wanted a way to see more than just a couple of the quotes on the home page without changing the entire site design.

Since their website was built by hand using older html (we’ve been maintaining it for nearly 10 years) we couldn’t just search for a WordPress plugin. Luckily Dynamic Drive had something in their code library that we could use.

The “Pausing up-down Scroller” was last updated in 2006, which made it a good match for the website tech (since we didn’t want to break anything). The code chunk included options that allowed us to make the background color match and set the fonts (using CSS). But the client wanted their scroller to work a little differently from the default so we had to dive into the code and modify it a bit. Thanks to Bruce’s smokin’ hot programming skills, this scroller now starts at a random spot in the list of 29 quotes every time the page is loaded, so even though it scrolls through the quotes in order each site visitor may start the scroll anywhere from quote 1 to quote 29. The site has been tested on modern browsers as well as on older browsers (yes, we still have a machine for testing on things that aren’t the latest and greatest) and the scroller looks good and loads quickly in all of the browsers we tested it in.

the quote box in action

Javascript-based customized scrolling quote box

 

Need a scroller for your website, or want some other piece of interesting technology added to your site? Give us a call at 503-580-2895.

Non-English HTML Formatting

Working away in BBEdit today, formatting the Spanish-language version of a couple of press releases for a client’s website. WYSIWYG tools are fine-and-dandy for speedy layout, but you still need to know enough actual HTML code to go in and fix things. At the very least when working with pages translated into multiple languages you need to know enough to be able to check and make sure whatever “word to html” script you used coded all the accent marks correctly so your page doesn’t show up in certain browsers with mysterious little question mark icons in place of text. Those little diamond-shaped question mark symbols also show up when m-dash and n-dash symbols aren’t coded right or are left as the native Word .docx symbol.

Don’t forget to check in multiple browsers — some browsers can read those .docx symbols, while others can’t and use the diamond question mark.

Throwback Thursday — 1996

It’s hard to believe we’ve been in business since 1995, but we can actually prove it, thanks to the internet itself! Our original business name of Hart Consulting (picked in the 15 minutes I had available to register a name with the city of Mountain View California, so no time for creative naming) may be long gone, but the Wayback Machine still exists.

The Internet Archive Wayback Machine has archived “snapshots” of websites from as far back as 1995. It’s funny to see how primitive layout and design was back then. And here we thought we were pretty darned trendy to be using tables in such a sophisticated manner. Here are some screenshots of our October 1996 website as captured by the Wayback Machine.

screenshot of 1995 portfolio

We thought our design portfolio was pretty trendy for it’s day.

screenshot #2 of design portfolio

At least we added a few logos to the text further down the page.

screenshot # 3 of portfolio

Look! More text! We weren’t really getting the handle on the whole “show not tell” thing yet.

screenshot

At least we were consistent — still more text describing our projects

Flyers from Templates

A long-standing client had a short-n-sweet project they needed completed. In addition to the very short deadline, they had a very small budget, and half of the amount was needed for color printing at a quick printer. So we quickly found and downloaded a template that would work, flowed in their text, grabbed photos from the ones we’d taken for their website, and sent the file off to be printed. Sometimes our job isn’t about creating something from scratch — instead, it’s about helping a client with a specific need get their project done as efficiently as possible.

Were there drawbacks with this method? Oh yes — for one thing, the template is a photoshop file instead of being done in InDesign, so there are no paragraph or character styles to easily change if the client doesn’t like the font, just some individually selected words and blocks of text with the font information set individually. And since it’s not our “design” there’s a chance that potential clients who don’t know us and who see it in our portfolio will confuse us with the original designer, or that potential clients might see us as just “production” people rather than able to design on our own. But in the end the time savings to us and cost savings to our client (since we didn’t have to bill them for layout out a new 8.5×11 file from scratch) won out. The project was done on time and on budget. Which makes it a winning project in our book.

The New Google

Forbes has a short but useful article for small business owners on the most recent changes to Google, and what it means to a website owner. To me the most important point is #4: Content is key. Whether Google ends up using the authorship tag to move your website higher in the search results or not, having good content that people want to read (or look at in the case of visually-oriented websites) has always been the key to getting fans and getting found.

Back in the early days of the web some of the most popular websites had webcams showing the contents of a fridge — it’s not that we were so easily amused, it’s that it was new and different in that time, so it got a lot of views. New still works…but useful always draws better. Whether you’re posting a how-to piece on your blog, an easy-to-follow video tutorial, or sharing your grandmother’s recipe, those useful pages and posts are what customers, friends, and co-workers hunt for and read.

Content creation is the new hot button service in web design studios, but unfortunately a huge portion of the “content” a smaller business gets is regurgitated slop — much of it can’t pass Copyscape as being original, and a lot of it is badly written and lacks any real meat. Part of the reason for that is the price range — when you’re paying someone $.01 a word to create something you hope will bring you business you’re lucky they take the time to turn on spell check. You’re definitely not going to get a well researched, well-edited piece that’s unique and creative. Expecting someone with technical writing experience, a degree in advertising, or a long magazine writing career to spend 10 hours researching your market in order to write a piece you’re only paying $20 for just isn’t realistic, nor is expecting them to provide unique illustrations and photos to accompany the piece. If you’re lucky you’ll get re-written Wikipedia paragraphs, and if you’re unlucky a Google search of one of the sentences from the content will show your direct competitor in first place results with a near-identical article.

Even if you don’t have the budget of a large company, think about setting aside $100-$500 per quarter for a single quality piece of content to add to your website — more if you’re in a highly competitive market or want original imagery to go along with the piece, or want more frequent pieces. If that content raises your position in the search engine, helps bring in new customers, and positions your company as an expert then it’s as important to your brand as the rest of your marketing pieces. Think of it like commissioning a magazine article for your blog, and find a writer (and possibly an illustrator or photographer) who can create something worthy of a spread in a well-respected magazine. That’s the level of quality content that people want to read, and that Google wants to position high in the results. 

Flier and Email for Bakery

We just finished up a flier design that was repurposed as an html email. The client, a commercial bakery in California, needed fast turn around and asked us to create something with a similar look to a flier they created in-house. We took their InDesign file and set up a custom grid, then added paragraph styles and character styles. We used images from a recent photoshoot we did for their website, and we repurposed their website copy to create a first draft of the flier. The client provided some text changes, and we then uploaded the final PDF to FedExOffice last night for pickup this morning, and all 300 copies will go out with orders over the next couple of days. We then took the final design and created a 600 pixel wide jpg for use at Constant Contact, and the matching email will be in their clients’ in-boxes tonight.

Custom flyer design

Flier created in InDesign for print and also used in an HTML email.

Website Color Palettes for Designers and DIYers

Have you discovered Design Seeds yet? It’s a wonderful resource for great color palettes. You can search by theme (autumn, for example) or by a specific hue (to match your logo color). Every Seed is based on a photograph, and you can get RGB and hex (website) color values for all the colors in the Seed. Check it out next time you’re trying to find just the right color.

http://design-seeds.com/