Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 09 2013

16:37

12 Goals That Freelance Web Designers and Other Freelancers Should Consider for 2014

Advertise here with BSA


goals1

It’s that time of the year again. At the end of every year and at the beginning of the new year, freelancers and others start setting goals for the coming year.

While I’m not necessarily a big advocate of personal New Year’s Resolutions (simply because I think many are unrealistic and most get broken within a month anyway), I do believe in business planning, especially for freelancers. And planning involves goals.

Coming up with goals that make sense can be hard. Especially if you’re not used to setting business goals.

That’s why in this post I’ve done a lot of the hard work for you. I’ve listed twelve goals that will make sense for most freelancers. Also, since there are twelve of them, you may wish to tackle one goal a month to make the list more manageable.

If you liked this post, you may also like 10 Principles of Successful Freelancers.

12 Goals for the New Year

Are you ready for another year of freelancing? Here are some goals you may wish to consider for the coming year:

  1. Lean something new. Adding to your skillset or updating an existing skill is a great way to bolster your freelance web design business. Fortunately, there are lots of opportunities to learn. You can choose an online course (many are free) or sign up at a local community college. When you are done, be sure to update your website and LinkedIn to include your new skill.
  2. Do a better job of networking. Most of us fail to network with new people we meet, whether we meet them online or offline. Make a point to mention your freelancing business to new acquaintances and carry your business cards at all times. You never know when someone who you know knows someone who is a prospect for you.
  3. Sign up at least x new clients. I left the “x” in this goal because I don’t know how busy your particular freelance business is. You’ll have to assign your own number. However, even busy freelancers can use at least one new client. Improving your networking efforts (see previous goal) will help you to attract more clients.
  4. Spruce up your professional website. When did you last update your freelance website? If it’s been a while since you’ve updated your website, it’s probably time. Remember that your freelance website may be the first impression of your freelancing business for many prospective clients. You need to make sure it leaves a good impression.
  5. Update your freelancing portfolio. It’s easy to let your portfolio slide when you are busy. After all, you are focusing on paying work. Who has time to add new projects? Before you know it, you have an outdated portfolio that doesn’t highlight your best work. Having an outdated portfolio can actually cost you clients.
  6. Start a side project. Side projects can be a great way to earn extra money or pursue a passion. The best side projects allow you start and stop working on them, as time allows. There are plenty of side projects to get involved in too–anything from writing an eBook to selling a premium WordPress theme. Just pick a project that interests you and get started.
  7. goals

  8. Improve existing relationships. Your personal relationships are an important part of your balanced life. And let’s face it, if you’re not getting along with your friends and family, it can be pretty hard to really focus on your work. Yet many of us neglect this important part of our lives. Make it a point this year to strengthen your relationships.
  9. Invest in your work tools. How old is your computer? When was the last time that you upgraded your software? Is there a software package you really do need, but don’t have? Start saving money at the first of the year so you can bring the tools you use to work up to date. Also, keep your eyes open for specials and deals during the year on the tools you need.
  10. Clean up your office. Organization can save you time and make you more productive. Plus, working in an organized office can be a mood lifter. Unfortunately, clients rarely see our home offices. So the temptation is to let it get messy. Make the time to straighten up your office. Throw away junk and file those papers you need to keep for tax or accounting purposes.
  11. Do a better job of managing your time. Did you ever wonder where all your time went? If so, you’re not alone. In fact, if you live in the U.S., you can read the results of the American Time Use Survey from the Bureau of Labor Statistics. If you think you wasted a lot of time in 2013, decide now to make better use of your time in 2014.
  12. Give yourself a break. While you don’t want to waste time, it’s important not to overwork. Many freelancers don’t realize that we slow down when we overwork and actually become less efficient. That’s why getting enough sleep and taking the occasional vacation is important. If you save money ahead of time and work it into your schedule, you can manage a vacation–so plan on taking one.
  13. Delegate work when it makes sense to do so. Do you still do every single thing that involves your freelancing business yourself? If you’re busy, doing everything may not make sense. Especially if you are trying to do things that are really beyond your expertise (like filling out your tax forms).

Now that you’ve looked over the list of goals I’ve come up with, you can choose several or all of these goals for the new year. Don’t forget that you can also add your own goals for the coming year.

A Few More Words about Goals

Goals3
Here are a few tips to help you set and meet your goals:

  1. The best goals are obtainable and measurable. If you set goals you can’t possibly accomplish, you will become discouraged. Decide also how you will know whether you have met a goal.
  2. Write your goals down so that you can look at the list throughout the year. You may think that you can remember your goals, but if you don’t write them down I guarantee you will have forgotten a few of them by April.
  3. Revisit your list of goals regularly. Your circumstances may change and your goals should be flexible to accommodate any changes in your business or life.

Your Turn

Have you already set goals for your web design business for 2014? What are they?

Share your goals in the comments.


Advertise here with BSA

December 30 2011

10:00

20 New Year’s Resolution Ideas to Become Better at Your Career

Can you believe that 2011 is already coming to a close? 2012 is right around the corner. December is always a time for finishing up any work for the year and enjoying the holidays. One thing that separates the best website designers, developers, and writers from the average ones is planning for the coming year. The best process for new year planning is to start with evaluating what worked and what didn’t during the previous year, researching what’s new in your industry, and coming up with a list of ideas for how you can take your website to the next level. In this article we will provide a list of 20 new year resolution ideas for becoming a better website designer, developer, or writer.

1. Collect Feedback

Find someone who you respect and trust within your field and ask him/her to review a few examples of your work and provide you with feedback on how you can take your craft to the next level.

2. Develop a Marketing Plan

Marketing is critical to having success as a website owner. Most website owners don’t spend enough time thinking about how they can better market their website. The beginning of the year is as good a time as any to take a few hours to come up with some creative marketing tactics to try during 2012.

3. Create and Analyze Reports on Website Traffic

Even though reporting tools have become more robust and easier to use over the years, many of us don’t like to take the time to use the tools on a regular basis. We can learn a lot from analyzing our website data. Take some time to think through what data would be helpful for your website, create some reports around that data, and analyze the reports to learn how you can attract even more visitors.

4. Buy Software

Sometimes it takes spending a little money in order to provide a better quality product to your website visitors. Is there software out there that you know can help you improve your website? Save up and buy it. Spending a little money can go a long way.

5. Evaluate Your Website

Take some time to go through every section within every page of your website. Make sure everything is still relevant and up-to-date. Have things changed within your industry? Are you noticing any trends with your visitors? Be honest with your evaluation and come up with a list of things that you can do to improve your site.

Image by Dominik Gwarek

6. Hire an Intern

Are there tasks that you keep putting off because they are lower on your priority list and you just can’t find the time to get to them? How about hiring an intern to help you complete those outstanding tasks? You might be able to find a student who needs to get an internship for school credit, which means you don’t have to spend any money. If not, you can probably find some help for a lower hourly rate than you would if you hired an outside contractor or part-time employee. Interns can be extremely beneficial.

7. Take a Risk

