All Posts in Design

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 - No Comments!

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.

June 27, 2013 - No Comments!

Selling in a Responsive Design

If there's one thing that's sure to drive you batty in a responsive layout it's working with third party ad services. Not everyone can afford their own ad sales team or has the resources to support their own ad network, and because of this, they turn to services such as Google DFP. Those services are easy to implement and enable an instant revenue stream. They also don't work well in fluid width layouts.

We ran into this wall the weekend before the launch of the new Roger Ebert website. We were implementing a new ad network that did not play nicely with our fluid width columns. Not having the time to fully implement and test an entire new layout for the site, we had to think quickly. Here's what we did...

The HTML

Our ads were all 300 pixels wide and existed in the same column. This column was one of two columns in its parent container. On the parent container, we put a class of fixed-rail. Inside the container we added a class of pad to our main content and place to our ad rail. The HTML looked like this...

<section class="fixed-rail">
    <section class="main pad">
        ... Insert main content here ...
    </section>
    <aside class="place">
        ... Insert ad rail content here ...
    </aside>    
</section>

The CSS

Easy enough, right? The magic is the CSS. We're already using border-box box-sizing, so we set our pad column to width: 100%;. We then give it right padding of 330px (300 pixels for our ad-rail and 30px as the universal gutter width setting in our SASS files). We then position the placecolumn absolutely to the upper right corner. Instant fixed width right rail and fluid width content column.

$gutter-width: 30px;

.fixed-rail {
    position: relative;
}

.pad {
    width: 100%;
    padding: 300px + $gutter-width;
}

.place {
    width: 300px;
    position: absolute;
    top: 0;
    right: 0;
}

We Got This...

Looks great, right? One problem. There were some cases where the ad rail was taller than the content column. Since it was positioned absolutely, the layout would collapse. Uh-oh. The solution? We inserted a quick bit of JS to calculate the height of the place column and added that as a minimum height on its sibling pad column.

$('.place').each(function(){
    var forceHeight = $(this).height() + 'px';
    var sibling = $(this).siblings('.pad');
    $(sibling).css({'min-height': forceHeight});
});

Honestly, I don't know how this solution will hold up over time, but it seems to have been doing just fine in practice so far. If you've got some thoughts on this, let's chat.

June 17, 2013 - No Comments!

Data Visualization in Excel: A Table Talk

Turning data into something that people can understand, appreciate, and act on is a critical skill, but it's a challenging one for many who don't consider themselves traditional designers. When it comes to data visualization, it's common practice to use the tools we already have at hand (and are relatively familiar with) to get the job done—hence the ubiquitous use of Microsoft Excel in this area.

Unfortunately, Excel is far from the best or easiest data visualization tool out there, but people's comfort level with it—and its acceptance as industry standard—keeps it chugging along. Last month, for our Table Talks series Data by Design, Excel Whisperer Mark Rickmeier gave his tips for making the most out of Excel's data features.

Take note—Mark doesn't necessarily recommend Excel for data visualization, but if you're going to use it, he says, follow these rules.

"Make it so," says Picard.

To view other PechaKucha presentations from our Table Talks series, visit the Table XI PechaKucha channel. If you’re interested in attending a future Table Talks, request an invite through our website. You can also follow along at #tabletalks.

June 3, 2013 - 1 comment.

We’re Growing! Table XI Has Acquired Design Firm Love Has No Logic

lhnl-txi-banner-cropped

I’m very excited to announce that we have joined forces with our friends over at Love Has No Logic (LHNL), the boutique front-end design firm that we partnered with on the new RogerEbert.com. This marks the dawn of the next era of Table XI and our commitment to the highest quality design—founder Mike Gibson and the rest of the LHNL team are experts in branding, UX, and responsive design, skills that complement our own service offerings.

Today design and development go hand in hand, and this acquisition only increases the value we can provide our clients. It’s no longer good enough for a developer to build a site and have a designer slap a pretty face on it, or for a designer to turn over a finished Photoshop file to a developer to execute. From planning out how front-end visuals will work with backend systems, to creating websites with responsive design, the best work comes from the collaboration between developers and designers at the earliest stages of a project through its final launch.

We’ve thrived with LHNL on these kinds of collaborations. Like us, LHNL uses an iterative process and enjoys a history of long relationships with their customers, and together we have a proven track record of success. We first worked together on the fan engagement startup Pegmo in 2010, which we sold to a large marketing agency in 2012. For RogerEbert.com, Table XI drove the product strategy, project management, and software development, while LHNL created the visual design and implemented it on a cutting edge responsive framework, ensuring that the site displays seamlessly across all devices, from smartphones to tablets. We’ve gotten overwhelmingly positive praise at the result, and Mike’s design received accolades from the responsive design community.

The merger will take effect immediately, and our combined team will work out of our West Loop loft. In addition to Mike, I'd like to welcome Annie Swank and Shawn Campbell to our office—our summer is already slated with a slew of exciting new projects, including website redesigns for Northwestern’s Medill School of Journalism and Chicago Ideas Week (more on those soon). There’s no doubt that together, Table XI and Love Has No Logic are a stronger team, and we can’t wait to get started.

You can learn more about Love Has No Logic and their approach to front-end development at their website. And I encourage you to check out Mike’s blog for his own thoughts on joining up with Table XI.