Blog 7 – SVG Evaluation

Out of both the projects I believe that this was the most difficult. Coding SVG’s I found was a little tricky because depending on the version of Illustrator you own, the exported code will be different.

The aim of this project was to create an SVG using animation and audio. But from experimenting with audio, I found that an audio aspect to my logo did not fit the purpose of this product. I experimented by adding an audio clip to my logo on hover over. I began to find this very irritating because the audio clip would trigger when scrolling and other glitches. I did not fully achieve my aim but I believe I should have done more research on implementing audio to SVG’s before I wrote this as a requirement for my assignment. I believe that this will help me in the long run because I understand now the difficulties using audio in SVG’s. I experienced something similar to this by using audio in Adobe Flash.

The biggest objective to this project was researching the coding/editing of an SVG. I did not have an issue designing the logo in illustrator because of my existing knowledge, but I however found the coding aspect a little complicated. I mentioned before that I began researching and looking at tutorials online to see how to exactly edit the coding of an SVG using CSS, but because my version of illustrator was different, I had to do extended research. I found it really hard to find examples of people coding SVG’s similar to my coding, but I got around this by using the SVG optimizer. This tool really helped as it changed my code to look similar to what I had been researching beforehand.

The demonstrator for my SVG shows that I can export graphics created in illustrator into a fully editable graphic using CSS and HTML. Although I did not add audio to my graphic, I did add animation to the SVG. The animation on the SVG is on a continuous loop and can easily be changed with the knowledge acquired. I have also shown that I have knowledge of changing something like the colour fill of graphic, without having to go into illustrator and spend time editing there.

Overall I believe I could have done a lot more with this product given more time to research and test different methods. I believe that I will be experimenting with SVG’s in the future after this project because I am very interested in the possibilities. After looking at more examples online, my goal is to create an animated graphic/comic for my portfolio. This project helped me identify an aspect of design that I had previously had no knowledge of before, and with the experience gained in this project, I will push myself to create bigger and better products in the future.

Blog 6 - Creating an SVG!

For my second self-initiated project, I wanted to really challenge my design and coding skills. Before this project, I began researching what I could research and learn, and one thing that really stood out was SVG’s. I have knowledge with vector graphics by creating graphics and illustrations in illustrator and flash, but had no knowledge of SVG’s. After doing some research and listening to what some professional designers were saying, they argued that all logos on sites should be SVG’s. After doing some research, I learnt you could do so much with SVG’s, like animating sections of a design and even adding sound. I was really intrigued so I began looking at examples people were creating and started off there.

I wanted to create another logo for myself by using my initials ‘DRE’. I have always wanted to use my initials to create a logo, so I thought I would try it out with an SVG.

I first began searching online for tutorials to get a feel and more understanding of what an SVG actually was. I soon found out that SVG’s were basically a coded graphic using numeric data and basic styling. This was a little of a shock to me because I went in thinking that all my time would be spent designing my SVG instead of coding, was I wrong. After a few tutorials on Lynda, Treehouse and Youtube, I began experimenting with creating a design that could be animated.

I started with basic shapes to begin with and trying not to bite off more than I could chew. I chose the turquoise blue I used a lot on my website and incorporated it into an oval shape with my initials. I didn’t have too much trouble creating the design in illustrator as I have used it before and believe I have grasp of the tools.

The biggest problem I had with this project was the coding. I quickly realized that the coding of my SVG after I had exported it was completely different to the tutorials I had been looking at previously. I tried to code the SVG by defining classes but this only broke the image. I overcame this problem by doing more research on the web for more up to date instructions. I simply found the information I was looking for by specifying what version of Illustrator I was using. The biggest problem solver for my coding problem was a website called SVGOMG by Jake Archibald. This simple website takes SVG coding and removes all unnecessary lines of code to make editing the code much easier. With this code optimizer, it made editing my code much easier and clearer.

Finally encoding the SVG into my site wasn’t too difficult because for the most part it was exactly the same as adding an image was a simple image tag. 

I animated my SVG by simply adding an animate transform tagging and customized it to my preference. Finally the SVG was uploaded to my website header in replacement of my old logo design.

Resources used:

http://www.petercollingridge.co.uk/blog/svg-optimiser

https://jakearchibald.github.io/svgomg/

https://www.youtube.com/watch?v=lM7cuk5DPgc

https://sarasoueidan.com/blog/svgo-tools/

https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/

http://www.lynda.com/CSS-tutorials/Design-Web-Responsive-SVG-Images/366454-2.html?org=mmu.ac.uk

Blog 5 - Time-lapse/WebM Evaluation

The aim of my first self-initiated project was simple, to learn how to create a time-lapse and export it as a WebM for my portfolio to broaden my knowledge. I believe I achieved this aim because after much research and trial and error, I believe I have a better understanding of the subject. Before this project I didn’t know that to achieve a time-lapse with a DSLR camera, you needed a remote. Not only did this remote help me complete the project’s demonstrator, but it also gave me the ability to record time-lapses for other projects outside of university.

The objectives for this project were followed very thoroughly, without research on time-lapses and equipment, I wouldn’t have known about the remote needed. Other than the remote, all of the equipment needed for this demonstrator had already been acquired. In the past I have had bad experiences borrowing equipment from the university due to the time allowed to book a DSLR camera. With my own equipment, I was able to be more flexible and experiment with what I wanted to record (sunrises and sunsets).

