Saturday, October 26, 2013

UI design with Keynote 6.0

image

After playing with the recently updated version of Keynote, I can’t help but notice that the workflows of this unsuspecting design tool seem to have been made with consideration for uses other than presentations. Although a big fan of Adobe’s Fireworks, I’m clearly seeing how some of the key functionality in Keynote combined with the redesigned inspector and tweaked canvas layout can now potentially become a strong contender for use in the design process. Why? Let me show you some of the features which hit the sweet spot.

Canvas layout

  • The slide (art board) is strictly centred on the x-axis in the canvas window. Too much canvas pan-ability is a huge frustration in tools such as Bohemian Coding’s Sketch.
  • The whole document retains a single zoom level of a canvas for seamless transitions between screens.

image

Export

  • Ability to easily export full sets of screens in one swoop.
  • Linking elements to different slides and exporting as HTML allows for rapid prototyping.

image

Typography, drawing and layout tools

  • Vectorised elements with good set of arrange/manipulation tools in the inspector window.
  • Fantastic alignment guides to help with layout consistency. If you’re pedantic like myself, you can also manually enter values to ensure elements are aligned to the pixel (some more keyboard shortcuts to hide/show would be useful).
  • Typography tools for tracking, leading, indents, alignment etc. are first-class citizens.
  • The updated inspector window is ever-so-welcome inside the main application window. This was long-overdue from Keynote.

Styles palette

  • Create, save and then apply various element styles. Tweak a style and have all elements using that style updated automatically.

image

image

image

image

Master slides

  • Create page templates as master slides to create global elements that remain the same between screens/pages. This is also handy for handling different resolution templates in responsive designs.

image

Stability

  • Sometimes the best feature isn’t specifically a feature. Keynote is far more stable than Sketch, and much more lightweight than Fireworks. I’m keen to see how it performs under more stress, creating large projects with hundreds of screens.

These are only a few of the cool things Keynote has to offer. Although some of these features have been around for a while, the recent UI improvements have made it much more conducive to using Keynote as a design tool.

Monday, October 14, 2013
It is vain to do with more what can be done with fewer Commonplace phrase in 13th-century scholastic writing
Monday, July 15, 2013
Graphical embellishments that serve only to underscore the ‘realism’ of the design such as the sheen of simulated brushed aluminium buttons, the sparkling splash screen or the specular reflections on spherical plastic buttons eventually grow tiresome despite the initial ‘oohs’ and ‘aahs’. These qualities rarely add to the long-term visual appeal of the product because they subvert rather than enhance communication. Kevin Mullet and Darrell Sano, Designing Visual Interfaces, Sun Microsystems, Inc. (1995)
Tuesday, May 14, 2013

Influence

The two highest levels of influence are achieved when a) people follow you because of what you’ve done for them and b) people follow you because of who you are.

Influence comes easiest to those who are generous and trustworthy.

Wednesday, May 8, 2013
Comment on UC rebranding uproar:
"I can’t defend the work, but I do wonder if there is a level of bias toward change. Over the years, I can’t recall one major logo change that wasn’t scalded by the design community."Anonymous response:
"Looks like it’s still loading. Give it time."

Comment on UC rebranding uproar:

"I can’t defend the work, but I do wonder if there is a level of bias toward change. Over the years, I can’t recall one major logo change that wasn’t scalded by the design community."

Anonymous response:

"Looks like it’s still loading. Give it time."

Friday, March 8, 2013
Sketch.
- Dribbbles of my work

Sketch.

- Dribbbles of my work

Credit card information
- Dribbbles of my work

Credit card information

- Dribbbles of my work

Smart-cover-esque watch band? Perhaps not.
- Dribbbles of my work

Smart-cover-esque watch band? Perhaps not.

- Dribbbles of my work

Account verification details
- Dribbbles of my work

Account verification details

- Dribbbles of my work

Data portal navigation
- Dribbbles of my work

Data portal navigation

- Dribbbles of my work