How to make your Steemit posts look good

in #steem7 years ago

Learn in three simple steps how to present the great content you create!

Many of Steemit users are creating wonderful content, but are struggling with the visual part. As a professional web / graphic designer, I am here to help. In this quick guide you will learn three elements of good design: how to use images, how to format text and what formatting practices to avoid.

  1. Quality images matter and using them isn’t difficult
    Images attract our attention first, greatly influencing the first decision a reader makes on your post: to read or not to read? That’s why I put them first in my list.

Select carefully the first image in your post — it’s is used as a thumbnail, so be sure it looks good in small size — easily recognizable, not too low in contrast or complicated by form.

Where to get free high quality images? Just a few options of many:

Unsplash
Pixabay
Pexels
You can use a free editor like Pixlr to combine images with text.

There is a plenty of free vignettes on the internet, use google image search to find them or just grab and reuse this one :) No need to save the file, just use this code:

divider-1024.png

to get this:

divider-1024.png

  1. Format text using Markdown
    Steemit is very advanced in comparison with many other social media in allowing users to use Markdown, a simple tool to do common formatting such as headers, lists, links and emphasis. Below are the most important formatting tricks to make your text look beautiful.

DQmZ6KwqMFsyWfjsKaevJ649sjd5EfahZ9fFTLsHo7UxZ3a.jpg

Use link titles, not only urls
Urls pasted directly to text look ugly. Using Markdown allows create more readable links.

To get this: My link
Use this: My link

Use headers, not ALL CAPS
Instead of using CAPS or bold, try this markup:

To get this header size: My header 1
Use this: # My header 1

To get this header size: My header 2
Use this: ## My header 2

To get this header size: My header 3
Use this: ### My header 3

To get this header size: My header 4
Use this: #### My header 4

To get this header size: My header 5
Use this: ##### My header 5

Use lists instead of paragraphs where applicable
Formatting lists is very natural in Markdown.

If you use numbers,
they get formatted automatically.
To create an unordered list, use either

  • asterisks
  • or dashes.
    Use dividers (sparingly :)
    If you don’t want to bother with vignettes, simply use three dashes --- to get a divider like this:

How to center text or images
If you need to center a piece of text or an image, this is impossible with Markdown, but here comes a good news — Steemit supports some simple html tags and you’ll need exactly one of them.

To get this:
centered text

Use this:

centered text

The same with images. Don’t overuse it though, or you’ll soon end with all the post content centered, which isn’t good for readability, if you don’t write poetry :)

How to use emphasis
Using emphasis selectively makes text more readable.

To get this: your text to make bold
Use this: your text to make bold

To get this: your text to make italic
Use this: your text to make italic

  1. Some formatting practices to better avoid
    Overemphasizing
    The problem with overemphasizing is that it lowers the overall quality of communication. When everyone shouts, it’s equally hard to be heard for everyone and we’re entering the spiral leading to total noise.

shouting-man.jpg

Avoid using any form of emphasizing on large chunks of text such as:

italic italic italic italic italic italic italic italic italic italic italic italic italic italic italic italic italic

bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold

And probably the most abused one on Steemit:

ALL CAPS

AND ALSO ALL CAPS BOLD!

AND FINALLY, HEADER USED FOR A PARAGRAPH TEXT!!!

divider-1024.png

That's all for now.

Ask questions in comments and resteem this post to help your friends and followers grow.