Week 4 – Interactivity

I was looking forward to week 4 as I’m very interested in interactive media. The week 4 workshop has been divided into three parts: Design, Implementation and Testing, all of which are (or should be) parts of any making process.


As I’d like to learn more about building websites, I found exploring wireframing particularly useful. I’ve been playing with the tool Wireframe and made a few sample designs just to discover different ways of designing websites.


Screen Shot 2014-11-23 at 17.40.06



The next step was to try Wirify, an online plug-in that enables users to turn any website into a wireframe. Here’s a few examples:


Screen Shot 2014-11-23 at 17.32.36  Twitter


Screen Shot 2014-11-23 at 17.45.54   Google

Screen Shot 2014-11-23 at 17.46.35   Amazon


*Interestingly, the only website I couldn’t turn into a wireframe was Facebook. I’ve tried a few times, but every time I got this error messages, even though the tool woudl work on other websites at the same time.

Screen Shot 2014-11-23 at 17.46.16

Making websites – coding

In the second part of the workshop we’ve been using Flash, which I found quite old fashioned and unnecessarily complicated.

I’m more interested in coding (HTML5, CSS3, JavaScript) and while looking for free tutorials, I’ve came across General Assembly. One of their projects, Dash, “teaches HTML, CSS, and Javascript through fun projects you can do in your browser”. Although I’ve never done any coding before I thought, why not to give it a go!

To my surprose, I’ve discover that coding isn’t a rocket science and (I never thought I’d say that) fun! I’ve ended up learning how to code for the whole weekend, which was a very rewarding experience as I would never have though that I would be able to do it!

Here’s a few Dash projects I’ve been working on:

Screen Shot 2014-11-23 at 18.00.49    Screen Shot 2014-11-23 at 18.00.44


And here’s how the interactive tutorial looks like:

Screen Shot 2014-11-23 at 18.01.05      Screen Shot 2014-11-23 at 18.09.53



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s