Visual Examples: Principles and Smells

Yeah, I'm back.  These are sample visuals for a coming presentation on some basics of software development target for a none technical audience.

Commons

The background is a linear gradient from #DFDFDF to #FFFFFF with no transparency, and except for the images, the only colors are orange (#EB9D3F) and blue (#3B85A7). The font is Open Sans, which I like more and more. As with as Roboto it is was commissioned by Google and is free.

Images

The images are from Wikimedia Commons, some of them are either Feature Images of Quality Images. I had to desaturate them in order to gain control back of the overall aesthetics.

#1 Principles

Principles slide with layout number 1

#2 Smells

Smells refer to problems caused when one doesn't follow the principles.  I purposely changed the layout to reflect this.
Smells slide with layout number 2
As an exercise I did the smells slide with the principles layout number 1…
Smells slide redone with layout number 1
but it doesn't have the punch layout number 2 has. I'm actually lying. The difference in the layouts is due to the number of items in each slide: 5  in Principles and 4 in Smells. The change in the layout does show the juxtaposition between principles and smells. For sake of completeness, here is the version of the principles slide with layout number 2:
Principles slide with layout number 2

Not cool. I think the problem is the quality of the inkrementell and Modularitaet images. Although the word Verallgemeinerung is very long and doesn't fix in the available space, I think one could get away with it. Note how layout number 1 is more benevolent in this regard. The Abstraktion and Veraenderung thumbnails look great on the layout number 2. But I decided to stick to the first one. I get the contrast between Principles and Smells for free with two different layouts.

#3 SPA

Single Page Applications, or SPA for short, are websites that don't require a whole reload of a page. SPAs mimic the behavior of a traditional Desktop application. That why I contrast a Windows logo with a web browser.
You might be wondering why I rotate the title. After all it de-emphasises it and increments the cognitive load. Precisely because the title are just three words and only the last one has more than three syllables, it engages the viewer.

#4 Process

One difficulty in these slides was to find an icon for testing that wasn't icons of magnifying glasses or insects.  This test icon is inspired on the Test Corps for the Google Tech Talks and pushing the idea of Corps in the military. If you look at the Insignias of the U.S. Army, you'll find the resemble.

A 7 Step process won't fix in a slide, that's why I broke it down into two slides with a fancy transition. Watch the video below!

Part 1


Part 2

Here is the process with the push from right to left transition.




Comments

Post a Comment

Popular posts from this blog

How to crop images with circles in Keynote

Image
Here is a way to deal with images that come in different sizes and/or orientations: mask them with circles.  Here is what I mean You have probably already seen this with Google and Apple productions. Circles are fun, dynamic, harmonious, and they are also points. Now, there is a whole visual grammar behind points, but that's not the topic of this post. Let's do the before-after thing. Consider this fake slide By the way, also Featured pictures from Wiki Commons. The images are very good, but we can take them to the next level.  Their sizes are around 700px, so I'll mask them with circles with a diameter of 300px. This is the result Certainly better, but how did I do it? Most Slideware packages allow you to crop an image with a shape .  Google it and you'll get the technical know-how. I'll demo with Keynote 6.   Select a Circle: Insert > Shape > Cicle. Make it the size that you want.  We'll rescale all images at the end, so don...
Read more

On why I hate LaTeX/Beamer

Image
Continuing with a last's year post, I make a case in point about how using LaTeX/Beamer is bad for scientific presentations.   Last year I wrote about LaTeX/Beamer and how it was worse than bad PowerPoint. One or two weeks ago I found a presentation on Slideshare done in Beamer, by people I know. They are excellent scientists at Germany's best research center. It is partly not their fault, they are applied mathematicians, and in mathematics LaTeX and, to a lesser degree Beamer,  are industry standards. The problem of using Beamer for scientific talks is that it employs the same narrative of a written essay: Title, introduction, first section, second subsection, conclusion. Another problem is that Beamer enforces the use of off-the-shelf templates, and the command-line nature of Beamer makes its customization very time consuming. The use of predefined templates one of the causes of  the death by PowerPoint. The creation of a math talk using Beamer is a soporific bomb. ...
Read more

How to do math slides with LaTeX and Scribus – and not with Beamer

Image
Yeah, I keep (really) hating  LaTeX/Beamer. Thankfully, there is a better way to make slides with LaTeX on a WYSIWYG software. It is Scribus running LaTeX as a external tool. Here is how to get started. Yesterday I got a comment from wipeout on a remix of a math presentation I did in 2011. He asked if it could be done all in Beamer. I did research and ended writing this post. I have been using LaTeX for more than 10 years. It is a beautiful tool to typeset beautiful math. But LaTeX is neither a word processor, a desktop publishing tool, nor slideware. In words of its creator Producing good slides requires visual formatting, which means LaTeX is not well suited for the task.                                                                        – Leslie Lamport LaTeX/Beamer doesn't create the v...
Read more