Showing posts with label Francesca. Show all posts
Showing posts with label Francesca. Show all posts

Friday, 31 August 2012

My Thoughts on My Final Design and Course


The completed Zulu Love Letter website was done and dusted tonight. I'm really pleased with how it came out. I dig the design - it has an African, fun, quirky and bright feel. The theme of the patterned triangles, although emulated in different ways, is a consistent design feature of the site.
On a whole, I really enjoyed the actual concept of the project. It was something different and interesting. My Magazine "Pattern" is a hypothetical online magazine which caters to the DIY design heads while trying to promote South African culture. The logo is the repeated pattern just above the "Pattern" text and just below the extra links at the bottom of the page. I liked included the video about learning colour names in Zulu - just spices things up and provides some extra information and knowledge that could not be included in the article but is still relevant to the theme of Zulu culture. 
I did found the Javascript something difficult to grapple. We went pretty quickly with it in class so I did struggle with the concepts. However, I was amazed at the power of Javascript and what a small amount of code can do. I'm hoping to apply this knowledge to my SRP Pizza Building Website. It'll be very similar in concept. 

Final Project Links


Zulu Love Letter Link: 


Personal Blog Link: 


Different strategies used by magazines who are adapting to the mobile era: 

Magazines are moving from the tangible print medium to the virtual space of the online world. Web 2.0 means interactivity: information sharing, collaboration and user-centred design. Users can interact, share and collaborate with each other, creating a virtual community through social media dialogue and creating user-generated content. This is the space in which we live and increasingly, other industries are moving into this realm. Indeed, the proliferation of blogs and social networks have forced print media to hop on the band wagon to keep up with the changing times and their changing audiences. This means moving online. And with a change of scenery, comes a change in mindset.


Magazines moving online need to keep engaging with their audiences. Engagement includes keeping a continuous flow of communication, interactive components embedded in the magazine and links to their other social network accounts. This way, audiences have a wide range of options when wanting to communicate with their favourite magazine.

Twitter, Facebook, Pinterest and Youtube are just some of the options that can be included within online magazines. People can like a certain article or the whole magazine. They can follow magazines on Twitter and retweet their articles. Pinterest can provide audiences with images that are directly or indirectly related; pinned images can extend the feel, atmosphere and design that the magazine may be trying to convey. Youtube can give audiences a behind-the-scenes look on various published articles. And users can of course, comment, debate, like and share these articles, images and videos from the very inside of the virtual magazine (or they can be redirected to these accounts from links within the magazine). 

Increasingly, however is the trend for online articles to be shorter. Indeed, mobile browsers are slower to download content and the screen size is much smaller. This has resulted in articles becoming shorter in length with less images. Navigation needs to be simple. A user cannot simply turn to any page like in physical magazines, but rather will click on an article that interests them or click the next button to take them to the next page. Other stories that have a similar theme could be suggested at the end of the article to the user so that a continuous click through is created. This applies to both mobi and desktop users, however desktop magazine users will have extra features that mobi users would not have. 

Online magazines also allow users the ability to create their own accounts. Users can save their favourite stories or it can even be used as part of a classified section where their online personal details can act as a CV for employers seeking potential employees. Online magazines are also more accessible to the visually impaired through the implementation of the zoom function. On a similar vein, with the increasingly popularity of fluid and flexible designs through the implementation of media queries, online magazines can be viewed on multiple devices: you can carry your magazine on your phone, tablet or computer. The size of a glossy paper magazine is no longer restricted in size. You can now carry your magazine in tiniest of bags and importantly, the content is also updating with the latest news. The immediacy, interactivity, fluidity and flexibly are important goals to have in mind when developing various strategies for online mobi magazines.

Sunday, 19 August 2012

When the code is your oyster


If I had the knowledge and skills to create a creative, interactive and user-friendly code for my Zulu Love Letter, I wouldn’t be here. I would be out there, in the real world, making amazing games, websites and designs for clients earning copious amounts of money, holding private yacht parties with free booze and oysters. Unfortunately, my coding skills don’t reach very far. In fact, they are pretty much limited to Mendi Lab. But, if I was as skilled as I dream to be, my Zulu Love Letter would have the following:

Starting off with the pin, I would like the user to be able to choose between “small”, “medium” and “large” sizes. Beads would adjust according to the size of the pin chosen. However, to allow maxine freedom of choice in the design of the Love Letter, there would be the option of changing individual bead size. On touch screens, it could be a nice idea to use the zoom action with ones fingers to make the bead bigger or smaller. On desktops and mobiles, the “+” key could be used to make it bigger and the “-” to make it smaller. Another way would be the use “b” for big and “s” for small. This is what makes the virtual world just one step ahead of our reality. If we were to string beads in the real world, all the beads would have to be the same size for it to function properly. However, computer generated games give users the option to take what we know as reality to another dimension (almost like me imagining I’ll have my own boat parties). 

