Organized randomness

While working on my 9xchange site, I used one of my approaches to present a document. “Pages” that sit randomly on a table or surface (see below).

I use this technique as well for the banner image of this blog, see below.

This effect is very easy to make. Take an empty slide / page in any presentation app. Save the document you want to show as individual images (good old screenshots will do as well). Drag the images on to the slide and tilt them. Add a little drop shadow behind them.

Things are not as random as they seem though:

• The angles of the pages need to look interesting, not all the same, not too different

• The page need to be semi-readable (i.e., not upside down)

• Key headings should be visible and very readable

• You need to decide whether to let pages bleed off the page, keep them 100% in the frame. It will create very different effects

• You should select pages that look varied, and interesting and are presentative of the content of the document you want to show.

Zoom out

Professional photographs of your team can give a great lift to your presentation or web site. Either individual headshots all in a consistent style, or even better, a group photo of your entire team in one place.

A good photographer will do two things: firstly, make sure that the technicalities such as focus and lighting are perfect, and secondly, try and create interesting crops and compositions.

Having a photographer set your image crop in stone might not always be good though. What looks great in a 4:3 view finder of a camera, can look suboptimal on web sites that need to handle unusual screen sizes, all the way from big widescreen TVs to small smartphones.

The problem usually is that the center composition will stay constant (the subject area of your team that will probably occupy a 4:3 rectangle or square in the middle of your image), but the background can have vastly different aspect ratios.

The solution: have your photographer take a snap which the crop she prefers, but always add a second one completely zoomed out as a backup.

If you forgot to make that second image, you might have to revert to AI tools such as Adobe Firefly to add the missing pieces of background back in.

About titles

There are a number of ways you can, or cannot, use titles in your slide. See the examples below. (RSS subscribers might have to open the post on the web to see images).

The classic way is a basic description of what the chart is showing.

The management consulting approach is the message title: write out in a sentence what the chart is supposed to say, and put the description and unit of the data in a subtitle

You can spice things up with an image

And with full image slides, the traditional title does not actually really matter anymore. You can place text anywhere on the image to get your point across. If you are presenting live, you can even omit the exact description of what you are showing

When (not) to hyper link

Clickable links are the fundamental building blocks of the web page format that was developed in the 1990s. In the early days of the web, you could spend hours getting lost in clicking the blue links in text pages. In modern web design, these pure text links are less useful though.

Sometimes I see them as a reference to a core element of the story. Our product has a <link>key competitive advantage</link> that helps drive our <link>amazing financials<.ink>. He user who clicks links is leaving your story line flow. Seeing messages in the wrong order, tripping up a sequence of big picture versus detail, and is probably not returning to the point she came from.

Web design guidelines in the 1990s also prescribed not to add the work “link” to a URL, but rather put descriptive text: “the 1996 financial results” so that Google and other web search engines would index the page correctly. The result is a page where the reader never is completely sure where it ends up when clicking a URL.

How do I use plain text links? Mainly for references, in the same way academic papers use numbers to refer to relevant resources. A home page of a company, a link to a photographer for credit, download links for documents, references to previous blog posts. And often, I violate the 1990s guide line and call the link what it is, a link, so that the reader knows what to expect.

Automated content pages

I am continuing the gradual upgrading of the SlideMagic AI capabilities. Today, I added an automated content page to the automated story line generator. For each section in your presentation outline, you now get a slides with all sections, plus the current one highlighted. (See the screenshot below).

More updates and refinements to come

Dashboards and reports

For periodical update meetings, you often can use the same presentation with just the numbers updated. When the audience is internal to the company, many will just use a spreadsheet printout rather than transferring the data to a presentation.

The result, a presentation that looks like, well, a spreadsheet.

• There is more information presented than needed for the meeting

• Numbers are highly precise and not rounded up

• Fonts are tiny, as the spreadsheet tries to show everything on 1 page’s width

• Colors and fonts are those of Excel, not the company

• The last 2 rows of the table moved over to the next page

• Etc.

If you need this report often, it is worth investing some time in setting up your spreadsheet properly.

• Leave your “engine” untouched and create an entirely new work book that is your “presentation”

• Get rid of spreadsheet gridlines and show the page cut offs so you get a clear view of the boundaries of your “slides”

• Set colors and fonts the same way you would do in PowerPoint

• Now build your slides page by page, by pulling in the data from the engine sheet, round numbers up as you go ( / 1000, show 1 decimal, etc.)

