Development Process and Design for The Website

Website Design And Development Process

First of all, what is qiotic ‘process’? A Web development process is a documented outline of the steps needed to be taken from start to finish in order to finish a typical Web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a road map for each project.


The planning phase is the first step on the development process and the most important phase for qiotic, because what’s determined and mapped here sets the phase for the entire project. This is also the phase that requires customer interaction and the accompanying attention to detail.

  • Requirements analysis. This includes customer aim, target audience, detailed feature requests and as much relevant information as qiotic can gather. Even if the customer has carefully planned his or her website, we don’t be shy to offer useful suggestions from your previous experience.
  • Project charter. The project charter is the information that qiotic 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 map. A 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 perfect practice.
  • Contracts that define roles, copyright and financial points. This is a crucial element of the documentation and should include payment terms, project closure clauses, termination clauses, copyright ownership and timelines.
  • Gain access to servers and build folder structure. Typical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and any languages or frameworks currently integrated.


The design stage is the second step on the development process and its  typically involves moving the information outlined in the planning stage further into reality. Here in Qiotic 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 unique features.

  • Wireframe and design elements planning. This is where the visual layout of the website start to take shape. Using information gathered from the customer in the planning phase, begin designing the layout using a wireframe. Pencil and paper are surprisingly useful during this phase, although many tools are online to aid as well.
  • Mock-ups based on requirements analysis. Designing mock-ups in Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes qiotic for slicing and coding when the time later on.
  • Review and approval cycle. A cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both customer and qiotic 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/CSS It’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.


Development process include the bulk of the programming work, as well as loading content . 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 qiotic to diverge from the steps. 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 exercise.
  • Develop and test special features and interactivity.. Here’s where the quirk 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 content part: loading all of the content provided by the customer or writer. Here in qiotic we double check that there's no grammar or spilling mistakes.
  • Test and verify links and functionality.. This is a perfect 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 qiotic haven’t missed anything visually or functionally.


The aim of the launch phase is the last step on the development process and it’s  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 necessary because different servers can have different lineaments and unexpected behavior.

  • Polishing. Particularly if you’re not scrambling to meet the deadline, polishing a basically completed design can make a big difference. Here at qiotic can identify parts of the website that could be improved in small ways. After all, Qiotic want to be as proud of this website as the client is.
  • Transfer to live server. This 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. We make sure the customer knows about this stage, and be sensitive to timing if the website is already popular.
  • Testing. Run the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checker and the like. Qiotic want to find any mistakes rather than hearing complaints from the client or an end-user.
  • Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry). we 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.