Sound State completed website.

Here is the link to the finished website.


Comp Designs for Sound State

So finally, here are the finished comp designs for Sound State. Watch out for a post with a link to the fully completed, coded, functioning website.

Projection Mapping Techniques

I have recently become very excited about this projection mapping technique. I have it on my list as a possible vehicle for an interactive video installation. I just have to get my head around the software.

This live performance by Amon Tobin features mind boggling projection mapping using a purpose built sculpted surface.

Sound State Development

I began this design brief I started researching the trends that were evident in existing record label websites and logos. The following are a very small selection of the sketches and graphics that map out the development process of the logo.

This slideshow requires JavaScript.

Design Principles mon 5th

TASK FLOW-home, login,etc

use case- a narrative of what the user wants to do

task flow is a picture version of that navigating through all the screens- FOR A PARTICULAR TASK-look at task flow examples-lecture 8

Journey Map- an experience map-a way of designing the user experience all the way through in one big long specification.

talk to users after wireframes AND after prototype

Keep a clear visual heir arch- people scan through pages to find what they want – they don’t read it all!

UI design is based on human psychology-

USABILITY- making sure something works well for all experience levels

Make it easy to get home -design practice idea of making banner logo clickable for homepage


mental models- small scale models we construct in our mind – we predict what might happen/how it might work. If you break the mental model they get frustrated.


User Model:How does a child think the product works is an important consideration for Artovate.

How is it presented to the user in the UI.

Implementation Model:How is the product implemented.

the user model must be the topmost consideration

7 design principles to help

simplicity- rules of how it works should be simple

familiarity- exploit prior knowledge

recognition- provide cues

flexibility-let them perform actions in any order-multiple paths

feedback- give them immediate feedback, they need to know they have clicked something

safety- allow them to undo things, don’t interrupt them though

affordances-design should imply the things you can do.

figure out how people think your product should work- build a matching interface- none of the implementation model bleeds through


Mock ups are different to wire frames in that they give all of the visual decorations,textures etc. Affordances should be apparent

why prototype?

to test out technical feasibility

to clarify some vague requirements

to allow user testing and evaluation

to check that a design direction is compatible with the rest of the system development.

Appropriate fidelity– for the prototype(in terms of whether to paper prototype or so one with more fidelity) what fidelity do you need to explain what it is you are building and why you are building it.

Low fidelity prototypes are useful to UX designers because they are quick to create and are flexible. it also allows you to make changes that the stakeholders want.

Low visual, high functional- HTML prototypes, still as a wireframe but with active links. it allows you to do remote user testing, Useful for workshops also.

high visual,high function- a lot of time to build, not always worth the extra cost, useful for changes to existing systems, testing with non tech savvy users.


Some working poster designs I’m doing at the moment.

working designs

I’m experimenting with different textures inspired by cover art for Flying Lotus record Cosmogramma.

Design Principles mon 28th

User Interface Design

A few key points from the lecture about user interface design struck me as being very relevant to our integrated project Artovate. One of the major points is to design the user interface under the assumption that users will not read what you write. This is even more relevant when the user is of a young age. The interface needs to be highly visual and tactile and easily understood which leads to one of the next major points; conventions are important. Our app needs to be very easily navigated and instinctual, in this case exploiting conventions will be our first port of call. Visual hierarchy is important, any buttons need to be obviously interactive. There is a strong need for clarity and instinctive use. Another key point is the language used for the user interface, it should make sense to your audience. We need to adapt to a language that children of our demographic are familiar with and use on a daily basis. This may require researching textbooks aimed at that age group and the art curriculum. We need to be careful that we are writing for a certain age and skill level. Human psychology is an important factor to take into account when developing the user interface, in our case we need to consider how a child thinks;

  • are they more attracted to visual elements?
  • interactive elements?
  • how long is their attention span for simple tasks?
  • how can we increase their attention span?

Lastly we need to consider habit. We are creatures of habit and therefore any developments within the app should be introduced slowly. Introduction of new tools/functionality should be done one at a time perhaps?

Some other considerations for stage 2

  • paper prototyping- to show how your design works, consider animating it perhaps?
  • use cases
  • maps- flow diagrams-all of the possible paths through the app
  • task flow- one task I want to do (use case), show the path to take through the app to do this
  • screen or site map- specify the key interactions