In terms of colour selection of the beads, users have the option of selecting three shades of the colour selected, for example, “light blue”, “blue” and “dark blue”. Depending on where the user is creating the Love Letter, these colours will either show up as part of the colour list (e.g.: on desktop) or not (e.g. on mobile). What could be a cool idea instead of showing the colours as a list, would allow the users to tap the bead to change the colour. Each tap would change the colour into one of the three shades. Obviously it is important that the user is creating something with a purpose. The colours and their meanings must be clearly shown so the users know what feelings they are conveying through their Zulu Love Letter. I doubt people would want to create messages symbolising death and despair. If they do, I guess there’s nothing stopping. They just won’t get an invite to my boat parties.

Once the bead is chosen, it would be great if could be controlled through touch functionality. Tablet users, for example, could drag beads into place themselves. On desktops, users could use the up/down, left/right keys to move the bead into the right place, and mobile users could the trackball. However, it could also be an option to use the keys “L”, “R”, “U”, “D” to indicate, left, right, up, down. This could be used for both desktop and mobile. In all three devices, it would be cool to animate the bead to have it zoom to the canvas by itself. This would be a feature that would have to be used for desktop and mobile devices as tablet users still have the option of dragging the bead into place.  

Once the bead is in position, I would like a cute little animation surprise to happen. So, for example, once placed in its position, a little heart image flies up from the space where the bead is to the top of the page. Or a little burst of light or sparkles erupt from behind the bead.

If the same colour is wanted to chosen again, users should be able to do this easily. For mobile devices, the trackball could be clicked to allow the same colour to appear and for desktop and tablet users, the enter key could be used. Otherwise, the bead could still be chosen from the list if they desired. 

If the user would want to edit their Love Letter there would be a few options. There would be an undo button, a redo button and start again (to clear everything). However, with the the undo option on tablet and desktop devices, the “back” button could be used.  

In terms of being able to save/share the image, users could email it, Tweet it, Facebook it, Pin it, save it as an jpeg on their computer and to their phone memory card. Once the image is on the phone memory, it would optimised so it could be BBMed or Whatsapped to others. Before saving sending it, users can preview what they have created. If the users want to restart, they have that option. They can also write a short something explaining their Zulu Love Letter or attach a pre-written colour coding guide so that they don’t have to write it up themselves. Within this text, there will be blank spaces where the user can fill in the names of those who are receiving it. 

I also think that templates of other designs are a good idea. These would also have accompanying text explaining the meaning of Zulu Love Letter. Users could send these or merely look at them for design inspiration. Other ways for users to get inspiration could include a colour wheel where users could pick a colour which then generates a Love Letter with the chosen colour as the main bead in the pattern. Other beads would also be part of the design as accompanying colour to create the message of the design more complex. Lastly, users could chose already created patterns. Users have the option of filling in the beads of their choice according to the pattern. 

- Have a good day!

Monday, 13 August 2012

My site so far

Here is my link to my site. Zulu Love Letter  

What still needs to be done:

  1. The title of my magazine "// Pattern" needs to be redone in the CSS as it gets too small when the screen goes to mobile screen size. 
  2. I seem to have a strange margin on the one side of the site - need to find out why it's doing that. 
  3. Plugin a slideshow.
  4. Change the layout of extra information section so that it is more user-friendly.
This is best viewed in Chrome, but also looks ok in Firefox. I did check it on my phone and got slightly different results in terms of colour, background and images (but lets just blame my old Blackberry for that). 

Sunday, 12 August 2012

Use it | Don't use it

I found a useful link that you may want to take a look at if you've got time (lol)
30 Useful Responsive Web Design Tutorials

- Have a good night!

Monday, 6 August 2012

The vision of web (some thoughts and such like)

I follow a pretty decent site, .Net.  It has regular online magazines and magazines that you buy in-store (cost an arm and a leg though). Anyway, they often post useful short articles on things about the web and such like which I suggest you may want to follow on Facebook or something - who knows, something you are interested in could come up. The latest one they published was a link to 45 portfolio sites that they thought were pretty cool. I looked through a couple of them and most were pretty decent. Look, some were really beautifully designed and very aesthetically pleasing  to look but that was really all. Don't get me wrong, I take my hat off to people with a strong and clear design vision - I wish I could create what they have done but if I see a website by a web designer, I'm expecting a site that can be responsive and flexible. Maybe it is because I have been exposed to CSS3 and the power of media queries that now I'm acting like a spoilt brat, but seeing a site like this which is way more simple is more appealing because it works on all screen sizes and I think that takes more vision and analytical thinking than just plonking a cool design on a page one after the other. 

