Skip to main content

Mobomo webinars-now on demand! | learn more.

They say you can tell a lot about a person just from their bookshelf. Here is an inside look at our design team's current reading lists!

Our UX Designer, Ben Markowitz, draws much of his design inspiration from comic books:

"I enjoy comics for the intricacies in design and layout more than anything. Comics are a form of visual story telling which is much different from most other mediums; the artists (much like web designers) work elegantly within the constraints of the medium to create the most effective and moving experience for readers. Balancing artwork with content, they leverage limitations in usable space by using only the most poignant and effective elements to tell the story.

I approach UX design in a similar manner: define the optimal experience for users using the minimum set of design elements. This isn't minimalism, it's just responsible design. I aim to deliver a defined and powerful experience to the user by removing unnecessary complexity."

You know him as Chris Tate, our Director of UI, but we know him as Batman. His presence is sophisticated, his designs are rad, and his reading list? A thoughtfully cultivated set of inspirational pieces:

Here is Ted O'Meara, our Director of UX, whom we know as Superman (no, really).

As a graduate student at UMBC in the Human-Centered Computing program he focuses on developing software for the cognitively impaired. Ted's reading list is a reflection of his passion for creating accessible software through intelligent design:

  • Generative Art (Matt Pearson)
  • How We Decide (Jonah Leher)
  • Envisioning Information (Tufte)
  • Design Pattern TRABING?: Touchscreen-based Input Technique for People Affected by Intention Tremor (Evaluation, 2010, 267-272)
  • The design of a real-time, multimodal biofeedback system for stroke patient rehabilitation (MULTIMEDIA 2006, 763)
  • ...and Raising Unicorns.

Ask Ted about his tragic unicorn history at his next conference.

Jurgen Altziebler is our Managing Director of UX and he always means business. His seriousness is visible within his designs; nothing less than pixel-perfect will do for this designer.

His reading list might reveal his Austrian-born penchant for modern, light designs balanced with high functionality and subtle beauty.

  • Less and More: The Design Ethos of Dieter Rams (Gestalten)
  • Grid Systems in Graphic Design (Josef Muller Brockmann)
  • Designing Universal Knowledge (Gerlinde Schuller)
  • Ein Handbuch, Gestaltung, Typografie, etc. (Claire & Damien Gautier, Published by Niggli)

Javier Rios, our UI designer, is unambiguous and systematic. Maybe even a little crazy. (Ask him how many times he's been hit by cars while running!)

The practical, heuristic lineup of books in his reading list exemplify his approach to design: functional, clear designs that create a straightforward user flow path.

  • HTML5 for Web Designers (Jeremy Keith)
  • Responsive Web Designer (Ethan Marcotte)
  • Mobile First (Luke Wroblewski)
  • Designing For Emotion (Aarron Walter)

Style: The Main Ingredient

Based on their books alone I would conclude our design team is a group of calculated, discerning, artful design addicts. One thing can't be ignored though - they've got some serious style. It's that style that infuses every design they create, every user experience they develop, every carefully colored pixel on a page. As A Softer World once pointed out in their comic, "Everybody dies. Every single person. So, style counts."

Style counts.

Categories
Author

Last week we sponsored MoDevUX, a mobile conference in Washington, D.C. led by vanguards in the mobile development and design industry. In addition to learning about emerging trends from the diverse crowd of presenters and attendees we also shared a bit of our own "secret sauce".

Anthony Nystrom, our Director of Mobile and Emerging Technologies, shared the stage with Jurgen Altziebler, our Managing Director of UX to tackle the topic of "Development and Design: When the Two Must Act As One".

Through cultivating a culture of quality in both design and development we've gained insights on the formula for success among teams of developers and designers. MoDevUX was an opportunity for us to share those insights with the greater mobile design and development communities.

Designoper, Developer or Designer, the point is that recognizing each other's skills while sharpening your select personal skills is what a team is built upon. Certainly there are stars, however stars don't scale but teams most certainly do! And like any business that is looking to grow, it must rely upon teams that are less interested in their personal prowess and more interested in their unified presence.

Great Products: Under the Hood

If you're building a product you already know that it's important to know your industry, understand your users, define a clear vision and path of execution, and to be bold in your approach. But what role does your team of developers and designers play in the overall viability of your product?

We believe the DNA of any mobile or web product is embedded in the team(s) that are executing on the vision. Ultimately, every product is really just someone's good idea made accessible by teams of programmers and designers. Therefore, the most important factor in the success of your product is the team of experts building it. At Intridea we've been honing the process of creating these teams for years, and with great success! We do it in large part by making sure our teams of developers and designers are working together, not autonomously.

Building a Design & Development Team

Often, design teams work in isolation from development teams and in many cases design is outsourced to other agencies while development is done in-house or vice versa. But there's no doubt about it, a great product experience is the direct result of a good working relationship between the teams building the functionality (the developers) and the teams creating the aesthetic experience on top of that core functionality (the designers).

Of course, simply knowing that designers and developers should work hand-in-hand doesn't mean it's going to be easy. After all, designers and developers are different breeds and both groups work in distinctly mysterious ways. The trick to building solidarity in a product team is to hire the right kind of people in the first place.

While you might be inclined to seek out "rockstars" for your team, keep in mind that superheroes get bored easily, they're hard to find, and they don't scale. We have found that it's more advantageous to focus on hiring specialists who meet these requirements:

  • Have the skills (and attention span) to see a project all the way through (even that last 10%)
  • Are great at a couple of core things but are eager to learn beyond the bounds of their specialty (i.e., beware of "backend" developers who refuse to do "frontend" work)
  • Leave evangelism to theocrats: you want people who aren't afraid to use different technologies (whether they're cutting-edge technologies or older technologies that just happen to be the right tool for the job). Find people who love the challenge of creating something incredible regardless of the tools and processes used to get there.
  • Value form as much as function. It's important to see the inherent value in both a well-architected application and an easy-to-use, beautiful user interface.

