Blog Design For Dummies E-Book

Melissa Culbertson

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 457

Veröffentlichungsjahr: 2013

Beschreibung

The average blogger does not typically have experience with design or coding, but that shouldn't deter them from having a professional-looking blog design. This friendly and easy-to-understand guide provides you with the tools you need to establish a creative, unique, and aesthetically memorable blog without having to learn how to code beyond some basic CSS. Whether you're looking to write for a major brand, become a brand ambassador, sell a product, acquire new clients, advocate for a cause, or simply tell a story, you'll find design tricks, helpful techniques, and invaluable advice for creating a great-looking and functional blog. * Provides the tools you need to understand what makes a successful blog from a design standpoint * Teaches you CSS coding that can be used to create an effective blog design that gets noticed * Helps you make design decisions regarding colors, fonts, and imagery * Places special emphasis on providing your readers with a site that is easy to use thanks to smart navigation Blog Design For Dummies empowers you to make smart and creative adjustments to your blog so that you can be the proud owner of an effective blog design that gets noticed!

Leseprobe

Blog Design For Dummies®

Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com

Copyright © 2013 by John Wiley & Sons, Inc., Hoboken, New Jersey

Published simultaneously in Canada

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, [phone], fax [phone], or online at http://www.wiley.com/go/permissions.

Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Website is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Website may provide or recommendations it may make. Further, readers should be aware that Internet Websites listed in this work may have changed or disappeared between when this work was written and when it is read.

For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax [phone]. For technical support, please visit www.wiley.com/techsupport.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.

Library of Congress Control Number: 2013936849

ISBN 978-1-118-55480-7 (pbk); ISBN 978-1-118-55499-9 (ebk); ISBN 978-1-118-55478-4 (ebk)

Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1

Blog Design For Dummies®

Visit www.dummies.com/cheatsheet/blogdesign to view this book's cheat sheet.

Table of Contents

Introduction

About This Book

Foolish Assumptions

Conventions Used in This Book

Icons Used in This Book

Beyond the Book

Where to Go from Here

Part I: Getting Started with Blog Design

Chapter 1: Recognizing Components of a Well-Designed Blog

Knowing Why Blog Design Matters

Communicating with design

Orienting users with navigation design

Discovering How Readers Visually Travel Your Blog

Exploring how visitors click through websites

Recognizing that people are skimmers

Using Design Elements That Complement Your Message

Communicating your brand through design

Acknowledging the importance of images

Applying enough formatting

Creating a Great-Looking Blog (When You Aren’t a Designer)

Striving for simplicity

Building a blog that’s intuitive

Keeping design balanced

Staying away from clutter

Looking at Available Tools

Selecting a blogging platform

Finding an image-editing program

Using themes and templates

Exploring the importance of widgets and plug-ins

Chapter 2: Applying Core Design Principles

Providing Structure with Proximity

Grouping related content

Defining white space

Using Repetition

Creating consistency

Using repetition without being boring

Creating Contrast

Exploring methods to create contrast

Applying the right amount of contrast

Aligning Design Elements

Creating order through alignment

Using grids or lines to aid in placement

Chapter 3: Getting to Know Your Blog (Even Better)

Creating Goals for a Strong Design

Pinpointing what you want to accomplish

Drawing attention to goal-oriented design elements

Defining Your Writing

Carving out a niche (or not)

Showcasing your voice

Determining your tone

Understanding Your Audience

Knowing your audience can benefit your design

Finding out who they are and what they want

Creating a user persona

Chapter 4: Establishing a Style Guide

Exploring the Benefits of a Style Guide

Building a foundation of reference material

Creating consistency throughout your blog

Identifying Elements to Include

Defining your blog’s purpose, voice, and tone

Formatting blog post titles

Knowing how to structure a blog post

Remembering your color palette

Ensuring correct usage of fonts

Applying consistent imagery

Listing frequently used words

Attribution of photos or quotes

Keeping handy your latest biography

Creating Your Style Guide

Developing Guidelines for Blogs with Multiple Contributors

Part II: Choosing the Visual Design Elements

Chapter 5: Gathering Design Ideas

Creating a Mood Board — And Why

Compiling ideas by hand

Brainstorming on Pinterest

Keeping track of ideas with Evernote

Studying Other Blogs

Knowing what to look for

Looking outside your niche

Digging into Blog Analytics to Improve Navigation Design

Uncovering navigation issues by looking at bounce rate

Finding opportunities to highlight key content

Looking at referral traffic

Studying In-Page Analytics to see how users navigate

Deciding Who Designs Your Blog

Hiring a designer

Purchasing a predesigned theme or template

Designing it yourself

Chapter 6: Selecting Fonts and Colors