Sunday, 5 August 2012

Assignment / Zulu Love Letter / Capabilities / Requirements


Capabilities 
This assignment requires us to develop a magazine feature that can work both on desktop, tablet and mobile devices. This already implies that the capabilities for each device may differ. However, each device, in their varying degrees of capabilities, will support HTML5, CSS3 and Javascript. 
For starters, one should be able to create their own Zulu Love Letter which we will have built with Javascript. The user should be able to download their own image and send it. Being able to share their Zulu Love Letter via Facebook, Twitter or email should be something to consider. This will definitely add to the interactive component of our mobi magazine. 
One needs to consider how the users interact with their device according to their device’s capabilities. For example, tablets and smartphones can have touch screens while desktops comprise of keyboards and a mouse. 
As mentioned in class, a slideshow or video could be included in our mobi feature. However, not all  of the devices, such as mobile devices can support this. Additionally, we need to decide if we want to include our Javascript component in our mobile devices. However, most modern mobile browsers are capable of supporting Javascript and HTML5 which makes use of the <canvas> element. 
Requirements 
For this assignment we are required to make use of HTML5, CSS3 and Javascript (to be honest probably the scariest part of it all :/). These elements draw on the knowledge that we have learnt and will be learning at a later date, that is, our technical skills. HTML5 allows us to implement the <canvas> element among many other rad things. If you haven’t done so yet, download, Dive into HTML5 by Mark Pilgrim. CSS3 is what allows us to use media queries which will aid us in creating responsive webpages optimised for mobiles, tablets and desktops. Each device will therefore have unique styling commands according to its capabilities. Javascript forms part of the interactive competent which will be embedded within the HTML5 <canvas> element.  
For the magazine article, we need to write up a snazzy article that educates, entertains and informs the reader. This can include information about its origins and meanings of coloured beads as well as how one can go about constructing Zulu Love Letters. If we think about “mobile first”, the article should be written up for a mobile screen. This means it should not be too long to read as many mobi users prefer to get to the point as quickly as possible. However, we may want to consider writing up a longer article that can be included for desktops as those users are more likely to browse around and muck around than mobile users. Using the hidden element in CSS3 for some sections of text shouldn’t be too much of a problem. 
A magazine layout must be visually simple enough to read (think clean backgrounds and fonts); have a catchy title with a tagline that expands a bit on the heading but doesn’t give too much away and must make use of visuals. If people are too lazy to read the article, they should be able to understand what the images are trying to say and hop on down to the create-your-own-zulu-love-letter section. 
- Have a great day!





Tuesday, 31 July 2012

26 Inspiring Responsive Web Design

So in no way trying to compete with Lailah's very cool post on media optimized websites, I also found a useful one. Although it only has 26 examples (and not over 400 examples), it still is something useful to look at. At the end, there are a couple of tutorials from various blogs about media queries (try compete with that Lailah :P). All tutorials are interesting to read in their own way as each bring something different to the table. To be honest, I really wish we had started learning fluid layouts from the start of this course as I think it would have given us more experience to think more, well, fluidly, in terms of design. Seeing all these examples of websites that have the ability to change is inspiring as well as a bit frightening. To get a site to work on different screen sizes and with different capabilities is no easy feat. I am excited to try my hand at it and see how I fare. I am dying to get out of the pixel world - it's way too static and stubborn for me. To add to all that, we have to make it look like an online magazine. From a design perspective, it definitely forces us to stop thinking about creating a typical website page with a header, nav bar and footer. 

But to get back to the point: 26 Inspiring Responsive Web Design 

- Have a great day! 

Wednesday, 25 July 2012

Some Helpful Stuff I Found

Hey guys,


So I've been doing some extra readings on mobile web practices. I came across a really helpful one, Mobile Web Best Practice 1.0. Although it's pretty long, it mainly comprises of short pointers about best practices for delivering web content on mobile devices. It aims to explain how user's experiences can be improved when accessing web content over such devices. I read this before we started term and I felt like I understood the majority of what was being said (and that says a lot!). It shouldn't take you that long to read, but have a little patience and I hope you get something out of it. 


I also found two YouTube clips that I found gave nice summaries on what we've covered so far in class. The first video: Media Queries Part 1 The second video: Media Queries Part 2.

It will be great if we could all post links of blogs or videos that we've stumbled upon and think are useful.



View this on my Wordpress site.