Mobile Design Presentation at BlogHer Pro

I was honored to speak on DIY Mobile Design Strategies with Myriam Joire at BlogHer Pro ’13 in Silicon Valley.

The presentation was geared towards people who want to use their blog for business but aren’t at the stage where they’re ready to hire a designer yet. The fact is that hiring a designer is smart when you’re ready to take your business to the next level, but, when you’re just starting out, there’s a lot you can do on your own to improve your design and content to translate better across platforms.

A few of the tips we shared that DIYers can put into practice:

  • Don’t be afraid of simple. Simple is good.
  • Remember people will be viewing your site with many different browsers, devices, and settings (and possibly in different languages), so it will probably not look the same to your visitors as it does to you.
  • Test your site on a variety of platforms. Use Google Analytics to see how people are viewing your site.
  • Make your content accessible to as many people as possible.
  • Choose easy-to-read fonts for the body of your text (blog posts, etc.) and left justify it.
  • Look for themes with “responsive design” in description.
  • Test mobile plugins out and have others try navigating your site to make sure no important functions are cut out.
You can view our slides (which were pretty minimal but include a resource list) and hear the complete audio of our presentation on SlideShare.

 

Update: You can also listen to the audio offline via “DIY Mobile Strategy” on divShare.

Web icons that make sense

“You know my brand, I’m happy with your past work, it makes sense!”

Susan Baier was thinking aloud during our meeting about why she chose us to create icons for the Audience Audit website redesign.

After we met, I got to work, thinking about the brand and the headings these icons would illustrate, brainstorming, sketching, and collaborating on a color palette with the developer, Greg Taylor of Marketing Press. I also began exploring concepts related to geometric shapes and patterns, which would work on several levels, complementing the circles central to Audience Audit’s logo and becoming a type of symbol for each heading.

Rather than sticking strictly to abstract geometric patterns; however, I moved toward icons that looked like charts and graphs, since analyzing data is a big part of what Audience Audit does. The “BETTER CLIENT WORK = MORE AGENCY REVENUE” icon, for example, is a rectangle that looks like a line graph with revenue increasing.

When the timeline for the site launch got moved up, I hustled to put the finishing touches on the icons and made sure they were ready to go before the site went live.

The icons complement the site, giving it an even more custom, eye-catching look and feel.

And, yes, Susan is still happy with our work.

 

 

Dayley Agile, part 2: Business cards, postcards and website

In Part 1, I shared the process of creating the logo for Dayley Agile, an Agile coaching startup with a focus on organic, human interaction rather than mechanical processes.

After the logo design, we carried the branding over in the design of postcards, website and Alan Dayley’s business cards.

Dayleyagile-business-card-photo

Business cards

The reversed-out leaf (detail from the logo) makes these business cards stand out. We also printed them on thick 14pt cardstock with a matte finish.

 

Team-view-sketch
Dayleyagile-postcard-photo-2
Dayleyagile-postcard-photo-1

Postcards

The postcards were a promotional piece handed out at Phoenix Startup Weekend. On one side is a graphic we created based on a sketch Alan often uses in Agile coaching to illustrate how Agile teams are meant to function in a holistic way, a useful reminder for Agile practicioners to keep at their desks (retaining the company’s contact information, as well).

We edited the copy for the other side of the postcards to make it more concise and include the attention-grabbing headline “Better Teams Make Better Business.”

The cards were an effective way to spread the word about Dayley Agile and were more useful and budget-friendly than many promotional products.

 

Dayleyagile_web_photo

Web

Finally, in collaboration with Perri Collins, we created a website to showcase Dayley Agile’s services, as well as photos from actual Dayley Agile training and workshops, testimonials and  information on Agile.

We adapted the postcard verbiage and holistic team graphic to be the image that is currently front and center on the home page. The look of the site is professional, open and organic to reflect the way that Dayley Agile does business.

3 things to stop worrying about in your web design!

This post is adapted from some thoughts I shared with a web design client this week. I thought others getting a site designed might find this useful as well. 

 

Web vs. Print

One challenge of web design is that you can’t control the medium.

With print, you can be much more precise, controlling font sizes, colors, layout, etc. We can sit down with Pantone color books and choose the perfect shade of green. The printed brochure will look the same to everyone you hand it to, because they are all viewing it via the printed page. 

Web design, on the other hand, is viewed via people’s screens, which you have no control over!

 

IBM JX