Choosing Fonts

Exploring what fonts say about your blog

Choosing web-safe fonts

Expanding your options with embedded fonts

Knowing which fonts to avoid

Finding fonts

Combining complementary fonts

Assigning roles to fonts

Choosing Colors

Getting to know the color wheel

Defining RGB and hex codes

Creating color harmony

Finding color inspiration

Exploring what colors mean

Deciding on colors to match your brand

Determining how many colors to use

Chapter 7: Developing Your Overall Blog Layout

Getting Familiar with Common Layout Types

Two-column right sidebar

Two-column left sidebar

Three-column right sidebars

Three-column with split sidebars

Magazine style

Adaptable layouts for different devices

Selecting a Blog Theme

Considering a theme’s flexibility

Choosing between a free or premium theme

Finding sources for themes

Exploring Ways to Showcase Blog Posts on Your Home Page

Showing full blog posts or excerpts

Deciding how many posts to put on your home page

Creating blog post excerpts

Deciding Where to Place Advertising

Putting your visitors first

Avoiding advertising overload

Taking care of your current advertisers

Chapter 8: Customizing Your Header, Footer, and Background

Expressing Visual Identity with a Strong Blog Header

Making a great first impression

Deciding whether you need a tagline

Choosing an effective header size

Designing a simple header

Enhancing Navigation with a Blog Footer

Creating a useful footer

Determining elements to include

Incorporating a footer into your design

Polishing Your Design with a Blog Background

Deciding on a solid or graphical background

Finding background patterns

Creating your own background pattern

Adding a background to your blog

Chapter 9: Customizing the Design with Coding Basics

Seeing How HTML and CSS Work Together

Basic HTML Every Blogger Should Know

Inserting hyperlinks

Formatting words

Making lists

Inserting images

Basic CSS Every Blogger Should Know

Changing background color

Adjusting other colors

Changing font properties

Aligning text

Adjusting margins and padding

Styling links

Accessing the CSS in Your Blogging Platform

Inspecting Your Blog with Firebug

Part III: Designing for Easy Navigation and Interactivity

Chapter 10: Navigation and SEO Basics

Discovering the Mission of Good Navigation

Staying focused on your readers

Limiting choice to drive action

Easing Navigation with SEO-optimized Blog Components

Building a sitemap

Creating proper headings

Using an effective title tag

Getting specific with a meta description

Making permalinks friendly

Adding alt attributes and titles to images

Getting specific using anchor text

Making Your Blog Mobile-Friendly

Responsive design

Using a mobile plug-in

Branding your plug-in

Chapter 11: Laying Out Your Navigation Menu and Sidebars

Introducing Important Content with a Navigation Menu

Deciding what content to include

Exploring whether you need secondary navigation

Naming your tabs

Putting Together Your Navigation Menu

Selecting colors and fonts

Adding a simple menu

Adding images to your menu

Showcasing Key Information with a Sidebar

Tying placement back to blog goals

Keeping the same look and tone

Identifying Elements to Build a Sidebar

Introducing your social profiles

Providing ways to subscribe

Sharing a brief biography

Highlighting credibility

Adding great social media widgets

Including relevant buttons or badges

Incorporating advertising

Deciding how to showcase categories and archives

Saving space with a tabbed sidebar element

Including Visual Design within Your Sidebar

Adding interest with color

Creating section dividers

Showcasing key content through images

Staying Clear of Sidebar Distractions

Eliminating visual clutter

Avoiding auto-playing media

Limiting your counting widgets

Removing user behavior or location widgets

Chapter 12: Making Content Easy to Find

Giving Visitors the Opportunity to Explore

Making Sure Visitors Find What They’re After

Organizing with Categories and Tags

Grouping with categories

Describing with tags

Helping Readers Find Old Content

Adding a search box

Creating an archive page

Increasing Reach by Highlighting Your Blog Posts

Showing popular posts

Highlighting related posts

Linking to other pages

Building a sneeze page

Chapter 13: Increasing Ability to Share and Interact

Exploring Sharing Buttons for Your Blog Posts

Deciding what social media platforms to include

Customizing your plug-in for effective sharing

Managing Comments

Capturing spam

Using word verification and moderation

Choosing a third-party commenting system

Highlighting Social Media Profiles

Adding social media buttons to your blog

Enhancing your blog with social media widgets

Part IV: Creating Design-Friendly Content

Chapter 14: Designing Main Pages of Content

Incorporating Design into Your Blog Posts

Customizing blog post titles

Identifying what to include in your byline

Styling block quotations for visual interest

Sharing Your Story with an About Page

Breaking up areas through visual design

Including navigational cues

Laying Out the Basics with a Start Here Page

