WEB DEVELOPMENT

The Development Process.

Serious web projects require a real web development process — just picking a template will not get it done.

1. CLIENT DISCUSSION

important phrase

Let's talk.

The first phase of the development process involves a client discussion session – maybe even more than one – where we uncover the underlying why of the project.

During this discussion we are getting a feel for who the client is, what they do; figuring out the purpose, goals, target audience and content for the web project. We need to get a thorough understanding of our client – the full picture – to produce an end result that hits the mark and accomplishes the project goals.

The client meeting involves a series of questions we use to lead us down the right path to success. Questions we might ask include:

Background Information –

  • What does your business do?
  • What are your corporate core values and how do you express them to your visitors?
  • What makes your company unique to your competitors?
  • Who are your competitors?
  • Who is your target audience? Who exactly are your customers and what are they like?
  • What do you want your site to accomplish?

Scope and Specs –

  • Do you have the content for the website or will content creation be a part of the scope of work?
  • Do you have specific company branding color palettes and styles that need to be used? Required font families?
  • Do you have any other materials that the site needs to match with in some way (brochures, press materials, etc.)?
  • What are your internal web content update needs?
  • What level of internal skills are available to carryout content update tasks?
  • Should we have a discussion of whether the trade-offs inherent with a content management system platform choice are relevant?
  • How much site administration involvement do you want your internal staff to handle after the site has launched?
  • What is your time frame for total project completion?
  • What are your budget expectations/constraints? ('Free' should be a four letter word – for your organization)

2. RESEARCH & PLANNING

important phrase

We'll probably need a deeper look.

After the initial client discussion(s), the next phase of the development process is research.

Further research is completed on our end, to take a deeper outside perspective of the client, company history, target audience and existing web presence. Other research is completed, covering the technical side of the project such as deciding what technologies could be implemented, software requirements, network and hardware resources, data sources and system interconnections.

Research Sketch Example

Analysis of the gathered information occurs and planning begins. A second level of research begins before actual design starts. This phase of research is really a pre‐design phase.

Information architecture (IA) is the practice of deciding how to arrange the parts of a web presence to be understandable. If you've ever tried to use something and thought, "Where do I go next?" or "I don't really understand this," you are experiencing a problem with an information architecture. IA is an important component of user experience (UX) and other web development disciplines, such as content strategy, interface design – particularly interaction design.

Research techniques such as card sorts can be used to help understand the information architecture surrounding your project. Before you can make effective design decisions, you have to understand how your users think about the information you are presenting.

Card Stack

Preliminary site maps are created listing pages, including links and a hierarchy of page organization. Documentation including specifications, contracts, payment terms, project closure clauses, termination clauses, copyright ownership and timelines are produced and approved by the client as part of this phase.

Sit Map Example

3. DESIGN

important phrase

Add some emotion and character.

The design phase is where the look and feel of the project is established. Using the information gathered during the previous phases, the visual layout begins to take shape.

Wireframes and other design elements are produced, using planning programs as well as traditional pencil and paper.

Wireframe Example

Mock‐ups, style tiles and user personas are created, making sure goals and analysis is referenced. Mock‐ups are produced in a way that they can be easily modified and adjusted.

Wireframe Example

Style Tile

Mock‐Up Example

Mock‐Up

Extend the mock up for common device configurations. This should be a working prototype page so the client can begin to interact with the design.

Mock‐Up Example

Desktop

Mock‐Up Example

Tablet

Mock‐Up Example

Mobile

Review, approve and modify the design mock-ups with the client.

4. IMPLEMENTATION

important phrase

It's coding time.

Set up web servers to use in development–

Set up a private test server to use. Code should be first tested in a non‐public test environment.

Gain access to primary deployment server(s) and begin configuring to ultimately host the production version of site.

Typical development credentials information to obtain and validate includes FTP, server and database administration, and/or control panel username and passwords; database configurations; and any languages or frameworks currently installed including version information.

Configure frameworks, install libraries and other development systems to be used in the project.

Front End

Front-end development makes the client‐side browsers work.

Include code frameworks and libraries and write the HTML and CSS code for the basic design, validating and testing the code as we go. Produce code templates for each page type. (e.g. landing, general content, blog post, form)

Develop any special functionality and add animation and other visual features to the site. Test interactivity. Code forms and other client input areas, validate and test. Populate the site with final content – text, visuals, photography, videos, audio and more.

Back End

Back-end development makes the server work.

Develop any server‐side functionality necessary for a dynamic web site or web application. This includes designing, building, and populating any database tables, writing queries and middleware code routines to handle interaction with the client web browsers accessing the server.

5. Testing & Delivery

important phrase

We make sure it really works.

Test everything again and again –

Testing is an underappreciated but absolutely critical phase.

At the earliest point, unit level code testing exercises the execution of the code for errors in the browser, and on the server.

A robust testing program includes cycles of testing and possible further modifications based on the testing results.

Mock Up Example

Testing strategies designed to examine the usability and user experience (UX), the system performance both at the browser level and server level, database operations, scalability questions, security testing, and even SEO effectiveness testing are employed as appropriate.

Delivery and cutover options are completely flexible –

SoftScience Group web site (top) 'as-built'

Feel free to browse the 'as-built' live web site for SoftScience Group, Inc.

We make sure you are ready to take over control and administration of the site after it goes live (if you want – we can also take care of ongoing site administration too).

For many web development projects it may be desirable to produce a cross‐platform corporate governance plan for all your web assets – core web presence and social media. Issues to address include decision making authority, as well as control of message, style, and timing for content additions and site modifications.

Credentials handover, training, and documentation are part of this ending phase. The scope of deliverables will depend on your needs. We will make the result work for your situation.

Mock Up Example
Client Discussion

1. CLIENT DISCUSSION

