McKinsey chart make-over

See the following McKinsey framework (background here):

The slide does not look bad, but there are a few things that I would change:

• Flipping the columns and rows of the table, there are more columns than rows, I tend to put the axis with the most data in rows

• Sorting the categories by number of boxes, to get a more visually pleasing line (McKinsey probably sorted the columns by importance)

• Sorting the boxes within a category by color (and not by importance)

• Fixing the color coding, the dark colour is actually the worst score.

Below is a quick makeover in SlideMagic, you can find this chart in the SlideMagic slide library for you to use.

Landscape photos

I just returned from a wonderful spring holiday in Iceland (this explains the silence on the blog here). Below is a quick subset of the images I took with my phone (the ones without family members).

These are the raw shots, without cropping or any colour/light adjustment. What is my approach to making these landscape shots:

• I actually do not overthink my photographs: just snap to catch the moment

• I hardly ever use the zoom function on my phone. If needed, I can always crop images later to get a zoom effect. Live zooming reduces the image quality and makes the image more sensitive to an unsteady hand / shaking.

• I tend to look for lines (roads, rock formations, etc.) to force some sort of eye movement in the images

• Where possible, I try to catch a small element in the foreground to create a sense of depth. (Often a family member taking the same photo, pictures of family taking pictures is one of my favorite themes)

• Painters already discovered this, often the sky is one of the most interesting visual elements. Try dropping the horizon in one of your shots.

• Most photos are taken at eye height. Create unexpected perspectives by lowering or lifting your camera

• Pay attention to the sides of your image. Adding a tiny bit of a wall or other structure in your shot can make the image feel “closed” or “trapped”, leaving it out gives a much more open feel.

Very often, it is impossible to capture a vast landscape in an image. The view is stunning, the image looks bland. This is only a problem for your audience though, for you, the image will trigger the memory of the real thing and therefore it is still worth taking.

COVID isolation policy

A quick re-make of a graphic with the Israeli COVID isolation policy, here is the original

Below is my version in SlideMagic. I tilted the diagram, to put more emphasis on the timeline. Search for ‘COVID’ in the SlideMagic template bank and the slide will show up for you to use, either exactly as is, or as the basis for another timeline chart.

Super Venns

Below an attempt to show what countries belong to what organisation. (A bit outdated, the UK has left the EU). A good start with the groupings of the countries, and the circular layout of the flags. Also note that flags are displayed in their correct aspect ratios (Switzerland for example is square).

Image found here, probably by Nato

What to do better?

• Not a big fan of the gradients and shadows

• I would put the Council of Europe label also on the right

• It should be possible to get an even more harmonious and distributed layout by moving some flags, labels and circles around

The other approach to make this chart is to use a map and color code countries according to their memberships

The graphical business card

The presentation’s look and feel says a lot about you.. Here are some examples of look and feels that I encountered over the years.

• “I don’t care” bullet point slides in the bare opening format of PowerPoint, but actually written in a smart way. Basically a text document from someone who focuses on building her business rather than making pretty slides.

• That same bare format, but now with a presentation that clearly cost a lot of time and effort to make. A few randomly placed pictures and colorful shapes to add some spice.

• The management consultant deck full of theoretical and irrelevant frameworks and buzz words

• A super cutesy deck (curly graphics, pastel colours, quirky language) that pitches a company in a traditional engineering market

• The corporate deck consistent of slides that were harvested from multiple presentations, in slightly different formats, and for which all the paragraphs and footnotes have been extensively edited, and signed off by the CEO (including placement of commas)

• A super polished (and expensive to make) deck that looks like a 5 star hotel brochure that pitches a product that only exists in PowerPoint (the PowerPoint you are looking at).

• A set of system architecture diagrams, or the clinical trial results data

• A business plan template filled out literally, including slides and boxes that don’t really fit the product

• Web site has the new logo and colours, deck still has the old one

• Big and bold images, every slide has a visual analogy that sometimes is a bit stretched, no coherence between the slides

• Logos, graphical elements, confidentiality disclaimers, slogans take more space on each slide than the content itself

'Ponder' charts in the age of Zoom

Most presentation experts (me included) describe the ideal slide layout as something similar to what Steve Jobs used to use in his big product announcements. Super minimal.

