Canva.com: Graphic Design Practice

In an earlier review, thePhotofinishes.com examined Canva.com as a a Graphic Design School and came to the conclusion:

So clearly Canva.com is not a Photoshop or Illustrator for design features. But there are enough robust options and a great set of practical, Try-It-Yourself lessons in the spirit of W3Schools for Web Development, that makes learning the elements of Graphic Design not only approachable but also creatively fun. Score two big thumbs up for Canva.com as a superb online resource for learning Graphic Design.

But how robust can Canva.com be in actual Design Practice? Well we offered as a sample the 12 designs finished during the review in about 5 to 6 hours:
canva1
These designs were certainly aided by the Canva tutorials on Fonts, Layout, and Branding. Also, design work on refining my own photo blogs like PicsofCanada.com and PixofToronto.com were influenced by Canva inspired  creative ideas.

So when Canva offered a JavaScript button to embed a Canva workspace in my Web apps, I jumped. This is an attractive way for JavaScripters  to embed a Canva button in their JS Single Page App. This enabling a Canva workspace in their app is very nifty. Aviary offers the same  embedding opportunity for their photo editor to JavaScript astute developers.

But let us return to the question of how well does Canva further Graphic Design Practice?

Graphic Design Practice

Canva.com takes the approach of learning Graphic Design by doing it. Thus even, the Getting Started tutorials have users immediately trying out some of the key Canva features and Design methods  while on hte tour. And then the next set of tutorials all have exercises set up to utilize the Canva skills while revealing basic Design theory. Thus learning about Grids draws on what was previously about Fonts while revealing the magic of order in collages and grids. This hierarchy of lessons makes getting up to speed in Canva that much faster and easier.

And Canva is crammed with lessons on every aspect of Graphic Design. Be sure to check out the Canva Teaching Materials. For example, I wanted to investigate more aspects of font usage and in the teaching materials I found a link to this Design School blog post the Ultimate Guide to Font-Pairing. In general, Canva is crammed with Workshops, Teaching Materials and Blog posts on all aspects of Design. And the only price of entry is to subscribe to Canva.

This practical teaching approach is further supported by all the templates that provide a design inspiration for dozens of tasks:
canvatemplates
This practice is somewhat counter-intuitive. Doesn’t creativity require its own pot brought to a solitary boil? Well no. The Impressionist Painters in France and the Group of 7 in Canada are but two examples of where artistic communities helped feed each others individual creativity. And the Web has seen huge websites grow around shared works like Flickr in photography, Dribbble in Design, Pinterest in branding, Tumblr in copy meets design, ColourLover for color palettes, patterns and trends, etc, etc. Seeing novel design ideas stimulates the creative juices. And every one of  Canva’s template categories has plenty of creative ideas on display.

Creative Tool Balance

Its our argument that Canva has reached a creative balance. It is the essential graphic design tool features without being overwhelming with detailed options like in Photoshop or Inkscape or Visio. Likewise the tutorials are often short and sweet, 5 steps to illustrate a design goal or tip. There is help and hints strategically placed throughout. But Canva spares no effort on graphic tips, tricks and methods and is chock full of great readings on graphic design methods and trends – be sure to check out the Blog.

Finally, this balance encourages trying things out. The templates are just a click away from editing with a rich starting point:
canvatriHere is a sample of how an Arizona postcard transformed into a Northumberland Hills Ontario ode. The key was to preserve the palpable enthusiasm of the original into a heartfelt testimonial for the landscape and countryside of Northumberland Hills. And the well balanced Canva tools don’t get in the way but rather encouraged trying things out. More and less transparency. Bold, then italics, then neither in the fonts. Deep Purple-black in the title, then sticking with Black & White. Romance in the footer script and larger size. 20 minutes and happy with the results.

Canva Extras

DABumdTJoD4 Canva has a number of extras both free and for a fee. The branding image on the left is a direct insertion using the Canva WordPress plugin.This is a free plugin which allows users to work on a design in Canva and have it placed in your Post or Page where desired. This plugin is a great way for WordPrees site managers to add style to their  designs and yet still retain the ability to edit them later in Canva.

Canva also has a free iPad app on the Apps store which provides a mobile version of the interface that emulates much of the desktop version. As well the Canva Button has become so popular that the Canva has had to close signups until it can be adequately supported.

For Designers and Photographers Canva has separate affiliate programs. For Work Groups Canva has a team option which costs $12.95/month but allows working with a brand kit and collaboratively. There is a free version available for non-profits.

As noted before the blog is full of great references and resources. Latest discovery – Free Stock Photos: 73 Best Sites To Find Awesome Free Images. The blog is invaluable.

