Series: Tips From a Newbie (#4: The Pretty Little Details)

Please note: The formatting in this post is a bit funky at the moment due to a recent font and design change. I'll be going back through all of my older posts to fix this!

These posts were written in celebration of Edge of Night's 1 year blogiversary to share some of what I've learned during my time blogging. While I love to give advice when I can, this isn't my niche and this is not what I usually post. But if you'd like to read more, be sure to check out my other posts in this series!

- Perfecting Your Posts
- Managing Your Blog
- Your Sphere
- The Pretty Little Details
- Wrap-Up
                                                 

The Pretty Little Details

Blog design - it's the first thing visitors to your page will see, and it's the first thing that will determine if they stick around or not. A good-looking page will catch the attention of your new guests, perhaps pique their curiosity a bit, and encourage them to read what you have to say. Your design should show off your unique personality, while remaining easy-on-the-eyes and keeping to the theme of your site.

Just as crucial, if not more, is that a well-designed blog is also as user-friendly as possible and has good functionality. It should be easy to navigate and free of clutter. Allow your readers to transition smoothly from piece to piece, without a thousand distractions and a load time of approximately ten-thousand years.

There's a lot to consider when it comes to your design and layout (with even more to learn). Thankfully you have the Internet at your disposal! There's no lack of resources for you if you need help, and there are tons of amazing ideas out there. You have all you need to make your blog catch and hold your reader's eye. Now you just have to get creative. At the end of this post, I'll provide a few websites for you that I've personally found to be quite useful.

Appearance

- You have a lot more room to play when it comes to your design as a whole versus your posts. 

Remember all those things I mentioned in my previous posts that you want to avoid? Things like bright colors, fancy typefaces, and ant- or mammoth-sized text...? Well, this is where you get to use them! But don't go crazy - use them wisely. Make whatever you do add to your design, not take away from it.

As an example, you don't want to be using cursive fonts for the main body text in your posts. But cursive fonts are great for headers and sidebar details! Take a look at what a difference a little touch like this can make:

Click each image to enlarge it

Okay. That was a poorly executed example (I'm still learning how this all works, too!), but hopefully you can see the point I'm trying to make.

In the left image, I've used just a regular ol' post header. The image on the right is using a special font from Microsoft Word (which I only used because I wasn't publishing the post. Be careful copy/pasting your work from Word to Blogger!)

Used in the right places, a good font can add beautiful detail to your pages. Same goes for colors. You still don't want to be using any colors that will give your visitors a headache, but you have a lot more suitable options for your actual blog design than you do when writing up a post.

- Try to make everything fit together. Make it feel like one design - not just a bunch of scattered pieces tossed into a mix.

This may sound obvious, but it can be hard to actually get everything to fit nicely together. To make it all have the same feel, and to make certain parts different and yet the same as the rest of the design. For those of us who don't have the eye of a good designer, this is always a tough spot.

My current blog design was done by someone who knew what they were doing. But I've added various things since then, and, while I think I've managed to keep it fairly coherent, it's far from perfect. And I don't even have that complicated of a design.

It's a challenge to make your page not feel like a bunch of random, mismatched pieces. Instead, it often feels like an abstract painter used your blog as a canvas. The big thing here is to just try your best and think about which colors, graphics, etc., will complement your design.

- Leave a good amount of empty space. This is known as "white space" or "negative space."

You know the saying "less is more?" Well, that applies here. 

Leaving some empty space around your blog makes everything feel less busy. It allows readers to focus their eyes on something else; to have a break in between your content and any other parts to your blog.

This space is known as white or negative space. (It doesn't actually have to be white, just empty.)

Example: Look at Google's homepage. This is a basic example, but look at all of the empty space around the logo and search field. Just imagine if that space was filled with advertisements, gadgets of all sorts, links - it'd be a mess!

Functionality

- Make it easy for readers to find your content.

How annoying is it when you're on a website, loved a post so much that you want to go back and read it again - except that the site is like a jungle, impossible to find any one thing?

It's a good reason not to come back, that's for sure. Everyone values their time, so make it as quick and as easy as possible for your visitors to find what they need. Make sure you have at least a few, if not all, of the items listed below (careful not to overdo it. Use what you can comfortably fit into your design):

• Popular Posts widget

• Related Posts widget

• Search bar

• Categories

• There are several ways to do this; including creating a category page or listing your categories on your sidebar.

• Tag or label each post

• Archives widget

• "Archives" is the widget that Blogger uses. You might use something different for other blog platforms, but the purpose is the same: Provide easy access to all of your posts, both past and present.

- Another reason to avoid clutter: Lag.

It's obvious that you want your blog to look nice and clean, but there are reasons for this other than just appearances. When you have a lot of pieces crowding your page, you increase the time that it takes for the page to load.

Some gadgets and widgets impact this load time and smooth transitioning more so than others; try to use as little as you can, and when you do want to add something, try to use items that are "lightweight."

Resources

(Design advice & tutorials, places to find and edit free images and graphics, coding)

(There's a lot of information below - feel free to look through each part, or simply find the section you need.)

Blog Design Tips, Advice, & Tutorials

---------------

- Xomisse

URL: http://xomisse.com/blog/

Great for: Several of your blogging needs; including blog, design, and coding tips and tutorials (as well as professional packages that you can purchase).

---------------

- Blog Designs by Dani

URL: http://www.blogdesignsbydani.com/

Great for: Design tutorials; especially for creating custom backgrounds, headers, and templates. You can also download some freebies here, most in the "cute" kind of style.

---------------

- Makin' Cute Blogs

URL: http://makincuteblogs.blogspot.com/p/tutorials.html

Great for: Various tutorials; mainly for Blogspot blogs, with a few Wordpress, Photoshop, and SEO tutorials.

---------------

- I Can Build a Blog

URL: http://icanbuildablog.com/

Great for: Various tutorials, tips, and tricks (among other things); including design, coding, SEO, social media, and more.

---------------

- Design Your Own (lovely) Blog

URL: http://designyourownblog.com/

Great for: Tutorials, tools, other resources, and more.

---------------

Quick mention:

- Lynde Avenue

This is the lovely gal who did my current design. I can't find anything about her design work on her site anymore, but I had to give her a mention nonetheless!

Places to Find Images, Graphics

---------------

- Flickr Creative Commons

URL: https://www.flickr.com/creativecommons/

Notes: All kinds of images can be found here under various Creative Commons licenses. Make sure to check the license terms (once you click an image, these can be found by clicking the link on the right side, beneath the image and date) and follow them.

---------------

- Wikimedia Commons

URL: https://commons.wikimedia.org/wiki/Main_Page

Notes: All kinds of images can be found here. Most are under a Creative Commons license, but some are in the public domain. If the image you wish to use is under a license, be sure to look over and follow the terms.

---------------

- Pixabay

URL: https://pixabay.com/

Notes: All kinds of images can be found here; including regular photos, vectors, and illustrations. There is also a video section. All media are free of copyright restrictions and in the public domain.

---------------

- Pexels

URL: https://www.pexels.com/

Notes: Thousands of stock photos can be found here, all in the public domain.

---------------

- Unsplash

URL: https://unsplash.com/

Notes: All kinds of beautiful stock photos can be found here, all in the public domain.

---------------

- Morguefile

URL: http://www.morguefile.com/

Notes: All kinds of images can be found here, all in the public domain.

---------------

Online Places to Edit/Create Your Images

---------------

- Canva

URL: https://www.canva.com/

Perks: Easy and clean appearance, tons of options. Has two editors - main editor requires an account to use (free), and is for creating graphics as well as editing images. The other can be accessed from the main page, and is mostly just for editing. Canva also offers a free "Design School" to help you master designing!

---------------

- Picmonkey

URL: http://www.picmonkey.com/

Perks: Straightforward, good number of options.

Cons: Can sometimes get a bit laggy due to the ads.

---------------

- Pixlr

URL: https://pixlr.com/

Perks: Has two editors - "Pixlr Editor" and "Pixlr Express." Good number of options, very customizable.

Cons: Ads on the side (don't usually affect performance, but do make it feel a bit cramped).

---------------

- Fotor & BeFunky

URL: http://www.fotor.com/ and https://www.befunky.com/

Notes: These are two different photo editors, but I've listed them together because I haven't actually used them yet. However, both appear to have a variety of options.

---------------

- DesignEvo *NEW (Added 6/22/18) 

URL: https://www.designevo.com/

Notes: This one is specifically for logo making. It has a nice selection of tools and graphics to create a great-looking logo from scratch, and there are also templates provided as well. It can be used for free, especially if your needs are simple ones; however, purchasing the premium version(s) does grant access to a bunch of other features.

---------------

Help With Coding

---------------

- Codeacademy

URL: https://www.codecademy.com/

Notes: Amaaazing place to learn how to code and more. Includes free courses in Web Developer Skills such as Java, Ruby on Rails, the Command Line; and in Language Skills such as HTML/CSS, JavaScript, JQuery, PhP, and Python. There's more, too, so definitely check this one out sometime.

Codeacademy requires an account, which is free (with the option to buy a "pro" account). The courses are superb, very interactive, and don't take eons to complete. I have heard, however, that this is just surface material, in which case you may also be interested in...
---------------
- W3Schools *NEW (Added 9/22/17) 

URL: https://www.w3schools.com/

Notes: (Thank you to Uma for introducing me to this one!) W3Schools has got you covered if you're looking to learn some code. With hundreds of examples and practice/experimentation opportunities, numerous tutorials, even quizzes and ways to get certified, this is one of, if not the, best place(s) to start for HTML & CSS, JavaScript, XML, and others.
---------------

Useful Bits of Code

------------------------
General Links

<a href="Your URL">Your Text</a>

This piece of code creates hyperlinked text. You know how people often leave comments with their blog name and link? This is how they do it. Simply paste the desired URL into the area that says "Your URL," and type the words you wish to be displayed where it says "Your Text."

Example: <a href="http://eveofnight.blogspot.com/">Edge of Night</a>

This gives the result: Edge of Night.

------------------------
Image Links

<a href="Your URL"<img src="Your Image Source"/></a>

This is similar to creating general links, but will make any image clickable as a link. To use this, paste the desired URL where you see "Your URL," and then tell this piece of code where to get your image by pasting the link to it where you see "Your Image Source."

Example: <a href="http://eveofnight.blogspot.com/"<img src="https://01.img.society6.com/society6/img/Xdez0avgDWg8nd0fy3OfsAfoHvk/w_700/artwork/~artwork/s6-0037/a/17186475_10035804/~~/i-mustache-you-a-question-but-ill-shave-it-for-later-brown-prints.jpg"/></a>

This produces the result:

------------------------
Bold, Italics

Bold: <strong> ... </strong>

Italics: <em> ... </em>

If you want to make a section of text (whether in a comment or elsewhere) bold or italic, you can use the above tags respectively. Just type the initial tag before the text you want bolded/italicized, and then a second tag with "/" after it.

Example: <em>Words go here.</em>

This gives the result: Words go here.

                                                                              

Summary:

• You have a lot more creative freedom with design elements outside of your posts. Still use them wisely, though!

• Try not to just toss things into your design. Make it coherent; think about what goes with it and what doesn't.

• Leave empty space. Resist the urge to fill every nook and cranny with something!

---

• Make it easy for readers to find the content they need. Use the methods listed.

• Keep calm and free of clutter - don't busy up your blog and drive visitors mad with lag!

---

• Use these resources for your design, media, and coding needs. Do some extra digging if you need more, or feel free to ask me for additional resources.