Get The Knowledge – a collation of online articles by the people at Techdept. » Design

Need help with responsive testing?

TechDept — Fri, 06 Jan 2012 10:00:17 +0000

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size, more info on that here.

By Ben Beckford for Chrome Developers Tools.

Design the invisible to tell better stories on the web

TechDept — Mon, 02 Jan 2012 13:30:00 +0000

For design to be meaningful we need to tell stories. We need to design the invisible, the cues, the messages and the extra detail hidden beneath the aesthetics. It’s all about the story.

From verbal exchanges around the campfire to books, the web and everything in between, storytelling allows us to share, organize and process information more efficiently. It helps us understand our surroundings and make emotional connections to people, places and experiences.

By Robert Mills for 24 Ways, 14 Dec 2011.

Designers behind facebook timeline: 5 keys to creating a UI with soul

TechDept — Sun, 01 Jan 2012 16:25:57 +0000

Nick Felton and Joey Flynn say that when creating a page to tell someone’s life story, you have to throw out the UI rulebook and study how people recount memories.

For most of computing history, interfaces have been about function. Word processing programs help you compose documents. Banking websites help you make transactions. Sites like Flickr help you display and share photographs.

But Facebook’s Timeline (the new version of the user profile which is slated to be released to the general public “in the next few weeks”) wanted to do something more: It wanted to convey a feeling. Two feelings actually: The feeling of telling someone your life story, and the feeling of memory–of remembering your own life.

By E.B.Boyd for Fast Co Design, 19 Dec 2011.

Dropbox’s attention to detail on their download page

TechDept — Fri, 30 Dec 2011 13:00:41 +0000

Sometimes good UX is about being clever. Sometimes it’s to make the user happy or smile. However, when the success of your product depends on new, possibly inexperienced users successfully downloading and installing it, good UX is the difference between success and failure.

I love what Dropbox has done here. I’ve noticed it for years and mentioned it in talks and to friends but I wanted to call it out here because it’s so thoughtful.

When you go to download Dropbox, here’s what you see on Internet Explorer. Note they’ve used a three step tiny screenshot sequence. Each of them isn’t a real screenshot, but rather “evocative” of the thing an IE user would see. For example, the second User Access Control dialog isn’t real, but it’s close enough that it makes the point while still fitting into width of the page cleanly. Their Welcome to Dropbox Setup screenshot is the same way, distilling the essence of what’s coming while keeping the design consistent

By Scott Hanselman for Scott Hanselman’s computer Zen, 07 Dec 2011.

Easier is better than better

TechDept — Tue, 20 Dec 2011 09:08:59 +0000

In his book, The Paradox of Choice, Barry Schwartz comes to an interesting conclusion involving human choice.

“People choose not on the basis of what’s most important, but on what’s easiest to evaluate.”

Common sense would dictate that if you were given a list of choices, you would choose the one that is most important to you, when in reality humans usually choose the one that is easiest for them to understand and evaluate. Very often we do so because we don’t have the time to put in the research necessary to make an informed decision. Politicians are rarely elected based on the majority of people doing research on their background and the policies they support. They are elected for the fact that people can relate to the message they are spreading and because we have heard of them before.

By Paul Scrivens for Smashing Magazine, 28 Nov 2011.

The perfect paragraph

TechDept — Sun, 18 Dec 2011 09:05:07 +0000

In 1992, Tim Berners-Lee circulated a document titled “HTML Tags,” which outlined just 20 tags, many of which are now obsolete or have taken other forms. The first surviving tag to be defined in the document, after the crucial anchor tag, is the paragraph tag. It wasn’t until 1993 that a discussion emerged on the proposed image tag.

Bursting with imagery, motion, interaction and distraction though it is, today’s World Wide Web is still primarily a conduit for textual information. In HTML5, the focus on writing and authorship is more pronounced than ever. It’s evident in the very way that new elements such as article and aside are named. HTML5 asks us to treat the HTML document more as… well, a document.

It’s not just the specifications that are changing, either. Much has been made of permutations to Google’s algorithms, which are beginning to favor better written, more authoritative content (and making work for the growing content strategy industry). Google’s bots are now charged with asking questions like, “Was the article edited well, or does it appear sloppy or hastily produced?” and “Does this article provide a complete or comprehensive description of the topic?,” the sorts of questions one might expect to be posed by an earnest college professor.

By Heydon Pickering for Smashing Magazine, 29 Nov 2011.

Content strategy within the design process

TechDept — Fri, 16 Dec 2011 09:01:40 +0000

The first thing to understand about content strategy is that no two people understand it the same way. It’s a relatively new — and extremely broad — discipline with no single definitive definition. A highly informative Knol on content strategy defines it as follows:

“Content strategy is an emerging field of practice encompassing every aspect of content, including its design, development, analysis, presentation, measurement, evaluation, production, management, and governance.”

This definition is a great place to start. Although the discipline has clearly evolved, this breakdown of its scope makes perfect sense. The aspects of content strategy that matter most to Web designers in this definition are design (obviously!), development, presentation and production. In this article, we’ll concentrate on the relationship between content strategy and design in creating, organizing and displaying Web copy.

By Brad Shorr for Smashing Magazine, 02 Dec 2011.

Venturing into responsive design

TechDept — Fri, 16 Dec 2011 09:00:19 +0000

A couple of weeks ago, I summarized a few thoughts on mobile web apps vs native apps. Responsive web design is one approach to making mobile web apps and web sites.

In short, responsive design is essentially a way to make your website’s design fit across all sorts of screen sizes. When implemented well, your design will be able to seamlessly scale up and down, fitting whatever screen it is displayed on. In other words, your website will work on desktop computers, netbooks, tablets and smartphones, all at the same time. You don’t serve up different versions of the same website to your visitors, you just change styles to fit different screens. A List Apart has written a nice in-depth article about responsive design which serves as a good introduction to the concept.

By Jamie Appleseed for Baymard Institute, 21 Dec 2010.

The sketchbook of susan kare, the artist who gave computing a human face

TechDept — Tue, 13 Dec 2011 09:00:01 +0000

Point, click.

The gestures and metaphors of icon-driven computing feel so natural and effortless to us now, it seems strange to recall navigating in the digital world any other way. Until Apple’s debut of the Macintosh in 1984, however, mostof our interactions with computers looked more like this:

How did we get from there to here?

By Steve Silberman for PLoS Blogs 22 Nov 2011.

Cool web animations

TechDept — Sun, 11 Dec 2011 09:00:51 +0000

Paper.js — The Swiss Army Knife of Vector Graphics Scripting.

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Visit site