Jonathon Hoy / Graphic Design:New Media

#004 / Research: Filters and Style

admin — Thu, 06 Nov 2008 14:35:09 +0000

BBC News - US Election Polltracker

The BBC News US Election Polltracker is an interactive timeline which gives an overview of key national opinion polls in the 2008 Election race between Republican John McCain and Democrat Barack Obama. Mouse over the points on the map to see the poll figures for that date. Use the radio buttons to switch polls. Click on the arrows to read about events which may have affected/influenced public opinion.

BBC US Election Polltracker - The Blue/Red Key and Timeline

Visit >> http://news.bbc.co.uk/1/hi/in_depth/629/629/7360265.stm

Boston News 08 Election - What If’s

An interactive tool developed by Boston News which allows you to come to your own projected outcome for the Electoral Collage votes in the 08 US Election. Allows you to apply/discard different demographic scenarios and elements which may affect the polls - religion, gender, race, age. Additionally, you may apply 2004/2006 voting trends to project the outcome.

Visit >> http://www.boston.com/news/politics/2008/specials/demographic_map/

NoaStudios

A portfolio website created entirely in Flash, it is driven by the iPod-inspired interface, allowing the user to click and scroll along the content titles horizontally. For accessibility, the navigation is also included in a more static fashion in the top right hand corner of the page.

NoaStudios - flash based click-wheel interface, inspired by iPod

Visit >> http://www.noastudios.com/

Wieden+Kennedy

Another flash-based portfolio website, this time using a text-based timeline to accomodate for their huge backlog of clients. Colour coded and very slick.

Wieden+Kennedy - timeline and browsable portfolio

Visit >> http://www.wk.com/

Lab by Mathieu Badimon

http://lab.mathieu-badimon.com/

http://ecodazoo.com/

#004 / Data Filters

admin — Tue, 04 Nov 2008 15:14:03 +0000

Now that I have the mapping subject and data, I need to apply filters to the data which will make it more presentable, linkable, and of course navigable. The filters will act both as titles/means of grouping the data, and also as navigation links within the map.

Filters applicable to my data:

Personal - where the person comes from, their age, sex;
Tastes - mostly listing their favourites (e.g. colour, music, food, movies etc);
Ideologies & Beliefs - religious/spiritual beliefs, political status, social attitude, law and order, enviornment, social classes etc;
Social Life - how they interact with others, where they go out, pastimes, substance/alcohol ‘abuse’ etc.

The data may not be necessarily filtered into the 4 main headings listed above, although they will be categorised in a similar fashion.

For my own data set, applying these filters will be easy - however, the level of filtering is limited when it comes to the remaining data set which is collected from external sources.

Within the UK demographic, a personal profile from each of the nations represented (England, Wales, N. Ireland) will be included at the deepest level. These will include a full profile and photograph, and will be chosen to align with the general concensus of the data collected.

The profile would include:

Photograph;
Full name;
Age;
Sex;
Location;
Favourite: Music, Colour, Food, Movie, etc;
Political Stance;
Religious/Spiritual Beliefs;
Social Habits.

More may be included, although everything required to build a basic, satisfactory profile is listed above.

#004 / My Map - Overview

admin — Tue, 04 Nov 2008 13:11:38 +0000

I have decided on a subject, and must now expand my research and utilise my findings accordingly:

What are you mapping and how?
Peoples beliefs and ideologies, taken from a sample of 50-100 people. The data includes religion, society, music, nationality, age, sex, favourites (colours, food, music etc), politics, economics, theories and more. It will be mapped as a multi-layered story, clicking elements to reveal the lower levels.

Filters and visualisation?
The data will be filtered according to the data types and in groups of comparison to try and build relationships and links between the data sets. The style will be clean and minimalistic to allow for a navigatible and intuitive interface. The front/top level will be a world map, with each country/region clickable to allow for specific information. Once a country is brought up, it’s demographic is displayed graphically.

