Tag Archives: design

programming and designing in the browser

Leave a reply

I remember a talk we had back in the early nineties, while I was working at Spry / Internet in a Box, the idea had come up of creating an OS that was entirely based on a browser. At the time the browser was NCSA Mosaic for use and an early beta of Netscape Navigator for the competition.  So to say it was too early to talk about is a bit of an understatement. However, it really felt the next logical step. Creating applications and services that ran entirely in the browser would have been crazy hard then with the limitations of  HTML. We didn’t have JavaScript or CSS yet. Everything we built was done as server side code. CGI applications written in either C/C++ or Perl. My weapon of choice became Perl and SQL for all my programming needs. With everything happening on the server you were a little limited with what you could do. Oh and most users were using a 56k dial up modem to get online.

Fast forward to today and a web application developer has a huge and amazing toolbox at their disposal. Rails, ASP.NET, Python, PHP, Flash, Silverlight, JavaScript, HTML5, CSS, Web Services like JSON, and on and on. Thanks to all the hard word and loads of talented people the limits are no longer the technology or access speeds. The limits now are only our creativity. Now we have geolocation, video, animations, and sound.

The only limit that we’ve had up until recently was that if you wanted to create interactive content you needed a client application running on your local machine. To create Flash you needed to purchase, install and use the editing tools locally. Which brings me to the point of this post. I only recently found out about a new crop of web based IDEs (Integrated Development Environment). In no particular order.

Coderun

CodeRun Online IDE

You can create and edit .Net , Silverlight and many other types of projects. This is the best damn thing ever. I hope someone at Microsoft buys these guys.

Cloud 9

Cloude 9 IDE example

All your stand website editing power with Git and Mercurial integration. Paid accounts offer many must have features but the free version can get you up and running quickly.

Akshell

use this to create your web apps in JavaScript. Plain and simple just the way it should be.

jsFiddle

jsFiddle example

It’s not a full fledged IDE, but it is a great way to start learning, creating and sharing JavaScript snippets. Fantastic way to explore and experience in realtime how the code works.

Now for the design side of things

It’s not nearly as new but the design side has been very well covered too.

Photoshop.com

The current leader in desktop design has an excellent head start on the web with their Photoshop.com service

 

Aviary

Aviary is quickly becoming a designers hub online. What started as a Photoshop lite application for minor photo tweaks has quickly evolved in to one of the best collections of creative applications that run in the browser.


Picnik

My personal favorite web based photo editing tool. I became hooked on Picnik thanks to its early Flickr integration that made it so easy to jump right in and edit my photos already on Flickr.


Working with Sketch Flow

Leave a reply

The official release of Silverlight 3 and Expression Studio 3 was last Friday and I’m really excited about how these products have been evolving. My favorite new feature is Sketch Flow, which I’ve been playing around with for a little while now and have found it to be a great way to build dynamic prototypes.  From my previous post on Wireframe Prototype Fidelity I would have added a bit on Sketch Flow if the product had existed at the time.  I think it fits a gap in the tools of the UX professional who works on rich interactive applications.  For myself I was either building static images in OmniGraffle or Adobe Illustrator or I was mocking things up in HTML with JavaScript.  Sometimes I’ve built stuff using Flash or even modeling and rendering an animation in 3D tools like Maya to best get the concept across. I think Sketch Flow really brings it all together for a quick way to rough out the experience. My favorite part is how Sketch Flow lets you put in fake data driven content. It’s hard to explain how awesome this is, to get a good understanding check out the video below.

Check out this great video introduction to using Sketch Flow from Mix earlier this year:

To keep up to date be sure to follow the Silverlight team blog, Soma’s blog and Scott Guthrie’s blog

Play

Podcast: Play in new window | Download

IA / UX Deliverables

Leave a reply

Research

Initial research around the application, service. Interviews of stakeholders and customers. Reviewing competition.

Outlines

Gathering information in outline form can be an extremely helpful way to quickly collect short bits of information like product names and then group and sort them under different headings. I almost always start my projects here. It really helps me see the logical connections between the information and helps me ask questions about the classification and naming systems that are already in place.

UI Flow Diagrams

User interface flow diagrams are created to model the interactions that a user has with a product or service. The diagram primarily will reflect the behavioral view of a single use case along with some optional pathways.

Paper Prototypes

Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work.

Wireframes

A wireframe is a basic visual guide used in interface design to suggest the structure of an interface and relationships between its pages. Typically, wireframes are completed before any artwork is developed.

Functional Requirements document

This documentation describes the behavior of a system. The documentation typically describes what is needed by the user as well as requested properties of inputs and outputs.

Usability studies

It is a technique used to evaluate a product by actually testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system. This is in contrast with usability inspection methods where experts use different methods to evaluate a user interface without involving users.

Use cases

Use cases describe “who” can do “what” within the system being designed. The use case technique is used to capture a system’s behavioral requirements by detailing scenario-driven threads through the functional requirements.

User Studies

Observing how people interact with products, services and experiences in order to come up with new solutions. User studies can help reframe a problem in a new way. They can also help see things that have gone unnoticed before.

Content Strategy

Details how content is/should be used on a site, how to increase value

Content Audit

Records type/location of site content, recommends action for each item

Content Schedule

Plans how content should be re-purposed/created for a site, who should do it, etc.

Search Strategy

Outlines how search should work for a site, what technologies can be used, how it integrates with other sites

Search Interface Design

Plans how the search system will ingest queries and produce a Search Engine Results Page, plus the interface design for that page

Taxonomy Strategy

Outline how to design a taxonomy(ies) for a site, and how they will work

Meta Data Schema

Detailed model of the taxonomy(ies) using customer data

Enterprise Content Management Strategy

Overall plan for how an ECM can be used on a customer’s site

Content Modeling

Plan that details content types and content elements within a content management system

Content Publishing Workflows

Details the entire lifecycle of content for a site, from creation to archive