Flat and minimalistic design is THE megatrend nowadays. Raning from Google's Material Design via Microsofts Universal Apps design to iOS - its all about flat - and less is more. This is good news for anyone not comfortable with handling those detailed nitty-gritty pixel-perfect effects, not to mention flat designs are easier to create with Keynote too.
Your average presenter tool (Keynote included) is heavily inspired by paper - yes, the chopping down trees, boiling, pressed, square-shaped thing you can print out and give away physically. Thus the "next slide" paper-like flow, which is not exactly suitable for making interactive prototypes. Arguably going through slides is like rocket science compared to switching between files in your favourite designer tool.
As it turns out the Keynote team has yet another trick up their sleve - "Link mode". From the document settings you can change presentation type into "links only" - which will free you from the linear presentation flow. To move between slides you now have to click an object with a link - potentially taking you to a slide before the current - Crazy isn't it? I Imagine you already see the potential of this feature?
Custom slide size
Most people are not aware, but Keynote actually supports custom slide sizes. Just choose your favourite theme, and set your preferred slides-size in pixels. This way you can easily create designs that fit perfectly on your phone for instance. You'll find this setting from the document properties tab top left.
"Good artists copy, great artists steal" is a famous quote. When designing in Keynote the brilliant trick is stealing good designs and ideas by copying them to make them your very own artwork.
Spend time investigating various applications, sites or design guidelines until you find something you like and steal it! No reason to invent the weel if someone has already done it before you, right? Remember you may copy just about anything - searching Google for icons is one way of doing this - i.e. "white coffee icon" shoud get you some nice white icons in a few milliseconds.
Copyright disclaimerRemember to verify permissions for any artwork before using it in live applications and sites!
As we go about copying screenshots, icons and other neat things we come across - they might not always have the proper background color to match your design. Once more Keynote has an excellent solution to your problem. To remove a color (or range of similar colors - simply select the image and use the "Instant Alpha" tool. Now select the color you want to remove (to select a color range: drag until everyhing you want to remove is selected) and release. Voila, the color is gone!
The trick where Keynote really pulls the rabbit from the hat has the matching name "Magic Move". This feature is as powerful as it is simple. When moving between two slides - objects that are similar across the slides will automagically be animated from slide 1 to slide 2. So simply copy anything that is visual in your target slide into the starting slide, select "Magic Move" as your transition type and watch the magic unfold. The result will convince just about anyone your prototype is the real thing.
Run live tests on iPhone
Since Keynote is available for iPhone too, any designs intended for use on a mobile device may easily be tranferred and run on your iPhone. Simply start the presentation on your phone and hand it over to someone and see what happens!
It's also good to know there are many professional design and templating sites that can help you speed up your prototyping even more - some are free - and other offer a lot for a modest contribution:
No designer on your team? No problem! Everyone with a Mac and Keynote can create awesome interactive animated designs. This post will reveal how to rip cool designs and make them your own faster than you can say prototype!
“Once upon a time there was an Ugly Form. Every day it would look at beautiful forms residing peacefully on the endless pastures of the Internet and sigh with envy.
‘Don’t I deserve my share of HTML happiness?’ the Form thought. ‘Why do users shriek in disgust every time they see me? Why do they look terrified (and sometimes cry) when filling out my fields? And why the hell do they wash their hands after clicking my flabby lifeless buttons?””
Every time I would tell this amazing fairytale to my kids before their bedtime, they’d ask me: “Daddy, but why can’t the Ugly Form be happy too? Sure, it looks like HTML got diarrhea and pooped out a pile of colorless Lego bricks, but maybe there’s a chance for it in our cruel world?”
And one day I finally decided to play the Fairy Godmother to the Ugly Form and help it turn into the Kim Kardashian of forms overnight (with zero plastic surgery expenses, mind you). After some thorough research I picked Material Design Lite (MDL) as my magic wand and that’s the only thing you will need, too.
I'll get a bit ahead of myself and show you right away what will be the end result of what we're going to do in this article.
Looks modern and professional, right? But it hasn't always looked like that. In fact, I wouldn't dare to show you how this form initially looked if it wasn't for the sake of this article.
Anyway, let's get to the process. To begin with, we need a web page with an ugly form. I assume you already have it, but if not - just create one and experiment with it. For this article I created a job application form for an imaginary company hiring IT specialists, see below:
When you open that page in a browser, it should look something like this:
This form has some basic text input fields, a textarea, a table, several fieldsets with checkboxes, radio buttons and a list of bullet items. And the buttons, of course.
When I saw the ugly creature I just built with my own two hands I was like (in heavy Austrian accent): “YOU ARE ONE UGLY MOTHE**UCKER…”.
Without further ado, let’s rush to the uneasy task of turning this freak of HTML nature into something worth showing to your boss before asking for a pay raise.
First thing we need to do is add external references to the MDL’s js-library and CSS inside the <head> section of your webpage:
Alternatively, you can download the MDL package, host it on your own server and reference that instead.
Note name of the CSS file: material.indigo-pink.min.css. The “indigo-pink” part defines primary and accent colors your controls will be using. There are plenty of colors to chose from, but I picked “indigo” because it sounds mysterious and “pink” because everything beautiful is pink (for example, unicorns and €50 bills).
There’s a method called materializeControls which will be called in window’s onload event handler, when the DOM is in place. materializeControls calls another method called materializeTextInputs, which loops through all text inputs and textareas on the page and assigns required MDL CSS classes to them, their labels and their parent divs.
NB! In order for Material guidelines to be entirely fulfilled, each input control must be properly wrapped inside a parent div along with its label. The code will not fail if it’s not the case but "you may not be 100% satisfied with the result", as my hairdresser used to say before I had given up getting haircuts.
When you refresh the page after adding this piece of code, you will see some amazing transitions:
Note how the first three text inputs on the left and the textarea on the right are now rendered according to the Material guidelines with more air around them, labels inside placeholders and nice on-focus highlighting.
By now you are supposed to be completely hooked, like a housewife addicted to Candy Crush, and cry for more.
We will stick to the same algorithm for other controls as well.
Add a new method called materializeSelects that will basically use the same formula as materializeTextInputs - going through select controls and applying MDL styles to them.
The only manual thing we will have to do here is add class “mdl-selectfield—floating-label” to the wrapping div of the select element. This will make sure that a dropdown’s label is shown above the control once a value is selected.
Refresh the page to get another injection of pure magic:
The code for radio buttons is a bit different because they are wrapped inside their labels (so that a mouse click on a label would select the button), but the principle is the same. Note how we apply “mdl-js-ripple-effect” class to radio buttons’ labels to achieve, well, ripple effect. You don’t have to do that but it adds an extra cool touch to user interaction with the elements.
There are many different styles and effects that can be applied to buttons; you can read about it on the MDL site. We used the same “mdl-js-ripple-effect” class to get the ripple effect whenever a button is clicked and “mdl-button—colored" class to have them colored in the primary color of our selected scheme (remember indigo?). If you replace the latter with “mdl-button—accent” the buttons will be in accent color (in our case - pink).
And this is how our form looks after our changes:
For even better effect I will show you the same form “before” and “after”, side by side:
And here's the final source code of our now beautiful form:
I hope that this article will help you to take your first steps into the beautiful land of Material Design. It’s not as scary or complicated as you may think and along the way you might even help a page or two become better versions of themselves without giving it too much effort. After all, each of us had our encounter with an ugly form even if we chose to keep it a secret.