All Posts in Design

May 6, 2014 - No Comments!

Mobile First Responsive Design?

Mobile First, Right?This past weekend, on May 3rd, I had the pleasure of joining a collection of really smart people on stage at Mobile Camp Chicago. It was a full day of discussing what the expansion in device usage over the past few years means for our industry. I heard a bunch of great talks and had even more great conversations. If you get a chance to attend one of the shows that Chicago Camps puts on I could not recommend it enough. The events are some of the most affordable around and full of some of the best speakers I've seen.

Read more

April 21, 2014 - No Comments!

Fluid Typography with VW Units: XI to Eye

XI to Eye - VWSince the launch of the first responsive website we have had fluid grids and images, but our typography has been static. That is, until recently. The rise of support from the browser vendors for viewport units of measurement has changed that and we can now build sites where the type adjusts to the size of the screen. With a little bit of planning and a dash of sass, we can control our fluid type through all of our breakpoints and ensure a proper text line length across all variants of our design. In this edition of XI to Eye I'll give you an introduction to vw units and how we're using them.

Read more

February 3, 2014 - No Comments!

Weather: A User Experience

Chicago’s talking about the weather more than usual, don't you think?

No longer just a small talk cliché, getting accurate information about The Weather has become a matter of survival. The polar vortex is waiting for us and we need to know how bad it is out there.

Looking for answers, I typed “weather” into Google. Weather.com was the first result. I naively assumed I’d come to the right place.

Read more

January 23, 2014 - No Comments!

Developing Global Connections with Hop the Pond

HTP_logo-5282047448dc4860f915889d6afd7fddPolar vortexes aside, it’s no secret that we love our hometown of Chicago, and we love it even more when people want to visit. So we were excited to team up with new client Hop the Pond, a young company that helps students with J1 visas find temporary work, housing, and fun things to do in Chicago over the summer.

Hop the Pond was started by Chicago native Mark Reiter and Irishman Kevin Egan. Both had tough experiences as students traveling abroad, where they had trouble getting part-time jobs and affordable places to live, as well as knowing where to go or what to do for entertainment.

Read more

January 16, 2014 - 1 comment.

Tech Tip: Score Great Photos with Fotor

fotorWant attractive images in your blog, newsletter, or social media accounts, but don’t need the heft of Photoshop? Try Fotor, a mobile and desktop app that gives you a suite of one-click editing and collage tools.

When you just want to make minor edits to photos or images—like resizing, adjusting brightness, straightening a crooked shot, or adding a frame or text—Fotor gets it done fast and simply, no comprehensive photo editing skills required.

Read more

December 20, 2013 - No Comments!

User Experience: Don’t Ignore These 3 Rules

UX Design RulesTable XI was delighted to host user experience designer / big thinker / awesome person Carolyn Chandler for an engaging Lunch 'n Learn last week. Carolyn Chandler is a design instructor at the Starter League and the American Design and Master-Craft Initiative. She’s also written A Project Guide to UX (with Russ Unger) and Adventures in Experience Design (with Anna Van Slee).

The lunch was a reunion of sorts since Carolyn has history with Table XI’s design group: front-end designer Matt Reich and I have both taken her Starter League class (it was through that class that I met Mike Gibson, head of the Love Has No Logic design group and now senior designer at Table XI).

Read more

November 21, 2013 - No Comments!

User Experience and the CTA: Fixing Everything in 3 Steps

“The impetuous creature--a pirate--started forward, sprang away; she had to hold the rail to steady herself, for a pirate it was, reckless, unscrupulous, bearing down ruthlessly, circumventing dangerously, boldly snatching a passenger, or ignoring a passenger, squeezing eel-like and arrogant in between, and then rushing insolently all sails spread up Whitehall.”

Virginia Woolf, Mrs. Dalloway

Read more

September 24, 2013 - No Comments!

Tech + Fashion: How We’re Looking to the Future with M2057 by Maria Pinto

M2057 by Maria Pinto KickstarterFor the past few months, we've been working with internationally renowned fashion designer Maria Pinto to help her launch her new business and fashion collection on Kickstarter. This has been a real labor of passion for me personally. Maria is one of the smartest, most gracious and humble people I've ever met. She, like many entrepreneurs, has taken it on the chin professionally a couple of times over the years, and I'm working my hardest to help her get going again.

For those unfamiliar, Maria Pinto is well known in the fashion world for her work designing for Michelle Obama, Oprah Winfrey, and other celebrities, and for her high-end, highly constructed clothes. We owe the whole cultural consciousness surrounding "Michelle Obama's arms" to Maria's decision to put Michelle in a sleeveless dress at several prominent occasions. These dresses retailed for over a thousand dollars, with some reaching truly stratospheric levels (see Page 10 of the Spring 2010 collection for a yellow chiffon dress that has to be seen to be believed).

M2057 by Maria Pinto Isabella Dress

All of the excitement of the 2008 Obama campaign inspired Maria to expand her operations and open a retail store. Business was great for a while, but the economic headwinds of that era took their toll on her customer base, and Maria closed her store and stopped producing new collections.

I met Maria through our mutual friend, Emmanuel Nony, the fantastic restaurateur behind Sepia and NoMi. He mentioned a “fashion designer friend” who was considering re-launching her business on Kickstarter, and I had to hear more (admittedly, I knew who this friend was, and was very excited about the possibility of helping her with the campaign).

When I met up with Maria, it was clear that instead of re-launching her ultra-high-end collection, she was planning to create a new brand called M2057, named for the year she will turn 100. The new line is stunning, but better reflects the times in which we live. M2057 takes the same principles of structure and design, but the pieces are much more accessible: high quality, high value (dresses are $250), and designed to fit most body types and sizes. These dresses are perfect for any busy woman on the go, be it for work or for pleasure. I happen to be married to such a woman, and she concurs!

Since then, we've been working very closely with Maria on this, consulting on the project and building the M2057 website, so I've had a chance to see and touch the samples. The fabrics of these dresses are incredibly beautiful and they don't wrinkle, are machine-washable, travel well, and can be styled in many ways. I've watched rooms of women at the events we've been having around town light up when they see the product in person—the dresses are really that great. They've also gotten a lot of positive press attention.

In order to get the new business and clothing line off the ground, we've turned to crowd-funding site Kickstarter. The only way to buy the clothes is to "pre-order" by becoming a backer to support the campaign. We'll only be able to launch this new line if $250,000 worth of product is pre-ordered by October 14. When the goal is met, we'll go into production of the dresses and we will follow up with all backers on size, style, and color choices. Product will be delivered to your door in/around March, well in time for the spring season.

M2057 by Maria Pinto Squares Wrap Sophia DressIt’s been a fascinating opportunity and challenge working on this campaign. Nobody has really cracked the nut of online retail for women’s apparel; the personal experience is so important when it comes to high quality fabric and design. Furthermore, to a bunch of techies, Kickstarter seems easy to use—you can create an account directly or just link it to your Facebook account. All payments are handled securely through Amazon. And you don’t pay unless the campaign closes. But to those unfamiliar with crowdfunding, it has proven quite daunting in various cases.

We’re right in the thick of the campaign now, with less than 20 days left to meet our goal. We are optimistic that we’ll get there, but it hasn’t been a walk in the park. So, if you’re inclined to check out the video and maybe support the campaign, that would make my day. It’s not everyday you have a chance to buy something truly special for you or a loved one and support a fabulous independent entrepreneur in the process. We’ll look forward to sharing more stories from the trenches and lessons learned from Kickstarter in a subsequent post.

m2057-ks-button

September 23, 2013 - No Comments!

Tech Tip: Choosing the Right CMS for Your Project

craft-screenshotWhen it comes to building websites there are a couple indisputable facts. First, you'll be working with content. Second, you'll need to maintain that content, be it through edits, updates, or additions. If our content never needed to change, we'd be printing books.

