Tuesday, March 3

Interface design process

The draft of the project interface


Style:
The design of the interface for the project Memory Traces tries to visualise the process of our project development and also aims to fit the idea of tracing our own memory of doing this project. In the very beginning, the visual style trends to come up a look of the time worn-out because I was thinking of our memory images evolving over time. I surfed some websites, such as CSS Beauty and some Photoshop tutorials, to learn and observe how to create the vintage and hand-drawing styles to illustrate our project interface design. In the meantime, I reviewed all the articles we post on our blog. Initially, I thought of a metaphor of a vintage note book or mind map. Unfortunately, I had tried to make a mind map several times, but I could not draw the style very well. And, a book metaphor might be too limited for this project. Finally, I decided to keep the idea of displaying a silhouetted landscape of Edinburgh and make a combination of the words on our blog as a background. This is also inspired by Digg Labs quoted by Pablo (see screen shot of Digg Labs) and previous discusstion about sms chunks on the screen. The draft version might need to be modified to fit both of our culture background. The initial design is a step stone for the final project and I hope the final one could be more colorful and illustrated in a retro style to fit the theme of our project. However, it is something I need to overcome. Improving the visual design for me takes time to master the visual styles.

Functionality:
Firstly, a simple image is used to integrate the content of Memory Traces project, including:
  • I forgot/I remembered website (now it is a prototype)
  • A proposal
  • A link to the documentary of our working process (Memory Traces blog)
  • Acknowledgments
Moreover, this interface might be used to brand the project and the size of the interface might try to adapt for the high screen resolutions display(the minimal is 1024*768).


Endnotes 1: some useful Photoshop tutorials
Endnotes 2: some photos we took in Scotland and the city of Edinburgh are used to make the border of the a silhouetted image.





No comments: