Hey, I'm Marat 👋
Published on

Let’s Make Your Articles and Presentations Look Pretty

Authors

Great presentations flow, tell a story, and in general, look appealing. Similarly, well-written articles are accompanied by nicely designed graphics, imagery, and high-quality photos.

Your writing style is your own, and that I can’t and won’t be able to help you with. However, I can try to improve the look and feel of your articles and presentations with a little help from a few popular toolsets.

Let’s begin.

Stock Photos

I’ve seen and created my fair share of professional presentations, and there’s always one aspect that’s common to them all… one-liner impact statements. Whether it’s to drive a point home, scare the crap out of you, or quote a loosely related article or study, more often than not, these one-liners appear alongside a beautiful stock photo that by some stretch of the imagination is associated with the one-liner itself.

Unsplash is my first choice for beautiful free photos.

Before 🙄

I don’t believe this numberI don’t believe this number

After 😱

Holy smokes… we need your help. Photo by David Kovalenko on UnsplashHoly smokes… we need your help. Photo by David Kovalenko on Unsplash

Icons

Icons! How I love and loathe you. They’re a must in any presentation, website, article; you name it. Finding the right one isn’t too hard, finding the right ten is a task in and of itself. You need to ensure they have a matching style and similar stroke (line thickness) otherwise it’ll look messy.

Noun Project is an exceptionally fantastic resource for icons. Their collection is near infinite, and they offer free icons (with attribution) or no attribution necessary for a small yearly fee. My only gripe is the inability to filter or change icon stroke.

Before 🤡

Clipart needs to dieClipart needs to die

After 🦄

Get in touch if you’re interestedGet in touch if you’re interested

Illustrations

You want to spruce up that one slide with a great looking yet relevant illustration but you’re all icon-ed out… we’ve all been there. If only there were a website that could help. Holy cow! There is. I present you unDraw. Created by the amazing Katerina Limpitsouni, unDraw provides beautiful, diverse, and completely royalty-free illustrations that are in sync with current events and technologies.

Before 🤓

After 😎

12 Reasons Why Data Is Important12 Reasons Why Data Is Important

Fonts

For the love of all that is holy, use a beautiful font. So many companies are investing time and money into typography, it shouldn’t be that hard to find a great looking font that works with your content.

I along with many others, prefer to use Google Fonts. They offer (at the time of writing) 999 free to use fonts that can be embedded within web pages, downloaded to your Mac or Windows PC, or used within G Suite directly.

Before 😵

Don’t use Comic Sans MS ever… like I mean everDon’t use Comic Sans MS ever… like I mean ever

After 👌

What a great guyWhat a great guy

Screenshots

Let’s talk screenshots. Whether they’re of a product, a website, or a solution we built… we always include them in our blogs and presentations. Why not spruce them up a little bit with Screely.

With Screely, you can customise the background, the window type, style and padding.

Thanks to @woraperth for sharing Screely with me.

Before 🥱

After 🤩

Took me way too long to find a good looking website to take a screenshot ofTook me way too long to find a good looking website to take a screenshot of

Code Blocks

Whether you’re sharing your code snippets within a Medium article, on Twitter, or in a presentation to a client, generally speaking, it’ll look dull and boring.

Carbon is here to the rescue. With plenty of customisable features including fonts, background colours, window styles, and the ability to export as an image, iFrame, Medium embed or URL, you can’t go wrong.

Before 💩

const pluckDeep = (key) => (obj) => key.split('.').reduce((accum, key) => accum[key], obj)

const compose =
  (...fns) =>
  (res) =>
    fns.reduce((accum, next) => next(accum), res)

const unfold = (f, seed) => {
  const go = (f, seed, acc) => {
    const res = f(seed)
    return res ? go(f, res[1], acc.concat([res[0]])) : acc
  }
  return go(f, seed, [])
}

After 🔥

Bonus Round: Avatars

We’ve all been there. We need a slide to showcase the team. Some team members have professional headshots (so last year!) while others have photos with mystery shoulders, babies, or worse… lycra. Don’t be that team, use Big Heads, a dynamically generated avatar that you can customise to your liking.

Before 🤮

Inspired from The 10 Worst LinkedIn Profile Pictures EverInspired from The 10 Worst LinkedIn Profile Pictures Ever

After 🎉

I’m slowly starting to look like the Lead EngineerI’m slowly starting to look like the Lead Engineer

Hopefully, you found this article useful and bookmarked some of these sites for yourself.

I’d love to hear from you. Share your favourite resources you use to make your articles and presentations pop.