Category: design

Interactive Video: Think of the Possibilities for Education

Scene from Jack Black's "That Black Bat Licorice" video
Scene from Jack Black’s “That Black Bat Licorice” video

I’ve seen a couple of interactive videos recently. One was an version of Bob Dylan’s “Like a Rolling Stone.”

In the Bob Dylan video, you use up and down arrow keys to move between various visuals, all perfected coordinated with the song. I’m unable to embed the video here, but I urge you to check it out and play with the interactive elements.

The second, which is below, is by Jack Black for his song “That Black Bat Licorice.” In Jack Black’s video use the “3” or the “B” key for 3 different versions of the video. Again, play with the controls as you watch it.

What got me all worked up as I watched these two videos is the educational possibilities. HTML, CSS, JavaScript, apps like Dreamweaver and Photoshop – imagine how something like this could be used to teach those topics.

Tools and Resources for Interactive Video

The folks at PBS’s POV Filmmakers have a great resource list of tools and costs. For each tool in their list, they give examples of work and describe what the tool does. Finding the best tool is also a topic of discussion on Quora. You can do some interactive work with videos on YouTube.

I would certainly be interested in seeing someone experiment with interactive video as a teaching tool. If you’ve seen anything like that on the web, please mention it in the comments.

Resources for Material Design

Material Design is a set of design principles created by Google for developers creating apps for Android. They call it a design language. The concepts don’t apply only to Android, of course. Some of the resources I’ll mention below can be helpful to anyone.

You may be familiar with the way things designed this way look and work, because Google has deployed it on most of its sites since last June.

color blocks for picking a color scheme
The opening page of materialpalette.com

Material Palette is a bold color picking tool. Simply pick two colors and you are offered a color palette.

a group of colors with color codes
The color palette for blue and deep orange

Material Palette is quick, simple, and useful to any app developer.

To back up a bit, a definition and description of what Material Design is all about can be found at developer.android.com. It deals with more than color choices. The design concepts also involve animations, shadows, and drawables.

Google also provides a set of basics about Material Design. The Google site discusses the goals and principles of Material Design and goes on to explain style, animation and many more aspects of development using the concepts.

MaterialUp.com offers inspiration in the form of daily examples of how the concepts have been used in websites and apps. This site and Material Palette are interconnected.

Why have a wrapper div?

Students may have a problem grasping is the need for a wrapper div. I frequently find myself explaining it numerous times until the message finally sinks in.

The metaphor I’ll use today will be to compare a wrapper div to a fence.

A wrapper div, or a container div, has no semantic meaning. It’s a generic container. Therefore, <div> is the proper tag. A <section> element should not be used as a container. [See: Sections and Articles are Not Generic Containers]

What does a fence do?

  • It demarks the edges of your property.
  • It contains animals or children within a prescribed area. It keeps them from getting out.
  • It creates a border between one area and another.
  • It can be plain or decorative.

A wrapper div in an HTML document does the same things but to a layout instead of to actual property.

  • The wrapper holds a design within certain boundaries.
  • The various areas of a design cannot escape from the boundaries set by the wrapper.
  • A max-width or min-width or varying width based on an @media query can be set for the wrapper that makes it size a design responsively.
  • The id identifying a wrapper provides a CSS hook which enables more than size constraints. Borders and other decorations can be added.

With a wrapper div in place, a layout can be centered on the page. The width of the design can be controlled for easier reading and line-length.

It’s necessary to create the wrapper with a div and an id:

<div id="wrapper">everything on the page goes in here</div>

One of the principles of HTML5 is to pave the existing cow paths. Hence we have all sorts of new semantic elements like header, main, and footer that were once created using the same div with an id technique.

If wrappers are so great, why isn’t there a new HTML5 element called wrapper? I don’t know the answer for sure, but I’m guessing it’s because a wrapper is not a semantic element. It’s merely a container, a boundary into which you place all your semantic content.

By the same token, there is no ARIA landmark role for wrapper or container divs. The container carries no semantic meaning, it just puts a fence around the content. There’s no need to indicate it as a landmark on the page.

Good Accessibility Talk to Watch (Video)

This is worth your time. It’s a talk by Monika Piotrowicz of Shopify. I like her instruction to use basic HTML whenever possible instead of putting something else in to overrule the semantics. Her explanation of ARIA is excellent.

