.
Know Your Audience

In preparation to building the Square Circle website we needed to establish who our target audience was. It's a two-fold process, establishing whose eye we needed to catch and clarifying the presentation of information accordingly.

The goal of this process was to make a choice on how to present the information in a way that was easy to view, functional and visually compelling to the target audience.

An issue with many websites is that users often have to hunt for information; nothing can spoil an attractive user interface more than users being confused about how to use it.

To help avoid this we decided to make use of the technology available to us, i.e. Broadband, Flash and Flash video.

This way we could put across the message we wanted to portray in a televisual manner.

Site Concept

The next stage was coming up with a concept that was eye-catching and innovative. We needed a concept that would be memorable, a concept that was truly interactive.

The design and development team worked closely developing in the classical format of 'Form follows Function', i.e. deciding what we want to say before we touch the design.

The concept behind site is familiarity. We wanted to create an environment that people would instantly recognise and transfer the users' knowledge of how things work in the real world into a website that performs the same function.

We chose something we are all familiar with, the office.

The site needed to break away from the traditional interfaces that we tend to see daily. We wanted something where users would not feel restricted, something where they could explore.

Once sufficient analysis and information gathering had been conducted, it was appropriate to move into the production.

Design

The design and development team worked closely to develop visuals, structure and interactions.

The initial design concept centred on a unique sofa design, which reflected the Square Circle symbol. Image 1, image 2

The sofa was the centrepiece of a 3D scene in which the user could fly around to various sections to interact with the content.

Due to increasing file size we took the decision to streamline the site and cut out the 3D transitions from section to section. The sofa became a meeting table and the sections fell into place from there.

The basic idea for the sections was to give an open and approachable feeling, a feeling the visitor is in our office and is welcome to explore information that forms Square Circle.

We methodically removed any unnecessary clickthroughs, enforcing a two click maximum rule.

The portfolio with its televisual approach illustrates this. With a single mouse click you can view the entire section; and the use of video is effective at holding the consumer's attention.

Table 0bjects such as coffee cups, biscuits and scene 0bjects such as warm lighting, cool drinks fridge and plant pots where all created to give an open welcoming feeling to the site. Sections aren't just appealing to the eye; additionally they pleasing to the mind.

Development

We consider ourselves fortunate to have a strong development team. It was quickly decided that the website needed to be developed in ActionScript 2.0. This enabled an 0bject Oriented Programming approach.

A framework was developed to suit the creative; this meant that different parts of the site could be developed simultaneously. Using this approach shortened the development stage significantly.

Any website created today with regular updates is generally dynamically driven.

With Flash there are many ways of handling this including: simple text files, HTTP requests, XML and Flash Remoting.

Each of these has their uses, but since we would be displaying a high volume of content we needed a way of accessing data as quickly as possible, without the need for downloading a sizable file and then parsing it.

Flash Remoting was the obvious choice. It enables tight integration between the Flash client and the server, exposing server-side functions through a Flash gateway with responses as data 0bjects native to the Flash client.

Amongst the many flavours of Flash Remoting our first choice is AMFPHP, as our preference is to work within a LAMP environment.

Development tools

Flash IDE

Eclipse

Flash Development Tool (Eclipse plug-in)

PHPeclipse (Eclipse plug-in)

Throughout the development process we managed all of our code using Subclipse. Subclipse is a project that adds Subversion support to the Eclipse IDE.

Not only did version control help synchronise the work of multiple developers throughout the development process; it enabled our team to take programming risks in the knowledge we can always revert back to a known, good-working version of the code.

For more information: (link: http://subclipse.tigris.org/)

The weather service

One feature on the current design of sqcircle.com that we have had a lot of enquiries about is the weather widget displayed on our News section.

The look was influenced by an English broadsheet newspaper and their weather forecast seemed like a nice feature we could add to our design.

There are numerous weather forecasting websites on the web, some of these offer free RSS (Really Simple Syndication) feeds. RSS is a format of XML used for syndicating news and in this case a weather forecast. By accessing these feeds we can obtain a current forecast.

The process of accessing a feed to display a forecast is not particularly difficult.

As we were already using Flash Remoting for Server / Client communication it was deemed unnecessary to introduce another Server connection to the Flash client to parse the weather feed, not forgetting the fact that PHP is simply faster at processing code than Flash it was obvious that PHP should parse the feed and only pass the required information back into Flash.

Our developers wrote a custom PHP Class utilising XPath to parse the weather feed and package the data into objects that would be passed by AMFPHP to Flash for display.

Since we are a London based company we thought it would be nice to display our own forecast, but searching for another city is a simple matter of querying the weather service with a city name, retrieving the zip-code for it and then accessing the weather forecast feed for that particular zip-code. The rest of the process is the same as described before.

The browser back button

When developing a usable, functional Flash site, It's important to not to forget the browser and the intuitive forms of navigation the users are familiar with.

The site is designed to allow users to navigate both forward and backward by using the browser's own forward and back buttons.

It builds upon a technique developed by Robert Penner.

Using JavaScript, an IFRAME and the Flash LocalConnection 0bject we are able to update the web browsers page history. This technique has been tested thoroughly and works across all common platforms and browsers.

Search engines

With a high volume of qualified traffic being generated by search engines it's imperative to maximise a websites potential for the highest possible ranking.

Search engines are currently not able to effectively index the contents of a SWF file. And since the content displayed inside them is all stored in a database we needed another solution.

The best way to achieve this was by using method that goes hand in hand with web standards. Starting with HTML, CSS and then the Flash. The best way to add Flash progressively is by using JavaScript, or more specifically SWF0bject.

Using this technique we could layout our database content in HTML, which would then be indexed by search engines, then this pseudo content would be replaced using SWF0bject to display the SWF.

If the user has JavaScript enabled and the required Flash plug-in, SWF0bject will replace the HTML content serving the full Flash alternative.

Test, and then test again

Throughout production the results were cross examined against the specifications and 0bjectives stipulated in the exploration phase.

To increase the chances of deploying the website smoothly, the site was put through an extensive testing procedure to ensure it was usable, functional and finally optimal.

Where now

The response to the site has been overwhelming and we thank everybody who has offered their support since the site was launched in early July 06.

As with any well planned site, leaving flexibility within the architecture for future expansion is generally a good practise, sqcircle.com is no different so look out for new elements popping up from time to time.

Finally, due to public demand we intend to make some of the sites features available for download in the near future. Information will be available from our website so check it regularly to keep updated.


About Square Circle:

Square Circle is a full-service creative agency offering innovative and effective solutions. Our credo is to work with our clients, helping them turn ideas into reality.

Our team forms a creative melting pot where visual artists, multimedia designers, developers and producers interact to create award winning solutions across internet, broadcast, CD/DVD and print.


hr
All rights reserved © 2000 - 2014 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Cookie Policy -  Advertise -  About FWA -  Contact