• With these types of reports, you variability between slides will be in the column widths, not so much in the rows. To keep your “deck” all in one workbook, move horizontally, and add pages to the right rather than below

(Optional) The next level up is to introduce shapes and other graphics in your spreadsheet, and you can get to the same level of finish that you can achieve with regular presentation software.

Why does it look like PowerPoint?

It is often quick and easy to use PowerPoint to draw a diagram. No need to install and learn new specialized software. A few boxes, lines, a screenshot, and you are done. But why the result totally obvious a PowerPoint slide, even if you are not using the program to present your visual?

Over the past years (decades for some) we have become so used to seeing PowerPoint slides with the built-in fonts, standard color palettes, that most people will recognize it instantly. But when your end product is a screenshot, you don’t have to worry about things like font compatibility and presentation templates.

• Change colors and fonts to match the document you are working in

• Let go of the restrictions of the aspect ratios for a slide (4:3, 16:9) and pick something that is appropriate for your diagram.

4 types of slides

Slides can be grouped in 4 categories:

1. Visualizations. A layout of data and/or elements with relationships that show something that is very hard to explain in linear text. Reading out all the columns of a data table is boring. Explaining the structure of DNA in words is impossible

2. Background graphics. A nice picture or a few words that fill up that giant screen on stage and makes the overall picture frame (you + slide) look a lot better

3. Trackers. A favorite of management consultants: some sort of table of contents that reassures you were we are in the overall story.

4. Transcripts. Bullet points mapping 1-on-1 what the speaker is saying.

Think about when to use which one for what.

Complex visualizations might not work as a dramatic background image when you reveal your product. Background graphics will not say much in a document that you email without explanation. Trackers don’t say anything. Transcripts are horrible on stage, but might work when emailing to someone (i.e., a text document).

The same polarity

You have a choice when naming the labels in a comparison chart. For example: “price: high” is the same as “cheap: no”. Make sure that all highs and lows, or yes’s and no’s are aligned in the same direction, i.e., things that are “good” all have the same word value associated with it. See the simple diagram below.

Designer dilemmas

Getting the proportions on a slide right is tricky because it requires an intuition that is very hard to capture in a set of simple rules. An example below. I will have presentations where I center the diagram around the boxes of the 2x2, or other ones where I will center the diagram including its axis titles. Most people probably could not be bothered by this.

It is because of things like this (design is hard to capture in rules) that I think a ChatGPT-like algorithm for page layouts might have a big potential.

Wide screen <> wide columns

Wide-screen televisions are great for watching movies, but not for reading text. A line that spans across the screen is hard to read and does not look very pretty. There is a reason that print newspapers use columns to limit the number of words on one line.

Think about this when designing slides, switch to a multi-column grid, or simple leave space unused left and right of your text (something that many web pages do), see the examples below.

Selective highlighting

This chart in the WSJ shows how you can focus on data points that matter to your story, while literally ignoring other data points that are less relevant.

This slide is obviously super complex, but you can also apply this style with more mondaine, everyday slides.

Instead of complex animations, it is easer to copy a version of your chart in consecutive slides, and adjust the coloring and messaging to highlight the points.

This approach also makes sure that your story is visible in environments without animations (PDF, mobile devices)

Designing with actual data

There is a reason why many presentation templates and data dashboards look so bad: they have been designed without actual data.

Most corporate presentation templates are the result of the work of a designer who has been given a white page to add some stuff to. The resulting white template page might still look OK, but when it is filled up with typical slide content…

Information dashboards looked great in the mock up screens: dials, tables, buttons, graphs, until they are populated with typical data: text blocks are longer shorter than in the mockup, important data is actually not there, non-important data is, all graphs look flat, and all dials have more or less the same color because the values don’t change that much.

Presentation template designers, ask for an actual deck to start working on. Dashboard UI designers, ask for a real data set.

More logo cropping

The F1 graphics designer has the same problem that we presentation designers face: how to deal with logos that have completely different aspect ratios. Very long ones vanish in a square tile, square and round ones don’t look good in a wide rectangular box.

Their solution: let go of the requirement that the entire logo should be visible. Carefully crop out parts of the logo while making sure that it can still be recognized and read. All this is supported by borrowing the dominant color of the logo in the text box.

An alternative calendar

Here is an interesting twist on the traditional annual calendar:

Image credit: https://bigthink.com/starts-with-a-bang/one-page-calendar/

Yes, it is a lot more efficient when it comes to the amount of space it takes (or the required font size to fit a whole year on a page). But I think the point of the big, dense, calendar is to schedule and plan things across the year. Also, you need to do a few mental steps to get your head around looking at a specific month.

I added a template with this calendar to the SlideMagic template library, search for “calendar” in the SlideMagic app and it will show up.

You can read the full discussion of this alternative calendar format here.

Rehearsing the whiteboard

Adhoc brainstorm meetings are very hard to manage. If you have to discuss a complex issue, it might be worth to prepare and rehearse your white board sketch before entering the room.

On its own, a white board (or a black board at school) is not very meaningful. A bunch of words and drawings out of context. For the person who sat through the meeting, the board is very meaningful. Every scribble on a specific location on the board is a visual anchor for the entire rich discussion that was held about it.

So rather than prepare a big slide deck, maybe you should prepare your white board. Where do you put what. How do you connect elements. The whiteboard gives you the perfect excuse not to make perfect drawings. Try 3, 4, 5, or even more versions until you are left with one you like.

Automated executive summaries

I am starting to think that in the not too distant future, pretty much everyone will toss any piece of business writing into some sort of ChatGPT bot with the question “what does he/she actually want?”, instead of reading the actual text. Too many bullet points, too many long-winded emails, too many lazy writers… Let’s use AI to cut to the chase.

With that, some new sort of SEO (search engine optimization) will emerge. The bots are available to anyone, so you can predict what the bots will say about your text, so people might actually start optimizing/writing text that will trigger the right kind of output by the ChatGPT bot.

But maybe that can be automated as well…

Aligning logos in presentations

Getting logos to line up properly is one of the hardest things in slide design. I have not been able to come up with a set of rules to do it, every time I need to eye ball things to see whether things somehow look right. Below is an example from the 9xchange web site:

There are a number of (conflicting) inputs:

• The middle of the image file

• The typographical baseline of the text

• The middle of the non-text part of the logo

• Tag lines above or below the brand name

Always fine tune logo pages because any automated adjustment will for sure not get it right.

Showing busy bios on a web site

My venture 9xchange is new in the world of healthcare, wo we need to establish credibility by showing that we have significant experience and are backed by significant people. Here is what I came up with (see the 2 screenshots below).

I put up a dense grid with the bios of the people involved. Below this table, are a few recognizable brands from the world of healthcare. When you hover (or click on a tablet) over a person’s bio, a relevant subset of the brands light up.

Alternatively, when you hover over, or click the brands at the bottom, relevant people get highlighted, including the relevant small print in their CV.

You can check out the progress of the work on the 9xchange website.

How do people glance over a corporate web site?

There is a lot of science and analytics available for eCommerce web sites. Changes in layout, design, and content immediately translate into changes in clicks and sales. The story is a bit different for a corporate web site that is not transactional, it does not sell anything, it does not have a big signup button, but plays the role of a digital business card for a company. Let’s say the first web site of a startup aimed at investors and the first enterprise customers.

Some things to look at:

• The most important aspect is probably the look and feel of the site, regardless of the content. Does it look professional and serious (as in of a serious company). If that funky or complex graphic somehow does not look quite right and you can’t put your finger on the spot why, take it out. A professional looking simple graphic is always better than a botched attempt at a complex one. Make sure that copyright year is the current one.

• This seems obvious, but is often lacking, the site should actually state what it is you do. Try it on people that have no background at all in the market you work in, try it on people that love to put you in well known boxes (i.e., venture capitalists)

• Different companies need to emphasize different things. For most companies, the founding team and its head shots will be buried in some ‘about’ section of the web site, for very early stage startups, it might need to feature prominently on the first page since it is basically the only asset it has.

• No one reads a web site top to bottom like a newspaper article. Instead, people glance. Read a headline, look a the small text below a photo, read a random paragraph. Don’t arrange content in order of importance solely, but think about the visual hierarchy. A small picture might grab more attention than the big cliche headline.

• It is tempting to lift stories from presentations and translate them to the web site. The founding story of how it all began to where you are now including that big pivot in 2020, the market gap analysis that is the start of your investor pitch deck. These stories need a place, but maybe not on the home page of your web page.

• Avoid jargon. “Ah, this site is filled with blah blah” and people will stop reading. But do include language that is common in the industry you are working in.

• Make sure that the site has the details that should be there: contact details, etc.