The close captions aren’t great. They were generated automatically rather than from a transcript, but they do appear if you need them.

Hat tip to Dennis Lembree who shared this on Google+, which is where I first saw it.

Review: The Design Method: A Philosophy and Process for Functional Visual Communication

Affiliate link to Amazon

The Design Method: A Philosophy and Process for Functional Visual Communication (Voices That Matter) by Eric Karjaluoto is from New Riders (2013). This book changed my impression of myself as a web designer.

Prior to reading this book, I would have told you I wasn’t a designer. My designs were super simple, even plain. There were no cute little graphics all over the place, no lush backgrounds or images, no clever metaphors. If you’re reading this on my blog, you’re looking at what I think is a good design right now. Plain, white background with black text, clear in purpose and easy to read and navigate.

Turns out that Eric Karjalouto considers my choices to be design choices. He says design isn’t about how decorated or beautiful something is, but instead is about how something does what it is meant to do. In terms of a web design, that means communicate.

It takes Karjaluoto about 10 seconds to debunk the myth that design is about visual beauty and a number of other commonly held beliefs about design. He says it’s about making things. He calls it a problem solving process that helps facilitate desired outcomes.

The book describes his problem solving process and is a practical outline of the step by step work needed to discover what outcome a design is meant to produce and then discover a way to make that happen. In that sense, his design method gives you a map that will help you create a design process that works and help you run a successful design business. There are checklists, systems thinking and steps, and details about everything from using his design method for discovery, planning, creating, and applying ideas. He also helps with ideas on how to present designs to clients.

The book would be particularly helpful to designers who are struggling to build a business that makes money. It gives steps, processes, client interview techniques, testing techniques, and all kinds of ideas that a firm can use to build designs that work, and therefore a company that works.

A review by Virginia DeBolt of The Design Method (rating: 5 stars)

Summary: Practical not precious. Advice for getting things done.

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy.

10 Awesome Free Photoshop Extensions

10 Awesome Free Photoshop Extensions

Photoshop is one of the most amazing pieces of design software ever created, and I, for one, absolutely applaud Adobe for adopting the software-as-a-service business model, which makes Photoshop and the rest of the Creative Suite more accessible to graphic designers everywhere. Another key component of Photoshop is the ability to extend it with third-party plugins. If you want to take Photoshop to the next level, download the following 10 awesome free Photoshop extensions today.

Skeumorphism.it

The days of high-gloss and texture are over – flat is in! With this Photoshop plugin, you can make your design flat in, well, no time flat!

Flat Icon

The Flat Icon plugin lets you instantly access more than 25,000 icons to use in your designs, right from Photoshop’s interface.

CSS3Ps

Crafting a compelling design in Photoshop is one thing, but turning it into workable CSS styles for websites is another. This handy Photoshop plugin automatically converts your layer styles into CSS.

BlendMe.in

Access thousands of vectors to use in your designs fast and easy right from Photoshop’s interface with this awesome plugin.

Interface Tools

The ultimate interface toolkit for Photoshop, Interface Tools eliminates the need to endlessly search for Photoshop tools and provides a host of other functions that streamline the design process, all free of charge.

GuideGuide

Grid-based layouts are the most attractive, but Photoshop makes it painfully difficult to work with grids. With GuideGuide, you’ll have properly proportioned grids in seconds.

Layer Guides

If you add guides to your layers, you know how tedious it can be to click, click, click for every single layer. Layer Guides adds guides to all of your layers with a single click.

Divine Project

PSD to WordPress designers take note: This is the ultimate extension for you, because it helps quickly convert Photoshop designs into workable WordPress themes. Zero coding required!

Web Font Plugin

Access Google and WebINK web fonts from Photoshop’s interface with this ultra-useful plugin.

CutandSlice.me

For all its advances, Photoshop is still old school when it comes to slicing graphics for the web. The Cut&Slice Me plugin makes it easy to quickly slice graphics for today’s web, including the capability to slice and capture all button states at once.

What’s your favorite free Photoshop plugin?

Author’s Bio: Brian Morris writes for the PsPrint Design & Printing Blog. PsPrint is an online commercial printing company. Follow PsPrint on Twitter @PsPrint.