Get In Touch & Receive Feedback & More Information Today!

About You
About Your Project
Tell Us More
Read our Privacy Policy
Request a Proposal

Posts Tagged ‘web design planning’

[EssentiaList] Web Design Directory Edition

Monday, May 26th, 2008

In market for a website and don’t know where to start? Lucky you, because here is a list of all of the top web design directories:

Did we leave something out? Leave a comment and let us know!

No Comments »

Planning for a Productive Project and a Profitable Website (7 Key Steps)

Monday, March 3rd, 2008

Web Design Project PlanningRealizing your dream of having a professional, functional, and profitable website is not always an easy task. We’ve heard all too many horror stories of individuals and companies trying to build a website, only to run into one problem or another at seemingly every turn. In fact, about 35% of our prospects and clients are those that profess to have had bad experiences previously and are usually looking for relief in the form of a smooth web design project, a website well-aligned with their vision, and a return on their marketing investment.

If you’re working with multiple people to plan and execute your web design project, beware: “Fire the committee. No great website in history has been conceived of by more than three people. Not one. This is a dealbreaker.”-Seth Godin. If this isn’t possible, look for web design companies with strong expertise in high-caliber project management, hopefully facilitated by applications like Basecamp (what we utilize).

In an effort to reduce the number of nightmare experiences out there, we developed the following list to serve as a helpful general guide. Feel free to jump from step to step, but be warned: your sorrow will lessen significantly if some form of logic, other than convenience, guides the jump from step to random step!

Step 1: Obtain & register a domain name

This is easy, cheap, and doesn’t take a lot of time. A good place to start would be to search nameboy for your name ideas. If a name turns “No Match”, you’re in business! Alternatively, domainthenet is a domain name generator that will give you various ideas if what you want is taken. Picking a name is not always easy. It’s possible to have an idea, with everything, except the name, scoped out. If using a name generator (like Domain Name Generator or the Web 2.0 Name Generator), rubbing a lamp, or twisting your tongue still doesn’t bring a name, skip it and come back when you have the perfect name (just don’t wait too long). And if the name you want is taken, you might be able to contact the owner and see if they’ll let you have it for a price. You can find the domain name owner’s contact information by again searching nameboy and and when a domain name is registered, scroll down to view the administrative contact’s information.

By the way, it’s important to make sure the domain name is registered in YOUR name, not the person or company who registered your domain name (we see this happen all the time and it’s not always pretty).

Read more here:

2. Design a site map

In a web design project, the importance of good documentation can’t be overstressed and many who have worked on a web project can attest to the misery bad documentation can trigger.

As the first piece of documentation, this step is very important because not only will it come in handy as a planning tool, but you would also be doing your chosen web design firm a big favor (or yourself, if you’re adventurous!).

For the uninitiated, a site map is simply “a visual representation of a website’s structure.” They come in different shapes and sizes, but in our experience, the best site maps are simple documents listing a website’s sections and pages in outline format, maintaining a hierarchical order.

When all is said and done, your site map should look something roughly like this:

1. Home
2. News Room
2.1 Register
2.2 Archives
3. Customer Service
3.1 Packages and pricing
3.2 How to order
3.3 Additional Services
3.4 Tips of the Trade
4. About Company
4.1 How it works
4.2 Additional Services
5. Contact Us

It’s really that easy.

The important things to remember when composing your website’s site map are:

  • Remember that site maps are hierarchical and should clearly illustrate a page’s position (in relation to the others) within the website.
  • Use numbers. It’s a lot easier to say “1.4.2″ than it is visualize (then say) “I.IV.II” (as if if roman numerals aren’t bad enough, bullets are even worse).
  • Pages, it’s all about pages. As a planning tool, the site map tells you a lot about the pages by not only establishing the relationships pages have to each other, but by also “mapping out” these relationships and how they relate to the different components of a project (of course, hence the phrase “site map”). These page relationships can be rather complicated, and adding technical details and aesthetic notes will only quadruple the complexity. All of this to say, avoid including functionalities, images, placement instructions, etc… If necessary, put an asterisk next to an item and add a footnote.
  • Titles matter. If you’re still trying to decide on the page titles, use “working titles” so that everyone knows you’re talking about the apple, not the kiwi.
  • Lists are all the rage. Although not a part of the site map, it’s a good idea to start compiling lists as you develop your site map. How many forms will it have? What will they be called and what kind of information will you collect? How about videos and pictures?
  • Make a list of all the pages that will have videos, pictures, etc… (obviously that creates another list: “Stuff I Need To Put Together”. Do you see how useful a site map can be?).

