Zulu Love Letter Assignment

Mobile Assignment Zulu Love Letter 

Capabilities 
The capabilities for this assignment really depend on the devices they will be browsed or viewed on. I intend to aim my assignment of course for users with smartphones and those with desktop computers which have updated browsers and support the likes of HTML5, CSS3, j-query and the JavaScript we will be using. Capabilities that will be focused on are:

 • Downloading and sending an image of the Zulu Love Letter’s created to love interests or even friends and family. On a side note, I do remember partaking in something similar twice, once when Shakira’s “S Florale” perfume was released, you had to create your own logo with the first letter of your name and once created you could place it as a tattoo on a photo of yourself, download it as a jpeg or share it on Facebook/twitter etc. That was probably more advanced but conceptually I’m thinking it’s probably the same. The second time was when we could create our own Coldplay butterfly that would be flying about at one of their performances, I can’t remember exactly everything about it but you could save an image of that too for keeping and sharing.

 • How users physically interact with the webpage, be it via tablet, smartphone or desktop. Each of these options presents a different set of capabilities. Where with tablets and smartphones there are the options of touch screen whereas desktop its usually the generic keyboard/mouse combo and notebooks or laptops have touch pads with keyboards and the additional option of having a mouse. Each of these options need to be considered when building the interactive component and even the site as to find the best combination of options so that it is a pleasant browsing experience for as many as possible.

Requirements 
The requirements I will be using as a framework for approaching our Zulu Love Letter assignment will focus on 3 key areas: technicality, design and interactivity.

For the technical requirements I feel that we will be drawing on most of the coding skills we have equipped ourselves with over the past year.

• HTML5 & CSS3: This will be the basis of coding from which the webpage will be constructed. HTML5, which is considered the new standard for web offers a whole new range of possibilities previous versions did not. Including of course the support of CSS3 which offers us the unique option of implementing media queries in order to achieve our ultimate goal of creating webpages that are optimized for mobile, tablet and desktop browsing, allowing each their own unique styling parameters.

 • J-query plug-ins: In keeping with the theme of Responsive Web Design (RWD), I’ve researched and found some great responsive slideshows to use in the assignment to showcase the feature articles accompanying images. There’s even on that allows users with touch screen to swipe through the images!

• Adobe Photoshop: This probably isn’t entirely relevant, but one must recognize the wonderful software I’ll be doing all the webpage’s graphics in, including creating or rather simulating glass beads for my interactive component, which I have already done in the prescribed colours (black, white, blue, yellow, pink, red, pink and green)... and maybe just one or two surprise colours to give it a little edge.

On the visual level, the design will have to be simplistic enough to NOT clutter up a mobile device. However, also it should be funky and trendy enough to want to be viewed on a mobile device! Since the feature article is for a magazine, magazine layouts are pretty much standard and in their essence have generic elements that should be present:

 • A catchy heading in a legible font that is chosen based on evoking the users interest and also supporting whatever is being said.

• Images!! Recently I learnt about the concept of a ‘post-literate’ society i.e. a society that CAN read but choose not to. So of course, the more that can be communicated visually, the better.

• A well-written feature article (for web) that is short and sweet but offers the necessary information to (1) inspire the user to actually want to partake in the interactive component and also (2) to educate the user and provide them with the necessary knowledge to meaningfully construct their own Zulu Love Letters.

 Lastly when talking about interactivity, one has to consider how the interactive component will be built and the nature of its interactivity:

• JavaScript Canvas Element: As mentioned in class this will be used to build an interactive component whereby users are able to simulate the beading of their own Zulu Love Letters. I don’t yet know too much about the JavaScript canvas element; perhaps I will follow this post with one dedicated to a basic introduction thereof.