Showing off your best stuff

Asking your reader to take action

Encouraging a Sale with a Product Page

Piquing interest through quality imagery

Interesting your prospects with appealing testimonials

Closing the deal with a distinct call to action

Building an Enticing Resource Page

Grouping related content

Avoiding link lists

Creating an Informative Advertising Page

Showcasing your blog’s opportunities

Selling ad space directly from your blog

Making Yourself Available with a Contact Page

Providing multiple ways to contact you

Minimizing distractions to encourage communication

Chapter 15: Working with Images

Finding Photos for Your Blog

Knowing the anatomy of a good photo

Using your own photos

Using images from other sources

Understanding permissions

Editing Photos

Choosing photo-editing software

Choosing the right file format

Resizing photos

Cropping photos

Using Images in Your Blog Posts

Deciding where to place images within a post

Properly sizing images

Naming image files

Showcasing Multiple Images within a Post

Deciding how many images to include

Creating a photo collage

Adding a gallery

Working with Illustrations

Getting to know vector images

Choosing vector-based software

Creating a simple vector graphic

Chapter 16: Incorporating Design into Your Blog Posts

Banishing Long Blocks of Text

Breaking Text into Smaller Paragraphs

Using Subheadings

Including Images

Applying Indentation and Block Quotes

Including Lists

Increasing Space between Paragraphs

Part V: The Part of Tens

Chapter 17: Ten Places to Extend Your Blog’s Design

Facebook Page

Twitter

Google+

Pinterest

E-books

Printables

Media Kit

Blog Badges

Blog Business Cards

Slides for Videos and Presentations

Chapter 18: Ten Well-Designed Blogs

Joy the Baker

Go See Write

Nom Nom Paleo

Say Yes to Hoboken

Alex Beadon

Los Angeles, I’m Yours

Rage Against the Minivan

What I Wore

Butter

The Everywhereist

About the Author

Cheat Sheet

Introduction

The average person spends roughly three seconds on a website before deciding whether to stay. That’s not enough time to read your latest blog post and know your blog is awesome. Instead, design impacts that decision. If the visitor does happen to stay, you want to keep them around with a blog that just plain makes sense to use.

This book seeks to help you improve your blog design, whether you’re starting from scratch, redesigning an existing blog, or simply tinkering with your current design. I cover blog design in ways you might expect — design principles, colors, and fonts — and in ways you might not know are actually part of design — navigation, usability, and shareability. This book breaks all that down in an approachable, easy-to-use format so you can design a blog that encourages readers to stick around.

About This Book

Think of this book as a design guide for the average (and awesome) blogger. Most bloggers don’t have experience with design or coding. You simply have a voice you want to share through your blog. Whether you design a blog yourself, hire someone, or purchase pre-made design elements, this book gives you to tools to understand what makes a blog successful from a design and navigation standpoint.

This book is geared towards bloggers of all skill levels, although if you’ve been blogging for a while you may already know some of these tips or techniques. But not so fast! You may have been blogging for a long time but never knew underlying design principles, basic color theory, or exactly how to do a particular technique I mention. That means everyone learns something from this book.

By the end of this book, you’ll know:

What constitutes good blog design and why design matters in the first place

How to ensure your blog design syncs with your blog goals, your audience, and your content

Ways to customize your blog design, from headers to footers and everything in between

How to design your blog to be easy to navigate and use

Ways to create design-friendly content to improve readability

You can work through this book page by page or completely out of order. You’ll find value either way. In typical For Dummies fashion, this book makes it easy to find what you’re looking for with clearly outlined parts, chapter intros that spell out what you’ll learn, and a detailed index to find your way to something specific.

Finally, this book isn’t meant to intimidate you when it comes to blog design. In fact, my goal is to empower you to take control of your blog design and feel confident about it. Even when your design is complete, use this book as your design guide when you need help with a specific piece of your design or just want to browse through examples of great blog design.

Foolish Assumptions

Forgive me, but I’m about to make some assumptions about your blogging knowledge. I expect that if you picked up this book, you know some of the basics of blogging such as uploading a photo, publishing a blog post, and installing plug-ins. I assume that most bloggers who buy this book already have a blog, but if you don’t then you can still find value in this book. It just won’t cover the beginning steps of how to set up a blog and get things rolling.

The majority of this book is not geared towards any specific blog platform; however, when I show you steps, they are typically for the WordPress.org platform because it’s the most popular one. The majority of plug-ins that I mention are also for WordPress, although some plug-ins can be used on multiple blog platforms. When possible, I mention options for Blogger, Tumblr, and a few other platforms, too. I also assume that you aren’t a developer or professional blog designer. I wrote this book to make good blog design achievable for the masses, so my advice won’t always be the most complex or require you to dig deep into your code. However, it will always be geared toward helping bloggers without a design or technical background achieve a blog design they can be proud to show their friends and fellow bloggers.

