#LogifyMe

I must confess that my initial idea was slightly different, I wanted to use HTML5 Canvas to draw my name @gpjalameda, and with the use of the animation features, transform the words strokes in a figure that I can use as a Logo. Very cool right?

Ambitious project I guess, I have no idea if it can be done using canvas or or any other technology!

But I decided to accept the challenge and sign up for Dev Art, in my mind the project looks very cool.

This was three weeks ago, and a week later there is not a single line of code written, nor templates, sketches or mockups. Nothing!

When I receive the warning about of the end of the submission time, I feel concerned.

And looking at the list of the pending things is when a new idea comes to my mind,

Why don't to try to combine some of the stuff pending to create a new project?

Why don't to take something that I'm not happy with and try to improve it?

I have done tons of things that fulfil these requirements. But I choose to develop something that can help my mother's online shop looks better, that would help with my web design business and will make that I learn something new that I put on hold for weeks. I feel more motivated, here we go!

PS. for the curious people, here is the link to my Mom's Shop

PSS. I know, I know, still needs some work to be done, ok, stay tuned.

Author

Jesus, Garcia-Parrado, @gpjalameda, Lux Design Works

Project Description

My mother is starting her business, she designs and manufacture thermal seed bags and sell it directly and through local stores, she is doing very well!

As she explains me, every single bag is different, she just have to seat down in front of her sewing machine and new ideas start coming.

There are only two things that are present in all of designs:

Three shapes that she sews to every single bag, a circle, a rhombus and a heart. I guess it has a hidden meaning, but she doesn't want to share it with me, can you believe it?
The LOVE she puts on doing it, the love she put on every stitch and you can feel when you have the bag in your hands.

Ok mom, meanwhile you work on your designs and make grow your business locally, I'm going to start the set up of your online shop.

That's how the idea for the logo comes to my mind: "Rafaela Alameda, tons of love on every stitch".

I'm not happy at all with the first version, you can see a picture if you continue read on. I'm sure that working a bit on the logo I can make the message more clear.

I found great resources and documents on HTML5 Canvas and CSS, that I feel confident to build an animated logo that looks great.

Here is the link to the web page inside Github, click open to make it run.

Rafaela Alameda Logo

Following the list of files that make part of the project and a short description:

index_14.html. It is the main page where I draw the animated logo.
stylesheet.css. Here I define the style and I use it to position the components.
jquery-1.5.min.js. It helps to easily pick up and manipulate the components inside the web page.
wirelib_0.3.js. It is the library that contains the functionality to draw wires and animate it.
mar15.js. It is where I define the wire frames for the page and how they are going to move.
shapelib_0.1.js. It is the library that contains the functionality to heart shapes and animate it.
mar18.js. It is where I define the heart shape animations.

Links to External Libraries and Resources

A couple of months ago I found this series of tutorials about HTML5 canvas, it is the main cause I decided to participate.

This is a good moment to say thank you, there is a lot of work done in advance on this tutorials, and he generously shared it. I took the resources there and try to use it in a different way.