The first project was Nebul.us, the social network startup with a data visualization core. The article goes through the details of the first major update, which we’ve been cooking up the past few months since the service launched.

Read the FastCompany article about Nebul.us →

The second project mentioned by FastCompany was Morphopedia. In the article, writer Alissa Walker breaks down the deficiencies and common problems seen in Architect websites. However, she shines a spotlight on our encyclopedia website we designed and built for Morphosis, called Morphopedia. She calls Morphopedia “a fun Wiki-like listing of projects that’s infinitely easier to use”

Read the FastCompany article about Morphopedia →

We’re pleased to announce the full SlyFox font family, with two faces – light and medium. We’re charging $25 for the complete set; we hope you find this a genuinely great deal for the countless late nights we’ve put in to this bad boy. Preview the full font here: PDF preview of SlyFox Font.

If you love the font, start your purchase by clicking the Buy Now button below!
After your purchase is complete, a download link will be sent to your e-mail.

Name: SlyFox Full Font
Price: $25.00

Follow us on Twitter for more fun announcements!

Today we are happy to announce the release of SlyFox [ Download ] — a free font, caps only, but sexy nevertheless.

The font is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this blog post if you would like to spread the word. You may modify the font as you wish.

Nebul.us is a social network that serves as a way to visualize and share how you’re spending your time online. It allows people to track their browser history privately and also share content to friends. Feel free to read about the details on the UA5 Nebul.us page. Nebul.us was officially announced by Jason Kincaid on TechCrunch just this past Tuesday (11/3). Other online publications such as Infostetic have since posted their own favorable reviews.

Shortly after the launch, Fast Company picked it up and wrote a comprehensive review about Nebul.us. They had many kind things to say about our design:

“Though the service seems a bit complex, all of its features become intuitively obvious, the second you play with the graphic.” — Cliff Kuang of Fast Company

We’re also proud to announce that we launched a new website for the American Institute of Architects’ Los Angeles branch. The branch includes prestigious members such as Thom Mayne and Frank Gehry. We built the site on top of the Google Map API — the background is a giant map that updates its location based on where calendar or news items are located in the Los Angeles area.

In other news, our client Thom Mayne of Morphosis was recently appointed by President Obama to serve on the President’s Committee on the Arts and Humanities (Link).

Enjoy this week’s links, and please e-mail or twitter at us if you find anything else interesting on the webs.

Authenticity = Success

We come across too many new brands that don’t feel right for a company we know well. This is because these brands are not authentic. They are manufactured; they have nothing to do with what the company is really about – and too much to do with hyperbole and wanting to impress.

faked euphoria- a microsoft store

On the subject of authenticity, you can’t fake it — just learn from Microsoft in this embarrassing video! There’s something deeper at work in the Apple store that Microsoft can’t copy, don’t copy – innovate.

Nussbaum on Design, Disruption and Innovation

We now have the technology to engage consumers, learners, drivers, patients – everyone – and make them part of a process that generates new options, services and experiences. Of course, that means “experts” have to give up some control and that includes managers, designers, branders (is that a term?).

Brewing a Better Rating System

Love this idea, simple, fun, and strong.

What Startups Are Really Like

“I’ve been surprised again and again by just how much more important persistence is than raw intelligence.”

Shocking Barack. What just happened?

A perfect product launch for the 21st Century?

Utility Marketing: Usefulness Creates Connections

However, by employing utility, brands can effectively “walk the walk”. Manifesting their attributes through functions, interactions and behaviors. Transforming abstract concepts into tangible characteristics. Converting talk into action.

Anyways, we have some exciting announcements this week, so stay tuned, it’s going to get a little crazy around here.

The hand-drawn animals of Nacho Gil

“No programming or 3D or whatsoever,” was used to create these illustrations claims Nacho Gil. It’s truly a peculiar project where the philosophy that lies beneath the sketches is the face of the animal which is designed with interconnected vectors.

Designing Your Systems

A number of studies have revealed that game playing triggers dopamine release in the brain, a finding that makes sense, given the instrumental role that dopamine plays in how the brain handles both reward and exploration.

Culture Trumps Influencers

In your business, what is the accepted cultural convention? If you get the right fix on this, you can flip it on its head and make it your own. Or flip it on its ass and slap it like a newborn. Choose your metaphor, y’all. A must buy book.

Dutch Design Masters, in Their Own Words

A delicious video archive for anyone interested in Dutch design, featuring studio visits with Philips, MVRDV, and 15 others.

Making Your Customers Smarter

Many brands don’t seem to want smarter customers, they are afraid all that extra effort will simply go to waste or benefit a competitor, not so Intelligentsia Coffee. We’re big fans of Intelligentsia, I just wish they’d have a faster option for us busy folks

Social Media: The Need For Measurement

Really, social media marketing is no different to other forms of marketing in that it must eventually demonstrate value and be accountable.

4 questions with author Jeanne Bliss

The foundation of every beloved company is their purposeful decision to believe. They believe in their employees. This frees them from rules, regulations and processes that take away ingenuity and inventiveness and spirit.

Good Ideas With Jan Chipchase

We follow the quirky and brilliant Nokia researcher Jan Chipchase on Twitter, so when Michael of DesignNotes posted a recap of a recent lecture by Jan, we immediately ate it up. We look forward to the video.

Forrester to Music Industry: It’s the Consumer, Stupid

If you’re one of our clients, read this piece. What’s happening to the music industry, will soon strike other content industries just as hard (Newspapers, Films, etc.) What Forrester proposes is dead on — to compete against this ‘axis of digital music evil’ and truly differentiate themselves, new music products must offer excitement and uniqueness.” This has been said before, but it bears repeating: the labels need to sell consumers something they don’t already have.

This is true for not just content industries, but for service based industries, etc.

yooouuutuuube

This is a hilarious but powerful adventure. A flash video remixer that creates new experiences from a YouTube link. The final output is smooth and captivating; give it a try (or click on the screenshot above for one of our favorite examples)

Vending Machines for Healthy Foods

Junk food is too easy to acquire in this country, making it an uphill battle just to consume the healthy stuff. This vending machine is a brilliant way to solve the problem and something we’d love to see in every school and business.

Everyone’s Doing It: Brands Take on Social Media

It’s fun to watch different industries slowly dip their toes in to the social media and interactive media. The fashion world has been conservative about their approach to talking to their fans/consumers directly. One great example of someone doing it right is Uniqlo. They’ve been putting together some amazing interactive and social media pieces for years now. Their success and others, have lead to bigger and stauncher brands trying their own experiments of online social experiences. It may be a little too late for some, but it’s a great to see the creativity from the fashion world play with the space.

There were a lot of new things we had to learn, and after many hours of production we realized we had a lot of tricks that extension developers might not be aware of. We make sure the functionality is perfect, but always focus a lot of time on UI design.

I’ve come up with a list of a few UI things we discovered with firefox that really give a lot of control to the designer, so the plugin doesn’t have to look stale and generic.

Better looking preferences, using a list instead of tabs to navigate.

Initially we build our preferences using the tabbox. This worked, but seemed cumbersome for the user. Then we looked at some of our favorite plugins — we found that the web developer toolbar does a great job with their preferences.

The web developer toolbar uses a listbox rather than tabs for their preference navigation.

They use a listbox that updates an iFrame to hold the preference pane with a little bit of javascript. To make this happen, you’ll need to get your XML to look something like this (you’ll have to do your positioning and wrap it in boxes on your own):

1
2
3
4
5
6

 <listbox id="options-preference-list" onselect="changePreference(this)">
     <listitem class="listitem-iconic" selected="true" image="chrome://yourplugin/skin/options/your-icon.png" label="Account" value="chrome://yourplugin/content/options/account.xul" />
     <listitem class="listitem-iconic" selected="true" image="chrome://yourplugin/skin/options/your-icon.png" label="Application" value="chrome://yourplugin/content/options/application.xul" />
     <listitem class="listitem-iconic" selected="true" image="chrome://yourplugin/skin/options/your-icon.png" label="Settings" value="chrome://yourplugin/content/options/settings.xul" />
 </listbox>
 <iframe flex="1" id="options-iframe" src="chrome://yourplugin/content/options/account.xul" />

Then the Javascript is simply updates the frame with the selected listitem’s src attribute:

1
2
3
4

function changePreference(prefencePage)
{
    document.getElementById("options-iframe").setAttribute("src", prefencePage.selectedItem.value);
}

Styling the selected listitem background color

After we created our list, we needed to make it look better. We had no use for the default blue. There’s a simple css trick to adjust this:

1
2
3

listitem[selected="true"][current="true"] {
	background-color: #057ca0;
}

This makes the selected and the current states have a blue background. You can add other properties, such as color and what not, but the [selected="true"][current="true"] is what’s important.

Communication between windows

We created a simple Enable/Disable button to allow the user to start and stop the plugin. This would turn a preference to either true/false. The problem was that if there was another Firefox window running, it wouldn’t be smart enough to know if the plugin changed. A simple fix was to make a timer check to see if the preference has changed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

checkPrefs: function()
{
    //run the button check function
    this.fixEnableButtons();
    //update the scope (since this is in a bigger object)
    var that = this;
    //start the timer, and run this function on time up
    var prefTimer = setTimeout(function(){that.checkPrefs();},500);	
},
 
fixEnableButtons: function()
{
    //grab the icon xul dom elements
    var enablePlugin = document.getElementById('sbEnable'); 
    var disablePlugin = document.getElementById('sbDisable'); 
 
    //check the preference and update accordingly
    if(yourplugin.prefs.getBoolPref("isEnabled"))
    {
    	enablePlugin.style.display = "none";
    	disablePlugin.style.display = "block";
    }
    else
    {
    	enablePlugin.style.display = "block";
    	disablePlugin.style.display = "none";
    }
}

Detect tab change

There’s a quick and easy way to check to see which tab your window is on. All you need to do is a listener on the gBrowser in your js:

1

gBrowser.tabContainer.addEventListener("TabSelect", function(e) { onTabChange();}, false);

Anything can be styled

Firefox gives you 100% control to customize how all of the XUL items look, therefore there aren’t any excuses why your extensions don’t have to look dull!

For further reference, here are bookmarks of Firefox links:

XUL Reference – this will be your best friend.
How to build a Firefox extension
Getting started with extension development
Firefox/Thunderbird Extension Wizard – this will generate a base template to work off of, as well as a unix file to compile it. It’s pretty awesome.
Let’s build an extension — Mozilla’s guide to building firefox extensions.
Dialogs and Prompts – excellent overview on how dialogs and prompts work. Most plugins consist of dialogs, so it’s essential to read over this.

By design, morphopedia.com is structurally transparent and simple to navigate. It adheres to a “more is more,” seemingly free-for-all content strategy that upsets the typical PR conventions of strict control. — Braulio Agnese, Architect Magazine

Read the full article at online at Architect Magazine