Is there something new that you’ve been looking to try or talk about, but until now you haven’t wanted to “rock the boat”? Now is the time to take a risk. Try something new. Get out of your comfort zone and see what the results are. Who knows, you might find that your audience has been waiting for you to do it for a long time.

8. Survey Your Website Visitors

Without your visitors you have no website. Find what they are looking for. Get feedback on your current website. Ask if there’s anything that you can add that they might find beneficial. People like when someone asks their opinion. Make your readers feel important by asking for their thoughts on your website.

9. Social Media is Your Friend

Social Media sites like Facebook and Twitter have done wonders for website owners. Use social media to share links to your website with your online audience. The more you use social media the more traffic you’ll see to your website.

Nice icons? See more from Plechi

10. Set Up a Partnership

Is there someone in your industry who you think can compliment your website and provide more value to your visitors than you might be able to do alone? Are you a great writer, but your design skills are average? Are your design skills top notch, but writing code isn’t your thing? Perhaps you can find someone who has stronger skills in one area, but is lacking skills in the area that you’re strong in. Reach out to him/her to see if you might be able to collaborate on a project or two.

11. Join Groups

There are groups of people who get together to share ideas and discuss new trends within every industry. Find some local groups that you can join. Sometimes talking with other people within your industry can help you come up with new ideas for your website. Groups are also a way to increase website traffic and collect feedback on your website.

12. Add a Blog or Write More Articles

Blogging is a GREAT way to attract new visitors to your website. Each article can be optimized for search by adding keywords and inbound links. If you don’t already have a blog, add one. If you have one, try to write more articles each week. The more valuable content you produce, the more traffic you will get to your website.

13. Say Thank You

Again, without your regular website visitors you can’t have a successful website. Make sure your visitors know just how much you appreciate them. Post a message to your website. Put together a HTML email saying thank you. If you sell a product or service, give them a ‘Thank You’ discount. Let your visitors know just how much they mean to you.

14. Do More

Have you ever found yourself saying, “I know I can take this website to the next level if I just had a little more time to spend on it”? If so, then start spending more time on it. Get up a little earlier. Stay up a little later. FIND THE TIME to do more with your website.

15. Take a Class

Even the best designers, developers, and writers can improve. In today’s world things are constantly changing. Search class listings from local community colleges or search for online classes that cover a topic that you think can help you improve your skills.

Image Courtesy of Mediacampus.ie.edu

16. Use Video

The costs and time associated with creating online video are both coming down. New technologies are allowing more people to create informative videos about any topic. Videos are more engaging than text. Websites that incorporate video into their structure usually do better than ones that neglect online video.

17. Teach a Class

Is there a community college in your local area? If so, you should sign-up to teach a class about website designing, website development, or writing. Teaching can be an extremely fulfilling service. It may even help you improve your craft. As you create lesson plans and think through different areas of your craft it may spark new ideas for how you do what you do.

Image Courtesy of Hugohouse.org

18. Write an Ebook

Ebooks are great for positioning yourself as an expert in your industry. They are also great for SEO. Think about a topic that you can provide new insight on and start writing. It doesn’t have to be 100 pages. It might only be 5 or 6. What’s important is providing a new or different take on the topic that you choose. Once it’s written then make it downloadable from your website. Collect personal information from those who download it, so that you can contact them in future.

19. Create a Mobile Website

With more and more people using smart phones it’s critical that you have a mobile version of your website. Take some time to create a mobile version of your site. Your website visitors will really appreciate it.

20. Get Started

Don’t put this off any longer. Start coming up with your own list of new year resolution ideas. Once you have a list created, prioritize each item on the list and then start working down the list. By this time next year you will be amazed at how much you accomplished!

Have you started putting together a list of new year resolutions? What’s on your list? Leave a comment below.

August 30 2010

18:26

Blogging For Web Designers: Editorial Calendars and Style Guides

Smashing-magazine-advertisement in Blogging For Web Designers: Editorial Calendars and Style GuidesSpacer in Blogging For Web Designers: Editorial Calendars and Style Guides
 in Blogging For Web Designers: Editorial Calendars and Style Guides  in Blogging For Web Designers: Editorial Calendars and Style Guides  in Blogging For Web Designers: Editorial Calendars and Style Guides

A few years ago, you might not have pointed out during a meeting with a potential client that you maintained a blog. Over time, though, blogs have evolved from the being a personal hobby to a serious work tool. In fact, today, web designers are supposed to know much more than just how to design and build websites. Customer’s expectations have increased, and unless you are in position to choose your favourite clients, meeting these expectations requires hard work.

Hence, it’s important to keep learning about the variety of design-related fields every single day — be it marketing, psychology, business, copywriting, publishing or blogging. This article doesn’t cover “traditional” web design discipline as we know it, but goes a bit beyond it, exploring various writing, blogging and online publishing strategies. Apart from that, we present some useful writing style guides that may help you educate your clients on their copy for their upcoming project.

Calendars in Blogging For Web Designers: Editorial Calendars and Style Guides
Image credit

Good news: you don’t have to reinvent the wheel every time you are about to start and run a blog. Many bloggers have already shared their best tips on how to run a blog efficiently. One of those tips is to set up an editorial agenda. Blogging may sound like a spontaneous activity, but it can also be planned. While this might sound obvious to professional bloggers, applying the idea to less regular posting schedules is not a bad idea. Some will benefit greatly from looking ahead. Writing and posting according to your inspiration is great creatively, but it doesn’t exactly make for consistent work. While planning can have its drawbacks, it does come with many positive effects.

Compiling a list of brilliant posts waiting to be published is not enough, though. Polishing the quality of the posts is important, too. Unfortunately, spelling is not the only thing to check. Style guides are useful to many people other than those who run newspapers and magazines, and certainly to bloggers. In reality, this is what it takes to conquer the world.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Editorial Calendar

An editorial calendar outlines the editorial content that is planned for the coming few weeks. Financially speaking, it can be useful for advertisers to know on which day to run a particular ad, but in this article we’ll consider only the benefits for you and your readers.

Creating discipline will change your relationship to your blog, and in visible ways. An editorial calendar will affect both your writers and your readers. The key is consistency. Calendars don’t have to be extensive to be efficient, even though newspapers and a few blogs have calendars that cover as much as an entire year.

Why Is It Useful?

From the writer’s point of view, a calendar has numerous advantages. First, seeing the long term encourages them to look at the big picture, an excellent habit. It also helps establish credibility because all your content will have to make sense in the context of that schedule.

Secondly, by knowing which articles will be published when, you are able to better plan your personal work schedule. If you want to write an upcoming article now, great. If not, you now know when you’ll have time. By exercising discipline, you are able to focus on the things that matter, which Jonathan Thomas calls a good blogging habit:

You’ll create a production state of mind, meaning that you’ll get in the habit of writing a post a day, or even writing them all in one day and scheduling them to post. This will make the creation process much easier to begin and end.

