As designers company, we often think of the Website in terms of wire frames, content management systems and code. But savvy companies know that the success of a Website design isn’t determined by the code, social media integration or cool visuals. Design a winning website requires a well-thought-out online strategy focused on reaching organizational goals — that can be anything from attracting visitors to buy products to getting the public to understand an issue to introducing visitors to a new brand.
As a Company, we can become one of the most valuable and influential members of the Website team when we understand how to develop an online strategy. There are many people who can write code and have opinions about the design and nuances of the website, but few have the array of talent and tools needed to create a Website that helps an organization achieve its goals. This course will provide you with the fundamental tools you need to lead a successful Website design and development project. Rather than focusing on HTML, CSS or programming, we will focus on the key strategies, content and design elements that go into creating a strategic Web presence.
A Typical Process of Website Design and Development
The Web design process is not unlike other communication processes. If you are familiar with developing a creative brief, a public relations plan, a communication plan or a new product, the phases will look very familiar. Here is a standard process that was put together using examples from around the Web as well as my own experience. The phases of the Website design and development process include the following steps.
Phase 1. Information Gathering
The first step in design a successful website is to gather information. Many things need to be taken into consideration when the look and feel of your site is created.
This first step is actually the most important one, as it involves a solid understanding of the company it is created for. It involves a good understanding of you – what your business goals and dreams are, and how the web can be utilized to help you achieve those goals.
It is important that your web designer start off by asking a lot of questions to help them understand your business and your needs in a web site. This is when the website developer asks you important questions about what you want to see in your website. What your goals and objectives are. What you want to communicate and whom you want to communicate to. During this phase your role is to communicate your brand requirements. The developer needs to understand what your business is about and what online tools you need to achieve more business. A strong web developer may have a questionnaire to help you both determine these goals and the best strategies to achieve them. They may ask you about blogging and social media. What colors you dislike, what sites you find successful. What sections you see your site needing, for example, a Home Page and an About Page. Vrush Technology has several sample questionnaires. The developer takes this information and creates a Web Design Brief, known as the ‘Creative Brief’ in advertising. The Web Design Brief briefly and clearly outlines the key elements of the web site. This is where your website is defined and will be referred to throughout the rest of the website’s development.
Phase 2. Planning
The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.
During the planning phase, your web designer will also help you decide what technologies should be implemented. Elements such as what CMS (content management system) such as WordPress to incorporate, will any contact forms be needed, etc. are discussed when planning your website.
- Requirements analysisThis includes client goals, target audience, detailed feature requests and as much relevant information as you can possibly gather. Even if the client has carefully planned his or her website, don’t be afraid to offer useful suggestions from your experience.
- Project charterThe project charter (or equivalent document) sums up the information that has been gathered and agreed upon in the previous point. These documents are typically concise and not overly technical, and they serve as a reference throughout the project.
- Site mapA site map guides end users who are lost in the structure or need to find a piece of information quickly. Rather than simply listing pages, including links and a hierarchy of page organization is good practice.
- Contracts that define roles, copyright and financial pointsThis is a crucial element of the documentation and should include payment terms, project closure clauses, termination clauses, copyright ownership and timelines. Be careful to cover yourself with this document, but be concise and efficient.
- Gain access to servers and build folder structureTypical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and any languages or frameworks currently installed.
- Determine required software and resources (stock photography, fonts, etc.)Beyond determining any third-party media needs, identify where you may need to hire sub-contractors and any additional software you may personally require. Add all of these to the project’s budget, charging the client where necessary.
Phase 3. Design
The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverable are a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape, but for the absence of the content and special features.
- Wire frame and design elements planningThis is where the visual layout of the website begins to take shape. Using information gathered from the client in the planning phase, begin design the layout using a wireframe. Pencil and paper are surprisingly helpful during this phase, although many tools are online to aid as well.
- Mock-ups based on requirements analysisDesign mock-ups in Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes you for slicing and coding when the time later on.
- Review and approval cycleA cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both client and contractor are satisfied with the design. This is the easiest time to make changes, not after the design has been coded.
- Slice and code valid XHTML/CSSIt’s coding time. Slice the final Photoshop mock-up, and write the HTML and CSS code for the basic design. Interactive elements and jQuery come later: for now, just get the visuals together on screen, and be sure to validate all of the code before moving on.
Phase 4. Development
The developmental stage is the point where the web site itself is created. At this time, your web designer will take all of the individual graphic elements from the prototype and use them to create the actual, functional site. Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape. Take a strategic approach, and avoid future hassles by constantly testing as you go.
- Build development framework.This is when unique requirements might force you to diverge from the process. If you’re using Ruby on Rails, an ASP/PHP framework or a content management system, now is the time to implement it and get the basic engine up and running. Doing this early ensures that the server can handle the installation and set-up smoothly.
- Code templates for each page type.A website usually has several pages (e.g. home, general content, blog post, form) that can be based on templates. Creating your own templates for this purpose is good practice.
- Develop and test special features and interactivity.Here’s where the fancy elements come into play. I like to take care of this before adding the static content because the website now provides a relatively clean and uncluttered workspace. Some developers like to get forms and validation up and running at this stage as well.
- Fill with content.Time for the boring part: loading all of the content provided by the client or writer. Although mundane, don’t misstep here, because even the simplest of pages demand tight typography and careful attention to detail.
- Test and verify links and functionality.This is a good time for a full website review. Using your file manager as a guide, walk through every single page you’ve created—everything from the home page to the submission confirmation page—and make sure everything is in working order and that you haven’t missed anything visually or functionally.
Phase 5. Launch
The purpose of the launch phase is to prepare the website for public viewing. This requires final polishing of design elements, deep testing of interactivity and features and, most of all, a consideration of the user experience. An important early step in this phase is to move the website, if need be, to its permanent Web server. Testing in the production environment is important because different servers can have different features and unexpected behavior (e.g. different database host addresses).
- PolishingParticularly if you’re not scrambling to meet the deadline, polishing a basically completed design can make a big difference. Here, you can identify parts of the website that could be improved in small ways. After all, you want to be as proud of this website as the client is.
- Transfer to live serverThis could mean transferring to a live Web server (although hopefully you’ve been testing in the production environment), “unhiding” the website or removing the “Under construction” page. Your last-minute review of the live website happens now. Be sure the client knows about this stage, and be sensitive to timing if the website is already popular.
- TestingRun the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checker and the like. You want to find any mistakes yourself rather than hearing complaints from the client or an end-user.
- Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry)Don’t forget to check the website in multiple browsers one last time. Just because code is valid, doesn’t mean it will sparkle with a crisp layout in IE 6.
Vrush Technology provide Website design and development, Website design, website development, Search Engine optimization, Website Marketing, Email Marketing, eCommerce Solutions, WordPress development in USA.