Whether you're a novice or veteran, the process of building a website is a complex task. It's important to begin the project thinking of the new website as a whole. Think of the Gestalt theory. "The whole is greater than the sum of its parts." The website you create must be unified in content, design, functionality, optimization, experience and usability. It sounds like a lot to remember, but if you follow a streamlined process, it will eventually become a habit.
Following the same process and strategy for each of your web projects will keep you more organized, faster and you'll avoid the back-and-forth with clients when you should be launching the new site.
One of the biggest problems with web projects is the lack of communication. Because the web is such a fast moving element in the world, sometimes clients expect a quick turnaround. They tell you that it's a 'rush job' or that they need it by a certain date, which is sometimes completely unreasonable. But, you take the project on and work as fast as possible. With anything, the faster you work, the more opportunities for mistakes. You may be a great communicator and web professional, but you run the risk of missing important information when the project is rushed.
The first meeting you have with your new client needs to be detailed and full of questions. Who is the target audience? What is the client selling, doing, promoting, etc.? What is the overall purpose of the site? What are the goals? What functionality does the administrator of the site need? What should the user be able to do on the site? Questions like these are necessary to create a website that meets your clients’ needs and their consumers’ needs. If you don't solve these problems in the beginning, you run the risk of having to make extreme changes when the site has already been built.
Once you have a complete understanding of your client's business, it's time to research the industry. What are other companies in the same field doing to bring in customers? Find out what you can create for your clients so that they stand out from their competitors. Research is one of the most important aspects of a web project that often gets left out.
Hopefully you're planning to also help your client with search engine optimization. Don't worry - you don't have to be a professional or an SEO genius to at least push their site in the right direction. Take advantage of the many resources on the web to learn more about optimizing a website for search engines.
This is a great resource for SEO beginners from SEOMoz. The Webmaster section on Google is also a great program. From here you have access to several tools that will increase the tracking and search ability on the site.
Meta data research: Because there have been so many updates in the complex world of SEO over the years, keywords, descriptions and page titles aren't as powerful as they used to be. However, they can still make a difference. Take the time to find out what people are typing in - not necessarily what the client thinks people are typing in. Sometimes clients try to put in vernacular that doesn't even make sense to a consumer. The Google AdWords keyword search tool can help you find out what people are typing in and how often. This will help you find out what keywords are competitive and what you should be putting into the site.
Other important SEO elements to consider:
- A 301 Redirect
- Google site verification
- Image Alt Tags
- XML Sitemap
- Google Analytics
Architecture and Wireframes
After communicating with the client and researching other businesses in the industry, you're now ready to start forming the bones of the website. You first need to lay out the architecture of the website. Knowing exactly what pages will be available on the site is the most important place to start. Designing a site backwards is impossible - you have to know what content it will house. As much as we designers like to make things look great and have incredible functionality, the website is first and foremost a vehicle for content. Consumers come to a website looking for information, but great aesthetics are a plus. There are plenty of tools out there (lots of them are free!) to create visual sitemaps. So far, SlickPlan has been my favorite tool.
For wireframes, I like to create them manually in Adobe Illustrator. I feel like I have more control, I'm able to choose my document size, and I can put everything to the scale I choose to work with. Sometimes I start my wireframes with graph paper and pencil to work out my plan by hand. Don't feel you have to stick to the same routine all the time - if by hand works for you better, then go with it. The most important part is to establish a strategy for the homepage and interior pages. By establishing the elements in the pages before you move to the design step of the process, you save time and stay organized. The fewer surprises for the client, the better.
A simple and modern design from Big Bite Creative.
Finally! We've reached the fun part. This is where you get to take everything you've researched and strategized to create an actual website. Base the design off the wireframes you've created - do your best not to deviate from them, considering that's what your client approved. Depending on what you discussed with your client in the beginning, you may be designing one, two or maybe three homepage designs.
Once the client has chosen a design and you make the modifications (There will always be something.), you can then design interior pages. If the site is simple, you may only need to create one interior page template. If the site is a little more complex, several templates might be necessary. It may be time consuming to design several interior pages, but it will save you time during the build.
Now that the site architecture and designs have been approved, it's time to start building in the functionality. This is where you take all the items discussed in your initial client meeting and make them happen. Make sure your notes are clear and you have a full understanding about what the client is looking for - what the user should be able to do, what the admin should be able to do, how that homepage carousel will function, etc. These facts are important to know before you start building, so make sure you're 100 percent positive about what should be happening to the client's site.
Times they are a changin' and so should your building techniques. There's something new happening in the webverse everyday, so make sure you keep up. The newest term being thrown around lately is responsive. Responsive design was coined by Ethan Marcotte, a popular designer, developer and speaker. His book, Responsive Web Design, gives a great explanation of the reasoning and strategy behind a fluid web design. This type of design will allow your site to be viewed on different devices at different sizes. This keeps you from having to create a specific mobile version of the site that doesn't include all the content. Responsively designed sites save you time and give consumers a completely usable site to experience. ThinkVitamin has a great beginner's article to get you started here.
If your client has a need for a mobile site, such as an event, promotion or another mobile specific use, you may need to create a different version of the site. Responsive design isn't meant to throw away the idea of a mobile-specific site - it just saves you time if it's not really necessary. Be sure to clarify what the mobile needs of the client's customers will be before making any decisions.
Great job! You have a fully functioning site in front of you. Hopefully your client is excited and happy with the final product. If so, now it's time to really start testing your site. It's important to test in all browsers: Firefox, Chrome, Safari, Opera, IE6, IE7, IE8, IE9, iPhone, iPad, Droid, Blackberry, etc., etc., etc. Now, you may not have all these devices handy. No problem! There are resources and applications out there for those of us that don't own 14 smartphones. Sites like SauceLabs, Adobe BrowserLabs, and Browser Shots can help you start testing your sites.
Before you launch the site, look at your list to make sure you've handled all the necessary details:
- Design and development? Check.
- SEO data added? Check.
- Google Analytics added? Check.
- Testing completed? Check.
If the short list above (and whatever long list you've created for yourself along the way) is completed, you're ready to launch the site. If you can, have a proofreader or even a colleague take a look at the site. With a second set of eyes, broken links and other errors can be found. With more complex sites, you have more of an opportunity for mistakes, so take your time in the proofing stage.
Since each client is different, strategy will always be changing a little. The steps above are meant to be a general base for tackling any kind of website. Are there other steps or routines I left out that you follow when building a new website?