This type of slide works in auditorium or conference room settings. People sit relatively far from the screen, and the slide is competing for attention with the physical speaker (gestures, eye contact). Glance at chart, understand it in 5 seconds, focus back on speaker. The speaker and the slide are probably about the same size for someone sitting in the back of a conference room.

In a video call , the setting is a bit different. The slide is “in your face” on the screen, and the presenter is usually a small “talking head” in the corner of the screen (if present at all). Maybe the slide can carry a bit more information than the words “1.5 billion installs”.

I am not arguing to bring back the dense bullet points. The audience can read them faster than you can present both in a live setting and in a video call. But a Zoom call does open the way for slides that carry more information. Breakdowns of financial data, matrices with competitors plot in them, pros and cons tables.

Consider building them up in multiple slides to slowly add detail to support your story.

Image credit

De-cluttering axes

In scientific documents, there are chart making conventions that make sense, clearly labelled axes, titles, etc. etc. Use these charts in your article that you submit for publication in a prestigious paper. For an on-screen slide show however, you could deviate from this standard. Your objective is to communicate the findings as best as possible, referring to the paper for the details.

See the example below (source), lots of duplication in axis labels.

You can make the page a lot calmer be omitting some of these labels. I quickly cut and paste the elements in the image below. (This is not a makeover, just a super rough reshuffle to show you what I meant).

Understanding something tricky...

For another project, I had to get a better understanding of the blockchain and various encryption algorithms. This summary helped me a lot, how it is possible that a total “stranger” can verify the validity of a digital signature without sharing confidential information.

Still this explanation suffered from an issue with almost all explainers and technical presentations: certain critical steps that are blatantly obvious to the expert, but very hard to get for the novice get skipped over. The big online YouTube stars in education are masters in getting it right: anticipating what an audience is likely to struggle with.

Anyway, in the process, I added a chart to the SlideMagic library with the very basics of encryption:

Search for “encryption” in SlideMagic and it will show up as a slide template.

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.

Eyeball the thumbnails

The thumbnail strip to the left of most presentation software is not only useful for switching to other slides, it also is a good feedback mechanism for slide layouts. It is like sitting in the back row of a big auditorium, or viewing the slide in a small preview window on a Zoom call.

Out of the frame

If you are daring, you can consider letting shape go off the page, or tilting text in them to make your slide look more alive. And/or tilt things a little. Text could even run a bit out of the page frame. The good thing about circles is that tilting text does not impact your overall slide layout.

(Yes I know, no circles (yet) in SlideMagic.)

Typography is everywhere

The building manager finally installed a house number on our building, to reduce the amount of desperate calls I get from couriers. Still, I wished he had asked me for a suggested position where to put it. “Bleeding off the page” is not the right concept here…

Your pitch deck on the home page

Happy 2022! I am returning to blogging after the holidays. Over the past week I have been busy designing the web page of our new medical startup (still in stealth, so I cannot show it to you yet…).

The more I thought about this page, the more I came to the conclusion that the web presence of this company at this stage should be a pitch deck to potential partners, rather than the usual feature list and headshots of the management team.

Most “presentations” on web pages are either a static gallery of images/screenshots, or an embedded video., but this layout does not look very good across a wide range of unpredictable screen sizes. For a chart to look good on different screen sizes, and more importantly different aspect ratios (phones are portrait, computers are landscape), you need to break the fundamental layout of the page.

Most slides have the classical title-on-top, content-in-a-rectangle-below layout. For my site, I changed that to 2 squares, one of which takes the role of the slide title with a big written message, and 1 with a supporting graphic. The layout changes depending on the device you are watching the site.

This layout change is common on web sites, but it is used a bit randomly. Pictures and text blocks move around disconnected depending on the screen size. For a “presentation” you need tighter control.

Another major problem for a web designer is rapidly changing content. It is common to make small and big changes to pitch decks all the time, while websites are relatively static. To solve this, my experience with SlideMagic came in very handy. I wrote a simple chart engine that reads “slides” with their titles and shapes in a simple format, and then renders them on the screen in the desired aspect ratio.

Maybe this quick tool will turn out as the “Slack” of my venture. (Slack was born as an internal tool of a gaming startup…).

Sorting text by length

In slide design, every detail counts. Pay attention to the length of text blocks when putting them on a page. Sorting them by length can give an interesting visual effect. Or the other extreme, picks words on purpose so that the length of each text box is more or less the same.

