50 Design Problems In 50 Days: Real Empathy For Innovation (Part 1)

I recently travelled 2517 miles to try to solve 50 problems in 50 days using design — a journey that would challenge me to fundamentally rethink my understanding of the user-experience design process.

50 Problems In 50 Days: Real Empathy For Innovation (Part 1)

I set myself a challenge. I wanted to test the limits of design’s ability to solve problems — big and small. To do this, I left the comfort of my computer chair and set out into the unknown. Each day, I had 24 hours to observe a problem, attempt to solve it and then communicate the solution.

Read more...

Beyond The Button: Embracing The Gesture-Driven Interface

As a mobile UI or UX designer, you probably remember the launch of Apple’s first iPhone as if it was yesterday. Among other things, it introduced a completely touchscreen-centered interaction to a individual’s most private and personal device. It was a game-changer.

Beyond The Button: Embracing The Gesture-Driven Interface

Today, kids grow up with touchscreen experiences like it’s the most natural thing. Parents are amazed by how fast their children understand how a tablet or smartphone works. This shows that touch and gesture interactions have a lot of potential to make mobile experiences easier and more fun to use.

Read more...
Advertisement Advertise with us!

Building The New Financial Times Web App (A Case Study)

When the mockups for the new Financial Times application hit our desks in mid-2012, we knew we had a real challenge on our hands. Many of us on the team (including me) swore that parts of interface would not be possible in HTML5.

Building The New Financial Times Web App: A Case Study

Given the product team’s passion for the new UI, we rolled up our sleeves and gave it our best shot. We were tasked with implementing a far more challenging product, without compromising the reliable, performant experience that made the first app so successful.

Read more...

Designing CSS Layouts With Flexbox Is As Easy As Pie

Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of the first CSS modules designed for actual layout (floats were really meant mostly for things such as wrapping text around images), it makes a lot of tasks much easier, or even possible at all.

Centering Elements With Flexbox Is As Easy As Pie

Flexbox’s repertoire includes the simple centering of elements (both horizontally and vertically), the expansion and contraction of elements to fill available space, and source-code independent layout, among others abilities.

Read more...

Exploring Ten Fundamental Aspects Of M-Commerce Usability

Everyone is talking about mobile. Some e-commerce websites are venturing into it. Mobile commerce (also known as “m-commerce”) has immense potential, exhibiting a 86% growth rate and hitting $25 billion in 2012 (set to reach $86 billion by 2016, according to eMarketer).

Exploring Ten Fundamental Aspects Of M-Commerce Usability

It’s also a whole new platform, with new interaction methods and usage contexts that introduce a host of limitations and pitfalls to watch out for when designing and running an m-commerce website. With few best practices yet established, m-commerce is, to a large degree, unchartered territory when it comes to actual implementation.

Read more...

Typographic Design Patterns And Current Practices (2013 Edition)

Good typography has always been a defining aspect of effective Web design, and this holds true especially for websites in which the emphasis is on presenting a large amount of content — specifically, articles, news and stories.

Typographic Design Patterns And Current Practices

Whether for a magazine or international newspaper, the designer of any website that distributes a lot of content has always had to consider typographic details as seriously and thoroughly as a print designer would. In 2009, we conducted a survey of then current typographic practices. Since then, responsive design techniques have clearly gained momentum and established their place in the landscape of CSS layout.

Read more...

Migrating A Website To WordPress Is Easier Than You Think

Now powering over 17% of the Web, WordPress is increasingly becoming the content management system (CMS) of choice for the average user. But what about websites built with an outdated CMS or without a CMS at all? Does moving to WordPress mean starting over and losing all the time, energy and money put into the current website? Nope!

Migrating a website (including the design) over to WordPress is actually easier than you might think. In this guide, we’ll outline the migration process and work through the steps with a sample project. We’ll also cover some of the challenges you might encounter and review the solutions.

Read more...

A Client- And Server-Side ApproachProviding The Best Mobile User Experience Possible

Now and again, I hit the swimming pool. It’s a good way to exercise, but also to relax after a long day in front of my PC. I can do quite a few laps in my front crawl, but only because I don’t use my legs much. I kick steadily to ensure that my legs stay lifted and don’t slow me down. I don’t use my legs much for forward propulsion.

Providing The Best Mobile User Experience Possible

Does this relate to mobile Web development, responsive Web design and server-side device detection? The analogy is a stretch, but yes, it does.

Read more...

Converting Our Stories Into Multi-Screen Experiences

Storytelling takes many forms. In the past, stories were told orally, with people telling and retelling myths, fables and even histories. As writing technology became more prevalent, we began to record our stories, and we told them in the pages of books.

Converting Our Stories Into Multi-Screen Experiences

Now, our society is awash in different devices and technologies, and those traditions of spoken stories and printed stories are blurring. Multi-screen narratives are being told across all kinds of platforms, pages and devices, making for truly immersive experiences. We are watching them, tapping them and learning from them.

Read more...

How To Avoid Duplicate Downloads In Responsive Images

The <picture> element is a new addition to HTML5 that’s being championed by the W3C’s Responsive Images Community Group (RICG). It is intended to provide a declarative, markup-based solution to enable responsive images without the need of JavaScript libraries or complicated server-side detection.

How To Avoid Duplicate Downloads In Responsive Images

The <picture> element supports a number of different types of fallback content, but the current implementation of these fallbacks is problematic. In this article, we’ll explore how the fallbacks work, how they fail and what can be done about it.

Read more...

↑ Back to top