A sense of space

Consistency between slides is important in your presentation. There are the obvious elements that need to be consistent: fonts, layout, colours, etc. But also pay attention to more subtle ones in images. Color vs B&W, and the style of images. Peaceful landscapes, busy ‘real’ images, threatening thunder clouds, stylised super stock photo model images, “funny” face expressions, etc. etc.

Modern movies are a good analogy. In the good old days, movies would be filmed on an actual location. The story is set in a city, village, a house, a place where characters roam around and visit places from multiple angles all the time. Bit by bit, you start to understand the space in which the story is et.

New technology allows you to create pretty much any movie background you want, projected behind actors saying their lines in front of green screens. The result is that that sense of place is lost. The movie is set against a series of random backgrounds that do not seem connected. High resolution screens emphasize the disconnect between characters in the foreground, and the backgrounds. Something does not seem right…

Interestingly, I do not find this effect with classic cartoons, with totally artificial backgrounds, but the whole story seems cohesive

Furniture ads

Why does furniture always look great in ads? The beautiful castle or villa as its backdrop is only a small reason. The big visual trick is space: lots of it, not only square meters, but also very high ceilings.

Most houses and apartments are designed functionally, rooms with just enough space to put a sofa and chairs against the wall to sit a normal sized family with a few guests. If there is more floor space available, we tend to add rooms rather than giving the furniture more space to breathe.

The same is true for museums. Huge open spaces with big white, clutter-free walls. Paintings are made to look good in museums. Put that masterpiece (or a copy) on your kitchen wall, and it looks less impressive.

When making presentations, you are not constrained by white space, so add it freely.

Changing the color of the French flag

President Macron of France changed the blue color of the French flag. He made the blue darker again, after it was set to be the same blue as that of the European Union flag back in the 1970s. (Then president Giscard d’Estaing thought the different shades of blue clashed during photo ops).

I agree with Macron, the darker blue looks better, flags have a history, and i don’t think the two shades of blue clash at all. When doing design work, pay attention to flags. They have very specific colors (like logos), and very specific aspect ratios.

Organized randomness

This is a tricky thing to do: create a layout of seemingly random elements that look good together. I need to deal with this now for the new venture I am setting up

It is a process of constant iteration. Put one type of elements, put another. Add text and titles. They shift the weight of the page, so everything has to move around again, different screen aspect ratio, another shuffle. Repeat, repeat.

Subconsciously, your brain is scanning for anomalies in the unwritten rules of a layout. You don’t know what they are, but you see it when you break them. For example, including one angle in the path above that is “sharp” (i.e., smaller than 90 degrees, would stand out.

Architects have to deal with this a lot, or painters laying out the “random” elements of a still life painting.

In the end, we are all artists.

Messaging group avatars

“Upload a profile picture” is the question you often face when creating a new messaging group for an upcoming event, a school parent group, etc. Most people go for a relevant picture, for example the class group photo of last year’s end of school year party.

But avatars are tiny and often have a circle shape. What jumps out most to the user is the dominant color of the image. So the best solution for avatars for these temporary messaging groups is a big bright colorful square (will be come a circle after uploading) with a big bold letter or number. “52” on green for the birthday party, 2 on purple for the 2nd grade parent group. Easy and effective.

(Pro-tip: use SlideMagic to create your avatar…)

Prototype design

I am currently working flat out on a new business that my wife and I are putting together in the field of healthcare. With a bit of luck, we can take the covers of at the JP Morgan Healthcare conference in San Francisco next January. (Hopefully after that I can boost the SlideMagic product more, I have a few interesting ideas).

I am becoming better and better at designing web front ends, fusing what I am learning about HTML, CSS, and JavaScript, with what was already in my head when it comes to slide, spreadsheet, and data dashboard design.

I am surprised of the impact the look & feel of a prototype makes on early users. Investing in design can take a lot of time, and can be wasted when you are taking your product into an entirely new direction.

My approach is similar to presentation design. Focus on easy wins that make your product look professional and organised, and skip the “marketing design” for the moment.

• Minimal effort on the public facing web site

• No investment in “flashy” animations, videos, and other spectacular effects

• Instead get the little details right that make a big impact, and fixing them does not take a lot of time:

  • Layouts of screens

  • Lining things up

  • Colour contrasts

  • Font size and emphasis

  • Rounding of numbers

  • Etc., etc.

Having a prototype that looks good makes it also a lot more fun to work on.

The right proportions in design

Certain layouts and compositions look right, others seem wrong. We can see it, but we can’t point our finger to exactly why.

This formula for the constant pi got my attention:

From John Wallis, 1656 pic.twitter.com/VXqTWGeLkO

— Fermat's Library (@fermatslibrary) August 28, 2021

It is the so called Wallis product, a beautifully simple representation of a number that seems very random, the first 50 digits of pi are 3.14159265358979323846264338327950288419716939937510..…

Pi governs the shapes of rounded shapes, , waves and much more. The elegance of a circle is simple. But it is governed by a complex set of harmonics and ratios that all relate to each other. Beautiful designs have them, beautiful music has them. In most cases, we only appreciate the end result without grasping the underlying logic.

Picking a useful accent colour

SlideMagic uses a simple colour scheme: (just) one distinct accent colour and lots of shades of white/grey/black.

What are good accent colours?

• One that stands out

• (This is the tricky bit):

  • One with good contrast with white

  • One with good contrast with black

• One that fits with your brand and/or industry, or the opposite one that really sets you apart from everyone else in your industry if that is what you want to do.

• One that you like

People often forget about number 2, which cuts off a lot of creative possibilities with your design

Photo by Daniele Levis Pelusi on Unsplash

Using brands in presentations

It is usually hard to find good images of products made by well known brands that are of high quality, not obstructed by advertising copy and free of copyrights. Free photo site Unsplash is trying to change that by building up a revenue model where photographers post (and get paid for) posting images with brands in it. (Curated for quality by Unsplash and endorsed by the brand in question).

This is very useful for presentation designers. Looking for a nice Harley-Davidson motorcycle? Here you go.

I agree with Unsplash’s observation that advertising has deteriorated in quality over the years.

But on their own web site, they can do a bit better with ads for their new shareholder/investor….

Photo by Harley-Davidson on Unsplash

Will the designer change your text?

When I started making pitch decks 15 years ago, there were not many people who called themselves “presentation designer”. Now the world is flooded with them. But “designer” is a very broad term used by people with varying skills.

Most “before and after” examples on designer’s web pages are beautiful makeovers of slides. Better fonts, better colours, a nice image. It all looks a lot better. But makeovers are makeovers: the fundamental layout of the slide almost always stays the same, and the text always stays the same.

Maybe this is the question you should ask a potential presentation designer: do you rip up the slide, change the headlines, round up numbers, regroup boxes (these 4 points are actually 3), etc.

The text changer is a very different designer from the makeover artist. And very often the text changer might not be very good at design. (The SlideMagic bespoke design pitch was the unusual combination of skills in one pair of hands).

There are different types of designers, but there are also different type of projects, and different types of clients. I had clients who were not that happy that the first draft of their redesigned pitch deck had almost no resemblance to the original.

The SlideMagic presentation software is designed to reduce the dependence on a makeover designer. The average corporate presentation creator can focus on structuring her story, putting the right messages in, and slides will look pretty decent without the need for a drastic cosmetic overhaul.

But, if you are looking for “presentation designer”: know what type of client you are, know what type of project you have, know what type of designer you need.

Photo by Hannah Lim on Unsplash

Pick your battles

Professional designers can do it all:

1. Give slides a professional look

2. Come up with innovative visualisation concepts that make messages stand out

3. Use advanced software features to craft technically complex slides

The amateur designer is in a different position and needs to pick her battles. That amazing visual concept of the elephant riding a convertible car does not really work if it does not look picture perfect. That very clever consulting diagram does not really contribute when it actually does not support your message.

You do not need to be a graphics designer to ensure number 1, a decent professional look of your slides. Simple designs can look great (look at Swiss graphic design for example).

When in doubt, drop ambitions on point 2, and 3, and but never compromise on 1. (And this is exactly what SlideMagic is trying to do).

Chart make-over: UK vaccine priorities

I took on the challenge from this tweet:

Admittedly a tricky challenge to visualise 9 bullet points when they're all very similar but is there a better #design?https://t.co/3romtz5hSJ pic.twitter.com/ElK7J3ajfO

— Jamie Garroch (@JamieGarroch) January 2, 2021

The embedded tweet is obscuring the image, here is the original taken from the BBC:

I think these icons are very cute, but are very hard to understand. I quickly put the following together in SlideMagic.

In the philosophy of SlideMagic, not the design of a pro, but very clear and very quick to put together. Notice how I kept things simple, by including the theoretical 0-16 years in nursing home residents, there won’t by any but the big horizontal bar shows the message “everyone” and maintains the visual harmony.

I have added this vaccin priority slide to the SlideMagic template database. You can access this slide for free by simply searching for “vaccine” from within the SlideMagic desktop app.

Architecture diagrams

I am starting to experiment with different chart types in SlideMagic. One experiment: IT architectures that consist of users, servers, databases, clouds and lots of lines.

The built-in icon search, combined with the new line drawing feature does a pretty good job actually. And while SlideMagic is not a dedicated tool to design network architectures, it might actually force you to make better architecture diagrams in presentations. Let me explain.

Detailed network diagrams have the same problem as detailed spreadsheets when it comes to presentations. They are project work tools to run analysis and plan work, they are not tools for communication. When I need to make a data chart, I always disconnect from the spreadsheet and resist the temptation to copy-paste. Instead, I pick the 10 numbers that matter, round them up to the relevant precision, and plop them in a very simple bar/column chart that tells the story.

The same is true for IT architectures. If you want to present an architecture overview on a slide, that slide needs to be understood almost immediately when putting it up (like all slides in your deck). If tangled connections, boxes, servers make that hard, then the only thing your slide communicates is that your architecture is complex, not much more.

Again, disconnect from the working papers. Think about your message: ‘my architecture has 3 layers’, ‘my system connects the systems of 15 suppliers’, ‘my system is entirely on premise’, whatever that message is, make a simple chart that supports it.

Remember, presentation slides are usually not project briefings for network installers.

Hexagons

The new line drawing feature in SlideMagic was put in to support the connection of boxes in organisation charts and flow diagrams, but you can use it more creatively as well. The attached examples of the use of hexagon shapes shows how you can bypass SlideMagic’s strict limitations on shape types (basically boxes). But do you need to?

Photo by Jonas Svidras on Unsplash

What do you mean, "presentation"?

This is a comment by my 15 year old daughter. She sees SlideMagic or PowerPoint as software that you can use to create your school project or make a photo compilation to share with your friends.

She is right. “Presentations” are mostly documents that capture an idea. Only a small percentage of these slides actually get presented on a screen in front of a live audience. “Presentation Zen”, TED Talks, Steve Jobs, and others have taught us how to make good live presentations, and SlideMagic can support this.

Now it is time to take on the quality of the other 95% of slides that get produced in businesses (and schools).

Photo by Alex Litvin on Unsplash

Image cropping with a focal point

SlideMagic can switch back and forth between multiple layouts, and needs to handle rapid changes in the grid of a slide. As a result, aspect ratios of images get changed all the time, tripping up your carefully selected image composition. At the moment, the app is storing different crop and zoom levels for different aspect ratios, but that solution is not ideal. (You see how Squarespace gets it wrong with the banner image of this blog post).

I want to get to the point where a SlideMagic user can click a focal point of an image, after which the app will do the hard work of re-adjusting the crop automatically. Doing research, I see a lot of “AI” applications that can figure out what the focal point of an image should be, there seems to be nothing that deals with focal point-based cropping itself. The solutions I see, are ones where you can store multiple crops of the same image, after which the most appropriate one gets selected.

I started scribbling a manual algorithm to come up with reasonable compositions. Here are the first (manual but automateable) results applied to some cows on a beach in Africa, the first image is the original.

It works pretty well, on the the extremely horizontal one gets cropped too low, I would have shown a bit more sky on that one. Let’s see if we can get this to work, both in terms of the algorithm, and the user interface.

Photo by Vince Gx on Unsplash

The perfect arrow...

I am replacing the connectors in SlideMagic with 2 features. The relatively thin lines that connect boxes in a diagram went live yesterday. Currently I am working on the 2nd feature: fat arrows to show cause-effect relationships or other forces.

As I already discussed back in 2017, it is tricky to get arrows to look right in presentation software. The aspect ratio of the containing box, the angles of the arrow, some come out great, others won’t.

And even if you got one right on your slide by moving the various sliders in the shape, how do you make sure that the 3 below it look exactly the same? Oh, and then you need to insert a fifth one and squeeze everything a bit…

I think I am on to a possible solution. I scribbled an algorithm on a piece of paper, now let’s see how to bring it to life in SlideMagic, and then convert them to PowerPoint. The latter might have to be via an image rather than a dynamic shape. Below is a screenshot of my development machine. Work in progress.

Update

I have entered my usual summer blogger schedule (fewer posts) and am now working really hard to get SlideMagic 2.0 right. The feature list for SlideMagic 2.0 is now almost completely implemented. In software, there are always more things to add, but the product as it stands at the moment is starting to get very useful. Over the last 2 weeks I put in very big changes that might not look big from a user’s perspective, but required huge changes under the hood:

• The new '“side title” layout (my preferred)

• Slide search previews in your own preferred colour, layout, font style

• Horizontal and vertical waterfall charts

• Dynamically generated slides with a relevant image (i.e., unlimited slide in the template bank)

• Better rendering of slides and images on higher resolution screens

• Useful image compression in the background

The only big one that remains outstanding is a better way to make diagrams with lines and arrows, the connector solution is not perfect.

In the background I am now tweaking lots of user interface details: how borders fit around thumbs, mouse behaviour when hovering over things, an “endless scroll” is now working for image search, messages that warn you when things go wrong, or when your app is busy searching, making sure that thumbnails distribute nicely over the screen when zooming, minimising the times when the app needs to re-render a slide or image to make the workflow calmer, etc. etc.

I start to look at app design the way I look at slide design. Things need to be absolutely right, and even tiny deviations, irregularities, small mistakes, can really upset me, while most people won’t even notice them. This is what I think ultimately leads to good design, one by one, these details do not matter, I you add them all though, something works without you having an ability to point your finger at exactly why.

If you tried SlideMagic 3 months ago, you almost won’t recognise it (sort of), today (at the moment of writing, version 2.4.12 is the latest one). Work in progress

"Operating system updates" for presentations

Every year Apple releases operating system upgrades for computers, tablets, and phones. Your apps and documents have the same content, but look slightly different. I am trying to push this concept to the world of presentations.

It has already happened (sort of). The slide-out panel to right changes the look and feel of your presentation without changing the content. Over time, I have made subtle changes to font sizes and layout proportions, which means that every SlideMagic presentation in the world will have a slightly different look. Switching to a dark slide background turn the colours of your presentation upside down (in a good way), far beyond just making the background black.

I will try to push this further, by adding more layout options , your slides will look entirely different, including the ones you made 6 months ago, but you can always switch back to another layout format.

Photo by Michael Held on Unsplash

Appearance

Wearing a mask in times of the virus (probably) protects you somewhat from catching the virus, (probably) protects others from you. Individually, the change in odds are probably not that big, but as a society as a whole (the perspective of the government), a small change in infection rate can have an incredibly positive impact (exponential mathematics).

But there is something else, a mask has a social function

• A mask signals that it is not rude when you don’t shake my hand

• A mask signals that you are probably a careful person in general and therefore OK to be with (from 1.5 meters distance)

• A mask makes others think (feel guilty) whether to do the same

The mask signals who you are.

This ‘appearance’ also applies to your presentation. You can have the perfect story line, slides with little text, clear and crisp headlines. But the look and feel of your slides says a lot about the culture of you and your company, irrespective of their content.

With SlideMagic, the look and feel is sorted.

Photo by Fran Boloni on Unsplash