Finally, Canva has a Teaching Materials page where free and for-a-fee workshops are available. The workshops are embedded in Canva and  provide both a slide presentation and lesson notes. There are other references and related links. This is a fitting closing feature about Canva and its dedication to teaching Good Design.

Summary

In our first review of Canva, it was rated as a super tool for learning the basics of Graphic Design especially as they apply to Print and the Web. This review raised the question whether the site is a good place to practice Web Graphic Design. And the conclusion is that Canva provides Design Tool balance – not too much detail  so that good design gets lost in the confusion; but more than enough to arrive at some very pleasing [and dare I say well-designed] works. Last, but not least, Canva provides solid export tools for design output to PDF, PNG, JPG and even WordPress pages and posts.

 

Advertisements
Posted in coding | Leave a comment

TO Style Graffiti

TOScenesNifty graffiti ? All over TO Town.

See more here!

Posted in commentary | Leave a comment

JavaScript Comes To WordPress

What Calypso means to WordPress Users

JavaScript has always been a part of WordPress. But within the last 5 years WordPress has expanded its use of 3rd party JavaScript libraries as seen in the current list of supported JS libraries:
Backbone.js – handles much data table operations
cropper.js – key part of media library Crop tool
emoji.js – manage emoji icons
html5.js – checks HTML elements
jQuery .js- most frequently used JavaScript library
jQuery.imageareaselect – part of Media library edits
jQueryUI. – many admin interface ops
swfupload (deprecated) – Adobe Flash is disappearing
ThickBox – Gallery views
TinyMCE.js – Visual editor features
This list of JavaScript routines varies widely depending on  the theme and plugins being used in your WordPress website.

Enter Calypso

calyp2In November of 2015, a new Calypso UI/UX interface was introduced on WordPress.com  as the screenshots below show. Matt Mullenweg,  WordPress creator and curator, has announced, JavaScript has become the dominant coding tool for the WPAdmin Client and other user interface functions at WordPress.com.

So when you  use  one of your blogs at WordPress.com you will have a choice whether to use the JavaScript-based Calypso interface or the traditional PHP-based admin and edit  interface. The key question is what does this mean in the long term to the PHP-Centric WordPress  Core and the 42,000++ PHP-based WordPress plugins currently available to WP users.

So now with WordPress.com, users have all the major WP screens and operations but with new JavaScript driven interfaces. Much of  the Calypso interface reproduces the classic WP Admin UI but there are some major changes. Here is a Calypso Post Edit screen:
calypsoMost of the PHP-based traditional Post and Page edit interface is faithfully reproduced in Calypso JavaScript but with new left versus right sidebar orientation. Unfortunately I was surprised to discover that many of the WordPress Edit Annoyances are preserved in the new Calypso editor. If you want to check this out on your WordPress.org hosted website, just add the JetPack plugin and enable the Manage Jetpack option.

Calypso is used throughout the new admin interface. Here is a sample:
wpcalmenu

In the screenshot above the drag and drop Menu interface now has  a + icon driven placement of new menuitems. In the Page/Post editor, the Visual Edit tab looks very much like the classic WP editor but the Text or HTML tab is now stripped of all its edit commands:
wpcaledithtmml

Also note that the Editor sidebar is on the left and most of the commands are contained in an accordion pulldown. However, many of the classic WP  commands have changed position,  layout or even have yet to appear in the current Calypso interface.

For example, the gallery command in the media library sees a simpler interface:
wpcalgallery

Even more useful, now there are 7 gallery layouts including tiled mosaic and slideshow layouts that are simple and easy to use. But these layouts cannot be configured at all while there is still no list of galleries . So this  removes  some of the luster for Calypso gallery support.

Major New Calypso Features

In the past few months a number of Calypso features have snuck out the door including changes to the editor  and JetPack configuration/settings, etc. But with  the Calypso unveiling, all of WordPress.com  admin interface has changed. And the new Admin interface [you can still revert to the classic old WPAdmin] takes on new functionality.

First, using a special Calypso Mac App or WordPress.com in any major browser, and a JetPack plugin enabled hoste WordPress.org website, users now can tryout many parts of the Calypso interface have a multisite admin interface for many WP tasks:
wpcaladmin

So from my WordPress.com MySites page I am able to edit my PicsofCanada.com website which is hosted on an  external server. This is attractive because it means I can go to one place to administer a host of my own and client websites. There are restrictions, see here for details.

Second Calypso key feature is that JetPack now has a uniform JavaScript base with a common setting/configurtaion interface. But this raises a question, that Matt Mullenweg is not prpapred to answer – will JavaScript replace PHP as WordPress’ Core language?

Third key feature  is the fact that WordPress now has a more general Notifications system. Users go to one place to see clients reactions and comments to messages and posts online. This messaging  answerback  page   could be extended to other social media like Faceboook, Google+ and Twitter.

In sum, WordPress with its JavaScript for admin and  client side  operations now has a new state of the art interface using the latest JavaScript libraries. Just a little future proofing by adding and/or intensifying the use of server-adept JavaScript libraries like angular.js, node.js , React.js, etc. More broadly, JavaScript after 24 years of Web evolution, emerges as the driving programming language for WordPress and also  broader Web  development.


Calypso Resources:
Definitive Overview
GitHub Open Source
Matt Mullenweg talks Calypso among other things
The Future of WordPress in 2016

Posted in coding, ui | Tagged , , , , , , , , | Leave a comment

Eco-Scroll jQuery Plugin

I have been looking for a robust jQuery plugin that would allow me throw up a wall of images very quickly – no fuss, no muss, just display them quickly in a Window. And with thef Eco-Scroll  plugin plus the Photoscape‘s Batch Image Editor I have found a very nifty solution to my problem:
ecoscroll1 Now here are the features of the Infinite Image Wall:
1)It is responsive, expanding and shrinking the image wall to fit the viewport;
2)It allows developers to determine the size of the images displayed;
3)The display size of the images can be different from the actual size;
4)The actual image sizes do not have to exactly match, the resize operation, shrinks and expand image automatically. However, mixing landscape and portrait will lead to distortions depending on what image display size is chosen;
5)For non-touch screens, mouse drag and drop moves the images in any direction; for touch screens, swipes work;
6)For developers it is easy to add lightbox or other functions to respond to clicks on any image as shown in the screenshot below;.
ecoscroll2
7)Developers can easily add “momentum” to the swipe/mouse-drag operations
In sum, there is a lot to like in this free jQuery plugin. But there is more.
ecoscroll3
Bootstrap-like Carousel with Touch and Drag support. And there is more, the Wall of YouTube.
escroll4
This again turns out to be handy because you can collect your favorite JavaScript Tutorials or Tonight Show Lip Sync Battles and put them on your online, responsive, and swipeable Youtube Wall and watch all the user traffic roll in.

Summary

I like Eco-scroll because it more than delivered on being able to quickly setup an Image Wall full of useful features. The icing on the cake was all the added features and functionality. Check it out here.

Posted in coding, reviews, ui | Tagged , , , , | Leave a comment

All the Free Lectures in the Past Year

Well being an advocate of Open Source I had not realized the number of free tutorials and lectures I have given until I gathered all the posters together. Here is what has happened from Feb 2014 to Feb 2015:

Posted in coding | Leave a comment

CodyHouse – A New JavaScript Framework?

JavaScriptures has followed the fast development of JavaScript frameworks with UI based frameworks like DHTMLx and Sencha with their nifty page oriented Visual Designers. There is also the responsive SPA-Single Page Applications JavaScript frameworks like Bootstrap, Foundation, and Ink . Well a new Web Design website CodyHouse has appeared with some striking similarities to the SPA Javascript frameworks – free, design oriented, HTML5, full CSS, JavaScript components. Here is a sampling of CodyHouse components.

cody2libraryThere are currently 36 of these components available – but a new 1-3 appear every month

And CodyHouse provides a demo of how each of their components work -doing one better than the other JavaScript frameworks :
cody1

There is a detailed explanation of the HTML, CSS, and JavaScript involved:
codydetailsClick on the above screenshot  to find one of the CodyHouse co-founders.

In addition the CodyHouse getting started page provides a HTML/CSS/JavaScript test harness for embedding CodyHouse components  for rigorous testing . Again a screenshot is worth a thousand words:
cody3start The getting started guide and test harness are  refreshingly  complete

CodyHouse components have a test harness that is quite general. And all that an adventuresome Web developer would have to do is add the various  CodyHouse components together, check the responsiveness of the code ensemble, create a small templating system – and you have another very good HTML5/CSS/JavaScript framework.

Summary

Coders who use Bootstrap, Foundation Zurb, and Ink should take a careful look at the CodyHouse’s UI components. Trust me, CodyHouse works well for SPA-Single page Apps as well as more complex multi-page designs with one proviso- be careful with the CSS.

Likewise WordPress sites [but not WordPress.com users] and Blogger users will find that CodyHouse components can bring design flare to their websites. There are several plugins and PHP code snippets in WordPress for importing CodyHouse components while Blogger allows iframe code/component embeds among other ways to add HTML/JavaScript/CSS components in.