Read this blog post for more on site maps.

Step 3: Compile a “Technical Notes” document

After completing your site map, it’s time to draft the “Technical Notes” document. Your “Technical Notes” document deals with the internal elements of each individual page and contains a description of the features for each internal page and specific placement instructions for content like pictures, videos, forms, Flash animation, etc… This document should also maintain the outline form of the site map.

For example, the notes for “2.1 Register” in the “Technical Requirements” document would say something like:

2.1 Register

This page should contain a form with the following fields:
Name:
Email:
Password:
Address:
Phone:
Note: the “Phone” field should be optional

Step 4: Identify SEO phrases

Search engine optimization (or SEO) is the process of structuring your website so that search engines can find and index them better (here’s a good introduction to SEO).

The best way to do this is to put yourself in the shoes of someone looking for what you’re offering. What words would they use in a search? Make a list of these words, and their derivatives, and you’ll be well on your way. This is a great tool. This will probably happen naturally as you develop your written content more (here’s on writing online content).

Additionally, there are a lot of online SEO tools that can help you generate these phrases. Even if you think you’ve done a good job, it might help if you used one of the tools as a check.

Step 5: Develop great content

Now is the time to develop the actual content of your website. Not just the words and titles, but you also want to include everything you’ll want on your website. But remember, don’t over-write: “Less. Fewer words, fewer pages, less fine print.” -Seth Godin.

Do you want any pictures, graphics, etc… on your website? Where? Take your time and play with different combinations until you find something you like. It might even help to draw out a few sketches (the design firm you use will certainly love that) or play with PowerPoint, Publisher, Excel or if you’re a Mac fan, Pages or Keynote to plan out your designs.

The filenames for your content, like that of the “Technical Notes” section, should also maintain the outline form of the site map. For example, you would name the file containing the copy for the “Register” page “2.1_Register” or the video for the “How It Works” page, “4.1_How It Works”. Again, adding placement instructions should not be necessary since those are covered in the “Technical Notes” document above.

Lastly, it is very important that you submit your final, proofread content at the same time. This ensures that confusion is avoided and your project stays organized. Compose the content for each individual page in a separate Word document (don’t forget to use the same titles used in the site map when naming them) and combine them in a folder, which you can then zip.

6. Find a remarkable (not just good) web design firm

In the words of marketing guru Seth Godin: “If you hire a professional, hire a great one. The best one. Let her do her job. 10 mediocre website consultants working in perfect harmony can’t do the work of one rock star.”

This is not as easy at it sounds. A recent Google search returned 491,000,000 results for “web design company” (a staggering amount if you ask me).

It may be difficult to separate the good from the bad, but fear not, there is hope.

There are some people out there that genuinely love what they do and honestly want to help (like those guys at Epsilon Concepts).

When you’re talking to the web design companies, how much listening do they do? Do they genuinely have passion about you, your project, your company? How long have they been around? Who have they worked for in the past? How does their work, testimonials, and website make you feel? Are they willing to give you references and are those references satisfied or ecstatic? Are they trying to capture your vision or do they tune you out?

This checklist has a lot of other angles you should consider as you search for the perfect web design firm.

7. Choose a hosting company

Like web design companies, there are tons of hosting companies. Hosting in this age is pretty much a commodity. Many web design firms also offer hosting as an add-on. However, it’s just as easy to end up with a bad hosting company as with a web design firm. We believe it’s also always best to go with a hosting company as opposed to a web design firm offering hosting on the side. It’s best to have the experts in each category of your web strategy, rather than a jack of all trades, master of none. Because hosting is a commodity, it’s not hard to find one with great rates, excellent support, and the right specs.

When looking for a hosting company, make sure they guarantee 99% uptime and 24/7 support (obviously, this is very important since they will be storing everything related to your web site and in case something happens, you need to be sure you’ll be able to get the help you need). Also need to make sure the hosting company of your choosing has all the features you need and will need as you grow. Some other things to keep your eyes peeled out for are PHP 5, MySQL 5, SSL, and an uptime guarantee, but this does depend on your unique project requirements.

