“Following this process…is essential for a successful project.”
For optimal reading, please view this page on a larger screen
1. Discover
kickoff, site audit, architecture, research, design meeting
Kickoff
Before a design meeting is scheduled and the design process begins, clients will have signed a contract which outlines the site architecture along with several other key pieces of information about the project. The website architecture should not be altered unless approved by the president or creative director.
We will work together to define your ultimate goals for the site. In doing so, we determine a site architecture and the roles we will each play in reaching the goals discussed. We will also discuss our expectations to solidify a timeline and any necessary deliverables.
Site Audit
We start by reviewing your current site to determine the best architecture to meet your ultimate goals; we’ll suggest any modifications that will be instrumental in accomplishing said goals.
Architecture
We create a detailed list of all your pages in an organized fashion so you might quickly and clearly understand the structure of your future site. See facing page for an example of a website architecture.
Research
Most research is done by the creative director with the help and support of the client for establishing a design direction.
Working together, we define your industry, establish and define your target audience, and discuss some color preferences. Through independent research, which includes studying sites in your industry (both aesthetically and technically), we determine your industry’s standards as they pertain to web design.
Design Meeting
Together with the creative director, your designer will meet with you – either in person or over the phone, to discuss color preferences, layout preferences, font and type preferences, and, most importantly, how you want your customers to use your site. We ask a number of questions to determine a solid direction in which to take the design(s).
Below are the questions we cover during our design meetings:
- Tell me about your company (quick history).
- Who is your target audience?
- Do you have any color preferences (in addition to the logo/ branding)?
- Who are your competitors? Do you like anything about their site(s)? Are there things you don’t like about their site(s)?
- Do you have any other examples (competitors or not) of sites that you like?
- Ultimately, where do you want your user to end up on your site? How would you prefer they navigate to that destination?
- Do you have any high quality images that illustrate your company or do you prefer royalty-free stock imagery?
- Besides the type in your logo, are you fond of any particular font style (serif, sans-serif)?
2. Define
industry websites, target audience, internal meeting, concepting, sketches, prototypes, refinement
Industry Websites
We take the time to research other websites in your industry to gather information on functionality, style, content, and usability. This research ensures your site will meet and/or exceed industry standards, making you stand out from your competition.
Target Audience
In our research of industry websites, we also gather information on your target audience. We aim to understand how the average user will navigate your site and what we can expect from that user; this informs the design and, ultimately, the development of the site.
Internal Meeting
Your designer will meet with the creative director to discuss the direction of the design(s) based on the information gathered in the design meeting and subsequent research.
Concepting
During the concepting phase, the designer brainstorms potential design ideas to come up with as many possible design solutions as they can.
By creating multiple sketches of each potential design, we ensure each final design flows well and accomplishes the goals we’ve laid out for your site.
Sketches
Your designer will produce several sketches per contracted mockup, which are based on information gathered in your design meeting, and present them to the creative director for review; together, your designer and creative director determine the direction of the contracted mockup(s).
Prototypes
Your designer uses the sketches and concepts created to produce one or more fully designed home page mockups. The creative director then reviews those designs once more to ensure they meet industry standards and effectively maintain your branding, while accomplishing the project’s goals. If necessary, your designer will make changes to the design(s).
Refinement
Your designer will work with you directly to refine the fully developed designs such that they match your vision and meet your expectations perfectly.
Our ultimate goal is to produce a design that excites our client, entices your customer, and accomplishes any and all goals set forth in the initial stages of the project. Navigating this part of the process can be tedious, so it’s important to move forward in an efficient and effective way. We’ve developed some helpful tips for getting the most out of the design process.
3. Design
home page mockup, interior page mockup, client review, home page revisions, interior page revisions, approval
Home Page Mockup
Your designer will present the fully completed home page design(s) with detailed description(s). These designs have been determined by your designer and creative director to be complete; they accomplish all goals mentioned thus far and are in keeping with current branding.
Client Review
You should take the time to review the design(s) thoroughly so you can provide helpful feedback to your designer. See Client Tips for helpful instructions.
Home Page Mockup Revisions
After receiving your feedback, your designer will make the requested revisions to the chosen home page mockup, keeping in mind any additional goals that may have been discussed during the client review process. Your designer will review the revised mockups with the creative director before sending you the updated designs with a detailed description.
Interior Page Mockup
Using your approved homepage design, your designer will create an interior page mockup, which will be reviewed by the creative director. Like the home page design, your interior page mockup will accomplish all goals established for the project thus far, while remaining loyal to your brand.
Client Review
You should take the time to review the design(s) thoroughly so you can provide helpful feedback to your designer. See Client Tips for helpful instructions.
Interior Page Mockup Revisions
After receiving your feedback, your designer will make the requested revisions to the chosen interior page mockup, keeping in mind any additional goals that may have been discussed during the client review process. Your designer will review the revised mockups with the creative director before sending you the updated designs with a detailed description.
Client Review & Approval
The last piece to the design puzzle is your final review and approval. Be sure to review the final mockups and discuss any further changes with your designer to determine the best and most effective method of moving forward.
4. Develop
development, html theming, css application, javascript addition, cms build, plugin creation, resources
Development
Your new website, will meet W3C standards and function efficiently across the major browsers; in certain cases, the site may respond to browser widths to optimize viewing on any particular device.
Having spent a fair amount of time communicating with you, and therefore getting to know you, your designer is now fully equipped to transform your approved designs into a fully functioning website built especially for you.
HTML Theming
Your designer will create and build the HTML structure for your new website. This is the framework of your website; it’s important to get it right in order to create a successful website.
CSS Application
After creating a solid base and structure, your designer will apply CSS to elements in the HTML framework to ensure the content is governed by CSS, making eventual maintenance easy and user-friendly.
JavaScript Addition
JavaScript may be incorporated to add interative elements across the site. JavaScript is used in lieu of Flash or Silverlight.
CMS Build
With a firm framewok and structure in place, your designer will use PHP to integrate the content management system contracted. Typically, the contract will include either a WordPress or a Drupal platform.
Plugin Creation
Certain elements may not be as user-friendly as we’d like, so your designer may build custom plugins for you if it is determined that the standard functionality of any item may be difficult to use or is in need of upgrading; this is done to ensure your website can be easily used and maintained.
Resources
- Read more about W3C Standards
- Interested in Responsive Design? Read the infographic.
- Interested in Responsive Design? Read about why it’s important.
- Why not Flash?
- Why not Flash or Silverlight?
- Want to know more about WordPress?
- Why did your site use Drupal?
5. Detail
checklist, testing, designer & developer testing, creative director testing & review
Checklist
We take various steps to ensure your new website functions efficiently and maintains its integrity across the major browsing platforms. Below is the checklist we complete before sending any site out for client testing:
Code and Styling:
__ Code validates:http://validator.w3.org
__ Browser compatible
__ Firefox Mac / PC
__ Safari
__ Internet Explorer 8 / 9 / 10
__ Google Chrome
__ All forms tested
__ Videos/animations play correctly
__ Favicon created
__ Search function works
__ 404 page styled
__ Automatic copyright included
__ Redirects in place (if applicable)
Content:
__ Title & meta tags on all pages *
__ All links work
__ External links: target=_blank
__ Internal links: relative
__ All content is copied exactly *
* Should be provided to Noble Image or will be taken from current site.
Testing
We want to make certain that we send you a fully functioning site, so we thoroughy inspect and test the final website, ensuring it functions and maintains the desired designs as required by the contract.
After we have confirmed stability through extensive testing, your designer will send you the final site for your review and feedback. This gives you an opportunity to check and test our work, ultimately deeming the site usable and satisfactory.
Designer & Developer Testing
Your designer will run through the site, testing its every link and page to verify functionality is retained as required by contract.
Creative Director Testing & Review
The creative director will inspect your site in its entirety to check the code and functionality, confirming that it is written to meet best practice standards while providing a user-friendly platform from which you can make updates and modifications. Additionally, the creative director will review the site as a whole to ensure that its look, feel, and functionality reflects well upon both Noble Image and your brand.
6. Deliver
delivery, client review, site revisions, final review, training, go live!
Delivery
Your designer will send you the final site for review with a detailed description and a list of items needed (if applicable).
Client Review
You should take some time to thoroughly review and test the site to provide thoughtful and helpful feedback to your designer.
Site Revisions
Your designer will make the requested revisions to the site and deliver it to you with an updated description.
Final Review
Be sure to take the time to thoroughly review and test the site with the new revisions to ensure nothing needs modification before going live. If any further changes are requested, you should discuss them with your designer to determine the best way to move forward. If the site is approved to go live, you should provide hosting control panel login information to your designer along with your written and final approval of the site; this keeps the process moving forward smoothly and expedites the “going live” process.
Training
Noble Image will provide online training session to show you how to effectively maintain and update your new site!
Go Live!
Noble Image will move the finalized site over to the desired domain, creating backups of both the previous site (if applicable) as well as the newly created site.
Project Start
The company process defines how Noble Image approaches a project from start to finish. Following this process during the design and development of a website (or other graphic design material) is essential for a successful project.
1. Discover
kickoff, site audit, architecture, research, design meeting
Kickoff
Before a design meeting is scheduled and the design process begins, clients will have signed a contract which outlines the site architecture along with several other key pieces of information about the project. The website architecture should not be altered unless approved by the president or creative director.
We will work together to define your ultimate goals for the site. In doing so, we determine a site architecture and the roles we will each play in reaching the goals discussed. We will also discuss our expectations to solidify a timeline and any necessary deliverables.
Site Audit
We start by reviewing your current site to determine the best architecture to meet your ultimate goals; we’ll suggest any modifications that will be instrumental in accomplishing said goals.
Architecture
We create a detailed list of all your pages in an organized fashion so you might quickly and clearly understand the structure of your future site. See facing page for an example of a website architecture.
Research
Most research is done by the creative director with the help and support of the client for establishing a design direction.
Working together, we define your industry, establish and define your target audience, and discuss some color preferences. Through independent research, which includes studying sites in your industry (both aesthetically and technically), we determine your industry’s standards as they pertain to web design.
Design Meeting
Together with the creative director, your designer will meet with you – either in person or over the phone, to discuss color preferences, layout preferences, font and type preferences, and, most importantly, how you want your customers to use your site. We ask a number of questions to determine a solid direction in which to take the design(s).
Below are the questions we cover during our design meetings:
- Tell me about your company (quick history).
- Who is your target audience?
- Do you have any color preferences (in addition to the logo/ branding)?
- Who are your competitors? Do you like anything about their site(s)? Are there things you don’t like about their site(s)?
- Do you have any other examples (competitors or not) of sites that you like?
- Ultimately, where do you want your user to end up on your site? How would you prefer they navigate to that destination?
- Do you have any high quality images that illustrate your company or do you prefer royalty-free stock imagery?
- Besides the type in your logo, are you fond of any particular font style (serif, sans-serif)?
2. Define
industry websites, target audience, internal meeting, concepting, sketches, prototypes, refinement
Industry Websites
We take the time to research other websites in your industry to gather information on functionality, style, content, and usability. This research ensures your site will meet and/or exceed industry standards, making you stand out from your competition.
Target Audience
In our research of industry websites, we also gather information on your target audience. We aim to understand how the average user will navigate your site and what we can expect from that user; this informs the design and, ultimately, the development of the site.
Internal Meeting
Your designer will meet with the creative director to discuss the direction of the design(s) based on the information gathered in the design meeting and subsequent research.
Concepting
During the concepting phase, the designer brainstorms potential design ideas to come up with as many possible design solutions as they can.
By creating multiple sketches of each potential design, we ensure each final design flows well and accomplishes the goals we’ve laid out for your site.
Sketches
Your designer will produce several sketches per contracted mockup, which are based on information gathered in your design meeting, and present them to the creative director for review; together, your designer and creative director determine the direction of the contracted mockup(s).
Prototypes
Your designer uses the sketches and concepts created to produce one or more fully designed home page mockups. The creative director then reviews those designs once more to ensure they meet industry standards and effectively maintain your branding, while accomplishing the project’s goals. If necessary, your designer will make changes to the design(s).
Refinement
Your designer will work with you directly to refine the fully developed designs such that they match your vision and meet your expectations perfectly.
Our ultimate goal is to produce a design that excites our client, entices your customer, and accomplishes any and all goals set forth in the initial stages of the project. Navigating this part of the process can be tedious, so it’s important to move forward in an efficient and effective way. We’ve developed some helpful tips for getting the most out of the design process.
3. Design
home page mockup, interior page mockup, client review, home page revisions, interior page revisions, approval
Home Page Mockup
Your designer will present the fully completed home page design(s) with detailed description(s). These designs have been determined by your designer and creative director to be complete; they accomplish all goals mentioned thus far and are in keeping with current branding.
Client Review
You should take the time to review the design(s) thoroughly so you can provide helpful feedback to your designer. See Client Tips for helpful instructions.
Home Page Mockup Revisions
After receiving your feedback, your designer will make the requested revisions to the chosen home page mockup, keeping in mind any additional goals that may have been discussed during the client review process. Your designer will review the revised mockups with the creative director before sending you the updated designs with a detailed description.
Interior Page Mockup
Using your approved homepage design, your designer will create an interior page mockup, which will be reviewed by the creative director. Like the home page design, your interior page mockup will accomplish all goals established for the project thus far, while remaining loyal to your brand.
Client Review
You should take the time to review the design(s) thoroughly so you can provide helpful feedback to your designer. See Client Tips for helpful instructions.
Interior Page Mockup Revisions
After receiving your feedback, your designer will make the requested revisions to the chosen interior page mockup, keeping in mind any additional goals that may have been discussed during the client review process. Your designer will review the revised mockups with the creative director before sending you the updated designs with a detailed description.
Client Review & Approval
The last piece to the design puzzle is your final review and approval. Be sure to review the final mockups and discuss any further changes with your designer to determine the best and most effective method of moving forward.
4. Develop
development, html theming, css application, javascript addition, cms build, plugin creation, resources
Development
Your new website, will meet W3C standards and function efficiently across the major browsers; in certain cases, the site may respond to browser widths to optimize viewing on any particular device.
Having spent a fair amount of time communicating with you, and therefore getting to know you, your designer is now fully equipped to transform your approved designs into a fully functioning website built especially for you.
HTML Theming
Your designer will create and build the HTML structure for your new website. This is the framework of your website; it’s important to get it right in order to create a successful website.
CSS Application
After creating a solid base and structure, your designer will apply CSS to elements in the HTML framework to ensure the content is governed by CSS, making eventual maintenance easy and user-friendly.
JavaScript Addition
JavaScript may be incorporated to add interative elements across the site. JavaScript is used in lieu of Flash or Silverlight.
CMS Build
With a firm framewok and structure in place, your designer will use PHP to integrate the content management system contracted. Typically, the contract will include either a WordPress or a Drupal platform.
Plugin Creation
Certain elements may not be as user-friendly as we’d like, so your designer may build custom plugins for you if it is determined that the standard functionality of any item may be difficult to use or is in need of upgrading; this is done to ensure your website can be easily used and maintained.
Resources
- Read more about W3C Standards
- Interested in Responsive Design? Read the infographic.
- Interested in Responsive Design? Read about why it’s important.
- Why not Flash?
- Why not Flash or Silverlight?
- Want to know more about WordPress?
- Why did your site use Drupal?
5. Detail
checklist, testing, designer & developer testing, creative director testing & review
Checklist
We take various steps to ensure your new website functions efficiently and maintains its integrity across the major browsing platforms. Below is the checklist we complete before sending any site out for client testing:
Code and Styling:
__ Code validates:http://validator.w3.org
__ Browser compatible
__ Firefox Mac / PC
__ Safari
__ Internet Explorer 8 / 9 / 10
__ Google Chrome
__ All forms tested
__ Videos/animations play correctly
__ Favicon created
__ Search function works
__ 404 page styled
__ Automatic copyright included
__ Redirects in place (if applicable)
Content:
__ Title & meta tags on all pages *
__ All links work
__ External links: target=_blank
__ Internal links: relative
__ All content is copied exactly *
* Should be provided to Noble Image or will be taken from current site.
Testing
We want to make certain that we send you a fully functioning site, so we thoroughy inspect and test the final website, ensuring it functions and maintains the desired designs as required by the contract.
After we have confirmed stability through extensive testing, your designer will send you the final site for your review and feedback. This gives you an opportunity to check and test our work, ultimately deeming the site usable and satisfactory.
Designer & Developer Testing
Your designer will run through the site, testing its every link and page to verify functionality is retained as required by contract.
Creative Director Testing & Review
The creative director will inspect your site in its entirety to check the code and functionality, confirming that it is written to meet best practice standards while providing a user-friendly platform from which you can make updates and modifications. Additionally, the creative director will review the site as a whole to ensure that its look, feel, and functionality reflects well upon both Noble Image and your brand.
6. Deliver
delivery, client review, site revisions, final review, training, go live!
Delivery
Your designer will send you the final site for review with a detailed description and a list of items needed (if applicable).
Client Review
You should take some time to thoroughly review and test the site to provide thoughtful and helpful feedback to your designer.
Site Revisions
Your designer will make the requested revisions to the site and deliver it to you with an updated description.
Final Review
Be sure to take the time to thoroughly review and test the site with the new revisions to ensure nothing needs modification before going live. If any further changes are requested, you should discuss them with your designer to determine the best way to move forward. If the site is approved to go live, you should provide hosting control panel login information to your designer along with your written and final approval of the site; this keeps the process moving forward smoothly and expedites the “going live” process.
Training
Noble Image will provide online training session to show you how to effectively maintain and update your new site!
Go Live!
Noble Image will move the finalized site over to the desired domain, creating backups of both the previous site (if applicable) as well as the newly created site.