Researching how to export the raw video into a WebM was somewhat of a challenge. There are many different methods of exporting video into this file format. I achieved this objective by finding the right program for me that solved the file-size problem. Without this research, this part of the project would have been delayed. I went far beyond what I originally had planned for this part of the project, initially I was only going to find one website/program and export my video as a WebM. Because I spent more time with research, I avoided problems I would have encountered if I wouldn’t have done more research on this area.

The final objective for this project was achieved, but I found this to be the most difficult. Because I hadn’t done the amount of research I needed to and underestimated this part of the project, it delayed my performance of adding the WebM I had created to the portfolio website. The objective was achieved but I believe I could have done a better job given extra time to test and do more research in this area. I wouldn’t consider my coding skills to be great so it is an area I really need to improve on in the future.

My demonstrator for this project demonstrates my ability to use my skills and combine them to make an impressive product that showcases my ability. The demonstrator first and foremost shows my ability to not just learn one skill such as the time-lapse, but to take it much further. My plan for this project was to just do a time-lapse, but after doing research on WebM’s, I really wanted to test myself and combine them both. Overall I believe the demonstrator for my time-lapse WebM really shows how innovative and eagerness to learn something new I can really be.

Blog 3 - Improvements to my portfolio website

This blog post is about how I improved my website using the feedback from my tutors. Examples of my improvements will be illustrated using images, please click the images to make them larger.

A few of the smaller improvements to my website were making the logos on my website clickable so that they took the user the back to the top of my website. In my footer I have my logo, I simply made the small logo a link which took the user to the top of the page. 


This made the user experience of my website better because users wouldn't have to scroll back to the top of my website.

The next improvement I made was make the link to my CV stand out more. First the link to my CV was a text link saying ‘here’, this was a bad decision because it didn’t stand out and it was hard for users to see. So I the improvement I made was to create a simple image link.

The biggest improvement I had to make to my site was my blog. Originally the only link to my blog was in my navigation bar. This may sound like small negative point but in terms of accessibility and user experience, I needed to make a blog section on my website.

So I creating a blog section to my website and added a paragraph telling the user, clicking the links below will take them to an external website (Blogger). This paragraph just simply gives the user a warning before the click it and be taken to a different website.

What I also did for user experience, I added a link to go back to my website at the bottom of all my blog entries.

Another small improvement to my website was the headers in my contact page. The line spacing on this header is a little hard to read on other devices, so I simply removed the line spacing.

One of the improvements I completely overlooked was my contact form. I did not have text above my message box asking the user to write a message. What I wanted was placeholder text in the message box simply saying ‘please write your message here’ but I couldn’t get the coding right. So a simple work around this problem was to add a line of text above the message box.

All of these small improvements were made to make the accessibility and user experience the best I could possibly achieve. What’s the most important thing is to get eyes on my website, and everything be readable and accessible. Because I’m not a very good coder or web developer, I would like to make my website more adaptable on other devices. In the future I will learn more and teach myself about responsive and make my website not only accessible on all platforms, but the design be consistent.

Blog 4 - How I made a time-lapse and made it into a WebM

This blog post is a little different, I will be detailing how I learnt how to film a time-lapse, learn about WebM’s and how to convert my time-lapse into a WebM. The reason why I chose to do WebM’s as my first self-initiated project was because of my instant interest in them. My knowledge of WebM’s were quite basic, I thought WebM’s were a video format (which I later learnt it really isn’t). WebM’s are the new kid on the block when it comes to video formats on the web. Because WebM’s are new, you don’t really see them on websites that much. You may come across them every once and a while, most commonly on image boards. After getting stuck in and searching the web for articles on WebM and the legal troubles they currently having, browser support and alternatives, I was determined to learn how to create one to use on my site.

Time-lapses were a different story. My knowledge of time-lapse was just from an audience member, nothing technical. I have always wanted to learn how to make one, now that I own my own equipment (camera, lenses and tripod etc. But what I didn’t know is that I needed a digital timer remote. Without this remote, filming a time-lapse with my camera wouldn’t have been possible. Because I have an older version of the Cannon (700D), I didn’t get the time-lapse feature that the newer models have. I got around this problem by going online and purchasing a cheap digital timer remote. After doing some research, most digital timer remotes pretty much operate the same; some paying extra for a branded remote was pointless.

The filming of the time-lapse was a little tricky. I wouldn’t call myself an expert with my camera, I’m still learning so I had to look online for tips on how to actually film a time-lapse. The process was quite simple; all I needed to do was with my new timer remote, set the remote to take an image at the time I set it. Because I was filming for a few hours, I set my camera to take a picture every 10 seconds for roughly 6 hours. After fearing the weather turning bad and raining, I produced a very nicely made time-lapse of clouds forming. I will add a link to the raw footage bellow.

Finally it was time to export my video as a WebM. I first went into this thinking it would be much harder than it actually was. After searching online for the best way to convert MP4 into WebM, the response was to use a converter. The problem I found was to find a converter that I could export the WebM at an exact resolution. After some searching I found a WebM converter called ‘WebMBro’ that could do the job. This converter was created for beginners, so this was perfect for me. It was then as simple as choosing the input (the raw MP4 video file), choosing the resolution and convert.

Finally embedding the WebM into my website was very simple; I just coded the WebM like I would do an image with a simple image source code in HTML.

Here are a list of resources I used:

https://www.youtube.com/watch?v=MZmqJqeb64g

https://www.youtube.com/watch?v=WeM3SUp-HRg

http://www.amazon.co.uk/gp/product/B00C1C0WQC?psc=1&redirect=true&ref_=oh_aui_detailpage_o00_s00

https://github.com/WebMBro/WebMConverter