Don’t know where to start? Then try http://www-thehostingchart.com/ and http://webhostinggeeks.com/ and we recommend Moonrise Hosting as well as Rackspace. If necessary, test their support claims before going with them (here’s more on choosing a hosting company).

PS: We also made an info-packed Squidoo lens a few months ago on “How to Plan a Web Design Project and Choose a Web Design Company” that has color charts, document templates, links to web design directories, articles, videos, and more.

Reader Comments:

“A lot of times, steps #1 and #7 can be combined into one. Most hosting providers will register the domain for you and park it until you are ready to use it. Also, one other tip. If you already have a domain name, make sure you setup hosting first. It usually takes time to update the DNS records and other relevant registrar data to work with the new hosting environment. If you leave it until the end, you’ll have a web site ready to launch, but will be waiting on domain registration issues. That has been our experience.” - John
Thanks John for this valuable tip! 

 

8 Comments »

What makes a good site map?

Wednesday, February 20th, 2008

What is a good Site Map?
There’s a debate going on about whether site maps will remain necessary with the advent of sites that do not immediately gain much from generating a site map (blogs, media sites, etc… ). While the debate about what will happen rages on, reality reminds us that this is today, and in today’s web, you need a site map.

What is a site map anyway?
A site map is simply, “a visual representation of a web site’s structure,” with the site map items typically arranged in hierarchical order. A site map can be used as a planning tool in designing a web site (the aspect this post deals with), or as a web page listing all of a websites pages (usually for search engines purposes and to help visitors easily find pages).

Site maps are displayed and presented in a variety of ways and have also been labeled structure models, a taxonomy, site hierarchy, navigation model, site structure, or site index. As a website planning tool however, site maps are best in outline format within a Word document or .rtf file.