Why not exploit this window of opportunity by tackling some in-depth articles or developing an interview series? Imposing deadlines on yourself lets you organize research to support your writing or to contact experts for commentary. Planning ahead this way makes it easier to write features stories and to deliver higher-quality content to readers. It also helps you grow faster professionally.

A lot of it has to do with motivation. You have to recognize that finishing your posts on time while dealing with all of other tasks is do-able. Motivation is critical to writing more and planning content ahead. It’s a virtuous circle. Rather than juggling ideas for hundreds of post a week, you will focus on a few and actually work on them. Organizing content helps you to organize ideas, and by the end, you’ll likely end up with even more interesting ideas in the editorial plan.

Drawbacks

Of course, calendars do have their drawbacks, otherwise every single blog would be using one. The most obvious drawback is that sticking to the plan can be hard. Having a plan on paper is great, but what happens when your Thursday post isn’t ready? Readers won’t be pleased that you’ve broken the unspoken contract. You’ll want to think about who has access to the schedule. Keeping it mainly to yourself and revealing it only occasionally can be a good idea and can generate a little excitement.

Readers won’t be the only ones disappointed. In most cases, an editorial plan functions as a kind of pledge by the blogger to follow a better workflow. A calendar can certainly raise the bar, but it should be motivating and not too difficult to keep up with. This is why having reasonable deadlines is important. Even if you miss one, remember that stuff happens, and it’s not the end of the world.

Which brings us to the last point: flexibility. A calendar shouldn’t restrict a blog’s potential, especially if the blog has more content than it needs. If a great story comes along that is time-sensitive, so be it: calendars can and should be adjusted. Content trumps all else.

Getting Started

18 in Blogging For Web Designers: Editorial Calendars and Style Guides

  1. Sit down, take a sheet of paper and list the themes and topics you will be covering. Starting an editorial plan takes time. The more precise you are, the easier it will be to organize.
  2. Define your categories and tags.
    While simple to do, a few rules will make the process more efficient:
    • Use only as many categories as you really need—don’t overload them;
    • Make the labels short, unique, descriptive and reader-friendly;
    • Assign one category to a post, and then use tags for more description;
    • Use sub-categories only if you really need them.
  3. Balance both form and content.
    Mixing feature with shorter articles is good because it lightens your workload without sacrificing regularity, and also because it’s easier for readers to follow. Bear in mind that you have already defined your categories, and now is the time to figure out how to mix them. Keep in mind also that a diversity of content is always appreciated by readers.
  4. Determine your themes.
    Now you can spice things up by creating themes for the days or weeks. This has two benefits. First, it puts readers on a schedule. If they know what to expect and when, they will be more inclined to return. Secondly, it saves you from having to think of a theme or idea for each day. Here are some examples you could use:
    • Tutorial and how-to
    • Review
    • Short tips
    • Bookmarks round-ups
    • Ask the blogger, reader Q&A
    • Columns
    • Lists
    • Debates and polls
    • Features
    • Ongoing series
  5. Decide when to publish.
    Consider two things. First, when will you have time to write? If you’re behind schedule, on what day would you most likely have time to write a feature story? When will you be busy and have time to write only a short article? Secondly, some days are slower than others, so you might want to save your brilliant feature for the middle of the week. Here is an idea of what you could do:
    • Monday: short tutorial
      A helpful tutorial is a good start to the week.
    • Tuesday: feature
      Show the world your big story. It’s a good day for visibility.
    • Wednesday: tips
      A post that doesn’t take much time to write and prepare will be good for you in the middle of the week.
    • Thursday: review
      The weekend is coming, and if your work is not done, Thursday can be stressful. Time for a quick-and-dirty review.
    • Friday: list
      The weekend is here. Time for a list from which readers can quickly take what they need.
    • Saturday: poll
      Take advantage of the weekend to pose question to your readers.
    • Sunday: useful links
      You could post the links that you collected during the week.

Setting a Schedule

When you set up your schedule, be fair to yourself and realistic. Ask yourself honest questions. And always remember your goals: realistic objectives, diversity of content and forward-thinking.

  • How long ahead should I plan?
    Normal practice is about two weeks ahead.
  • How often should I post?
    It could be once or several times a day, a few times a week, whatever works for you.
  • How often should each category appear?
    Try to balance the categories so that the content is varied.
  • How to balance features and shorter articles?
    Depending on your blog’s purpose, you may want to publish a feature every day or every week.
  • Who does what and when?
    If you have multiple authors, make sure everyone knows what is expected.
  • How much quality content can I ensure?

171 in Blogging For Web Designers: Editorial Calendars and Style Guides

Whether your scheduling tool is as simple as an Excel sheet or as sophisticated as dedicated software, the important thing is that you feel comfortable with it. You can download a weekly spreadsheet template for 2010 for OpenOffice or Excel. Of course, creating your own calendar could work even better: just a few columns with succinct information. You could use the following headings:

  • ID or number,
  • Date of publication,
  • Title of post,
  • Category and/or tags,
  • Basic intro,
  • Description or main points,
  • Links and resources used.

Taking it a step further, by maintaining an SEO-friendly editorial calendar, you would be organizing the blogging process in a way that supports your SEO strategy.

Going Further

It makes sense to start blogging when you have at least a week of content ready, preferably more. And then you can’t rest on your laurels. Keep an eye on what’s coming up; you should constantly be collecting ideas in an efficient way. When are you most likely to think of great post topics? If in the morning, then wake up 10 minutes early to write down your ideas. Constantly searching for new topics is great, but writing them down is even better. If you make a habit of adding topics and basic points to your list, then you will be able to just pick one and write a post.

A little of strategy goes a long way. Even if you have a lot of content and ideas, don’t rush. Save some back-up posts for busy weeks. There are times when you will be relieved to have content ready to publish so that you can focus on other work. This is what Kian Ann calls a “buffer” in his article “6 Steps to Consistent Blogging.” Another reason not to publish all of your content at once is the difference in traffic it would make. How would publishing two articles a day instead of one change traffic flow? How much will it cost you? Is it worth it?

Google-analytics-event-tracking-large in Blogging For Web Designers: Editorial Calendars and Style Guides

As with all else, constantly looking to your users for feedback is critical. Find out if they’re happy with the frequency and quality of your content, and adjust to them accordingly. If you have many readers, you could use a tool such as Twitter or a polling service.

You could go even further by including in your calendar a way to keep old posts alive. ProBlogger has an excellent “5 Tips for Getting Readers Viewing Your Old Blog Posts” video on this issue. The advice includes creating a “best of” or “popular posts” section, linking related content as well as updating and reposting old content. You could also see out opportunities in the offline world. A lot of events are probably happening in your field. If you’re interested, you could easily find ready-to-write subjects and prepare first-hand news reports.

UI And Editorial Style Guides

Purpose

As emphasized, consistency is one of the strongest assets a blog can have, which is why style guides are so helpful. Style guidelines created for a particular organization are called “house style.” On the Web, their main purpose is to ensure consistency across websites by standardizing design and content. Other advantages are that they facilitate group collaboration and are useful for training new members on a product team.