The data I collect will be combined with data collected from books and the Internet, filling the demographics for the other key countries on the map. My data will be for the UK (a sample taken from England, Northern Ireland & Wales) demographic, which will be much more detailed and complex than the others.

The style/theme of the website will be stripped right down to the bare minimum of graphic substance, with text and content being the main issue and being the main subject of styling. Although not as easy as simply filling the data into a well finished, very extravagant design, I think it will work much better once refined to the desired quality.

#004 / Mapping Subjects

admin — Tue, 04 Nov 2008 02:24:37 +0000

Before I consider anything design related, I must consider my options as to what I am going to map. I want to chose a topic which I can relate to, hoping to avoid creating something which may be visually satisfactory, but which contains content of no interest or importance.

My options, refined, are:

The N.I Troubles - a topic which I can relate to, and a topic which I research and admire vastly. Following on from the interest inherited from my Dad, I researched the history of the conflict and follow closely the current and future issues surrounding it. Would be much suited to a timeline, with separate modal boxes containing additional information, going as deep as 4 or 5 click levels. I believe I could present an interesting and intuitive mapping concept with this subject, although I want to avoid giving off the idea that I am constantly pursuing the subject and somewhat ‘boasting’ it, and this includes my uni work (as I have used it as a subject before).

Pipe Band Achievements - my main hobby besides graphic design is pipe band drumming. Being a traditional form of music, it has a long history which has collected a huge database of winners, which accumulated into records and accolades which created eternally-embedded landmarks in this very history. Again, a well formed and presented timeline could work quite nicely. My only concern would be that the data could only be filtered to a somewhat limited degree, and the information may not come across particularly interesting to many, other than those involved in the scene itself.

I have more ideas, but I don’t think they could transpire to be anything more than that.

Brief 4 - Design Investigation

admin — Tue, 04 Nov 2008 02:12:22 +0000

Our new brief is an amalgamation of all we’ve done so far, which must be presented with professional quality and finishing.

Title: Design Investigation

Description: Create a map of a location or an aspect of a location of your choice. The work should be manifested as a website combining flash and html/css. Now that you have the basics of flash and html at your disposal, you have the tools to integrate almost any kind of media that you want into a web page. You are not limited to text and static, you can use audio animation video etc. Using your design skills create an experience that is interesting and captivating. Create consistent considered navigation and information architecture, link styles etc. Show an understanding of accessibility issues.

The map you create is your website content. Your website is a map of that content. Understanding the relationship between the chucks of content you create and presenting them in a way that makes them accessible and easily understandable and in a visually engaging way is central to this brief.

Location can be interpreted as broadly as, and in anyway you like. Mapping a location or a journey an action or even - Your emotionally response to any of these are all valid and interesting avenues for investigation. Be imaginative. Use a variety of media and processes to create your maps. You can work in extreme close up or zoom out as far as you like.

Deliverables: Following the brief produce a website using a combination of flash and html/css. Present your site to the group and then tell us what you did and why you did it. Upload your site to your webspace and dont forget spell check your copy, check your links, optimize your images and your flash files, keep your file names consistent and your files organized.

Deadline: Wednesday 12th November
13 - 14th November (show and tell)

#001 / Attigo TT: Next generation of DJ’ing

admin — Thu, 25 Sep 2008 18:55:07 +0000

Right on topic, I was reading about the latest gadget to be revealed in DJ practice - the Attigo TT touch-screen interface.

However, a product of such intuition, precision and application should surpass the title of ‘gadget’, for it encompasses all that defines modern music technology and graphical user interfaces and delivers a solution in the most stylish of fashions.

The waveform of the music can be manipulated similar to a vinyl record on a turntable, with the abilty to ‘scratch’ and along with all the other functions to control the music, this is the most simple and exciting way to mix mp3 songs.

Coolest Gadgets says:

Just after seeing how the Nintendo DS’s touch panel could be used to scratch things up, along comes a full-blown turntable setup that relies heavily on interactions with touchscreens. Dreamed up and designed by Scott Hobbs, the ATTIGO TT enables DJs to manipulate sounds via sensors, and the added visual effects are fantastically beautiful, if not useful. Check out a video of the creation being used after the jump — just make sure one earcup is firmly planted around the ear first, alright?

#001 / Facebook 2.0: New Interface, New Guide

admin — Thu, 25 Sep 2008 00:03:31 +0000

The controversial new interface released by Facebook has raised many questions by its millions of users - most of them in relation to the layout and structure of its design. With these questions comes the need for a new, revised field guide.

They have released this refreshed field guide in two electronic forms - blog and tutorial. The blog is used for continuing updates on the design and the tutorial is set out to help users with the fundamental features.

Blog

Tutorial

#001 / Interface Types

admin — Wed, 24 Sep 2008 23:07:23 +0000

User interfaces come in many shapes and forms. Regardless of whether it is tangible or not, a user interface follows a standardized set of protocols and directions during its design process. The resulting product then requires a guide of some sort from the manufacturer (official guide) which detailed chapters of instructions and complementary illustrations to aid the end user.

The most common types of user interface include the following:

Graphical user interfaces (GUI) accept input via devices such as computer keyboard and mouse and provide articulated graphical output on the computer monitor. There are at least two different principles widely used in GUI design: Object-oriented user interfaces (OOUIs) and application oriented interfaces;
Web-based user interfaces or web user interfaces (WUI) accept input and provide output by generating web pages which are transmitted via the Internet and viewed by the user using a web browser program. Newer implementations utilize Java, AJAX, Adobe Flex, Microsoft .NET, or similar technologies to provide realtime control in a separate program, eliminating the need to refresh a traditional HTML based web browser;

User interfaces that are common in various fields outside desktop computing:

Command line interfaces, where the user provides the input by typing a command string with the computer keyboard and the system provides output by printing text on the computer monitor. Used for system administration tasks etc;
Tactile interfaces supplement or replace other forms of output with haptic feedback methods. Used in computerized simulators etc;
Touch interfaces are graphical user interfaces using a touchscreen display as a combined input and output device. Used in many types of point of sale, industrial processes and machines, self-service machines etc.

#001 / Introduction to Interfaces

admin — Wed, 24 Sep 2008 22:45:50 +0000

The user interface (or Human Computer Interface) is the aggregate of means by which people—the users—interact with the system—a particular machine, device, computer program or other complex tools. The user interface provides means of:

Input, allowing the users to manipulate a system;

Output, allowing the system to produce the effects of the users’ manipulation.

As part of our first one day brief, we are required to source a device which contains an interface through which the device and its user can interact. It must be complex enough to allow for thorough deconstruction of positives and negatives.

Module 01 - Interface Design

admin — Wed, 24 Sep 2008 21:54:26 +0000

Fundamental to the design process of developing a successful human-computer interface is an understanding of the rules and languages of communication between people and also between people and the enviornment. A realisation of social, physical and cultural constraints and differences will enable a broader conceptual overview of the relationship between the virtual world and the human user. These will be viewed in the light of recent core legislation dealing with accessibility and broader issues of access.

This unit will explore these issues through a series of practical tasks and activities and will culminate in a project that translates the findings from the real to the virtual. The examination of cause and effect will require you to consider reception, interpretation and representation of information.

In addition to you comprehending the complexities of language and the computer interface, you will be introduced to the issues of copyright and how they relate to a design practitioner.

Surface design (graphic representation of data and information as perceived by the viewer);
System design and information theory, including cause and effect;
Structural design;
Technical design;
Human factors (human end of the process, cross-cultural design, linguistics, access issues, cognitive psychology, disability etc);
Core legislation and issues relating to accessibility;
Communication theory and practice;
Lecture on copyright issues.

Assessment Requirement

A portfolio of evidence, defined by the project briefs you will be given during the course of this unit, you must include unit workbook and final design solutions for each brief.