PS. How did I get the picture? Search for “diagonal" in the SlideMagic app and you get lots of suggestions

Fitting text in circles

It is very tricky to fit paragraph text into a circle. Line breaks are never smooth, especially when you have long words. My approach is to use a larger circle, but fit the text inside an imaginary square that just fits inside the circle.

For math geeks, the ratio between the side of the square and the diameter of the circle is the square root of 2. I had to use this proportion recently to fix a web site layout.

Obviously very short headings fit perfectly well inside a circle.

(Yes, yes, circles will come to SlideMagic)

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.

Another slide makeover

McKinsey’s social media activity provides an excellent stream of slides to work on. The one below could have come straight out of SlideMagic.

I created a proper SlideMagic version with a few improvements:

• Emphasized the “from to” theme of the chart with arrows, and two contrasting colors, and a bigger distance between the two options

• Lighten the colors a bit, especially the dark top row of the original puts a lot fo weight in the chart

• Actually reduced the font size a bit to give the text more breathing space in the boxes

• Re-shuffling the bars to get a more pleasing overall composition

• I eliminated the left column, the audience can guess the description, to add more balance to the composition and gain some extra space

SlideMagic users can use this chart, simply search for a relevant keyword (operations, consulting), and it will pop up for you to adjust to your own project.

Dynamic layouts

For my next venture, I am actually getting into a lot of “slide” design work: displaying financial data in a web browser with totally unpredictable screen sizes and screen aspect ratios. This problem has been solved for traditional web sites with text and pictures. (That is pictures where you do not really care how they are cropped).

For financial information, this is not the case. Spreadsheet-like tables that look good both on a 27” widescreen monitor and a smartphone screen, for example. All this layout work is not the core of what this venture will be about, but I am learning a ton that can feed back into SlideMagic. And vice versa, the SlideMagic chart engine, could take data from this new system and create presentations pretty much on the fly.

To be continued.

Not a very good Apple slide....

This Apple slide from a recent product launch event looks very non-Apple…

• Busy, lots of information

• Font sizes all over the place

• Big 13x, 11x, 2x, but hard to read what is improved

• Rounded edges are too rounded

• The grid is broken

• Imbalance: some boxes have heavy dark images, bleeding off the edge, others have no images..

• Look at the font styling used for “thermal”

The people and design budget at Apple can do better than this…

A team photo shoot in 2021

My wife and I organised a team photo shoot for the web page of our upcoming business. It had been a while since I did one.

Nice pictures can add greatly to the quality of your web site and/or presentation. Head shots are up to date, all look consistent, and best of all, you have an opportunity to take an image of the entire team together, given you the opportunity to show the energy that you are radiating as a group of people.

We decided to bring the professional photographer into our home rather than venturing out to her studio. Luckily, she was flexible enough to bring the required equipment. A photo shoot at home has the advantage that you feel more comfortable, and that you unlimited access to your wardrobe incase certain outfits/colours do not come across very well.

Ten years ago, many professional photographs were taking in front of the “gradient grey” screen. Fast forward to 2021, with Zoom calls in front of blurred bookcases, these backgrounds look very staged and dated. It makes the photo look like a high school yearbook picture.

They key thing the photographer brings is no longer the camera. It is the ability to engineer a relaxed pose of you, and even more importantly, get the correct light. A was amazed by how a modern “umbrella flasher” can give great image results in pretty much any lighting condition (so no longer the need for the studio).

While a woman can still dress up in a great outfit, I find that for men (me), wearing a full suit looks awkward, you get the “wedding groom” look on your corporate web site. Jacket/no tie, or a turtle neck work great.

Try convincing your photographer to make a number of photos without a composition, zoomed out, with lots and lots of white space around your image. This enables you to make your own crop in the presentation, and add text, or other visual elements such as logos later yourself. A good photographer will hate doing this, since it is very hard for a designer to make a picture without a proper crop.

Think of making some shots in front of a switched off monitor or screen, you can put text / images later on this. Think of making some shots of you delivering a (fake) presentation.

Ask your photographer to make some shots when you are not posing, i.e., in between sessions, when you are probably more relaxed and natural.

In any, we got some good material out of this day, and we are just getting started with sorting through the images. Ask your photographer to give you all the raw material in addition to the 20-30 shots she selected. You might not always agree which image looks best.