Fast. Easy. Beautiful.
Viewing entries in
Layout
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.
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.)
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…
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…).
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
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)
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.
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.
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.
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…
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.
A boxy table caught my eye on Twitter:
Charting the US booster plan, a.k.a. how to model inconsistencyhttps://t.co/ddKg57PZJw by @nikasgari @FT https://t.co/PHqplyS9xv pic.twitter.com/f5rspWckUT
— Eric Topol (@EricTopol) September 30, 2021
The biggest flaw in this table is the White House line, that suggests a separate group of people. Then, you can shift the columns around a bit, until you get this result:
It can take a lot of time to get your presentation slide just right. However, once you got to that point, it should be super quick to recreate it. You can call this a ‘live test’. Take pen/paper, or open SlideMagic, and create the chart on the fly while someone is watching and listening. “We have 3 options, each has distinct pros and cons, I think number 2 is the best one”. If you are struggling to do this quickly and in a logical flow, your chart is probably too complex to be understood by a live audience. This is similar to a school teacher using the blackboard in the proper way.
How to round numbers in a data chart? It depends. The chart below does not look very appealing
The numbers are hard to read. This chart can serve 2 purposes. Either show the trend in sales, or show the exact sales figures. To show a trend in sales, simply show the accounts in thousands, and round up to one decimal point:
If you need to provide the actual precise sales data (for accounting or tax purposes), put it in an appendix slide that does not even pretend to show a trend:
Following my post from last week about pi, here is a link to a page full of beautiful visualisations of mathematical concepts. Often, a written formula is not the right way to explain math and proportions….
In SlideMagic, you do not have to worry about picking the right scale for your data chart. The entire chart adjusts itself to the numbers you type in. See the example below:
To make sure that a consistent scale is used for your entire chart, you need to place all your data points in one shape, instead of using multiple shapes for example for each month.
P.S. I have added this monthly sales comparison chart to the SlideMagic slide library so you can easily use it in your own presentations as well. Search in the app for ‘sales’ and it will pop up.
Another slide makeover. I will post the ‘after’ before the ‘before’, since the email delivery service sometimes does not render all the images I put in my blog posts…
And here is the original, created by The Information
What did I change?
I shuffled rows and columns to get the biggest possible continuous space of similar blocks, this is visually more pleasing, and groups/ranks players in a better way. (Hmm, should have swapped Instagram and TikTok now that I look at it).
I changed the colors, the traffic light analogy does not really work here. The “yes” and “testing” should be very similar in color, while the “no” should be a clear gap.
I added a more punchy headline
I calmed the whole chart down by simplifying the legend and taking out the logos.
I have added the slide to our template bank. Users of SlideMagic (try it, there is a free version), can access the slide by searching for “social” in the template bank.
Most companies have some sort of corporate PowerPoint presentation template sitting on the file system. It consists of a title page, some trackers, some bullet point layouts, some picture slides. The template probably looks ago, but as soon as employees start to use it, this is no longer the case.
Why?
Most templates are designed as an afterthought, after the logo, web site, letterhead and business card have been approved
PowerPoint templates are created by designers who understand graphics design, web/print design software, but NOT PowerPoint and as a result a lot of technicalities go wrong
But most importantly: templates are designed on a blank canvas, encouraging the designer to “do something” with all that white space.
A better approach: start with an actual presentation. The general company introduction, a product sales pitch, last quarter’s analyst presentation. Make that deck look perfect and put on the on the file system as a starting point.
The template is designed around actual content, rather than content being forced to fit around a template
Most companies need very specific templates. Consumer goods companies: products/packaging demos, market shares and sales across many channels, consumer research data. Pharma: scientific clinical trial data. Chemicals: process layouts, project maps. Consulting firms: fancy frameworks.
I am contemplating some new ideas for SlideMagic to make the above all a bit easier.
Photo by MagicPattern on Unsplash
Contracts and other legal documents look horrible and are impossible to read.
Even documents produced by the world’s most prestigious law firms are basically Microsoft Word files in Times Roman font with hard coded formating (i.e., no style sheets or templates, but text is formatted directly to be centered, bold, italic.)
But the content is even worse than the design. Complicated sentences and unclear paragraph structures requires you to look for hidden clauses that could be hugely important for the meaning of the contract. (The legal profession probably has an interest in keeping it this way).
Two improvements:
Bring the design, the look and feel, back to 2021. Fonts, white space, paragraph hierarchies.
Add a non-binding layman “so what” summary before each paragraph, backed up by the legal code.
As a result contracts will be shorter to negotiate, and people might actually read the terms of use. I might have a look at the SlideMagic terms of use and see if I can give an example…
Photo by Patrick Tomasso on Unsplash
Musicians learn other people’s music, and then use it to create their own style. Architects, painters, writers, chefs, follow a similar trajectory. But even if you are not Beethoven, you have probably acquired skills this way. Carpenters, teachers, mechanics.
When it comes to presentations, use this process as well. Develop a (very small) set of slide layouts that you know how to use well. It becomes a visual vocabulary that you can use to express pretty much anything.
This is why people that spend some time at a management consulting firm can churn out all these slides without effort. This is why simply copying a slide template out of the blue and trying to fit it to your situation rarely gives good results.
SlideMagic has done the hard work for you. You get a consistent style that you can adopt as your presentation style, and each slide is simply a small tweak of a language you have learned to understand.
