Thursday 23 April 2015
THE ULTIMATE GUIDE TO EFFECTIVE WEBSITE PLANNING
Websites are complex, dynamic, living creations. Every change, every addition of content or inclusion of functionality requires a solid base from which to work. The result of failing to recognize this need can be lost hours, frustrated customers, and pounding headaches. Organizing your efforts and planning your work ahead of time will not only benefit your design, but also improve your understanding of your site’s role and inner-workings in the process. In this post, we’re presenting the ultimate guide to effective website planning.
The importance of Planning
Let’s start with an analogy, courtesy of Ben Seigel’s extensive work on the subject. In this analogy, you’re building a deck. In this case, since you’re hosting your site, and therefore likely doing the work designing and building it, we’ll assume that the deck is for you, on the side of your own home. You initially assume it’s a pretty simple process, and head to the lumberyard to get materials. Once you arrive, you’re greeted by a friendly clerk who asks if you’d like treated or untreated wood, in pine, oak, or cedar.
Not knowing any better, you unintentionally select wood that does not perform well in your climate. When you start building, you create your frame, lay down some boards, and feel pretty good about how things are going, until you realize that you’ve covered up the exterior door; you forgot the stairs. So you fix the problem by creating some stairs, but because they are of a particular length and require extra support, they collapse when you test them out. Then the rain hits. Your wood is soaked and splitting, your leg is badly bruised, and your confidence isn’t doing so hot either. And all this consternation arises over something as simple as a deck.
Websites are subject to this same kind of scenario, but decks are considerably less complicated. Let’s take a look at how the planning process unfolds.
Aligning Resources
In order to get started the right way, we need to begin by understanding how our site will be configured. What is the required functionality? What will the primary content be? How many people will be working on it? This is referred to as needs analysis, the stage in which you determine what your deck will look like, how big, and what it has to do. The description of this step may be short, simply because much of the process involves asking questions specific to your situation, but the importance of this initial planning cannot be overstated.
It’s important, then, before starting any other work, to align your efforts with your marketing team. Since your website exists as an extension of their efforts, copy, images, and aesthetic should all facilitate their efforts in order to create a coherent, multi-channel brand presence. Bring your marketing team on-board for discussions and plan accordingly to accommodate their needs.
Next, evaluate your personnel requirements based on the initial needs assessment and assemble your team. Begin by determining who’s responsible for what. Responsibilities may include, but are not limited to:
• Web designer
• HTML coder
• Web developer
• Project manager
• Writers/Editors
• Stakeholders
This process is akin to selecting construction workers for a building project. Dividing the labor not only optimizes everyone’s workload, it takes advantage of everyone’s specialty in order to make the final product stronger.
In order for your workers to get building, you’ll need raw materials. Since the bulk of your content, whether video, text, or other format, will require appropriate writing, begin here. Your writers should understand the difference between writing for the web and writing for other publications. Internet readers are scanners, so bulleted information is extremely useful. Information and presentation should focus on the audience and not be self-indulgent. Finally, length should be appropriate for the topic and the attention span of quickly moving readers in order to hold their attention. It’s not necessary at this step to begin creating content, but having this knowledge in hand when you start will make a big difference.
Next, acquire high quality photography for backgrounds, post headers, structural elements, and informational slideshows. The power of photos is well demonstrated; research shows that the medium elicits more likes and shares than any other medium, which will help generate visitors. The quality of these images is important, especially since large resolution photographs are a growing trend in web design due to their attractiveness and positive reception. If you have the budget, consider enlisting a professional photographer. If you have no budget, at least do some research about proper lighting, technique, and camera settings in order to give it your best shot.
Building Structure
Once you have these two items in place, it’s time to begin framing your deck. A strong site map, drawn as a flowchart, will help establish the linking structure and give an idea of how information and traffic will flow. Since you wish to keep users around, viewing content, appreciating your hard work, and, if applicable, leading to sales conversion, this map is an important first step.
Define how your content will be presented. You’ll have slideshows, text, videos, and presentations, but how will they be presented? Will a slideshow be laid out like a gird or as a rotating carousel? Text will obviously appear as text often does, but what information will be available about authors, titles, and subjects? Will you present related stories or a subscription call-to-action at the bottom? Each of these questions will help determine layout and clarify presentation moving forward.
Start building the pieces of the final assembly before putting them in place. Before they receive the receive coding, primary pieces can be drawn-up based on content. This may include, but is not limited to:
• Articles
• Banner advertising
• Documents
• Physical products
• Email newsletters
• Image galleries
• Staff directories
• Incoming RSS feeds
• Blogs
• Forums
The key here is to focus on the content not the design. Content involves titles, text, video, message, author, attribution, and subject. Design, on the other hand, comes next.
Complimenting Content With Design
Once you’ve got your pieces constructed, it’s time to determine how they will be painted. The design process involves taking the text, video, photography, and functionality you’ve chosen and putting it together in a layout that provides an attractive, usable, and harmonious experience.
Page layouts of all kinds will begin with wireframing. This process involves creating grey-scale drawings of how elements will be positioned on a page. In this phase, ignore graphic elements altogether and instead focus on arrangement, flow of information, and usability. Each type of unique page will need its own wireframe, including contact pages, blog posts, product pages, and more.
Once these are established, they’ll be used as a guide for initial Photoshop mock-ups. These are, effectively, a pixel-by-pixel accurate depiction of how your final product will appear. Use your wireframes as a guide, place your color palette and other graphic elements (logos, fonts, etc.) in the margins as a guide, and begin creating elements for each piece of the wireframe. Notes should be made for all graphic tricks achieved through CSS, slices should be made around elements, and all assets should be labeled in a coherent manager (“large header” instead of “designpiece13”).
The next part is likely the most arduous and, due to its scope, will only be mentioned in passing here. Once your elements are sliced and ready for assembly, you’ll need to code your site. This can take many forms, including using pre-built templates or creating a site from the ground up. If you plan on beginning with a template, you’ll want to factor this in, as your wireframes will likely be dictated by the template in use.
Once your site is assembled, you’ll want a reference moving forward to keep design elements consistent. These documents are called style guides. Style guides contain fonts, font sizes, colors, color uses, graphics, acceptable graphical variants, and any other restrictions on the appearance and utilization of aesthetic elements. Developing this will not only unify your branding efforts, but help form your identity through careful examination.
Finally, load everything into the content management system (CMS) of your choice. These platforms are installed on your web hosting and facilitate the creation and coding of content within your website’s infrastructure. Frequently they feature the ability to create authorship accounts and control administrative aspects of the operations in order to effectively and consistently deliver your work to the front pages.
Pre-Launch, Post-Launch, and Beyond
Now that everything is put together, you’ll want to beta test before you release the site to the public. Launch on a test server and look to make sure that all elements display and scale correctly, built in interactivity works smoothly, and all links point somewhere valid. Test rigorously and search out any cracks that need sealed.
Once the beta test is complete, it’s time to go live. With a successful plan in place for growing content and an organization-wide understanding of responsibilities and aesthetic, maintenance and documentation become the next tasks. Develop a plan to regularly test and update code and create references describing website functionality and what blocks of code control what for easier access and fine-tuning in the future. The rest of the work from here is a simple matter of applying the organizational foundation you’ve established, and keeping the ship on even keel until a new website is in the works.
Planning a website is no small task, but understanding the process can help lend clarity to a complicated picture. Begin by evaluating your needs and assembling a team to address them. Next, create necessary content and collect photographs to enhance presentation. Designing the site is a matter of planning layouts based on usability and then building re-usable resources around those mock-ups. Putting it all together in a style guide and CMS can help unify aesthetic efforts and improve workflow respectively. Finally, beta test the site and, after going live, create documentation and a maintenance plan in order to ensure smooth sailing from there on out. In time, you’ll find that each step in the process dictates the next, and that your time spent planning will save more time than it cost in the long run.