Beyond imposing proper grammar and spelling, an editorial style guide sets the voice and tone of the content. If you are the only writer on your blog, you might think that your voice is always the same… but don’t be so sure. If you run a blog with multiple authors, a style guide is all the more important.

An interface style guide is helpful for documenting a website’s design and informing clients and content editors of branding guidelines, including rules for typography, color and images. Development standards are no less important: the style guide for them keeps development smooth and efficient, and it often accompanies the design style guide.

2010-03-29 18 02 00 in Blogging For Web Designers: Editorial Calendars and Style Guides

Resources

Here is a list of online style guides that can be used as a starting point.

A List Apart: Style Guide
A great example of a short but efficient style guide, covering such things as tone of voice, punctuation and CSS style.

2010-03-26 18 58 17 in Blogging For Web Designers: Editorial Calendars and Style Guides

NYPL: Style Guide
This style guide for the New York Public Library explains the mark-up and design requirements for all Web projects of branch libraries, along with various standards and best practices.

2010-03-26 18 59 48 in Blogging For Web Designers: Editorial Calendars and Style Guides

The Guardian style guide
A detailed A–Z online edition of the style guide used by writers at The Guardian, Observer and guardian.co.uk.

2010-03-11 12 25 531 in Blogging For Web Designers: Editorial Calendars and Style Guides

Web Style Guide
This guide to Web publishing and writing style by Patrick J. Lynch and Sarah Horton is available with complete text and illustrations online. It is a comprehensive guide to issues affecting website designers, including a complete chapter on “Editorial Style.”

2010-03-11 12 17 161 in Blogging For Web Designers: Editorial Calendars and Style Guides

Princeton Web Editorial Style Guide
The Web Editorial Style Guide was created by Princeton’s Office of Communications as a quick reference tool to help the school’s communicators follow a style that is consistent and appropriate to websites. The guide follows conventions outlined in the Associated Press Stylebook, but there are exceptions specific to the university. Short but efficient.

2010-03-11 12 26 241 in Blogging For Web Designers: Editorial Calendars and Style Guides

BBC News Styleguide
This page links to BBC’s policies, standards and guidelines and is intended primarily for those undertaking or wishing to undertake work for the BBC as content providers.

2010-03-25 10 44 52 in Blogging For Web Designers: Editorial Calendars and Style Guides

The Times Style and Usage Guide
This version of The Times Style and Usage Guide (published in book form in January 2003) provides writers and sub-editors with a quick reference to contentious points of grammar and spelling and guides them through specialized areas where confusions have arisen in the past. The alphabetical list has been augmented by seven specialist sections on the armed forces, the arts, the churches, the courts, politics, sport and titles.

 in Blogging For Web Designers: Editorial Calendars and Style Guides

The Chicago Manual of Style (not free)
Excerpts and the full text is available online by subscription. The CMS is published in hardcover and online. The online edition includes searchable text of the 15th edition, with features such as tools for editors, a citation guide summary, and searchable access to a Q&A in which University of Chicago Press editors answer readers’ style questions. An annual subscription is required for access to the manual.

2010-03-11 12 18 001 in Blogging For Web Designers: Editorial Calendars and Style Guides

AP Stylebook (not free)
Excerpts and the full text is available online by subscription and in print.

2010-03-11 12 31 391 in Blogging For Web Designers: Editorial Calendars and Style Guides

Setting Your Own Rules

  1. Going through a few respected style guides is only a start, because each blog should establish its own rules. Defining them might take a while but is worth it in the end. Style guide not only maintain consistency but reflect an identity. So, this is the time to remind yourself or your writers of what you generally expect:
    • What is your blog’s purpose?
    • Should the writing exhibit any particular style?
    • Are there any sentences or expressions you don’t want to be used?
    • How specific should a post be? Who should it target?
    • Do you allow personal remarks? How formal should the writing be?
  2. An editorial style guide should reflect the blog’s writing style, and a good way to be precise is to look at your old posts and compare them to your current writing:
    • What has changed?
    • Which do you like better?
  3. A user interface style guide includes mostly formatting elements but can include pretty much anything else:
    • How will you deal with images? How will you cite them? At what size should they be displayed?
    • How long should titles be? How will you capitalize them?
    • How long should posts be? How should the content look?
    • How will you format links? How will you display quotes and photo credits? What terms and copyright licences should photos be used under?
    • Should author bios follow a particular format?

For more resources on creating a style guide, see a nice example of a personalized style guide on Writing an Interface Style Guide, and read some tips on avoiding problems in “Guidance on Style Guides,” by the Society for Technical Communication.

Conclusion

Editorial calendars and style guides are only guidelines. They are great for ensuring consistency, but they have to evolve with your objectives and should not constrain your workflow. Update them to fit your needs.

We would love some feedback from you. Do you use calendars and style guides or think they’re too much of a headache? If you have followed them in the past, did you have to adjust them? How so? Please share your tips and advice with us and readers.

Further Resources

Templates

  • 2010 Blog Editorial Calendar Template
    The worksheets are broken down by week for all of 2010, including one at-a-glance worksheet broken down by topic. There is also a worksheet for each month for more detailed information like category, target URL and keywords.
  • User Interface Style Guides
    Some useful links to style guides followed by large websites, corporations and news agencies. Also discusses editorial guidelines, quality guidelines and online standards.
  • AARP Bulletin: Style Guide
    A set of images on Flickr about one style guide redesign.

Plug-Ins

  • ScribeFire Blog Editor
    ScribeFire is a full-featured blog editor that integrates with your browser and lets you easily post to your blog.
  • WP editorial calendar
    This editorial calendar lets WordPress administrators and editors manage dates for multiple posts at once. You’ll see all of your posts in a calendar view, and can arrange them via an easy drag-and-drop interface.
  • SEO Blogger: Optimize Your Posts as You Write
    SEO Blogger lets you find the most sought-after keywords for your subject without ever leaving the blog editing screen.

Further Reading

(al)


© Jessica Bordeau for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: blog, calendar, consistency, editorial, plan, planning, style guide, styleguide

May 01 2010

11:00

18 Wireframing, Mockup And Prototyping Tools To Plan Designs

Title-free-premium-wireframing-webdesign-toolsI will keep repeating how important is to plan your webdesign, sitemaps, draw flowcharts,wireframes before even start to do actual functional and design planning! Since I am deeply researching this topic myself, this time I found the most popular wireframing software available.

Just 3 of tools I found were free, but every tool has free trial or basic plan so you can definitely try and test it yourself for one time projects.

For me – I don’t do redesigns too often, so I don’t need such tools daily, but for design companies I think one of these tools will be life and time saver from drawing, planning and collaborating view – worth spending some money for! To get started I suggest to read also previous planning article I did – Know How To Plan Your Website Redesign & Get Inspired.

1. Lovely Charts

  • 100% free
  • Online application
  • Create flowcharts, sitemaps, wireframes easily!

With Lovely Charts’ extremely simple and intuitive drag’n drop drawing mechanism, you’ll be able to focus on what really matters. You won’t have to draw boxes or arrows, and you won’t have to worry about what symbol to use.

Lovely Charts’s biggest strength lies in its innovative workflow and in its ability to generate lovely diagrams in minutes, with no effort.

Lovely-charts-free-premium-wireframing-webdesign-tools

2. Pencil Project

  • Completely free tool
  • Option to use it as Firefox addon
  • Linux/PC/Mac support
  • Lightweighted

The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

Top features:

  • Built-in stencils for diagraming and prototyping
  • Multi-page document with background page
  • Inter-page linkings!
  • On-screen text editing with rich-text supports
  • Exporting to HTML, PNG, Openoffice.org document, Word document and PDF.

Pencil-project-free-premium-wireframing-webdesign-tools

3. Serena Prototype Composer

  • Completely free software!
  • Get Business Requirements Right
  • Build Usable Applications
  • Move Seamlessly From Prototype to Coding

Prototype Composer is a completely new way of gathering requirements. Prototype Composer makes it possible to see how an application will look and function before any code is ever written. Instead of endless text documents, Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.

View product demo screenshots

Serena-free-premium-wireframing-webdesign-tools

4. MockFlow

  • Has free basic pack with limited options, but still free!
  • Modern interface
  • Premium version costs 59$/year

MockFlow is an online tool for creating wireframes of software and websites. It helps to enhance your planning process by enabling to quickly design and share interactive UI mockups.

Can be used as desktop application and one more great thing you can collaborate real-time with fellow collegues and discuss development process right in the application if you use premium account.

Mockflow-free-premium-wireframing-webdesign-tools

Little video demo about this software:

5. Axure RP

  • 30 days trial version
  • Premium version costs 149$/year with full support
  • Works on PC/Mac

Axure RP enables application designers to create wireframes, flow diagrams, prototypes, and specifications for applications and web sites. It provides the features you need to get started quickly whether working alone or collaborating with your team.

Used by user experience professionals, business analysts and product managers in over half of the Fortune 100, leading agencies and thousands of small and medium businesses around the world. Axure RP has become an essential tool for successful application design.

Axure-free-premium-wireframing-webdesign-tools

Watch video tour about Axure RP

6. Balsamiq

  • Looks handrawn and sketchy
  • Easy to use in team as collaboration tool
  • Premium desktop version costs 79$, which is one time payment
  • Online and desktop application

Using Balsamiq Mockups feels like you are drawing, but it’s digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

Mockups is designed to help you and your team or clients iterate on wireframes as early in the process as possible, when it’s cheapest to do so.

Balsamiq-mockups-free-premium-wireframing-webdesign-tools

Watch video demo about this software:

7. HotGloo

  • A lot of tutorials to help you get started
  • Online application
  • Modern and user friendly interface
  • Chance to test app using free plan
  • 14$/month

Great application, with a lot of tutorials, forum, active twitter account and Faqs/Help section! Interface is very modern as well, one of my favorite applications by far.

Hotgloo-free-premium-wireframing-webdesign-tools

8. Mockingbird

  • Lot of great features
  • Modern design and interface
  • Powered by Cappuccino: no Flash needed.

Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.

Mockingbird-free-premium-wireframing-webdesign-tools

Launch and test it now!

9. ProtoShare

  • Online Application
  • Modern interface
  • 30 days free trial
  • $29 per user/month

ProtoShare is an easy-to-use, collaborative, Web-based prototyping tool that helps teams visualize requirements for interactive projects and work together in real-time.

Big or small, the key to successful projects is getting people talking and cooperating early. ProtoShare helps all stakeholders — Web developers, account execs, management, marketing, and clients — get on the same page before money and time are sunk in various development dead ends.

Protoshare-free-premium-wireframing-webdesign-tools

Check out online video tour explaining good features about this product.

Protoshare-demo-free-premium-wireframing-webdesign-tools

10. Gliffy

  • A lot of features built in this online software
  • Free basic plan with no time constraints!
  • 5$ per month premium account

You can use Gliffy to build almost everything, I don’t like though there are too much features. If I would need tool just for wireframing I think I would choose different one, because there I have too many distractions and options I don’t need.

With Gliffy online diagram software, you can easily create professional-quality flowcharts, diagrams, floor plans, technical drawings, wireframes and more.

Gliffy-free-premium-wireframing-webdesign-tools

11. Justinmind Prototyper

  • Mac,Pc support
  • $495 one time payment license
  • Free 15 day trial
  • Pretty expensive and short trial

Wireframes and mockups have been used to think and define websites or applications before their implementation. But with the coming of the web 2.0, dynamic websites and RIA, you need to think everything from UI to conditional navigation or the type of interactions you want to use. Mockups or even clickable wireframes aren’t enough anymore.

Justinmind Prototyper 3.0 is a powerful wireframing tool designed to build fully functional dynamic prototypes without any coding, both on Windows and Mac.

Justinmind-free-premium-wireframing-webdesign-tools

See also short video demo:

12. JumpChart

Different than classic wireframing tools, because of functions, you can change less hierachy, but it’s very easy to build sitemaps and separate content in categories there.

Use Jumpchart to quickly plan out the navigation of your site by adding pages, and sub-pages. If you change your mind, easily drag pages to new spots within the site hierarchy. There is no better way to organize the content for your website.

Watch their online video tour.

Jumpchart-free-premium-wireframing-webdesign-tools

13. Pidoco

  • Clickable Wireframes
  • Fast and easy Prototyping
  • Easy Remote Usability Testing
  • No Software Installation
  • 31 day trial, 3 plans – lowest 7 eiro/month

Integrate usability testing into your production cycle by making use of pidoco°’s easy-to-use testing module. You will be developing applications which will work with the end-user as well as your clients whilst increasing the turnover!

Real-time collaboration with several co-workers will optimize communication patterns and will decrease expenditures in many areas within your production team!

Pidoco-free-premium-wireframing-webdesign-tools

14. iPlotz

  • Free demo
  • 15$ per month premium plan

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

Check out video tour.

Iplotz-free-premium-wireframing-webdesign-tools

15. FlairBuilder

  • 24$ per month
  • iPhone prototyping
  • 15–day free trial

FlairBuilder is built such that you will feel comfortable with the application’s user interface and complete each task fluently and efficiently.  That is why you will find many common elements such as the toolbar, the menu, a component palette, a context menu for common tasks and a set of handy keyboard shortcuts. All these to simply let you focus on you job and get it done as fast as possible.

Flairbuilder-free-premium-wireframing-webdesign-tools

16. GUI Design Studio

  • Free 30 day trial
  • Built for Microsoft Windows
  • Express license – $129

GUI Design Studio is a graphical user interface design tool for Microsoft Windows that you can use to rapidly create demonstration prototypes without any coding or scripting.

Draw individual screens, windows and components using standard elements, connect them together to storyboard operational workflow then run the simulator to test your designs. Watch video demo overview.

Gui-studio-free-premium-wireframing-webdesign-tools

17. OmniGraffle (Mac, iPad)

  • 14 days trial
  • License costs $99.95
  • Work only fro Mac, iPad