What I don’t assume is the type of blogger you are. The information in this book isn’t just for a parent blogger or a food blogger or any other type of blogger. I wrote this book with all bloggers in mind and with oodles of full-color examples of great blogs on the Web. In fact, pay special attention to those blog designs outside your niche because you might discover cool ideas you don’t see within your own blogging circles.

Conventions Used in This Book

Throughout this book, I use a few basic conventions over and over to make the information I present easy to understand:

If you see text in bold, you’re meant to type just as it appears in the book. A little exception though: when you work through a steps list, then each step is bold to make the steps easier to follow. In those cases, the text to type isn’t bold.

If you see text in italics, this means I’m introducing a word or phrase you might or might not know, then defining it.

Web addresses and code appear in monofont. If you're reading a digital version of this book on a device connected to the Internet, note that you can click the web address to visit that website. Nice!

When you need to select an option in a menu, I use a little arrow (⇒) to let you know the path to take, such as Dashboard⇒Appearance.

Icons Used in This Book

This book features little icons like these to point out special points of interest:

The Tip icon marks tips (well, duh!) and extra ideas that you can use to make your blog design even better. Consider these the make-designing-your-blog-easier icons.

When you see the Remember icon, store this information in the back of your mind for future use. This icon marks things I want to reinforce as super important.

Red alert! Red alert! This little gem marks important information that may alert you to design pitfalls or save you a headache or two. I don’t use this one often so pay special attention when I do.

Information tagged as Technical Stuff means extra geeky stuff that you can normally skip over. Unless, of course, you love getting technical.

Beyond the Book

Blog Design For Dummies isn’t just what you see within the book you’re holding. Here’s a glimpse at this book’s companion content, which you can reference online at anytime:

Cheat Sheet: Whether you want to know the meaning of a term or refresh your memory about main design principles, you have those answers and more in this book's online Cheat Sheet (www.dummies.com/cheatsheet/blogdesign). Consider this Cheat Sheet your handy reference guide for content you use again and again. It also includes a list of links for all the plug-ins covered in this book.

Extras: There's so much about blog design to share that I even wrote four more pieces of content that couldn't fit inside this book. Be sure not to pass over the extras for Parts II through V. In each of those parts, I include a link to an online article that extends beyond what I cover in this book. You'll find how to create a favicon, ideas for using navigation to drive traffic to your blog pages, clever ways to greet new visitors, and ten great websites for design inspiration. Discover these extras at www.dummies.com/extras/blogdesign.

Updates: The tech world is fast-moving so sometimes information published in a printed book does change. When substantial changes impact the accuracy in this book, we let you know. You can find these updates at www.dummies.com/go/blogdesignupdates.

Where to Go from Here

You don’t have to start this book by flipping the page to Chapter 1 and reading chapter by chapter until you get to the Appendix. But, hey, you can if you want! Start anywhere your burning questions take you, whether you’re dying to know how to select colors or fonts (Chapter 6) or ways to make your content easy to find (Chapter 12). However, consider the first few chapters mandatory. They provide you a basic foundation not only in design, but in understanding your blog. These basics will undoubtedly lead to a stronger blog design.

If you have a question or want more tips on blog design (or blogging in general), find me on my blog Momcomm (www.momcomm.com), Twitter (www.twitter.com/MelACulbertson), or Facebook (www.facebook.com/momcomm).

For additional blog design inspiration, take a peek at my Pinterest boards (www.pinterest.com/melaculbertson). I have boards dedicated solely to blog design goodness from color combinations to even more blog design tips.

Part I

Getting Started with Blog Design

For Dummies can help you get started with lots of subjects. Visit www.dummies.com to learn more and do more with For Dummies.

In this part. . .

Gain an understanding of why blog design matters and learn how visitors typically travel through online content.

Learn what you need to start a blog design.

Explore the foundation of great design by learning four core design principles and how to apply them.

Examine your own blog’s goals, content, and audience to make impactful blog design decisions.

Get tips on building blog design guidelines so your blog remains consistent in both design and content.

1

Recognizing Components of a Well-Designed Blog

In This Chapter

Exploring why good blog design matters in the first place

Looking at how readers generally look through websites and blogs

Aligning your blog’s message with your design

Identifying blog design tips for nondesigners

Discovering the basic tools needed for designing a blog

Blogging introduces a way for people to have a platform for sharing their words with anyone in the world. Along with that opportunity comes the chance to build a blog design that complements your words and leaves a lasting impression.