The first thing I wanted to show was an app called pplkpr.
This is an app which, when used with their $99 wrist band, measures heart rate when speaking to people to determine how you feel when speaking to specific people and tells you whether to spend more time with them or cut them out of your life.
This is a prime example of how technology like this is getting to the point of the unnecessary and ridiculous. Heart rate monitoring in particular could have great potential applications but some developers seem to be a bit off track.
I don’t really have much else to say about that, so the second thing I showed was an organisation called e-Nable.
They use 3D printing to create free prosthetics for people, mainly children it seems, who can not afford them for whatever reason.
This is a really amazing use of 3D printing and the fact that it is an open source project and the families get the prosthetics free of charge instead of having to spend thousands on one through the healthcare makes this even better.
This is exactly what 3D printing should be doing for the world and it’s heartwarming and inspiring to see that a project like this does exist.
Semester B has begun now and to follow the liberation brief I want to tell an allegory of a historical ‘liberation’, possibly regarding the French Revolution or concentration camps though this is not definite.
James cautioned me on doing too recent history as it could become ‘inappropriate’ in many ways, but I did find a Dachau survivor account recently and I read an excerpt of it which had been published as an online article. I think this kind of story could be appropriate as it focused less on the horror of the camp and more on the emotional effects of being liberated (quite suddenly) as well as the post-escape struggles to survive; so I was thinking of perhaps basing my story loosely on this account.
I am definite that I want to create my story through animation, either 2D(/2.5D) or 3D, or perhaps some sort of mix between the two.
3D animation is an area I’m really interested in. I have never done any 3D animation (well, I’ve dabbled with modelling and such but I have negligible experience) but I have never really had the opportunity to. Now I do have that opportunity and I would like to seize it; however, we have limited time and I wouldn’t want my project to end up subpar which James pointed out was a serious possibility simply due to the fact that I would be learning as I go and don’t have too much time to do it.
So I’d be either expanding on and improving my 2D animation skills or developing brand new 3D animation skills. I’m not certain which path to follow just yet but I am leaning more towards 2D simply because I think I could produce a higher quality product.
Following from last week, I wanted to work on the PDF first.
I had a lot of problems with the interactivity that I wanted to include and the PDF format because multi-state objects are only supported in SWF exports, I have found a work-around though.
I used Acrobat XI Pro to put the SWF file into a PDF document, and luckily Acrobat has an option when doing this to load SWF content on opening the page; the result is a seamless and interactive PDF (which is actually just an SWF pretending to be a PDF).
With this though I had another problem, I wanted scrollable text frames as I had quite a lot of writing for two pages. But guess what! These aren’t compatible with SWF files!
Instead of changing everything around again though (because the SWF option worked so well for everything else) I simply made the text frames into more multi-state objects; the text frames were going to be clickable to move to the next ‘block’ of text to imitate scrolling (sort of) but these stopped hyperlinks working so used the arrows I already had for images instead.
Anyway this is basically what the PDF looks like:
I feel it has a very strong and appropriate visual style (which you will see, carries on over into the video), and although there is quite a lot of information there I think I condensed it quite well using multi-state objects.
James suggested some minor improvements like decreasing text size and increasing padding, possibly add a background image to make it a bit more interesting to the younger audience. I also needed to add in footnotes for the hyperlinks, including the video button, which I discovered do not work universally, they work in Acrobat Reader but that is about it. I did respace/resize the body text as well as cutting it down where I could (it was a bit over-wordy); I also changed the font to Derivia which I think still looks professional but was a bit curvier than the other so also looked a little more playful. I also swapped the play video text box for a nice, brightly coloured, little icon which is definitely more fun/interactive/etc. and it looks a lot nicer.
Doing these changes made my PDF look a bit more professional and clear – there’s a lot of text and because it wasn’t spaced very well it did feel a bit cluttered; and it also made it more fun but I didn’t want to go too far down the ‘fun’ route because although it is a fun product it would be mainly marketed to schools rather than the children themselves, so I feel it still needs to look clean and professional (which I think it does). Plus the video is more fun than the PDF, I think together they get a good balance.
A lot of time was spent in Photoshop (to make graphics, edit photos etc.) and InDesign on this and I’m happy with the result.
So then I started work on the video. First thing I did was do a logo animation following my initial designs last week, which involved the cube ‘building’ itself over time:
As you can see, I’ve kept to the nice ‘spinning bird kick’ colour scheme in the video and PDF and used the same font (Poetsen One); I think I’ve created quite a strong visual identity for my concept as a brand.
Then I scripted and storyboarded the rest of the video:
I used a text-to-speech program to narrate because a) there’s too much information to just write on screen, particularly if I want some little animated graphics (which I do); and b) I didn’t want to narrate it because I am a terrible narrator, I don’t have the voice for it.
It’s a bit iffy in places (as usual with TTS software) but I do think it’s better than either me doing it or having loads of text everywhere (and I do think it needs some explanation despite being a fairly simple concept).
After I had that all planned out it was simply a matter of turning my storyboards into the other 50 seconds of animation, and lining that up with the narration.
You will probably notice, I reused some graphics from the PDF and edited them (adding additionally layers mainly) so that I would be able to animate them in AE, again because I wanted the video and the PDF to be really tied together visually.
I was also going to use some real footage that I filmed to show the product “in action” (and because I wanted to use motion tracking). I planned to add in the ‘projection’ on the wall so that it looked like it was actually being used. But I didn’t because after a lot of time animating I decided live action wouldn’t really look right with all those graphics.
The video is now done. I put quite a lot of effort into this – it took 8-9 hours to finish which was maybe a little less than the PDF, ideally I would have split my time more evenly but I had a lot of complications and problems with the PDF as I said and the animation all went very smoothly overall – I’m happy with the result.
PDF: Convergence (probably won’t work in browser but you can download it and open with Adobe Reader if you like).
This week we began the convergence task in which we must bring together all the skills we have learnt over the semester.
We have to come up with a new digital technology, showing how it would be used (interaction) and who it would be aimed at (user-orientated design) and present it using a 2 page PDF (interactive publishing) and a 60 second video (animation/compositing).
I chose the ‘make simple music’ category.
Originally I had the idea of doing a small dongle that would plug into any electronic instrument (keyboard, electric guitar, electric drums, etc.) and allow the user to record a multitrack song wirelessly to a PC or mobile device:
However, as James pointed out, this had a lot of problems: it wasn’t really for making SIMPLE music, it was restrictive/exclusive (you still had to own instruments), it wasn’t very ambitious (similar devices already exist, e.g. Chromecast).
So, after talking with James a bit I changed my idea. Now it is a small musical camera/projector hybrid device. The camera recognises objects and processes them into a sound dependent on physical properties like colour, size, etc. & the projector part was to create a visual representation of the ‘sound field’ against a wall (or other surface) so that it was not restricted to people who owned PCs/devices (i.e. third-world countries, etc.) – far more inclusive than the previous idea.
Here’s my initial sketches for it:
I did some research into object recognition and the idea certainly seems plausible with things like Google‘s object-recognition project and an object recognition camera called Pixy already being worked on.
As well as the object recognition side it’s also perfectly plausible for that to be turned into creating a variety of sounds as the idea is similar to things like the V Project which uses human motions to create music.
I also started a bit of work on the ‘branding’ side, designing a logo and beginning to storyboard the video.
Based on that initial blue/black design, I took to ColourLovers again and have found a great palette called ‘spinning bird kick‘ by alpen.
Last week James asked us to pick one of the bad apps we found and do two things with it:
a) redesign the logo/branding
b) redesign the UI of the app
We also looked at rich and flat designs and a lot of dos and don’ts of logo design.
I personally far prefer flat designs to rich and so that’s what I’ll be going for, not least because the good part of the app I’m improving (myCity, see previous post) was the pretty flat main screen, the bad parts were more rich.
This is what the app actually looks like:
Here are my redesign notes/sketches that I did in preparation for the second workshop:
The colour palette I picked was from ColourLovers, a great site that I use a lot.
The fonts I liked for it were called Exo 2.0 and Hallo Sans.
In the workshop we first used Illustrator to practice making vector logos using this little bird.
Then we went on to put our own redesigns into practice beginning with the logo. The first draft did look fine, but in practice it didn’t fit well to the mobile dimensions (it might’ve been more appropriate for say a letter-head), which is why I adapted it the final version; removing the circle and (re)moving the text – which I placed beside it in Photoshop instead.
My process: app icon > my sketches > first draft (Ai) > final (Ai).
>>>
After that we copied the vector logo into Photoshop and began on the UI redesign, using free UI kits (though I only copied a rectangle over which I then changed the colour of anyway).
I gathered some free icon SVGs (below) from FlatIcon (IcoMoon was another option but I prefer the search feature on FlatIcon).
I recoloured the icons in Ai to suit my colour scheme and then copied them over into Ps just like the logo.
Eventually after adding all my icons and squares and rectangles, the finished redesign looked like this:
I’m pretty pleased with it (these images are a bit low-res but it was obviously a lot crisper in Ps), I think it’s a definite improvement on the original but given more time I would have put a bit more work into it like adding text perhaps to accompany the icons as not all of them may be clear or maybe brighten the colours up a bit. But for the time constraints and everything I think it went quite well.
>
