GIF in-class Workshop

The other day we created a sample GIF in class.

Using Adobe Illustrator and Photoshop, we created all the images you see as Vector Images in Illustrator and then imported them into Photoshop, creating the very GIF you see before your eyes. The clouds themselves were made using symbols, thus reducing the file size drastically as opposed to copying and pasting new paths in the document.

– M


So you’ve finally finished your website.

You run a list of what is completed which is as follows:

Design – Check!

Front End Functionality – Check!

Back End Functionality – Check!

And that’s it right? We’re done, correct?


You’re missing one of the most valuable aspects of Web Maintenance that essentially is a deal breaker for almost all established businesses. This is known as SEO or as others refer to it as Search Engine Optimization.

In short, this particular term defines how well Google’s “Search Spiders” crawl your website for it’s content and rank it on Google’s Search Engine pages. For obvious reasons, everyone would like to appear at the top of the list on page for whatever their website is about.

For example, if you’re a small business in Toronto selling flowers it would be in your best interest to have your website appear on the first page of search results when people type in “Toronto Flowers” of “Toronto Florist”. Last thing you’d want is for your competition to be on page 1 of the search results and you appearing on page 2,3 or even god forbid page 4 and beyond. Once you’re that far, you’re kind of stuck in the “abyss” unless drastic changes are made to your website’s SEO.

Common Human Psychology dictates that most people won’t search further than page one to get the answers they want from a question or when they’re searching something (well, I can’t cite my sources but let’s be honest, when was the last time you searched further than page 2 or even 1 to find something you’re looking for?) – so going back to our example about the Florist, almost everyone looking for flowers in Toronto won’t even know about your page because they’ll just find your competition’s first and just go with that before they’ve even had a chance to find yours. I mean sure, Google Maps might help in this sense as it will display your business in it’s Maps (along with the competition) but do you really want to rely on that only while your competition gets the best of both worlds? Thought so. So much for your fancy looking website with it’s drop down menus, order functions, contact forms and awesome layout. No use when no one is visiting it.

Hence why Search Engine Optimization is vital for any business or person to survive in this day and age of internet, social media and fancy 15-minutes-of-fame internet personalities.

In order to fully optimize your website, there are several ways to do so which include but are not limited to the following:

Key Words in your content and Meta Data
Key Descriptions in your content and Meta Data
Relevant Content in your Website
Properly labelling your H1-H6 Tags
Clear, Semantic Markup (HTML)
Linking to other relatable Websites
Fast Page Load (i.e. small image file sizes & proper JS syntax!)
Receiving Google Analytics code and applying it into your pages
Proper use of Google Search Console and Google Analytics

I’ll get into depth a little further on how each of these points can be applied and taken into consideration but this is a basic foundation of what to consider when building your website and maintaining it after.

SEM, also known as Search Engine Marketing essentially is paid-advertising for websites.

A common example you will notice this in your daily life is Google Ad Words.

Try it right now, type in “Toronto Tickets” into Google and see what happens. Most likely you’ll see at least a couple of websites with a Green/White button with the word “AD” next to it as the first pages that show up. As I’m currently searching it, I see that StubHub and the Toronto City Pass link appear first before anything else. That’s because StubHub and the City of Toronto paid Google for their pages to appear first when people search Toronto Tickets (or other related words), hence giving them that extra edge in ranking for the certain amount of time that both parties paid for.

Cool, huh?

This is just one example of SEM that I’ve covered but I’ll get into this topic more further down the line on my next couple of posts with SEO.

Until next time!

– Mike

The Beginnings of a Masterpiece….


More often than not, you’ll visit a website for it’s eye-catching visuals such as an image gallery, a cool video, a visually pleasing colour scheme and/or overall easy layout.

Sometimes even, you’ll just come to enjoy a quick snippet or meme for your own amusement, such as the one above. In any case, what most people don’t realize is that they are actually contributing to the overall psychology of website traffic and behaviour that humans are a part of, i.e. visually pleasing images, colours and layouts. We all have certain looks and styles we identify with and this all matters of course as much as the Development cycle does when creating a website or application for your clients.

Design is as much important as functionality – in fact, before most Developers begin to touch any code for a website or application, a visual aid (or wireframe, mockup, etc.) is created for them to go by and refer to when moving forward and coding up the whole project. Hence, why the Graphic Designers, Illustrators, and UI/UX Designers are needed here the most. They have the eye for enticing and appealing imagery, colours and layouts needed to keep visitors on the page as long as possible and have them keep coming back. Of course, that is not to say that you can’t be both a Designer and Developer but normally on larger-scaled projects you would be relegated to one role focus and have someone else (or other team) deal with the other roles exclusively.

As a Designer, you are taking much into account when creating a mockup for the developer or development team. As mentioned above they need to take into account colour schemes, font-types, layouts, dimensions, logos, banners, galleries, nav bars and other matters as well when putting this together. Generally the client will know the look they are going for but more often than not, they won’t know everything 100%, which is why the Designer steps in to guide them to what they are striving for with examples. They may go through some sample mockups to which the client would review and finally approve the look they are going for and in turn the Development team would finally receive the approved look to begin putting the pieces all together. This, in a nutshell, is referred to as Branding. We’ll touch base later on how important branding is to a company or individual.

The Scoop

In the end, it’s in yours and your client’s best interest to have an easy to navigate website that is visually pleasing for your visitors with hi-res images and a distinguishable look that appeals to them and is recognizable with their brand.

Why and how do we hi-res images and content? We’ll get more into that later on, but for now, here’s a gallery of some sample websites that take all our aforementioned Web Design factors and apply them masterfully in their own way a to give them a professional, up-to-date look for their brand:

I Look Good!

Thanks for reading!!

– Mike

Web Design vs. Web Development. What’s the Deal?

The difference between Website Design and Development

What's the Deal?

In order to fully understand the concept of creating Websites, we need to clearly differentiate the different steps, skills and roles needed to execute a website properly.

Web Design

This is the core of Website creation. This stage of a project includes concepts, layouts, colour schemes, typefaces, and beyond. Before you even begin to start creating files and folders, you want to make sure you know how it’s going to look like at the start. It’s in you and your client’s best interest to make the website look pretty, pleasing for the eyes and easy to use for your visitors on all formats and browsers including computers, tablets and phones. This in other terms, is Responsive Web Design (i.e. it responds to whatever dimensions the screen that it is being viewed from. You’d be creating graphics, images and all sorts of other media to be featured on your website. While no actual programming is involved in Web Design, you do use HTML (Hypertext Transfer Protocol) to create the raw layout of the website followed by CSS (Cascading Style Sheets) that will define the actual look of the website; hence the word styling in it.

Web Development

Often confused and categorized as one and the same with Web Design, Web Development couldn’t be further from the truth. It involves primarily with coding, hacking, programming (whatever you would like to call it) in several Front End and Back End Languages. I’ll touch base later on with what the difference is with Front End and Back End Development but for now, here’s what you need to know. Development includes bringing your website to life as if you only had HTML and CSS on a website, it would just be a Static website with no animation involved whatsoever, so Development helps bring it to life with near-limitless features such as drop down menus, rotating picture galleries, scrolling effects and even games. Front End Development involves coding with Browser supported languages including but not limited to:

  • HTML
  • CSS
  • Javascript
  • AJAX

On the other hand, Back End Development involves coding from the Server end of things with the following languages (but not limited to):

  • PHP
  • MySQL
  • Java
  • Ruby
  • Python

Why should I care?

We’ll touch base specifically on what the difference between all these languages means to you, either as a casual coder or a career-minded individual at a later time, but hopefully this will help you begin to build a foundation of knowledge of where this all fits in the Media Industry.

For some further reading, refer to the following link:

Click Me!