In a symbiotic designer/developer relationship, both sides will, at some point, be faced with setting aside ingrained methodologies in order to collaborate effectively. What's actually happening in those cases is something like this: designers are learning something new about practice patterns in development, and developers are learning something new about user flow and experience from designers. When designers and developers work together in such a way, both teams gain something and will be more agile, productive and innovative on future projects.

Setting the Team Up For Success

Managing a product team is generally no easy task. Ask the design team to work in collusion with the programmers and it's sure to get even more challenging. Jurgen shared his strategy for creating a "balanced" team and setting them up for success on any project.

  • Team Building: This is an important first step. Assign an internal project (maybe a redesign of your company's website) to a developer and a designer. In this situation they will have to manage the project together, understand how the other one works, communicate in-depth about scope, features, and blockers on the project, and deliver a finished product.
  • Field Testing: Once you've ensured that the designer and developer can work together, pair them on a mid-sized client project. This adds a bit of necessary pressure because client deadlines are often more strenuous than internal deadlines. Additionally, a client project will introduce more variables for both sides. They'll have to think about things like client expectations, changes in scope and direction for both UI and architecture, and more.
  • Heavy Lifting: Now your designer and developer are battle-hardened and ready to lead the troops. Appoint this dev/design duo as the lead for larger projects that have multiple designers and developers. Their experience will aid them in helping other designers and developers work together, maximizing the results of the process.

But I Just Want A Good Product That Will Be Profitable

You have an idea. You need a product built. It sounds easy enough. Do you really need to spend all this time thoughtfully building the team behind the product?

In short, yes. Great products fail all the time; and not because there wasn't a good idea behind it. They fail because the teams building the products couldn't meet at that magic place - the precipice of awesome. (No, really - amazing things happen when designers and developers work together closely!)

Keep in mind, there isn't a lot of room for failure, especially in the mobile app market where users are educated and discerning and the competition is cutthroat. It's not even that users are "demanding" sexy interfaces and well-built applications - we're beyond that. Today, users just expect it. And if your product doesn't meet expectations your users won't even complain about it - they'll simply move on to another application that does it better.

These are problems that you rarely see when you have a team of designers and developers working closely on a product because simple issues like awkward user flow, unintended behavior within the interface, and architecture miscalculations are caught more frequently and earlier on in the process.

The Secret is in the Sauce

So there you have it - a sampling of our "secret sauce". TLDR: Hire smart people who value quality and aren't afraid to cross the "party lines".

Be sure to go through the complete slide deck from our presentation at MoDevUX, and check out our portfolio where you'll get to see some great examples of recent products and solutions built by our teams of designers and developers! Additionally, the full set of photos from the event is available on our Flickr page.

Do you have insights on helping designers and developers work together on projects? We'd love to hear it. Did you see our presentation at MoDevUX? We want to know what you thought. Leave your feedback below or reach out to us on Twitter.

Categories
Author

With the advent of high resolution “retina” displays, keeping bitmap images sharp and crisp on the web has meant using larger and thus more bandwidth-hungry images. At the same time, more and more people are browsing on mobile devices where bandwidth is at a premium.

One solution to this problem is scalable vector graphics (SVG) since they scale infinitely while keeping the file size low. However, now that web fonts are widely supported, symbol fonts like Dingbats or WebDings provide another option for tack sharp symbols used in icons or buttons. Fonts are also very flexible. For example, using CSS you can easily change the size, color, add drop shadows or other text effects.

But what happens when symbol typefaces don’t have the symbols you need? Well, make your own of course! Today I am going to show you how make your own symbol font using some freely available software and tools, which you can then easily embed in a web page and use in your design comps.

Here are a few things you will need before we get started:

  • Some SVG files - you will need some SVG symbols to embed in your font. I’ve included a zip file here with a few symbols to get you started. If you need more, the noun project is a great resource.
  • Adobe Illustrator - for preparing your SVG files (if you grab the ones I have included above, you can skip this step)
  • Inkscape - this is an open source vector drawing tool. It’s available for Windows or OS X. This tutorial will be showing the Mac version, but the Windows steps are almost identical.
  • The starter font file - download this blank font file from Github to use as your starting point.

Step 0: Prepare your SVG files in Illustrator

If you grabbed my sample SVG files you can skip this step, but if you are using your own vector images you will probably need to run them through Illustrator first. First, open your vector image and select it. Then from the menu select Object -> Compound Path -> Make. Finally, select File -> Save As for format select SVG (svg) and then save it somewhere you can easily find it. An SVG Options window will popup, just leave the default options and click OK.

Step 1: Get Inkscape ready

Open the starter font file in Inkscape. Go ahead and save it with a new name, I’m calling mine awesomesauce.svg. Next, from the Text menu, select SVG Font Editor. This will enable the font editor pallet on the right side. Your window should look like this:

Step 2: Font family name

In the SVG Font Editor on the right hand side of the window click on font 1 so it is highlighted. Then, in the Family Name text box, give your font family a name. Again, I’m using awesomesauce.

Step 3: Import a symbol

Now it’s time to add the first symbol to our font. From the File menu, select Import. Select the svg file you want to add to your font. I’m going to select intridea.svg (what symbol font would be complete without the Intridea logo?).

Step 4: Size the symbol

Now we need to size the symbol. It’s good to keep all your glyphs a similar size. Experimenting has shown me that keeping them about 750px high in Inkscape will keep them roughly the same height as a capital letter. In the top tool bar, click the Lock icon to lock the aspect ratio and manually enter the hight as 750px.

Step 5: Position your symbol

Positioning the symbol is also very important. Move the symbol to the bottom of the work area. You can do this easily by entering 0px in the Y box on the toolbar. Then, center the symbol (you should see a centered guide line to help you, and you can use the arrow keys for minute adjustments). Once you have it sized and positioned properly, it should look like this:

Step 6: Add a symbol

Now it’s time to add the symbol to your font. Make sure the symbol is selected by clicking on it (it should have a box around it). Over in the SVG Font Editor palette, click on font 1 then click the Glyphs tab. Then, select glyph 1 a so it is highlighted and finally, click the Get Curves from selection button. This will assign that shape to the selected glyph. In this example, the lower case a.

Step 7: Test your font

You can test if it worked by entering a lower case a into the Preview Text window. If it worked, you should see the Intridea logo in the preview area!

Step 8: Rinse and Repeat

If you are happy with your symbol you added, delete it from your work area and repeat steps 3 through 7 adding each symbol to a different glyph. When you are done, save your file and head to step 9.

Step 9: Convert to a TrueType Font

Next we need to convert this to a usable font. So head to http://www.freefontconverter.com/. Click the Chose File button and browse for your file you saved in step 8. From the Select a format to convert to: select ttf(TrueType) and click the Convert button. Your browser should download your new font file.

Step 10: Generate a @font-face kit

In this step we will generate a font-face kit that is compatible with almost all browsers. The downloadable kit features great instructions on using your font on the web. Head on over to the Font Squirrel font-face generator. Click the Add fonts button and select your TrueType font from step 9. Select the Optimal setting, agree to their terms and click Download Your Kit.

You did it!

Open up the folder you downloaded in step 10. In the folder, you should see a .ttf TrueType font. In my case, it’s called awesomesauce-webfont.ttf. Double click it to open the font and install it. Now your font is available anywhere in your OS to use in your design comps!

In the folder you will find an HTML demo file from Font Squirrel. In my example, it is called awesomesauceRegular-demo.html. Open this file in a browser. It will show your font as well as provide instructions on embedding your font in a web page. Also, be sure to check out Pictos for some more info on using icon fonts.

Categories
Author

Ted O'Meara departs today for Salt Lake City, Utah where he'll spend the next few days immersed in the ever-evolving community of Ruby and Ruby on Rails developers. He's headed for destination: MountainWest RubyConf.

Ted came to Intridea two years ago as a designer and in just a short time he's proven to be a dextrous and pioneering leader. Not only has he become an accomplished project manager, he also plunged into the development world in an effort to become a more knowledgable and powerful designer. He did it. He crossed the streams.

While total protonic reversal was not a direct consequence of Ted's actions, he did actually learn a thing or two about the gaps between developers and designers and how small divergences in processes between the two groups effects the products they build. He'll be sharing his insights and solutions at MWRC this Friday.

In his talk, "UXDD (User Experience Driven Development): Build for your users, not your tests", Ted will propose practical and technological solutions to ways developers can increase the overall quality of their applications by aligning and testing their work against the user interface and flow.

In a candid example of why this is important, Ted posits the following user story:

Given that John has 30 pies
When he eats 3 of them a day
And he eats them for 10 days
Then he should not be hungry

And then adds "...but he might have gained 50lbs."

Throughout a project's lifecycle there may be several additions or changes to the overall user flow and back-end architecture. Following the principles of test-driven and behavior-driven development head-down might cause you to miss glaring errors in functionality for the user. So go see Ted's presentation this Friday at 4:30 pm for a Complete and Perfect Solution™ - he'll fix all your problems, ever. Just don't tell him I said so.

Categories
Author

Rails. No, really.

The future of web and mobile design is in Rails, Sinatra, Django, and other RESTful web frameworks that can be used to leverage design power across multiple platforms, making it easier and faster (translate: more economical) to design for web, mobile and desktop.

Our UI/UX team was stationed up in NYC for the Future of Web Design conference last week and we were able to chat with some really awesome folks who had innovative and inspiring ideas about web design.

The atmosphere of FOWD was energetic and there were a lot familiar buzzwords being tossed around; “Mobile”, “responsive”, and “HTML5”, were the most prominent. I did hear two presenters (Steve Fisher and Josh Clark) talk briefly about content manipulation and APIs, but I was surprised I didn’t hear more on this topic.

When I took time before FOWD to consider what my own vision of the future of web (and mobile) design was I immediately thought of Rails and other RESTful APIs. In fact, the future of design is tied closely with the future of web development. More and more companies are demanding robust, scalable web applications that have the functionality to manipulate and generate content. And they don’t need just one application, they need several: a desktop app, a web app, an Android app, an iOS app, etc. And yes, they want those applications to be aesthetic and intuitive, but gone are the days when a business needs just a static, well-designed page to reach and engage their audience.

Using a RESTful API for design makes perfect sense. Let’s manipulate data in one defined way, but allow that action to take place over any platform. Obviously an HTML view is not always going to be the perfect experience for every platform, but in using a RESTful API all you have to care about is a connection to transfer data. You can swap out the HTML views for a native iOS or Android interface, and then you just have to think about the data transfer.

And isn’t that what we need with any application that deals with time-sensitive content? New York Times is on board with this idea (developer.nytimes.com), as is Facebook (open graph). As web designers we need to think about how to build our own APIs for our applications so we can more easily and more fluidly design corresponding mobile (and desktop, etc) applications.

But how does Rails play into this? Most people think of Rails as just a means for developing web applications; but what about that RESTful architecture that it’s built on top of? It’s perfect for extending mobile apps as well. You can easily use Rails as an underlying method for serving up CSS and styles for multiple platforms. Why not let Rails be the foundation for web and mobile design? When it comes down to it, Rails is an API right out of the box. You just need to style it as one.

Categories
Author

Last week Homezada officially released their home management software, a complete solution to the dispersed files, incomplete records, and scattered maintenance reports that plague homeowners everywhere.

Homezada's formula is "Everything about your home in one place" and they're serious about that; their software allows you to easily document all the possessions in your home, track the value of all of those items, track household improvements (making it easier to remember what you've done to improve your house when you decide to sell it), access an ongoing library of to-do maintenance items, and maintain checklists of seasonal cleaning, yardwork and maintenance projects. The system can remind you when it's time to update air filters, schedule furnace maintenance, and so on.

Below is screenshot of the to-do list functionality of the application:

Homezada approached Intridea to draft the wireframes, help design the user flow, and refine the user experience. Our design team, led by Jurgen and Ted, worked with their internal Rails development team to deliver an engaging and intuitive user experience and to help stylize it within the Rails app.

We were excited to work with Homezada on such an interesting and revolutionary project. We encourage you to watch some of the short videos on their site to learn more about the software.

If you need design or development expertise on your project contact us today to learn what we can do for you; at Intridea we are helping hundreds of people bring their ideas to life!

Categories
Author

This article focuses on the correlation of UX and brand equity to quantitative measures that we see in market value.

User experience (UX) is a catch-all term that we use in the software industry to describe the overall feeling an end-user gets when using a product. The UX is the attitude that is triggered when using (and subsequently thinking about) a company and their products and services. Since your user's attitude affects their future behavior toward your brand or product, a good user experience is vital to product adoption, engagement and loyalty.

We all enjoy using a product that has been well-designed. But does the design of a product have any impact on stock prices? If it does, would that encourage Product Managers to allocate more resources to UX?

The Stats

In a 2004 study on "The Impact of Design on Stock Market Performance", the Design Council identified 63 companies to be effective users of design and analyzed the performance of them with the other UK FTSE quoted companies over a ten year period. They reported:

The key finding of the study is that a group of 63 companies identified to be effective users of design outperformed the FTSE 100 index over the full period by 200%, and also beat their peers in the recent bull and bear markets.

A number of prior studies have been undertaken around the world but all have been limited in their methodology or scale (see Appendix 1). We believe that this study offers the first conclusive evidence for the relationship between the effective use of design by corporates and an improved share price performance and therefore greater shareholder returns.

In 2006, a design group put together the UX Fund, an experiment to test whether companies that provide good UX see it reflected in their stock prices. They invested close to $50k in companies that had a history of innovation, had loyal customers, and that took care in designing their websites, products and user experience. The results? A year later the UX Fund matured a whopping 39.3% and the companies they invested in often outperformed their closest competitors.

Examples

Despite the (small, but increasing) research linking good design to stock values and despite the vital role UX plays in brand adoption and loyalty, investors and key decision makers of publicly traded companies rarely take UX into account when determining what drives their brand's market value. While a company's stock price is affected by an infinite number of forces, value can be closely related to the overall experience their users and customers derive.

We can spot trends and wild fluctuations in performance between companies that exist in the same market and create similar products but have widely differing approaches to UX/UI. Apple and Microsoft are a perfect (if not entirely overused) example. Apple's users (and even many of Apple's critics) tout that Apple products are better designed and engineered than Microsoft’s counterparts. If you have watched Objectified you know how serious Apple considers the user experience when designing a product. Apple users prefer the way they feel (and look) when using Apple products. The innovative simplicity of the UI creates a satisfying user experience.

Steve Jobs took design more seriously than most of his contemporaries, and saw it as much more than just the final layer over a product:

In most people's vocabularies, design means veneer. It's interior decorating. It's the fabric of the curtains of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service. Steve Jobs

The subjective divide in UX between Apple and Microsoft brands can be quantitatively measured in market value; Microsoft’s stock has remained nearly stagnant over the past 10 years, fluctuating between $20-40 per share (despite new product releases and acquisitions), while Apple’s has grown over 3000%.

Myspace is an example of how bad UX can lead to major losses. In a recent UX Magazine article, "Myspace's UX-Induced Death", the author discusses all the ways in which Myspace failed to engage and ultimately retain their users. Many of Myspace's users were initially pleased with the unique customization features of the app, but it was that level of customization that eventually led Myspace to the grave. As Myspace's users grew up and as other companies created the future of usability, Myspace stayed the same. Many of Myspace's users desperately wanted the service to succeed and lingered, hopeful for years that the company would find its way.

News Corp stock only rose 1% over the 6 years they owned MySpace. Compare that with Facebook’s estimated valuation over the same time frame, and you can see that Facebook (with its relentless focus on the user interface) rose upwards of 5000%.

Where Do All The UX Resources Go? To The Creep!

Feature creep, that is. In an article from UXMatters, Ben Werner identifies a common reason many Product Managers overlook UX, and it's not because they don't appreciate good UX - it's because they are won over by the allure of feature creep:

Competent management does realize that the user experience is critical to the long-term health of their company. Unfortunately, when developing software, the temptation to steal from the feature-list cookie jar and try to squeeze just one more feature into the current development cycle by skipping UX work is simply too great for most Product Managers.

He goes on to suggest that the best way to advocate for UX resources is to speak the language of the Product Managers - bring it back to dollars - and outlines a process for measuring the value of UX.

Most Brand Managers do recognize the value of UX. But allocating resources to UX within the complex decision matrix often gets overlooked. Although extra features might score the company more profit in the short-game, a better UX will score more in the long-game.

Bottom Line

So here's the bottom line: brand equity and user experience is measurable in some fashion. In light of how users respond to products based on their user experience, it would make sense to assess feedback about a product's usability and user loyalty right next to quarterly reports as indicators on whether or not to pull the trigger on buying stock. For those investors looking for long term gains, the overall success and temperature of public opinion on the company is key in order to see sustained success - and public opinion is derived, in large part, from the collective user experience.

If you care about how your users perceive your product, your brand, or your application, and if you understand the financial implications of what happens when users do (and do not) perceive it in a good light, then you need to care about UX. Good design isn't just a thin layer over your product; in fact, it's not a separate element at all. Rather, it's woven into every feature, felt in every interaction, and engages the user to the point where they forget about the design altogether, freeing them to just use the application to its potential.

If you don't believe me, then perhaps you can believe Google. Google was one of the first companies to vocally advocate for the user experience above all else, and it has worked out pretty well for them. From their "Ten things we know to be true" list they cite the user experience as the #1 priority:

1. Focus on the user and all else will follow.

Since the beginning, we’ve focused on providing the best user experience possible.

Google's Philosophy

Categories
Author

Earlier this month we brought our expertise in mobile development and design to MobileUXCamp in DC. This BarCamp event gave us the opportunity to interact with other motivated and creative mobile enthusiasts. We facilitated discussions around several topics including one on how mobile design standards have influenced web design; we also talked about our UX process, and even delved into consulting strategies.

We enjoyed listening to Matt Forr, of MindGrub, speak on the differences between the mobile and desktop experiences and how to display content to the user in his Responsive vs Redirect talk. He raised interesting questions such as, "should all content be available to the user"; this is something we're all thinking about right now as more companies are deciding between creating mobile versions of their websites or optimizing their existing sites for mobile.

Mobile development is new enough that best practices for design and development are constantly in flux and the future is being created now. MobileUXCamp provided an open forum to join mobile experts in dialogue on the topics that are relevant and pressing in the mobile space today.

You can view the slides from our presentation on Slideshare and pictures from the event on our Flickr page.

We're always interested in talking shop about mobile design and development practices so feel free to start a conversation with us in the comments below or hit us up on Twitter.

Categories
Author

Several of our designers and developers spent this past weekend attending sessions on art and technology and talking to people about Intridea's methods at Betascape. The event pulled together artists and technologists from various industries and demonstrated what is happening on the bleeding edge of that intersection - from robotics to personal fabrication to data visualization.

The most popular session among the Intridea contingent was Kyle Fritz's talk, "Computers Suck, The Internet Rules: How to make networked stuff that interacts with the real world." Kyle touched on ways to virtually control your home stereo, locks, lights, and other household objects that can be remotely manipulated with just a simple working knowledge of electronics and a bit of hacking. It was a great example to our designers of how advanced technology can be accessible and useful to them.

Kyle's talk inspired Charles and Ted to help out on the screenhead project. So they partnered with Jonathan Julian of 410Labs, forked Kyle's project, integrated the Google Street View API and the Tropo API. These additions allowed users to send a text with instructions like "name + map" (to open the recipient's browser and bring up a Google street view of the person's geographical location) or "name + image" (to open the recipient's browser and display a Google image search of the given name).

Overall, the presentations focused on the interactivity of art and science and the advantages gained from fluid, collaborative relationships between artists and technologists. We enthusiastically supported this event because we understand the intrinsic value of the relationship between art and technology. This is why we employ agile methods in both design and development, ensuring that our UX and Development teams work together closely throughout the entire cycle of design and development. Our goal is to create applications that are both visually stunning, usable, and technologically sound. We achieve this goal project after project by joining our designers with our developers in every step of the process. Design and development don't happen asynchronously on our teams - they happen congruently, and the results are always incredible.

When the two teams work closely together to create working systems an interesting thing happens: the designer begins to understand the mind of the developer and can intuit their feedback. This helps the designer work more effectively. Additionally, the developer begins to understand the mind of the designer and begins to think of their code with visual form and clarity.

A French composer understood what could come of the innovator and the creator working together:

I dream of a collaboration that would finally be total, in which the librettist would often think as a composer and the composer as a librettist.

Jacques Ibert

We've learned a lot from working with each other and through cultivating a mutual appreciation for the idiosyncratic talents we all bring to the table. That is why we enthusiastically support events like Betascape and it's why we're always happy to talk about our process and strategy with others. We're interested in hearing how others are working collaboratively with art and technology, so please add your thoughts to the comments below!

Categories
Author

UI Kits are commonly found in most designer's toolboxes. We use them to bootstrap visual elements of a product before diving into the harder work. They are not as common with developers though, and in the spirit of this weekend's Betascape event of joining Art *and* Technology, I'm here to advocate for UI kits as a simple bridge between the design world and the development world.

Typically, every project goes through three main phases: Discovery, Design and Development. Although each phase defines a distinct position in the process, they do intermix. Generally, development starts as early as the Discovery phase, design continues to happen throughout all phases, and new requirements from the client pop up long after the Discovery phase is complete. This three-phased process is natural and effective but could be kicked up a notch by integrating a UI kit to the discovery phase.

UI Kits are packed with features that enable stylized rapid development. Bootstrap, a UI kit that was recently released by Twitter, is an all-inclusive HTML and CSS style guide that includes forms, alerts, block messages, grid columns, and even flyout menus - many of the elements that are often put off during the initial design and development process of a web app.

Using a UI Kit will completely change and enhance your design and development experience. Here's how:

  • Product Aesthetics: During the initial phase the client usually receives a few rounds of prototypes before the final approach is decided upon. With the aid of a UI kit developers can work with styles before they've even begun to work with their models and controllers, leading to better looking iterations and proofs of concepts. Adding enhanced design elements to otherwise graphically sparse POCs gives the client a better feel for their product before it even becomes a product.
  • Survival: There's a half-serious theory that babies are cute so we won't eat them. Your application, even in its infancy should be something to behold. Applications that are visually pleasing will naturally inspire the creativity of those working on it. UI kits give you style guides that include typography, palette guides, and forms so you can quickly add visual organization and style even during the rapid prototyping stages. Pretty applications are just more fun to work on.
  • Cohesive Teams: Getting a base user interface in place at the beginning of a project opens up communication and collaboration channels between designers and developers. The development team will have an earlier idea of the UI approach and be able to align the engineering of the application more closely with the design vision. Disconnects between architecture and UI will be revealed earlier in the process, allowing greater flexibility for changes and tweaks.
  • Promotes Creativity: With a good UI kit designers can put layouts together with ease and then spend their time pushing the bounds of creativity rather than pushing pixels.

A UI kit is something that should be in every designer *and* developer's tool box; it should especially be a core part of your team's Discovery phase. It allows the product to take visual shape earlier in the process, aiding both designers, developers, and the client. Style guides take care of the heavy lifting on the front-end, enabling the artists and the scientists to collaborate more effectively.

Categories
Author
Subscribe to Design