Things that will vary for your site visitors:

  • Monitor size – People may view your site on one of those older, squarish monitors or a 27-inch iMac or a laptop or even a phone.
  • Monitor settings – Color varies from one screen to the next and adjusting color and brightness settings can make the same site look completely different.
  • Browsers – Viewing a site in Firefox may not be the same as viewing it in Internet Explorer.
  • Size/Text settings – People can change the default text size for their computer and/or zoom in and out on browser pages.
  • Accessibility settings – People with visual impairments may be using screen readers or Braille terminals

 

Flexibility

Do you need to worry about how to accomplish all this? No! If you have a good web designer, they’ll know that the best way to deal with all these variables is to create a website design that is flexible.

Rather than trying to control every detail, we create a good design with the flexibility to work in a wide variety of situations.

Boldblogscreens

 

So you can stop worrying about…

  1. Exact text size. Don’t think “14 pt.” Think “large.”
  2. Exact color. Don’t think of picking the perfect crayon from a huge box. Think of choosing the best fit from the 16-pack. 
  3. Scrolling.* Don’t focus on what you need to scroll to see, focus on the whole page and overall layout. Some people may not need to scroll to see everything; others may need to scroll even more than you do. 

In other words, you can stop worrying about controlling every aspect of your site, and think of the big picture: Is it easy to navigate? Does it communicate your message? Does the look and feel reflect your organization?

Once you’ve found a web designer you can trust, take a deep breath and don’t sweat the small stuff. 

 

*You may have heard the expression “above the fold,” which comes from the term for the top half of the newspaper page – the place for the most important headlines. Since web pages obviously do not fold in half like newspapers, “above the fold” in web design refers to the part of the page you do not have to scroll to see. However, as I mentioned above, there is such a variety of devices (and settings) that people may view your site on nowadays that you can really make the argument that there is no fold.

Typography resources

Wait a second, this is in my web browser, how do you know what fonts i have installed!?!

We create some hidden elements and measure them before and after changing their font-family. It turns out that this isn’t a new idea.

Checked out a few handy typography sites today, and I wanted to share:

  • Flipping Typical (http://flippingtypical.com/) shows you common typefaces that are installed on your computer. (via @JLKnapp)
  • Typekit (http://typekit.com/) offers web designers a script for displaying fonts on the web beyond the usual safe (boring) options. (via @markng)
  • Microsoft Typography (http://www.microsoft.com/typography/fonts/product.aspx) has a list of Microsoft products that you can click on to see which typefaces come with the software. This is really helpful for Mac users wanting to know which typefaces PC/Microsoft users are likely to have. (Found this site all by myself!)

Just ask.

boldavenue

Bold Avenue

Tempe, AZ

http://www.boldavenue.com

Bold Avenue does graphic design, copywriting and t-shirts.

What else would you like to know about us? Ask away!

P.S. Your questions will also help us include the kind of information you want to know on our redesigned website. Thanks!

It’s frustrating to visit a website that has tons of information about a company, but doesn’t answer whatever one simple question you happen to have.

To find out what people are wondering about Bold Avenue (and make sure our redesigned site answers all those burning questions – or at least the relevant ones), I’ve set up a formspring.me page.

Visit http://www.formspring.me/boldavenue and ask us what you want to know!

Growth and reinvention

I left my name off my first business cards.

Since Bold Avenue began as a collection of online t-shirt and gift shops, the cards were more like miniature flyers, pointing people to a website. I created the designs on the merch, but I wasn’t necessary to complete the transaction. Plus, Bold Avenue was still a side project.

Over time, the website evolved, and the shops merged into one big shop. But I didn’t get new business cards until Bold Avenue graduated from side project to full-time business in 2008.
That’s when we became more service-oriented – offering copywriting, design, things that you can’t get from just visiting a website.

Along with more contact information, I felt the new cards should reflect the company’s new direction. The problem was that I was still figuring that out. As often happens in life, things had not gone as planned, and I was rethinking my strategy. But I still needed business cards. So, to get me through the transition, I got cards printed up that focused instead on the main things I did: design and write.

Months went by of designing and writing and handing out business cards. At the same time, we were continually experimenting, adjusting the plan and learning –  a lot.

In the meantime, there was the website. A website re-design without a clear direction is generally not a good idea. So, during that time, the website waited.

{and now here we are}

The other day I found I was getting really low on my transitional business cards. I considered making a few minor edits and re-ordering, when I realized something.

At this point, I don’t just need new cards or an updated website. It’s time define our focus. It’s time to take the things we’ve learned, the changes we’ve made, this wonderful thing that Bold Avenue has grown into and say: This is who we are, what we do, where we’re going. Out of that will flow our new branding, a more refined direction and a more streamlined way of doing things.

Then I had this crazy thought.

Maybe we should open up the discussion. Invite you to be a part of the process. Let you see what we’re thinking, sources of inspiration, steps along the way.

And thus this blog was born.