Need a diagram, process chart, quick page-layout, website wireframe or graphic design? OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they’re moved, providing powerful styling tools, importing and exporting Microsoft Visio files, and magically organizing diagrams with just one click.

Whether you need a quick sketch or an epic technical figure, OmniGraffle keeps it gorgeously understandable. Watch introduction videos and tutorials here.

Omnigraffle-free-premium-wireframing-webdesign-tools

18. Microsoft Visio

  • Free 60 day trial
  • License – $260
  • Available just on Windows platform
  • One of the most popular and comprehensive prototyping tools

Microsoft Office Visio 2007 makes it easy for IT and business professionals to visualize, explore, and communicate complex information. Go from complicated text and tables that are hard to understand to Visio diagrams that communicate information at a glance. Instead of static pictures, create data-connected Visio diagrams that display data, are easy to refresh, and dramatically increase your productivity. Use the wide variety of diagrams in Office Visio 2007 to understand, act on, and share information about organizational systems, resources, and processes throughout your enterprise. View video tour.

Microsoft-visio-premium-wireframing-webdesign-tools

Did you make your pick? Which was it? Let us know in comments!

March 17 2010

14:07

Starting Out Organized: Website Content Planning The Right Way

Smashing-magazine-advertisement in Starting Out Organized: Website Content Planning The Right Way
 in Starting Out Organized: Website Content Planning The Right Way  in Starting Out Organized: Website Content Planning The Right Way  in Starting Out Organized: Website Content Planning The Right Way

So many articles explain how to design interfaces, design graphics and deal with clients. But one step in the Web development process is often skipped over or forgotten altogether: content planning. Sometimes called information architecture, or IA planning, this step doesn’t find a home easily in many people’s workflow. But rushing on to programming and pushing pixels makes for content that looks shoehorned rather than fully integrated and will only require late-game revisions.

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

Your New Project: How It Goes All Too Often

Dayone-planning in Starting Out Organized: Website Content Planning The Right Way

On day one things are great. You’ve landed a new job, the client is excited, you’re stoked and the project will be great. First things first: you have to collect the main materials to begin the design. You send the client an email asking for what you need.

On day two you get the following:

  • A TIFF logo (in CMYK) via email;
  • A set of logo standards that include the RGB values, via email (separately);
  • A disc full of photos with various names (like “DSC09080978″);
  • A fax that labels the photos according to their file names;
  • An email that lays out the top and second-level navigation, as the client sees it;
  • A phone that makes last-minute changes to the top-level navigation;
  • An email with a DOC attachment full of text for various pages (but not all of it).

And on day three you get an email that makes half of the junk you got yesterday obsolete.

You’re only three days in, and the project is already no fun. You got into Web design to make great layouts, solve problems and create functional art that breathes through programming. It never occurred to you that cleaning up your client’s disorganization would be a part of the gig.

We know that a great website relies on all parts working in harmony. To achieve this, you have to start on the right foot at the beginning of the project. You need an organizational system that does the following things:

  • Allows you to organize deliverables from various media;
  • Lets you rapidly make changes when needed (it’s called planning for a reason: things change!);
  • Helps you collaborate with all stakeholders;
  • Shows how the project is developing and what’s left to do;
  • Ideally launches you into the actual design and building phase.

The Architecture: Every Brick Counts

Architecture-planning in Starting Out Organized: Website Content Planning The Right Way

Your website’s users will have to “live” inside your website for a period of time. Because of this, some real-world architectural principles apply to website planning. A sense of context and “place” helps users find what they’re looking for. When we talk about the architecture of a website, we’re talking about the hierarchy of its navigation and its structure. We’re not talking about graphics, text or anything cosmetic.

You can plan your architecture in many ways.

Card Sorting

Indexcards-planning in Starting Out Organized: Website Content Planning The Right Way

Card sorting is a way to organize content based on hierarchy. To try it, simply put all of the pages for your website onto index cards. Ask stakeholders to sort those cards into logical stacks that represent the hierarchy of your website’s navigation. It’s a great exercise to make sure that the content on your website can be found in the most logical place and that like-minded content is grouped and named appropriately.

  • What’s it for?
    To gather feedback on what pages should go where on your website.
  • What’s good about it?
    It’s a great way to learn the assumptions of multiple users.
  • What’s bad about it?
    The results should be taken with a grain of salt. Your participants will be making a lot of guesses and assumptions.
  • In sum
    One major task in website development is making people feel included. Card sorting is an interactive process that helps people feel like they are contributing.

A few resources to learn more about card sorting:

Content Inventories

Content-inventory-planning in Starting Out Organized: Website Content Planning The Right Way

A content inventory is a great way to understand the breadth of your website and the purpose of each page. Simply create a spreadsheet of all your pages and their corresponding URLs. But a content inventory gets much more useful when you add things like page notes and single-sentence summaries of why a page exists. Use a content inventory to quickly understand topography and figure out what should fit where. It is a great way to think through a redesign but may not be the best way to plan new websites.

  • What’s it for?
    To understand the context and purpose a website’s pages.
  • What’s good about it?
    Once it’s complete, dragging things around and playing with alternate navigation schemes is easy. It also makes it easy to see the topography of your website.
  • What’s bad about it?
    Laborious to create. It’s not of much use during the development phase, and it gets out of date pretty quickly.
  • In sum
    A content inventory is a great way to find unnecessary pages on your website. Forcing yourself to look at each page in turn and summarizing its usefulness nearly outweigh the disadvantages of this method.

A few resources to learn more about content inventories:

Paper and Sketchboards

Sketchboarding-planning in Starting Out Organized: Website Content Planning The Right Way

Sometimes paper just feels good. The free form allows for incredible expressiveness, and nothing is faster for capturing ideas. Unfortunately, the drawbacks are tough to ignore. Paper is easy to lose, hard to share, wasteful and not very useful past the early stages of a project. Eventually, everything for a website becomes digital, and so going digital as soon as possible is best. Use paper to capture thoughts in a meeting to brainstorm and to explore. But do yourself a favor and transcribe or scan the information as early as possible.

  • What’s it for?
    To quickly and collaboratively sketch out a website architecture.
  • What’s good about it?
    You can move pieces of paper around. And drawing with markers is fun. It’s also great for energizing a group and quickly scanning a lot of ideas.
  • What’s bad about it?
    Once your big sketchboard is complete, it has to be transcribed into another format to be useful.
  • In sum
    Beware the feel-good meeting! Sketchboard meetings are fun and seemingly productive, but you’ll often wonder afterwards what you actually achieved. Ideas come quickly, but the real work comes in deciding whether any of them are appropriate for the project.

A few resources to learn more about sketchboarding:

Site Map Diagrams

Illustrativegraphs-planning in Starting Out Organized: Website Content Planning The Right Way

A visual site map is quick to make, fairly expressive and easy to change. People have all sorts of methods for building site map diagrams. Whatever your tool, the diagram is a useful way to demonstrate hierarchy. It clearly shows the relationships between pages and tells you where your website is too shallow or deep.

  • What’s it for?
    To visually explain the relationships between pages on your website.
  • What’s good about it?
    Nothing better illustrates the hierarchy of a website than a diagram with lines and arrows indicating the relationships between pages. Clients naturally understand it.
  • What’s bad about it?
    The actual relationships between pages can be hard to grasp. What looks good on a chart might not work well on a website. And a site map diagram is not really useful during the development phase, quickly becoming a dead documents.
  • In sum
    A site map diagram is a quick way to sketch navigation and hierarchy. Don’t try to cram in other bits of information that just don’t fit.

A few resources to learn more about site maps and diagrams:

Which to Choose?

There is no one right way to plan the architecture for a website. Depending on the size of the website, you might use all of these techniques. They’re not opposed or mutually exclusive—just different means to similar ends.

When picking your method of architecture planning, consider these things:

  • How big is the website?
    The sheer size of some websites makes some of these methods cumbersome or impossible.
  • What type of website is it?
    The card-sorting method, for example, is perfect for e-commerce websites but overkill for blogs.
  • Who is your client?
    The less Web-savvy the client, the more elaborate your descriptions and plans will have to be. If your client understands websites, then you can be a bit more brief (but not too brief!).
  • Consider your workflow.
    Try out all of the ideas, and then pick a lightweight, simple process that you and your clients can understand. If you find yourself filling in information that isn’t useful or illustrative, then you’ve gone off track. Adopting a process that allows you to do the bare minimum is good in this case.

A few tips on architecture planning:

  • Organize content according to user needs, not an organizational chart or how the client structures their company.
  • Give pages clear and succinct names.
  • Be sympathetic. Think of your typical users, called personas, and imagine them navigating the website. What would they be looking for?
  • Consider creating auxiliary way-finding pages. These pages would lie beyond the main navigation of your website and structure various pages according to specific user needs.
  • If you can’t succinctly explain why a page would be useful to someone, omit it.
  • Plan the architecture around the content. Don’t write content to fit the architecture.
  • When dealing with clients, especially clients at large companies with many departments, keeping egos in check can be tough. Keep everyone on point with constant reminders of the true goals of the website.
  • Not everything has to be a page. Use your hierarchy of content as a guide. Some items might work better as an FAQ entry or as sidebar content. Make sure your architecture-planning method does not blind you to this.

The Architecture Is The Home, Not The Content Itself

Like the website itself, each of your pages has a structure and hierarchy as well. The architecture helps users find the right page. The hierarchy and semantics help users find the right content on that page. Too often, copywriting is an afterthought in Web development. No matter how attractive, clever or interactive a website is, its main purpose is to convey information. A great website is designed around the content.

Most of the tools that are great for planning architecture are not so good for planning content. This causes many people to skip the process of content planning, to abandon their copywriters and to use their CMS as a content organizer (i.e. leaving it as an afterthought).

HTML Wireframes

Yourownwireframes-planning in Starting Out Organized: Website Content Planning The Right Way

Making your own wireframe is a smart way to demonstrate your plans to collaborators. It’s a great visual tool and very expressive. The drawback of using manual wireframes is that they are… well, manual. You’ll end up spending time on the front-end getting everything just so and more time on every revision. While manual wireframes are the perfect tool for many DIY coders, keep things simple! If you over-design your wireframes, your client will focus more on cosmetics than substance.

  • What’s it for?
    HTML wireframes are a natural extension of other architecture-planning methods. They fill in the architecture by showing the content and markup on the pages.
  • What’s good about it?
    They’re illustrative and easy to understand. Clients immediately grasp them and how they translate to the next step.
  • What’s bad about it?
    Getting a structure that works can be tricky. You have to manually mark up content. And they’re not a great way to work with multiple collaborators.
  • In sum
    HTML wireframes are a great way to envision and plan website content. If you’re a freelancer or on a small team, they’re a great option.

A few tips on manual wireframes:

  • Once you get a good style sheet and structure, leave the wireframe alone. It’s not supposed to be elegant or beautiful. In fact, the fewer the distractions and the simpler, the better. The point is for people to concentrate on the content.
  • Work on naturally transitioning from wireframe to development. A simple script or some find-and-replace magic can put all that useful markup into your working product.
  • For simple websites, use wireframes in the first stage in development. If you mark up your content properly, you may only need CSS after that.

Plain Old Text

Texteditor-planning in Starting Out Organized: Website Content Planning The Right Way

Many copywriters reach for MS Word or Apple Pages when starting to write website content. The simple tools are often the most useful and powerful. In this case, that’s only partly true. While text editors are a great way to quickly organize text, they have their drawbacks in website planning.

  • What’s it for?
    Text editors are a quick and easy way to organize text for a website.
  • What’s good about it?
    They’re readily available, and almost anyone can use them. Their ubiquity and revision-tracking features make them great for collaboration.
  • What’s bad about it?
    The mark-up created by text editors doesn’t translate well into the Web world. Clients often don’t understand how a linear document translates into a free-form website architecture. Embedding images and attaching files to pages can make the document cumbersome and not great for migrating to the development stage.
  • In sum
    Text editors are useful for planning the actual text of a website. What’s missing is the navigation and how the attached files will be organized. Don’t prevent collaborators who are comfortable with text editors from working this way, but move the content into a more workable format quickly.

A few tips on using text editors for website planning:

  • If you’re using a text editor to organize website content, use RTF format instead of the proprietary file format of the editor. It will make a lot of things easier for you later.
  • Create a simple numbering system that makes the pages in your document correspond to the more visual architecture you have created separately.

Slides

Powerpoint-planning in Starting Out Organized: Website Content Planning The Right Way

As with text editors, many people already own a tool that creates slides, such as PowerPoint or Keynote. In fact, for many office professionals, it’s the only layout tool they own. Thus, many websites are planned in PowerPoint. Its availability and relative ease of use make it a good option for some workflows.

  • What’s it good for?
    Slideshow creators are used to easily sketch the structure and to link pages.
  • What’s good about it?
    They’re readily available, and almost anyone can use them. Their basic layout features liberate many people who would otherwise struggle to convey their thoughts.
  • What’s bad about it?
    Slideshow creators are great at getting information in but poor at getting it back out. Their graphic creation abilities often complicate the goal of the process. (Plus, a lot of cute icons will suddenly start to appear in your content!)
  • In sum
    Slideshow tools are a great makeshift wireframe creator. They use a familiar process in a new way. But you’ll face a trade-off when you begin building the website.

A few tips on using slideshow creators for website planning:

  • Don’t get too creative with “designing” your pages. Avoid color, graphics and anything else that does not specifically illustrate the hierarchy of content.
  • Keep your system very simple. The goal is to make it illustrative and quick. The more complicated it is for you to drag pages and update links, the more reluctant you will be to explore new options for the layout.

Jumpchart

Jumpchart-planning in Starting Out Organized: Website Content Planning The Right Way

