Better design dpcon 4a
- 1. BETTER DESIGN BETTER BLOG How to make your blog design work for you and not against you.
- 3. There is no one right way to blog, and there is no one right way to design a blog Some blog designs ideals are based on opinion. Some blog design ideals are based on information about how readers use your blog. Image: http://www.flickr.com/photos/10096171@N04/8449683955/
- 4. DEFINE YOUR BLOG Who are you? What do you blog about? Image: http://www.flickr.com/photos/trevgrant/8414061077/in/set-72157627078728479/
- 5. What’s an elevator pitch? An elevator pitch is an overview of an idea for a product, service, or project. The name reflects the fact that an elevator pitch can be delivered in the time span of an elevator ride (for example, thirty seconds or 100-150 words).” – Wikipedia
- 6. What are your blogging goals? What do you want your blog to achieve overall? What do you want to achieve this year? planningwithkids.com/blog-coaching-boost-e-book-blogging-smarter/ problogger.net/31dbbb-workbook/
- 7. You can appeal to everyone, so who is your ideal reader? Where do they live? Do they use facebook? How old are they? Do they have kids? What do you want your reader to do? Image: http://www.flickr.com/photos/trevgrant/8070134732/sizes/l/in/set-72157627078728479/
- 8. HOW DO PEOPLE READ YOUR BLOG? Readers are creatures of habit They are also lazy! Image: http://www.flickr.com/photos/trevgrant/8539588156/in/set-72157627078728479/
- 9. How do people look at a web page?
- 10. What else do we know about web readers? • They are easily distracted. • The skim read • They are attracted to headline text and images of people • They like white space • They need something to entice them to scroll down.
- 11. The magic formula for user friendly blog design: Make your blog easy to read, easy to navigate, and make sure each element meets your goals
- 12. CHANGE YOUR BLOG DESIGN TO MEET YOUR GOALS Image: http://www.flickr.com/photos/trevgrant/8213329169
- 13. HEADER: Make a great first impression afarmgirlsdabbles.com foxslane.blogspot.com
- 14. www.viewlike.us
- 15. HEADER MENU: The first place readers look when they want more. • Always have a home button. owlet-designs.blogspot.com 74limelane.com.au/blog/ Image: http://www.flickr.com/photos/trevgrant/8461260945
- 16. CONTENT: If ‘content is king’, then readable content is queen! Image: http://www.flickr.com/photos/trevgrant/8407888555/
- 17. CHOOSING FONTS: • Choose fonts that are easy to read • Choose only 2 -3 fonts • Choose a dark coloured font on a light background • Choose a web font that can be embedded into your design
- 18. USING FONTS: • Make your main content font bigger • Left justify your content • Follow the font hierarchy
- 19. WHITE SPACE: • cramped • busy • hard to tell what is content and what is side bar • hard to distinguish between elements
- 20. • empty spaces for eyes to rest • easy to tell different elements apart • allows different elements to stand out
- 21. IMAGES: • Images draw a readers eye and can encourage them to take action • Readers are drawn to images of people • Use your own or others but make sure you have permission and credit properly • Resize your image to fit your blog and ‘save for web’ www.picmonkey.com www.pixlr.com
- 22. FOOTER: Entice people to dig deeper into your blog www.planningwithkids.com
- 23. COMMENTS: If you want to readers to comment, make it easy! • Comment button at the end of the post • Clear, easy to fill in comment form LINKS: Make links visible! • Differentiate links from other text. • Don’t make things look like links if they are not.
- 24. SIDE BAR: Less is more! • Make sure your side bar promotes you and your blog and not everyone else. • Use your goals to help decide what should be in your side bar and where it should go • Use your side bar for added navigation, help your readers find more content. www.freerangeinsuburbia.com
- 25. MAKING YOUR BLOG PRETTY, OR COOL, OR FUNKY, OR… Image: http://www.flickr.com/photos/trevgrant/7985332051/
- 26. Define your blogging style… • Make a list of words that describe the way you want your blog to look and feel. • Create a colour pallet • Choose fonts • Choose a style/type for your design-seeds.com elements • Look for inspiration to guide your ideas. printpattern.blogspot.com designspiration.net pinterest.com
- 27. CAN I DO ALL THIS MYSELF? Image: www.flickr.com/photos/trevgrant/8389489468/
- 28. If you want to do it yourself… • Start with a good basic theme • Image editing software • Learn basic CSS and html • Use forums, tutorials and google to find help • Use browser add-ons and a good WYSIWYG html editor to help you learn and change code getfirebug.com kompozer.net w3schools.com
- 29. Many websites say, “look at me.” Your goal ought to be to say, “here’s what you were looking for.” Seth Godin sethgodin.typepad.com Image: http://www.flickr.com/photos/trevgrant/6243741537
- 30. Links to all resources mentioned can be found at: katepickle.com/dpcon13