Every good website has an area that only a handful of people ever see: the Content Management System. There are dozens of extremely mature, well developed, flexible Content Management Systems on the market, but the question of which CMS to use for your project is just as nuanced as the systems themselves.

When we recently built the M2057 Pages for Maria Pinto, we decided to use Craft. Why? In our initial conversations with Maria and her team, a handful of requirements stood out to me that mandated a certain type of CMS:

  • Speed - The timeline on this project was short. We needed a CMS that would give us the tools to build the site we wanted, while staying out of the way and letting us easily dictate the final output.
  • Simplicity - Maria Pinto was launching a brand new line of clothes. She had her hands full. When it came to the website we wanted a system that let her log in, write up her posts, and get right back out. The more straightforward the process, the better.
  • Flexibility - While the M2057 Pages are a blog, we wanted a system that was extremely flexible so that we could scale in the future.

Craft is a newer entrant into the lightweight CMS market, built by Pixel & Tonic. I've been familiar with the work that Pixel & Tonic has done in the past through their work developing modules for Expression Engine. What stuck out the most to me in their work was their UI and their attention to detail. When I first heard that they were building their own CMS, it instantly caught my radar.

Getting started with Craft was easy. We were extremely impressed with how quickly we could build functional pages. At Table XI we design our wireframes in the browser with HTML and CSS. Turning those static mockups into functional page templates is not much harder than a bit of well-placed copying and pasting. There were no complex php functions that needed to be written and looped through. There was no template overhead that needed to be put into place before we could start working with data. We simply swapped out the static content from our design mockups with simple template tags that grabbed what we needed, and the site was suddenly functional.

mphomepage

As a developer, this process worked great for me: I'm used to working in the browser all day. The true test of a CMS is how the project's content managers do when they are introduced to the system. What may seem obvious to me can fall apart at the fingers of someone less familiar the interface. If that happens, we failed. In fact, it's fair to say that poor user interfaces are a major shortcoming of many of the Content Management Systems on the market. Some strive for a one-size-fits-all solution that ultimately becomes a lowest common denominator system. Others simply try to do too much and overwhelm less technical users with options instead of clear directions. Craft doesn't suffer from any of these issues. As I mentioned before, the Craft developers pay great attention to the user interactions of the software they develop. The control panel is intuitive and inviting. It leads you to where you need to be to do your job. If you forget how to do something, it's not a problem as the software itself will guide you through the process.

Where M2057 is concerned, we knew we had a system we could get up quickly, and one that would be easy for Maria and her team to use once it was up. But what about the future? How would the site hold up as M2057 grew? Would we have to tear it all down and start over? Would we spend all our time building custom functionality for new features? How many hypotheticals could I fit into a paragraph of this blog post? Who knows, but I do feel confident with Craft.

craft-upgradeAs a lightweight system, it has a fairly simple set of functionality out of the box. The backend lets you determine the structure of your content, and then you can show that content in templates you build on the front end. Keeping the feature set small ensures that the system is fast and easy to use. However, they've built a system that easily supports the addition of new functionality through modules, most of which can be added directly through the control panel itself. This means that as the site grows, either through the addition of new types of content or functionality, Craft gives us a great foundation to build upon and ensures that our time is spent on getting the features right, rather than just getting them to work.

Craft is not right for every project. Be wary of anyone who tells you that a single system is ideal for everything. There are projects that require a custom Rails application and admin interface, while others are perfectly suited for WordPress. Perhaps Drupal gets you 99% of the way to getting your new site launched. In all of those cases, that's the right CMS for you. In the case of the M2057 Pages, Craft was right for us and the results speak for themselves.

August 8, 2013 - 1 comment.

Infographic: Mobile App vs. Responsive Website

Earlier this spring, we wrote an article about the 10 questions to ask when choosing between a responsive website or a native mobile app for your business. It's question a lot of people are asking these days, so we decided to turn it into a helpful infographic, which VentureBeat featured on its site last week.

Use the chart below to help you decide whether your company needs a responsive website or a native mobile app.

Mobile App vs Responsive Design

Special thanks to Kenton Quatman his infographic design.