important phrase

Let's talk.

The first phase of the development process involves a client discussion session – maybe even more than one – where we uncover the underlying why of the project.

During this discussion we are getting a feel for who the client is, what they do; figuring out the purpose, goals, target audience and content for the web project. We need to get a thorough understanding of our client – the full picture – to produce an end result that hits the mark and accomplishes the project goals.

The client meeting involves a series of questions we use to lead us down the right path to success. Questions we might ask include:

Background Information –

  • What does your business do?
  • What are your corporate core values and how do you express them to your visitors?
  • What makes your company unique to your competitors?
  • Who are your competitors?
  • Who is your target audience? Who exactly are your customers and what are they like?
  • What do you want your site to accomplish?

Scope and Specs –

  • Do you have the content for the website or will content creation be a part of the scope of work?
  • Do you have specific company branding color palettes and styles that need to be used? Required font families?
  • Do you have any other materials that the site needs to match with in some way (brochures, press materials, etc.)?
  • What are your internal web content update needs?
  • What level of internal skills are available to carryout content update tasks?
  • Should we have a discussion of whether the trade-offs inherent with a content management system platform choice are relevant?
  • How much site administration involvement do you want your internal staff to handle after the site has launched?
  • What is your time frame for total project completion?
  • What are your budget expectations/constraints? ('Free' should be a four letter word – for your organization)
Research and Planning Process

2. RESEARCH & PLANNING

important phrase

We'll probably need a deeper look.

After the initial client discussion(s), the next phase of the development process is research.

Further research is completed on our end, to take a deeper outside perspective of the client, company history, target audience and existing web presence. Other research is completed, covering the technical side of the project such as deciding what technologies could be implemented, software requirements, network and hardware resources, data sources and system interconnections.

Research Sketch

Analysis of the gathered information occurs and planning begins. A second level of research begins before actual design starts. This phase of research is really a pre‐design phase.

Information architecture (IA) is the practice of deciding how to arrange the parts of a web presence to be understandable. If you've ever tried to use something and thought, "Where do I go next?" or "I don't really understand this," you are experiencing a problem with an information architecture. IA is an important component of user experience (UX) and other web development disciplines, such as content strategy, interface design – particularly interaction design.

Research techniques such as card sorts can be used to help understand the information architecture surrounding your project. Before you can make effective design decisions, you have to understand how your users think about the information you are presenting.

Card Stack Example

Preliminary site maps are created listing pages, including links and a hierarchy of page organization. Documentation including specifications, contracts, payment terms, project closure clauses, termination clauses, copyright ownership and timelines are produced and approved by the client as part of this phase.

Sit Map Example
Mock Up Example

3. DESIGN

important phrase

Add some emotion and character.

The design phase is where the look and feel of the project is established. Using the information gathered during the previous phases, the visual layout begins to take shape.

Wireframes and other design elements are produced, using planning programs as well as traditional pencil and paper.

Wireframe Example

Mock‐ups, style tiles and user personas are created, making sure goals and analysis is referenced. Mock‐ups are produced in a way that they can be easily modified and adjusted.

Wireframe Example

Style Tile

Mock‐Up Example

Mock‐Up

Extend the mock up for common device configurations. This should be a working prototype page so the client can begin to interact with the design.

Mock Up Example

Desktop

Mock Up Example

Tablet

Mock Up Example

Mobile

Review, approve and modify the design mock-ups with the client.

Code - Implementation

4. IMPLEMENTATION

important phrase

It's coding time.

Set up web servers to use in development–

Set up a private test server to use. Code should be first tested in a non‐public test environment.

Gain access to primary deployment server(s) and begin configuring to ultimately host the production version of site.

Typical development credentials information to obtain and validate includes FTP, server and database administration, and/or control panel username and passwords; database configurations; and any languages or frameworks currently installed including version information.

Configure frameworks, install libraries and other development systems to be used in the project.

Front-End Illustration

Front-end development makes the client‐side browsers work.

Include code frameworks and libraries and write the HTML and CSS code for the basic design, validating and testing the code as we go. Produce code templates for each page type. (e.g. landing, general content, blog post, form)

Develop any special functionality and add animation and other visual features to the site. Test interactivity. Code forms and other client input areas, validate and test. Populate the site with final content – text, visuals, photography, videos, audio and more.

Back-End Illustration

Back-end development makes the server work.

Develop any server‐side functionality necessary for a dynamic web site or web application. This includes designing, building, and populating any database tables, writing queries and middleware code routines to handle interaction with the client web browsers accessing the server.

Testing and Delivery

5. Testing & Delivery

important phrase

We make sure it really works.

Test everything again and again –

Testing is an underappreciated but absolutely critical phase.

At the earliest point, unit level code testing exercises the execution of the code for errors in the browser, and on the server.

A robust testing program includes cycles of testing and possible further modifications based on the testing results.

Web Testing Infograph

Testing strategies designed to examine the usability and user experience (UX), the system performance both at the browser level and server level, database operations, scalability questions, security testing, and even SEO effectiveness testing are employed as appropriate.

Delivery and cutover options are completely flexible –

SoftScience Group web site (top) 'as-built'

Feel free to browse the 'as-built' live web site for SoftScience Group, Inc.

We make sure you are ready to take over control and administration of the site after it goes live (if you want – we can also take care of ongoing site administration too).

For many web development projects it may be desirable to produce a cross‐platform corporate governance plan for all your web assets – core web presence and social media. Issues to address include decision making authority, as well as control of message, style, and timing for content additions and site modifications.

Credentials handover, training, and documentation are part of this ending phase. The scope of deliverables will depend on your needs. We will make the result work for your situation.

Handshake Sketch
Back arrow

Go Back

SaaS
Development

Up Next

Next arrow

Web
Design

Back to Top