Online collaboration tools have also proved to be helpful, especially if the site map is still being developed (my favorites so far are 37signals’ Writeboard and the handy Writemaps.

Why make a site map?
The importance of good documentation in a design project can’t be stressed enough. Anyone who’s been involved in a design project knows first hand the pain involved when ignoring good documentation comes back to haunt you later in the project.

Web projects are complex beasts requiring the skill and ingenuity of at least a couple people. The larger a web project is, chances are, the more people will be involved with the project (and not all of them will remain for the life of the project). Having good documentation then ensures that everyone stays on the same page, regardless of how often they come or go. This, however, does not just apply to large teams: even with smaller teams, it’s amazing how easy it is to miscommunicate ideas and/or spend time clarifying issues because of unclear documentation.

Did you notice how the last 2 paragraphs have been about documentation and not site maps?

That’s because the site map is the first (and possibly, most important) piece of documentation needed for a web project. As the name implies, it’s a “map” of a “site”, and without it, everyone would be lost.

What makes a good site map?
There are no “hard, fast rules” in writing out a site map. However, like the pirate’s code of yore, there are certain principles that should be followed:

  • Remember that site maps are hierarchical and should clearly illustrate a page’s position (in relation to the others) within the website. IMO, the best way to achieve that goal, and come up with a usable planning tool, is to use a simple numbered, outline format.
  • Use numbers. It’s a lot easier to say “1.4.2″ than it is visualize (then say) “I.IV.II”. (as if roman numerals aren’t bad enough, bullets are even worse).
  • Pages, it’s all about pages. As a planning tool, the site map tells you a lot about the pages by not only establishing the relationships pages have to each other, but by also “mapping out” these relationships and how they relate to the different components of a project (of course, hence the phrase “site map”). These page relationships can be rather complicated, and adding technical details and aesthetic notes will only quadruple the complexity.

All of that to say, avoid including functionalities, images, placement instructions, etc… If necessary, put an asterisk next to an item and add a footnote. Which sort of leads to my next point…..

  • Titles matter. Titles matter because if everyone refers to an apple as an apple, we would all understand that you want someone to pass the “round fruit with a firm white flesh and a green, red or yellow skin” and not, the “oval fruit with brown hairy skin and bright green flesh” in the fruit basket. As much as possible, choose the title for a page and stick with it. If you’re still trying to decide on the page titles, use “working titles” so that everyone knows you’re talking about the apple, not the kiwi, in the basket.
  • Now tie them together. Although not a part of the site map, it’s a good idea to start compiling lists as you develop your site map. How many forms will it have? What will they be called and what kind of information will you collect? How about videos and pictures? Make a list of all the pages that will have videos, pictures, etc… (obviously that creates another list: “Stuff I Need To Put Together”. Do you see how useful a site map can be?).

Note: these lists you’re beginning to compile don’t have much to do with the site map. Essentially you’re compiling them at the same time you develop the site map so you can develop a clear picture of how your website will function3. More on what to do with the lists later….

Want more? Check out:

  • Communicating Good Design by Dan Brown
  • Last, always remember that the way you want it to function is not always the most feasible, or may not even be the best way, so keep an open mind!

-FTK

2 Comments »

Planning to Plan Your Website?

Monday, January 14th, 2008

Then check out this great read on planning and documenting your web design/web development project the right way (and here you go all you Kindle readers)!

Developing Web Site Documentation for Design and Planning

“Most discussion about Web design seems to focus on the creative process, yet turning concept into reality requires a strong set of deliverables—the documentation (concept model, site maps, usability reports, and more) that serves as the primary communication tool between designers and customers. Here at last is a guide devoted to just that topic. Combining quick tips for improving deliverables with in-depth discussions of presentation and risk mitigation techniques, author Dan Brown shows you how to make the documentation you’re required to provide into the most efficient communications tool possible. He begins with an introductory section about deliverables and their place in the overall process, and then delves into to the different types of deliverables. From usability reports to project plans, content maps, flow charts, wireframes, site maps, and more, each chapter includes a contents checklist, presentation strategy, maintenance strategy, a description of the development process and the deliverable’s impact on the project, and more.”

No Comments »

Web Design & Architecture

Wednesday, January 9th, 2008

The house my parents currently live in was designed and built many years ago when I was a kid.  I remember sitting down with the architect as a family and we made a list of all the cool things we wanted the house to have. We made a list of everything; from the necessary things like how many rooms to the seemingly insignificant (like the hole in the wall my sister wanted instead of a bedside table). It was a long and tedious process, but it was also exciting and my fascination kept me intrigued.

The architect then drew up a blueprint based on our conversations and as we went over it, we gradually adjusted the list of features we wanted the house to have. Some of the things we started with were abandoned and others we hadn’t thought off were added. In the end, we had a blueprint mapping out the layout of the eventual house.

Based on the blueprint, the architect built model/prototype of the house  (my sister eventually converted it to a doll house). My siblings and I spent hours looking at it and imagining what life would be like after the house was finished. Again, we spent time going over the features of the house and rearranging things until we were sure it was perfect.

Many years later (or so it seemed to me at the time), our house was finally ready.

I often feel like that architect whenever I start out on a new web design/development project because it turns out the only difference between our jobs is that I build websites and he builds houses (granted it’s a pretty big difference, but the methods are strikingly alike).

Just like with the house, the beginning of a project is spent learning about it, the clients and their goals, etc… We discuss your project and list any features you’d like, colors, etc… until we eventually settle down on a final list of features and how we would like them to work. This is often the most tedious part but doing a good job at this stage exponentially increases the chances of a smooth project experience.

This is also a good time to develop the content for your website and compile any additional files that will also be used throughout the website (images, PDFs, documents, etc…).

With the list of features in mind, a layout of the finished website is designed. Much like the blueprint of a house, the layout simply gives us a visual overview of the website’s structure and concentrates on placing each feature in the right place. In fact, the website layout is often called a blueprint in some circles (wire frame is another term also commonly used).

Blueprint

That layout then serves as the platform the mockup (the model) is built on. Basically, a mockup is a picture of what your website will look like after it’s been completed and its features have been implemented. It maintains the structure from the blueprint but now the color scheme is added, buttons designed, etc…

Mockup

It’s never quite right the first time around so several revisions are designed, colors experimented with, features are moved around, etc… until the “Eureka!” moment arrives (this is hands down the best part of a project).

Mockup 2

This is where you (the client) goes to Mexico, the production team work their magic with code and another remarkable website goes online.

-FT

Special thanks to Eric of Floorsnet for allowing me to use his project as an example 

No Comments »