Patrick Hansen.com

Do designers need to know how to code?

(there are many fields of design and this post relates more towards interaction/UI/UX design)

This question seems to be getting a lot of exposure and traction in the pipes lately from blog posts, user groups, UX resources and I have already provided my 2 cents on some LinkedIn discussions regarding this. And I was surprised to see some of the responses, which I’m sure this blog post and my perspective will trigger some interesting comments as well.

It’s definitely an interesting question and can make you think quite a bit about an answer. Especially if you are a designer who has some coding experience, which I am. I’m not claiming to be great developer, but I have and still do get into development often, mostly on the front-end. With this experience, I think it has provided me some insights that I normally would not have if I were solely a designer and it has benefitted various other aspects of my design.

But in general, my answer to this question is “NO” …it is not a simple “No” however.

I will admit, that being able to get my feet wet with some development has helped me improve my design skills, but it has not been the driving factor behind my ability to design. I work alongside many talented designers who continuously achieve successful designs without any or very minimal development knowledge. This has not prohibited them from doing their job well. This has resonated throughout the design community for many years. I also work with a few designers who do have some development experience like Leonard Souza, Juan Sanchez and Jeremy Graston.

I will add to this though, a designer should have a solid understanding of what they are designing for in order to create something that will be successful. So, understanding the frameworks, platforms, devices, and technologies involved, will help the designer create a solution that will actually work well for the problem and the level of comprehension requirements vary. This does not require the designer to learn how to code though.

Let’s take a look at an example in a different industry like architecture. An architect does not need to know how to build the building, home or bridge that they are designing. But they do need to understand some engineering principles, materials, fabrication processes and the labor that would be involved in building their designs in order to create a successful concept.

Looking at another field of design such as graphic design and illustration, where the end result is typically the design printed on a product such as a t-shirt, poster, or packaging. The designer in this scenario can still create a very successful design without knowing how to actually perform the printing methods, be it off-set, digital process, type-set, screen printing, etc. But it does help if the designer does know how to layer and prepare the design properly for possible separation requirements, scalability, and any other implementation needs.

In music, a songwriter or composer does not need to know how to play the instruments such as drums, guitar, violin, etc, in order to create a good song. However, understanding music theory, beat structure, rhythm, and other aspects of a solid musical framework that a musician would typically understand will likely ensure that the result is “good.”

And yes, there are literally “one-man-bands” out there who are skilled in multiple disciplines from songwriting to playing an instrument or multiple instruments. And they are fully capable of making great songs single handedly. There is absolutely nothing wrong with that and if you have the skills, more power to you, but finding resources who are highly and efficiently skilled in multiple areas is far less common than someone who is specialized in one area. Also, an individual that does not have the skills in multiple areas or us NOT a one-man-band, can be just as successful writing a song and then having band/orchestra separate of themselves perform and record it.

I will emphasize again, that there is absolutely nothing wrong with a person being skilled in multiple disciplines in any industry, and in this case, I do not see any negatives about a designer knowing how to code, although some would argue that it may box the designer’s mind in too much by being aware of conventional boundaries in development.

It WILL help improve upon some facets of the design process and this is based on my personal experience from my days prior to having development experience through today where I have gained more knowledge in that area. A designer could gain some of this knowledge without knowing how to code though, but with some simple research.

I still have design questions regarding development in many situations, and if I cannot answer them myself, I go directly to someone who can, a developer. There is almost always a resource available to help provide answers from that perspective and by having this point of communication into development, a designer has the tools to produce great design.

What we also see here, is that there are a lot of instances where a TEAM is involved in order to produce a successful final result, and having multiple resources who are specialists in certain areas does help create a solid result. We also see that there are times when an individual who is skilled in multiple areas can also produce a successful result and may likely do it in a more efficient manner pending on the process and pieces involved. There’s nothing wrong with either approach.

The one concept that does remain constant in either scenario is that the resource or resources involved, all should share an understanding and knowledge of the system in which they are working within in order to produce a successful result.

There are also some other roles where a designer who knows how to code may be able to satisfy other than the full fledge traditional developer role, especially with the growth of more programmatic styling and design such as HTML5/CSS3, FXG, mobile, and areas where more dynamic design is required like responsive design.

The ability to be able to implement the visual design of a UI using programmatic techniques is making the design to develop process crossover even further. A designer who may have some experience in these areas does not necessarily need to handle complex code or need a computer science background, but the designer can help develop the front-end and help ensure that the final product is more aligned with the original vision leaving the “complex” development for the primary developer(s). This is even true with more traditional styling approaches using bitmap and older technologies.

Prototyping has always been an appropriate place for a hybrid to work within and a crucial phase in UI/UX design, be it interactive or static. But interactive prototyping definitely extends possibilities and requires that additional knowledge and effort of development in most cases and it helps when a designer can also help produce a prototype, since schedules and budgets are almost always a factor.

So, even though my answer is NO to this question, I do encourage designers to explore some development. It may open a new door to you and personally, I find it quite fulfilling to be able to make your own or even another’s designs come to life.

If a designer was required to know how to develop, would that person be a developer?

Do developers need to know how to design?

I frequently come across designs that use placeholders, as this is a common practice in the design industry. I think we’re all familiar with “lorem ipsum” and “John Doe.” Those work well in most cases for filler and/or placeholder content, but can wreak havoc in your design once it goes into actual production and all of a sudden you realize that the data providing your content is about 100 words vs. the 20 you designed for and the names contain a lot more characters than John Doe, which now disrupts your design and things aren’t looking so pretty anymore when the label or greeting is being pushed into the logo of the header, because “John Doe” is now “Keaweaheulu Smithsonian.”

note: this is a slightly exaggerated example

Now, that’s only about 15 characters more than the placeholder, but it could have a huge impact on the design if not thought out properly. It is a fundamental mistake that occurs often and sometimes isn’t discovered until further into the process and can cause a domino effect in your design.

This post isn’t just about long names or words, this philosophy should be applied to the whole design overall, from text handling to containers, lists, etc.

In the interactive realm, considerations for multiple screen sizes has been around for years, but it is more important now than ever with all of the devices popping up every other week. Making sure that your design fits the screen it is being displayed on is key, but making sure the content that is being displayed is usable and valuable is even more important; you can’t just truncate everything, that’s just a copout.

Any aspect of your design that will contain content, especially dynamic data that you may not have a lot of control over, needs to be considered in a “worse case scenario” presentation. It may not look pretty and when most designs are being created, it is preferred to have a nice and pretty best case scenario or the “happy path” view, especially if you are presenting to a client. I don’t disagree, but the design should consider those other scenarios be it edge case or not. And if it is so edge case that the probability is almost 0 that means it isn’t impossible, thus there still needs to be a rule and design to define what would happen under those circumstances, as it will go into development and code will have to instruct the UI on what to do and how to handle content.

You don’t have to show that worse case scenario design to the client if isn’t ideal or required, but at least you know that you have taken the time to plan and have a viable solution for it when and if it occurs. If you can make that scenario look good, then more power to you and your design has probably been well thought out to handle scalability without much impact to the integrity of the design.

In short, as much as placeholder data is easy to throw in and efficient, make sure your placeholder content mimics the real world data as much as possible and always throw in that wild card like the Hawaii state fish, Humuhumunukunukuapuaa, just to see how well your design will handle a scenario around that.

With the amount of new mobile and digital devices that are on the market today, many companies are trying to jump on the “app” bandwagon. This is a natural response, from both a marketing aspect and a business perspective.

Marketing wants to take advantage of exposure in the latest trend channel, and business sees new opportunities to reach their customers and provide additional pipelines of potential revenue. The main issue that I constantly see lately is that the decisions to try to provide a presence of your company in a certain digital environment or platform is narrow sighted and many of these companies are losing sight of context, usable purpose or utility and do not consider all of the channels that make up this digital ecosystem to distribute content and services through effectively.

Making an application for the sake of jumping on the “app bandwagon” isn’t going to provide the returns that most would anticipate, especially when it is so general, there is no context on how it relates to your business. Some companies believe that even if their app provides some form of entertainment, like a basic puzzle game, that it is valuable to their customers and will provide a venue for branding, advertising and exposure that customers can absorb. This can backfire, especially if the application turns out NOT to be valuable to the user. They will not only likely discontinue using the application, but your company’s face is now associated with an application that is collecting dust or has been deleted. Offering an application that provides entertainment isn’t bad, but provide solid context on how it relates to your business and features that can help connect users to your brand.

Utility is strongly related to my previous point about context. An application that does nothing more than associate your business with an app is practically useless. It needs to provide the user with some functional value.

For instance, if your business is a ski/snowboard related, you could provide a user with a variety of features in an application. I’m going to throw out a hypothetical and simple scenario. One option would be to provide a ski or snowboard game, where the user can ski down the run and hit jumps to score points. That’s not a bad idea, until the user becomes bored of the game due to low budget and poor strategy and the user decides moves on to something else, because the app provides nothing else to the user that is truly valuable other than brief entertainment.

Now, the obvious feature set would be to provide the user with snow reports and weather conditions, a feature that not only possibly draw the user back to the app in the future, but really DRIVE the user back to check the conditions, because that is what the user wants to know, plus the data constantly changes and updates. On top of that, a map of the resort would be another valuable feature that would serve the user with some purpose. The entertainment or game side can be useful, say the user is in the lodge having a beer and wants to kill some time, but still experience the sport. Give the user something that other apps cannot or do not do very well. The ski reports and maps are obvious choices in this case, and although they would be useful, there is so much more that can be done. You can take these features to the next level like Vail Resorts’ EpicMix mountain, mobile and online experience.

This system allows tracking of your movements with RF receivers throughout their mountains from RF chips in your season pass, calculating your achievements, days on the mountain, locations, vertical feet traveled, history and more. It also allows you to connect to others and share your stories. They added an incentive/reward pin system for accomplishments, which in a sense is a game, but unlike the one noted earlier, this feature really engages the user in a real world experience and crosses over into a game. This is one aspect of gaming mechanics that can help your app succeed and keep your users engaged, even if it is not a game.

A solid understanding of the various channels that your content and services will thrive in is key to being able to provide the user with the appropriate data during the appropriate time and on the appropriate device.

This model has already been in practice with businesses that have online sources, television, radio and possibly print. A major issue is distinguishing between the content and mediums of presentation. Some online sources simply mirror exactly what was printed, yet the online space is interactive and you could provide the user with so much more content and enhance the experience with visuals such as animations and slideshows that cannot be accomplished in a print format.

Centralizing your data is another important factor. This is NOT A NEW concept, as many businesses and sites have been doing this with a simple database and then pulling the desired data/content as needed to present on the intended device or medium. This makes it exponentially easier to manage content even though you may have several outlets. It is important to decipher which parts of that consolidated data should be distributed to which device and how to present it.

Simply resizing your content to fit on an iPhone doesn’t really mean it is optimized for iPhone. And the dataflow should not be viewed as a waterfall or pyramid distribution system, where many models have a primary source of content and then it deltas outward to various portal types with minimal adaptation or tributaries that feed downstream. Info and content should also be able to feedback upstream and/or laterally to other distribution points, so that when content is added or optimized mid-stream, it could also be used elsewhere in the system even back to the source, especially when that other outlet evolves.

Utilizing the hardware of specific devices like a smart phone, allows you to provide more features and present content that is catered to a user on the move. Geo-location to help a user find out where they are, and where they need to go can be a very valuable feature for a mobile device app. Tapping into the accelerometer allows for unique experiences that would only suit a mobile user, like scrolling content by tilting the device due to being on the move and having limited interactions or tracking speed of the user who is on the move. These are things that would not really benefit someone at their desk, but are great for the mobile world.

Flipboard for iPad is a really great example of an app that can adapt and restructure content for the device that it is on and the interactions the device allows. Most of the content that is pulled from Flipboard already exist somewhere on the web, but Flipboard reformats and presents it to the user in a very intuitive manner that takes advantage of the iPad’s touch screen, interactions and resolution.

One blog post is not going to cover all aspects of the digital ecosystem and can’t guarantee to make your business successful, but with some better insight to the platforms, research, and user experience considerations, you can take the correct steps in understanding how you can propel your business in the right direction with your interactive content. These are just some thoughts I had recently.

I’m just going to throw down a quick tutorial on how to create a custom skin for a Spark Button for Flex 4 using Flash Builder.

Everyone has their own folder structure for their projects, so mine may differ slightly from yours.

Assuming you already have a project started in Flex and a place to put your skins and/or CSS, we can start.

In Flash Builder, go to the directory where you want your skin (mine is src/assets/skins). Right-click to open the contextual menu or click File and go to “New>MXML skin.”

This will prompt a dialog to choose the name and type of skin you want to create.

Go ahead and call the skin what you want, in my example it will be called “Button_custom_skin”
(you don’t have to put the extension which is .mxml)

Now choose the “Host Component,” which is essentially the default component type you want to base this skin off of. You can search for it in the search field, and in this case we are looking for  simple “Button.”

Now after the Host Component is selected, you have the option to have it create a copy of the Spark skin template in your new file or you can deselect the CheckBox and start from scratch. If you’re unfamiliar with all of the pieces of a Button skin, I recommend you create a copy and then strip out the unnecessary items.

Open your new skin mxml file (it should open automatically upon creation).

You can see that Adobe has some comments in this file from the template and some script*. For the button we are creating you can remove all of the comments and the script tag and everything in between.

*Most of the script items provide the customization style properties for use with CSS and also some resizing and scaling management for all of the various pieces of the default Spark skin, like shadow, borders, highlights, etc., so if you did make a change to one item like the corner radius, you don’t have to worry about changing the radius for every single graphic element.

Now we still have all of  the graphical pieces, you can strip out all of this too, but leave the text layer near the bottom of the file. This is the label of the button which we will leave intact.

<?xml version="1.0" encoding="utf-8"?>
 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
			 minWidth="21" minHeight="21" 
			 alpha.disabled="0.6">
 
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
 
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- top layer: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="14" right="14" top="2" bottom="2">
		<s:filters>
			<s:DropShadowFilter distance="1" blurX="0" blurY="0" color="#000000" alpha=".4" angle="270"/>
		</s:filters>
    </s:Label>
 
</s:SparkSkin>

Now, we have a pretty empty file to start our skin. We’re going to make a button like the one shown below. Nothing fancy, but enough for this post.

Let’s break down the button into the parts we will need to create:
1) Border
This design has a small border around the edge that has a gradient. You can accomplish this with a “stroke” with a gradient fill. By default, strokes are set inside, so they won’t effect your component’s size. But the issue I have experienced with using strokes with rounded corners is that the corners get a little screwed up as if the stroke is on a fractional pixel. So, for our border, we will draw another rectangle behind the inner fill, and set the fill 1px in all around.

2) Fill
This is a rounded rectangle with a gradient from top to bottom. This will be drawn with a Rect and we will apply a corner radius (xRadius) property to it. No matter what size the button is in the layout, that radius will maintain the same value. Who needs scale 9 when you go this?

3) Label
We already left the Label from the Spark skin copy, but we need to add a shadow filter to give that inset look.

4) States
We need to ensure we have the correct appearance for all of the stats of a button: up, over, down, and disabled.

* You will also notice in the SparkSkin tag, there is a “minHeight”, “minWidth” and an “alpha.disabled” property. These are global parameters for this skin and you can adjust these if desired.

First, we will create a rectangle with corner radius (xRadius) and give it these attributes which I have pulled from the design:

<!-- border -->
   	<s:Rect height="100%" width="100%" radiusX="6"
			top="0" right="0" bottom="0" left="0">
	   <s:fill>
		   <!-- gradient fill colors - default ratios are 0,1 -->
		   <s:LinearGradient rotation="90">
			   <s:GradientEntry color="#ffcc00"
								/>
			   <s:GradientEntry color="#ff9900"/>
		   </s:LinearGradient>
	  </s:fill>
   	</s:Rect>

Next, we will draw the inner fill rectangle which will need to be 1px from top, right, bottom, left to ensure the border is exposed underneath and “appear” that it is a 1px stroke. Note that I am making the xRadius 5 – 1 less than the fill since it reside 1px inside. You could write some script to make this a variable to be shared across any object with this attribute if it was the same.

<!-- inner fill -->
	<s:Rect height="100%" width="100%" radiusX="5"
			top="1" right="1" bottom="1" left="1">
		<s:fill>
			<!-- gradient fill colors - default ratios are 0,1 -->
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#ff9900"
								 color.over="#fabe00"
								 color.down="#cc6600"/>
				<s:GradientEntry color="#cc6600"
								 color.over="#e17b00"
								 color.down="#ff9900"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>

We have the base state of our button (up). Now let’s go back and add the color variances in the states. You do this by adding color.state=”#XXXXXX” as needed. Our border does not change and the disabled state we ahve already declared in the SparkSkin tag to be alpha.disabled=”.6″

So here is our code so far for the graphics.

<!-- border -->
   	<s:Rect height="100%" width="100%" radiusX="6"
			top="0" right="0" bottom="0" left="0">
	   <s:fill>
		   <!-- gradient fill colors - default ratios are 0,1 -->
		   <s:LinearGradient rotation="90">
			   <s:GradientEntry color="#ffcc00"
								/>
			   <s:GradientEntry color="#ff9900"/>
		   </s:LinearGradient>
	  </s:fill>
   	</s:Rect>
 
	<!-- inner fill -->
	<s:Rect height="100%" width="100%" radiusX="5"
			top="1" right="1" bottom="1" left="1">
		<s:fill>
			<!-- gradient fill colors - default ratios are 0,1 -->
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#ff9900"
								 color.over="#fabe00"
								 color.down="#cc6600"/>
				<s:GradientEntry color="#cc6600"
								 color.over="#e17b00"
								 color.down="#ff9900"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>

Now, here is our full skin mark up code. I am going to reserve some attributes to be handled in the CSS to pull in this button, like the font-size and font-weight, but you could also hard code this int the skin as part of the Label attributes.

<?xml version="1.0" encoding="utf-8"?>
 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
			 minWidth="21" minHeight="21" 
			 alpha.disabled="0.6">
 
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
 
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
	<!-- border -->
   	<s:Rect height="100%" width="100%" radiusX="6"
			top="0" right="0" bottom="0" left="0">
	   <s:fill>
		   <!-- gradient fill colors - default ratios are 0,1 -->
		   <s:LinearGradient rotation="90">
			   <s:GradientEntry color="#ffcc00"
								/>
			   <s:GradientEntry color="#ff9900"/>
		   </s:LinearGradient>
	  </s:fill>
   	</s:Rect>
 
	<!-- inner fill -->
	<s:Rect height="100%" width="100%" radiusX="5"
			top="1" right="1" bottom="1" left="1">
		<s:fill>
			<!-- gradient fill colors - default ratios are 0,1 -->
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#ff9900"
								 color.over="#fabe00"
								 color.down="#cc6600"/>
				<s:GradientEntry color="#cc6600"
								 color.over="#e17b00"
								 color.down="#ff9900"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
 
    <!-- top layer: text -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="14" right="14" top="2" bottom="2">
		<s:filters>
			<s:DropShadowFilter distance="1" blurX="0" blurY="0" color="#000000" alpha=".4" angle="270"/>
		</s:filters>
    </s:Label>
 
</s:SparkSkin>

Now create a CSS file or add your CSS directly in your page. If you make an external stylesheet, make sure to reference the file in your main application.

I am using Button as my Class, and my selector is customButton, but you can name it anything.

s|Button.customButton {
	skinClass: ClassReference('assets.skins.Button_custom_skin');
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
}

Now in my application, I have 3 buttons on the stage.

1. Spark Button with no styles
2. Custom Button
3. Custom Button made to look like the design.

Here is the markup of the Application.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600">
	<!--
	******************************************************************************************************
	// ** Project info: Custom Skin for Spark Button Demo **
	//	Author: Patrick Hansen | http://wwww.patrickhansen.com
	******************************************************************************************************
	-->
 
	<!-- default fx declations tag (not really needed for this example) -->
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<!--Styles -->
	<fx:Style source="assets/css/base.css"/>
 
	<!-- VGroup Container -->
	<s:VGroup gap="20">
		<!-- button example -->
		<s:Button label="Unstyled Spark Button"/>
 
		<!-- custom button example -->
		<s:Button height="24" label="Custom Skin Button" styleName="customButton"/>
 
		<!-- custom button example as design noted -->
		<s:Button height="24" label="MY BUTTON" styleName="customButton"/>
	</s:VGroup>
 
</s:Application>

Note: I left the height attribute (height=”24″) to be applied in the layout, in case this style may be used on other sized buttons, but you could had code this into the skin if you prefer.

View the demo here (right click to view Source):
http://www.patrickhansen.com/demos/flex/SparkButton/

Download the Source:
http://www.patrickhansen.com/demos/flex/SparkButton.zip

By the way, tools like Fireworks, Photoshop and Illustrator have export to FXG options where you can obtain most of this mark-up easily, but I wanted to demonstrate creating this skin from scratch.

A colleague of mine and awesome webmaster, Aaron Congleton,  just sent me to a great article on designing with color, Contrast is King, on A List Apart. Definitely a nice read with some great resources and information to help you design in color and consider accessibility and viewing aesthetics and balance.

http://www.alistapart.com/articles/contrast-is-king/

A great concept that is mentioned is the practice of viewing your design in black and white to see where color may fail and how the design appears including contrast in a low fidelity scenario. I used this approach recently creating some test for form validation and the issues that can arise when using color only for indication. Luke W. can tell you all about that.

There is also a tool that was mentioned in the post for http://colorschemedesigner.com/

This is an awesome resource that provides designers many tools and options to create their color palette similar to Kuler, but also accessibility features like the ability to view your palette via various color blind type perspectives.

Oh yeah – it is built in javascript!

The Photobucket Visual Search application we (EffectiveUI) designed and developed won the Web Marketing Association Outstanding Achievement in Web Development award for 2009!

This is a great acknowledgment as we faced several challenges working on this application and also developed it in a fairly young technology, Microsoft’s Silverlight! I was the lead UX Designer on the application working with a very talented team. It was a great experience to get into Microsoft Expression Blend & Design to implement the styling of the application and being exposed to XAML and how scalable it is to work with, especially when collaborating with development.

I have written a post previously about this application, you can catch up on it here:
My Visual Search Post

Here is WMA’s post about it:

http://www.webaward.org/winner.asp?eid=13855

Visit Photobucket’s Visual Search Application:

http://photobucket.com/visualsearch/

We (Effective UI) just finished up a new Silverlight application with Photobucket.

The app is called Visual Search, and is designed to encourage visual exploration within Photobucket’s massive library of photos and users, while allowing you to share your results externally using Windows Live Messenger.

Initially, the application will serve the user some featured media results from Photobucket’s site. You can either go from there and dig into the displayed images, or you can search “related terms” that have been gathered from those images. You can also dig into the user’s album in which that image resides, which I think is a really unique aspect of this model. The user should hopefully end up in a result set that they may have never expected, and the user will have explored much more content along the way.

The user can also initiate a custom search and enter any term they desire. The application will then provide results for that term along with related terms.

Again, this application is really intended to not only provide users with direct results of a search term, but also introduce the user with related results and even the source of the result. This is not a revolutionary approach, as many system deliver related items such as an e-commerce site or standard search engine, and social networks such as Photobucket allow users to dig into the source’s (another user) account to view other results. However, the delivery and experience of Visual Search really encourages this format of exploration with minimal effort on the part of the user. I would say it is fairly easy to venture through the various veins and arteries of Photobucket’s library of images and users.

You can also zoom into the images for a larger more detailed view, and you have similar options to the website where you can download the image, copy HTML code embed code or the link code to share.

Another unique aspect is the ability to share using the new Windows Live Messenger bar which is planted at the bottom of the page. This component is actually a javascript/HTML based module that lives on top of the application and can communicate with the Silverlight app for various events including sharing out images you find to other users in your buddy list.

As an example, if a user have a Windows Live account, and the user finds a photo they like and would like to share with a buddy in their contact list, you can easily trigger your contact list view from within the Application by selecting the “Share with Windows Live” button. The user can then select whom they would like to share this out to and it will initiate a chat and pre-populate your message with the link to that image.

This is the first round of the application and I’m not sure about the future of it, but many additional features have already been defined and noted.

Visit: http://photobucket.com/visualsearch/

I had the opportunity to work with Blend 3 beta for most of the production. Expression Blend 3 has some really nice features and improvements, although there are still some little nuances about the whole design to dev work flow, but the new tools like Blend 3 should begin making this a little smoother.

I’m getting a little more familiar working with XAML now, and I am liking the framework and concept. I have also been working with Flex and the MXML (FX-G) framework for graphical mark up, ans they are on a similar level. If you are purely a visual designer with no code experience, do not be intimidated by looking at XAML. It is pretty straight forward and Blend has both code/design and split views. You can see how Blend writes the mark up as you design visually, and this is a great way to begin learning XAML.

Joshua Topolsky from Engadget was on Late Night with Jimmy Fallon March 9, 2009 and demoed the highly anticipated Palm Pre phone. Form the demo, it definitely looks like it can give iPhone a little run for its money. His drummer, and one of my favorites, ?uest Love is also a geek and was pretty stoked on the phone, especially with it’s touch screen plus physical QWERTY keyboard. It is scheduled to release within the first half of the year, but who knows. The inductive charging ability is a very nice feature as well.

Patent drawings were unveiled recently indicating that Aapple may be heading up a 3D OS, a “Multidimensional Desktop.” The drawings were submitted to the U.S. Patent and Trademark Office in June of 2007, although just now surfacing.

The diagrams depict a 3D version of the current OS, including walls on right and left sides, and ceiling near the menu bar, and the floor where the dock could reside among other objects and filings like stacks.

Is this the “New” direction of common interfaces?

Although it can provide new options and benefits, the obvious is the loss of screen real estate. The metaphors are easy to grasp and I can see the potential for possibly storing your palettes when using an application like Photoshop, on the “walls.” In that case, it does free up some screen space as the items on the walls will be distorted and reduced in width. Nothing that collapsed palettes which currently exist can’t handle more effectively. I would like to see these other dimensions suppressed and brought forth only when needed, such as the “Hide Dock” feature.

It is interesting to see that Apple is stepping up as a pioneer in this realm of 3D, which has been abused and in a few cases, appropriately applied to an application which has a more traditional foundation. To see that this concept may be applied to an OS is further evidence that the exploration of the 3D realm should be increasing not only in the gaming & entertainment realms, but to see how it may improve other veins of software UI/UX design.

I was introduced to this game last night and after the first game, I was addicted and determined. It is a great game to help build visual coordination and to test it.

It is fairly simple, you’ll catch on in a minute, so no need to really explain it. In short, you will try to perform geometric tasks such as bisecting angles, and finding the center of a circle, and the more accurate you are, the lower point score you average. The better you are doing, and the less variance you are off by.

I got a 5.8 on the first try, but after a few more rounds I was getting the hang of it. By my last attempt for the night, I ended up with a 1.38! Yeah.. I’m going to brag, and I have the screenshots to prove it. I suck at Halo and Guitar Hero, but I can play this game.

I had my 15 minutes of fame as 1st place on the best of the last 500 and 2nd on the last 10,000 games. So many games are played, that you will probably be wiped off the list in less than a day, since it goes by best score within # of games played, not simply the est score.