Jumpchart lets you make simple and quick HTML wireframes. Whatever planning method that works for you is a good one. But in our studio, we find that no tool gives us as much flexibility or momentum as Jumpchart, and that’s why it’s our tool of choice. It simply organizes content hierarchically, compiles feedback and exports to the next stage of the development process.

  • What’s it good for?
    Jumpchart is a natural extension of manual HTML wireframes.
  • What’s good about it?
    It automates some of the most important parts of the manual HTML wireframing process, with the collaboration and formatting options that many people want. It also exports.
  • What’s bad about it?
    Jumpchart requires a paid subscription to plan larger websites.
  • In sum
    Jumpchart is a great way for small teams and remote collaborators to visually organize content. The ability to export to XHTML and WordPress (WXR) makes for a rapid transition between the planning and development stages.

A few tips on using Jumpchart for website planning:

  • Use Jumpchart as a single spot for all the deliverables in your website project. Images and documents can be attached to individual pages.
  • Use the permission system to control who can see and who can edit.
  • For those who plan the content before the architecture (like us!), Jumpchart is a great way to ease into the site map.

Putting It All Together

Finding the right combination of tools and processes is an important part of planning a website. A lot of thought should go into even the smallest website. This can be daunting for even the best developer, but we’ve yet to cover one of the biggest obstacles to the development process: the client.

Calling the client an obstacle is not fair, of course, but it feels that way occasionally. Clients can throw a wrench in the cogs of the best process. Take pity on them, though. They have jobs and lives like the rest of us. This “website” thing is usually just another line on their long list of action items. To create a planning process that embraces the human component, consider how you can better accommodate their needs.

The Inevitable Revisions: Being Fleet of Foot

Running-planning in Starting Out Organized: Website Content Planning The Right Way

Clients change their minds. It’s in their genes to be indecisive and difficult. If they knew what the heck they were doing, they wouldn’t need us. Our job is to turn their mess into perfection. Despite the mess, budget and timeline, your work will be judged on its own merit. You either got it right or you didn’t, and there’s no passing the buck.

This Scylla and Charybdis are no reason to stop trying. What you need is a workflow that embraces change rather than resists it.

  • Make sure your planning method is not tedious. If updating a simple page title in PowerPoint takes you 10 minutes, rethink your method.
  • Follow the order of the steps. Starting on later steps before previous steps are approved is tempting. Don’t!
  • Bundle revisions. You’ll kill your budget if you make individual changes as they come.
  • Encourage your client to take time in the planning stage. No matter how close the deadline, this is the one part you shouldn’t skimp on.
  • Make sure your contract specifies consequences for revisions. Be explicit.

Collaboration: Bring Stakeholders Together or Die Trying

If you plan in a vacuum, you’ll only end up with a pile of lint. The secret to efficient planning is to include those with authority in the process. If you spring architecture and content on stakeholders late in the game, expect far-reaching changes that require backtracking.

Get architecture, content and deliverables approved before moving on to the next steps. Modern CMS’ have templates that can accommodate a wide variety of content, and this might make it seem as though content organization and architecture aren’t your problem, but they are! If you write the CSS and programming without understanding what exactly you’re building, you will be forced either to backtrack or to fit content into a template that isn’t ready for it. Content comes first.

  • If you’re planning online, email everyone when you can. If you plan on paper, print multiple copies in the hopes that more stakeholders will see the plan before you move on.
  • Get clear, direct approval of major steps in writing. If your client is hesitant, they may be hiding that they’ve failed to get approval from higher-ups. Asking for an email or signature forces the issue. It may sound confrontational, but most clients will understand and appreciate your thoroughness.
  • Ask for meetings. Most creative people hate them, but a successful project requires collaboration. You would be surprised what comes out of a 10-minute phone call.

Explaining: Heel Meet Arrow

Achilles-planning in Starting Out Organized: Website Content Planning The Right Way

You may be a great designer, programmer, architect or manager, but if you can’t show progress and convey ideas to clients, you will fail. Clients need feedback. They need to see where you are heading with the project. Telling them is one thing; show them another. Many potentially great websites were derailed because the designer did not effectively explain what was happening to the client.

  • Show, don’t tell. No matter how much head-nodding you see, if you only tell your clients what you will do, they’ll be confused later. Either poor memory or communication will sink your ship every time.
  • Don’t format content too much. Keep it simple. Some people start pushing pixels right after planning. Others start working on interface wireframes. Whatever you do, empower yourself or your designers to make primary decisions about font, color and layout. If your content wireframe or diagram is too elaborate, it will impinge on the design. Let the decision-makers focus on the content, navigation and what-goes-where, rather than muddying the process with filler graphics.

Moving On: The Button That Launches a Thousand Ships

So you’ve dodged all potential problems so far. The die is cast, and the plan is laid. It’s time to start designing and building the website. Do you have to start over now, or will your plans accelerate the process? It’s been said before, but a plan that has no momentum is wasted. If you have to retype, reorganize or re-explain your plan in order to start the next step, you’ve been wasting time.

A great design process builds on the website’s content. A great process allows you to build on the last step. To be cost-effective and efficient, the process should include only the critical steps. An awkward transition from planning to building a website is a common roadblock. Frequently, the people who plan a website and communicate with the client aren’t the people who actually build the website. This means that the planning documents have to be expressive and comprehensive in conveying the process that has been followed to date.

Avoid costly revisions and staff frustration by having a process that slingshots you into development rather than requires backtracking and further investigation. Sure, the process should be fluid, but a good plan ensures momentum.

A Few Parting Practical Tips

  • Be specific about your wants with clients. Ask for digital text, Web-sized images, etc.
  • Keep all deliverables in one place, and put them there as soon as you get them!
  • Ask for written changes, preferably via email so that they’re time-stamped.
  • Use Google’s advanced site search to quickly learn about the current website’s size and shape if your project is a redesign.
  • Ask your client for access to old stats. Learning how people have been accessing content is important if you will be planning a new website.
  • Avoid being too specific in the early stages. Work from general to specific, and don’t get bogged down in details until they become important.

Wrapping Up

As professionals, we need to embrace better planning methods in our projects. Being agile is great, but don’t outrun your client or the goal of the project. True agility is about being adaptable and reacting quickly. Planning a website is a daunting task, but it can be done if you stick to a process that works.

  • Understand the goals of the website.
  • Gather resources.
  • Organize resources at top level and then at page level.
  • Assess your work based on user profiles.
  • Demonstrate your plan.
  • Get approval.
  • Move on.

So many of us design too fast. You need to make so many decisions before working on a visual wireframe or pixel-based mockup. If you start designing before understanding the breadth and depth of the content that your website will contain, you’ll inevitably have to cram stuff into places that it doesn’t fit.

Building a website is like telling a good story. It starts with a cohesive outline and clear plot. No matter how fantastic your website looks or works, eventually someone will read it. Someone will have to navigate it. Truly great websites pay attention to content and organization. There’s no way to fake that late in the game. Greatness comes from a solid plan.

(al)


© Kristin Wemmer for Smashing Magazine, 2010. | Permalink | 10 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ia, planning

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl