Yulia Besplemennova
ybdesigning@gmail.com
UNSW Exchange Semester Portfolio
In my exchange period I wanted to try the things that were not available in other places - both in my Bachelor in Russia and Master in Milan. Recently I got interested in the Interactive design field, so I’ve selected the courses which could help me to proceed with it. Everything in this portfolio is somehow connected to the interactive and digital world:
Web Design & the Screen Interfaces
5
Design & Computers 4
15
Intro to Interactive Media Arts
24
Digital Theory & Aesthetics
36
SDES 3174 Web Design & the Screen Interface UNITS OF CREDIT: 6 Web design & the screen Interface is an elective course and is part of a suite of Design electives that are designed to extend knowledge and skills into publishing material on the web. COURSE AIMS This course focuses on the processes involved in the creation, design and development of content for the web. It provides an introduction to the basic underlying technologies and operational methodologies of client side web design and development. It covers basic web page composition using HTML, CSS and JavaScript as the underlying mechanism for realizing creative, online content. Prior introductory level of knowledge of Photoshop and Illustrator is assumed. MY GOALS The mains reason why I took this course was to understand how to build web sites and be able to create my own portfolio on the web.
5
Assignment
1
Design, Semantic HTML & CSS
WEIGHTING: 25% ASSESSMENT BRIEF: Design, Semantic HTML & CSS Exercise
After a small warm-up and doing exercises on HTML & CSS we got to the first real task. It was to create a homepage for some existing magazine. The idea was to learn from the traditional design approach of presenting the information in the magazine and to apply it to the web. We were supposed to look at the selected magazine graphic style and communicate it specificity, while not looking at the existing real journal’s website. I’ve selected the Wired magazine for this task and tried to apply the design ideas from its paper edition keeping attention on the main topics of the month, but making also other information easily accessible. The main problem was of course not the initial design, but converting it to the real webpage. On this stage I understood that not all the things existing on paper could be easily done on screen.
6
http://sites.cofa.unsw.edu.au/ ~z3406397/build6/index.html
Assignment
2-3
Website Blueprint & Implementation
WEIGHTING: 75%
Presentation
ASSESSMENT BRIEF: Create a blueprint for your website and make it in HTML ,CSS, Java Script
For this task I decided to create my own portfolio website, which was the initial aim of taking this course. I’ve spent some time researching existing portfolio website and chose design according to what I saw. I decided to keep it simple not to intefrer with the works presented, but to add a bit of difference in it. I chose the horizontal scroll to make it look like a narrative about me and my design approach and to present the works more coherently. Not to make it difficult for usability this horizontal scroll is performed by the normal mouse wheel movement. The design itself passed some way from the initial state to resulting site. A lot of work on typography has been performed.
8
http://www.slideshare.net/Swaya/web-design-idea-presentation Working website
http://sites.cofa.unsw.edu. au/~z3406397/ybd/
SDES 3107 Design & Computers 4 UNITS OF CREDIT: 6 Design and Computers 4 is the final compulsory course, which runs sequentially over the entire Design program. They are one of 3 core areas that make up the integrated program of the School of Design Studies, Graphics, Computer Aided Drafting and interactive media. COURSE AIMS The course Design and Computers 4 aims to develop a digital design practice, to integrate technical knowledge and skills with tools, processes and appropriate software/ hardware solutions as a support to contemporary digital design disciplines. MY GOALS Before taking this course I was already familiar with the basics of Arduino and Processing languages, but I never had a chance to develop and apply my skills to the real projects with the structured schedule. I took this course to see how the things learnt by myself correlate with that taught in the university.
15
Assignment
1
Thematic Interactivity, Drawing, Imaging, Typography. Processing exercises
WEIGHTING: 40% ASSESMENT BRIEF: Create a Processing program which is continuously transforming from one drawing or image or scene or form to another.
In Australia I got fascinated by the seaside and the continuously changing ocean. So for this task I thought whether it is possible to render it in a very simple and minimalistic way, not trying to simulate nature, but get inspired and do something reminding the initial idea. So I decided to represent the visible wave with the number of lines which then spread, riching the “sand” and bounce back disappearing. The process was long and iterative. First I had to make only one flat wave represented with a line move properly, then add another one and adjust the timing and their “spreading” motion. This part took the most of time. After that the “wave” itself was created with the sinus function. And in the end it became also interactive, so that mouse movements influence the amplitude of the sinus and create different patterns of the sketch. The thing that seemed very simple turned out to be not that easy to implement even though final appearance is still minimalistic.
16
http://www.openprocessing.org/ collection/1995 Project sketches
http://www.openprocessing.org/ collection/2148 See the processing folder for all the sketches
Idea’s origin
Graphic representation
Assignment
2
Arduino Project
WEIGHTING: 40% ASSESSMENT BRIEF: Create a luminated form, which is reactive to changes in the environment, changes that could be evoked by humans or other environmental factors.
As a product designer I am interested in adding some interactivity to the objects surrounding us, but I don’t like the common perception of interactive things as not easily understandable, difficult to use and create. So I’m into the other side of interactivity - kind of “handmade” electronics. For this project I used some of my inspirations in paper electronics and developed the paper postcard-lamp. It uses the handmade paper sensor and suggests the new way of interaction with light and paper itself. I also implemented some knowledge of programming smaller controllers - AtTiny 45 with Arduino board. Unfortunately as I decided to work alone and the final project got a bit complicated (I faced some problems creating reliable paper circuit) I didn’t have enough time left for the postcard design itself. I thought that handwritten cover will look nice in contrast to the technological insides.
20
Full project description
http://issuu.com/yulyabesplemennova/docs/paper_lamp
References:
First idea sketch
First breadboard prototype, paper circuit and circuit schematics. The difficult part was in transition from breadboard to the paper as the copper scotch failed to produce reliable contact points, so the paper circuit still had to be soldered.
Final result
SOMA 2607 Intro to Interactive Media Arts UNITS OF CREDIT: 6 Intro to Interactive Media Arts is an introduction to the concepts, approaches and processes of interactivity. The Processing development environment will become the medium and material for experimenting with concepts and expressing ideas. The resulting projects will integrate image, video and/or sound in a participant driven, interactive environment. In addition, this course will introduce the concepts and skills required for documenting the interactive experience.
COURSE AIMS 1. This course will introduce a range of theories, concepts, and approaches that shape the field of Interactive Media Arts, with a focus on interactivity beyond keyboard and mouse, e.g. installation, mobile devices. 2. This course will enable students to conceive and develop an interactive work that evolves based on real-time processes, using a basic programming development environment.
MY GOALS Similar to the previous course here I wanted to apply my skills to the projects within brief. Also I was very curious about programming the Android devices and the novel ways of using mobile phones in the interactive art and design context.
24
Assignment
2.1
Concept Pitch, Iteration 1
Research presentation
http://www.slideshare.net/Swaya/ unsw-intro-to-interactive-mediaarts-2012-research-14370769 Experimentation video
http://youtu.be/zvTy8kqhZuE Iteration 1 presentation
http://www.slideshare.net/Swaya/ unsw-intro-to-interactive-mediaarts-2012-concept-pitch1
WEIGHTING: 20% ASSESSMENT BRIEF: 1) Experimentation: create a short clip (1-3min), documenting experiments with a weighted cardboard cut out of a handheld device, in which you play with and test out different uses and possible ways to interact with and/or embed a handheld device. 2) First concept/idea pitch: develop two ideas for an interactive work that people interact with via a handheld device (ideally, an Android phone/tablet)
After the research in the field of interactive artworks we were required to propose our own ideas. I decided to focus on my interest in applying interactivity to the urban context and developed two concepts for the city environment. They both are about encouraging people to explore their surroundings and try different routes and behaviors. The experiments with the device led me to the analogy of the phone swinging on a string and a pendulum used for “navigation� in the space and finding locations. I also tried different types of phone movements which could be used to expand its expressive possibilities to make it more visible in the context of the city.
25
Concept
1 Daily Patterns
*
Attracting people to the place and changing its perception
* *
Affecting everyday behaviour Building new interactions between people
The “artwork” is put to the abandoned or misused place in the neighbourhood. Local people are invited to participate for some period of time(week-month). T heir everyday movements in the city are stored to generate unique patterns of their lifes. Everyday participants can observe their own creations and see the others’. By comparing outcomes of different time periods they can be motivated to change their daily paths and create various patterns. Competition between people can also take place for better stimulation. P articipants can connect w ith e ach other understanding h ow s imilar their paths are. The urban space gets new value becoming “inhabitants’ diary” reflecting on what is going on in the city. As an expected result participants build deeper connections with their neigh-
bours, become aware of everyday life routine, explore new places in the city and revitalize a misused space in the surroundings.
Concept
2 Good Vibrations
*
Bringing people back to being in the space
*
Showing the new places in the city
*
Stimulating spirit of exploration and rethinking the relation to the space and mobile technologies
The idea falls in between the Situationist dérive experiments and the pendulum dowsing. Mobile phone is used to navigate in the city, but in the “wrong” way. Starting the application, user asks to lead him to the place that he’s never been before, so the phone is defining the final destination. (For this purpose his previous travelling re tracked beforehand) After that participant has to use his phone as an old pendulum and keep swaying it all the way long. He will be guided by the vibrations occuring at the turns on his route. Important rule of the game is to walk slowly, otherwise “pendulum” would stop showing the way. Purpose o f this a rtwork i s to enable an old-fashioned activity o f being w holy
present at particular place in specific time, observing the environment and reflecting to the ones own feelings evolved added to the experience of being lost in the city and exploring new places.
Assignment
2.2
Concept Proposal (concept pitch, part 2)
WEIGHTING: 20% ASSESSMENT BRIEF: The second part of assignment 2 allows to revise and expand the concept pitch, in response to the feedback that have been given for the first idea pitch and cardboard experiments. The challenge is to develop a concept for an engaging, playful interactive work that deploys mobile devices in original, imaginative ways and/or provokes novel interactions with the environment (city, a specific place) and/or between people (social networks).
Full presentation
http://www.slideshare.net/Swaya/pitch2-1-1
As I got the feedback that both of the concepts were good and could be developed, I had to choose one on my one. I decided in favour of the last one, with the pendulum metaphor, as it had an already defined way of interacting with the device. But I had to define the scenario of the application and what exactly people will do in the city with it. In the end I came to the idea of creating a map of the “meaningful” places, gathered from citizens. So the application became double sided - first someone shares his favorite place in the city and afterwards others can go explore the city getting the clues from the phone and finding the new spots, sharing others’ view on it.
30
Concept proposal
https://docs.google.com/open?id =0B73yaIWjfdxcNVhsX3VVX0hJVDA
If you know...
The best place to relax,
to see the sunset
or just to dream...
Share it!
+ Add it to the map
with your comment
or music
Meanwhile in the city...
~1km
~500m
~100m
~5m
Changing map
According to the seasons, time of the day and weather...
Assignment
3
Prototype Presentation
WEIGHTING: 40% Concept statement
https://docs.google.com/open?i d=0B73yaIWjfdxcc0h0bVN1c1 c0b2c Video
http://youtu.be/QthQDRfHhBI
ASSESSMENT BRIEF: The third assessment is about materializing the concept in one of the following two ways: 1) develop an elaborate video-documentation presenting the work “as if” it was real, including a mock-up of application, and how users interact with the work and/ or how it evokes interactions 2) Develop a simple but functional application to demonstrate in class.
As my application was involving interaction with the city environment and some not simple scenario it was not easy to develop it in Processing. I tried to create a “mock-up” sketch which is just a demonstration of working principle - as you move mouse around the screen the beeping sound gets more intensive while you approach the “point of interest” assigned from the beginning. So to present the main idea I had to shoot a video, which turned out not very easy too. It was difficult to render kind of poetic idea behind it, implied by the movement of the phone reminding of pendulum, and the state of mind of an “explorer” using this application in the city. The final video shows a story of several people using the application in the city for different reasons.
35
SAHT 9208 Digital Theory and Aesthetics UNITS OF CREDIT: 6 This course identifies three major themes of importance in current and historical practices and thinking about digital aesthetics and theory: interaction and digital environments; data and the digitisation of culture and life; digital cities and the urban environment.
COURSE AIMS Students will gain a broad understanding of many of the conceptual threads that motivate the creation of new media art, design and practice. There will be significant emphasis on developing students’ knowledge of the social, political and aesthetic contexts and histories through which contemporary digital practices have developed. Students will develop project-based work that focuses on one of these three areas, but will be required to read and research broadly across the course material. Emphasis is placed on integration of practice and theory and of using artistic practices to ‘think through’ conceptual and cultural issues surrounding digital technologies.
MY GOALS In this course I saw a chance to build some theoretical foundation for my work in the field of interactive and digital design. Before that I saw lots of examples of things happening in interactive design and art, but didn’t have the clear picture of theories behind it.
36
Assignments & Weighting
Essay
40% of the mark is based on a small group project undertook during tutorials and through group research outside of class hours.
https://docs.google.com/open?i d=0B73yaIWjfdxcX1gzOVAxT Xp1Vkk
20% of the mark is based upon an individual production/thinking project. It requires to create and/or find two images or sound or any other production medium and write 500 words relating the production piece to the reading material/ideas. 40% of the mark is made up of a 2500 word critical review of two of the works screened or listened to during any of the screening programs throughout this course.
Critical review
https://docs.google.com/open?id =0B73yaIWjfdxcakpXeHZwdGprMms
I’ve chosen the interactive aesthetics as a main topic as it follows my area of interest. So it was the subject of discussions and “presentations” in class for the first part of the course. Then I went on with it in the individual tasks. For the analyzing the artwork I took again United Visual Artists’ work which I researched in the other class, because I thought it was interesting to look at it from different points of view. And for the main essay I focused again on interactivity and a touched a bit of digital cities topic.
37
LIFE 2012