So JavaScript coders plus Web designers and developers have with  CodyHouse  a great new source of both design ideas and viable UI components …Oh and maybe the makings of a new JavaScript framework.

Posted in coding | Leave a comment

Two jQuery Grid Layout Routines

Web design constantly uses image grids for such applications as product listing pages, portfolio sites, or travel site pages. The typical image grid uses a common size thumbnail image size  say 250 x 180 pixels or whatever the client needs. For example:
fleximisotope
This Isotope.js  list of artists with  all thumbnails at 300 x 200 pixels 
Currently there are two free jQuery routines that handle these grids very well with  comparable features but also each has some unique capabilities – Isotope.js and Fleximage.js. This review will look at the two routines and their trade-offs. But first lets consider why you would want to use an image grid rather a slider.

Comparison of Slider vs Image Grid Usage

Given the wealth of free and responsive JavaScript sliders and the equally impressive list of free WordPress  sliders, one might well ask  why use a image grid when so many good sliders are available? There are a number of free and good Carousel sliders with multiple images in a row available. But that is the problem with using sliders…they don’t do  a grid or table of images well.  Pinterest shows the power of a versatile image grid:
pinterest

In contrast image grids like Isotope and Fleximages thrive on being able to display grids of thumbnails for a product listing, portfolio showcase or people catalog with extra features like captioning, links, varying gutter and borders, filters of the images, etc. Image grids with flexible capabilities  are vital to Web apps and website UI design.

Comparison of Fleximages.js and Isotope.js

There are a number of JavaScript image grid routines. However, the following list of features for Fleximage and Isotope show the features that sets them apart:

Feature Fleximages.js Isotope.js
Cost  Free  Free, $25 one time for commercial use
Documentation/Examples Good Very Good
Responsive Yes Yes
Fixed size image Fast, well fit Fast, well fit
One image dimension varying Fast, well fit slower, more blank spaces in grid
Both dimensions vary Fast, well fit  slower, more blank spaces in grid
Control of border, gutter Yes Yes
Captions with positioning Yes Yes
Links & HTML in image grid Yes Yes
video, iframe Yes Yes
Lightbox popup 3rd party 3rd party
Infinite Scroll Ajax routine Yes
Filter out images No Yes
Randomize Image order No Yes
Infinite Scroll Ajax routine Yes
Lazy loading Yes 3rd party
Truncate incomplete last line of images Yes No
WordPress Support iframe plugin

Fleximages.js has 3 advantages over Isotope.js. First and foremost Fleximages handles the case of images varying in size on one dimension or both with much faster performance and  a better first fit than Isotope.js. The example below shows

flex1

Fleximages, like Isotope, allows different sized images in the grid. But in case above, the grid was rendered faster  and with a better first fit than Isotope. Also,  shown below, Fleximages has truncated off an incomplete row of images and/or videos.

flex2videoAnd like Isotope, Fleximages is responsive –  resizing the videos as the row is shrunk in a mobile app. In this coding, Fleximage is set to truncate any video/image that stands alone in a row using the option truncate: 1 .

Can Fleximage deliver captions and links within those captions?
flexcaptionsAgain, Fleximage like Isotope, easily handles captioning including wrapping to a second [or more] lineas required. Note the blue 222 in the second caption is a link to another page. Like Isotope, users can position the caption anywhere above, below and on top of the contained image/object. This captioning and linkage is vital for product and portfolio grids of images.

Isotope.js comes to the fore in three cases over Fleximages.js. First and foremost, is the ability of Isotope to filter images based on  tags [CSS class names]:
peggysbookClicking on the tag Fiction will show just the Fiction books written by Peggy Leavy.  A click on Mystery  reveals Peggy’s mystery titles. This capability  is vital in displays of product showcases or travel catalogs, etc.

Another feature of Isotope is its ability to randomize the order of the grid images each time it is displayed on a website. This requirement arises on joint artists sites for example, where no one artist should always be at the head of the image grid. Finally, Isotope.js has excellent documentation with lots of examples.

Summary

With Fleximages and Isotope  I have found two  jQuery routine that can  display images grids with great flexibility. These images can have captions, links, and contain videos or iframes. Fleximage gives greater speed and a better fit on first try [Isotope on screen refresh hones in quickly on a better fit]. But Isotope provides vital instant filtering of images. Best of all both routines can be used very effectively with Foundation, Ink, or Bootstrap JavaScript SPA-Single Page Application frameworks. In addition, using iframes, Fleximage or Isotope can be used in WordPress or Drupal and other CMS websites.

Posted in coding, reviews | Tagged , , , , , , , , | Leave a comment