Our Web Design and Web Development Process: 10 Steps from Idea to Production

“Stop Thinking in Pages. Start Thinking in Systems.” – Jeremy Keith

“Responsive design gives us the opportunity to rethink our whole approach to designing for the web. We can stop designing “websites” and “mobile sites.” We can create flexible content delivery systems: sets of rules that define how our content will be presented as its context shifts.” Responsive Comping: Obtaining Signoff without Mockups

In this article we want to share with you the key steps involved in creating a successful website. We had spent years creating websites so the process is validated by our customers across many industries and different types of businesses. It consistently delivers awesome results but, at the same time, it’s not a Holy Grail. It’s not a “cookie cutter” solution or magic bullet either. Beyond mere steps, the human element is core – so we may take a little bit different path based on your specific goals.

When it comes to building a website, we try to use an iterative approach to developing your project. This means we deploy fully working version of your site to a development server from which you can interact with and give us your feedback. We also offer Responsive Design and Mobile Site Design services that can be incorporated in our Web Development Process.

Let’s now talk Web Development Process circa 2013.

1. Research and Business Discovery – Project Proposal

At this initial stage we work with our clients to define all the information that will go on the site. By understanding your vision, technical requirements, audience, and business goals, we define the core functionality and architecture of the upcoming site. We can also suggest you to use an ecommerce platform or CMS, such as Magento and WordPress, as we value their customization capabilities which can save you time and money.

2. Planning – The Project Plan

At this stage, our Project Managers work with you to lay a roadmap of your web system. If needed, we’ll also try to determine the immediate and long-term requirements for your site, including SEO and third-party integration: Social Media widgets, email subscription, and Google Analytics. The ultimate goal is to ensure that business objectives, web/mobile technologies, and design will be captured and implemented properly.

As a result of these efforts, we create The Project Plan broken into modules, milestones, dependencies, required assets and the product specification.

With a detailed project plan, our focus is on delivering amazing sites to our clients.

3. Website Structure and Sitemap Creation

Before we even get to wireframing and design, we develop the website’s information hierarchy putting business logic in a structured and reachable way. We can also work with your team on this task or use your current website structure.

Sitemap with user flow. 

Brainstorming website architecture. 

Website Structure: Primary and Secondary Navigation. 

Once finished, we send you our ideas for feedback.

4. Prototyping User Interface and Content – Web & Mobile Wireframes

Once the website architecture is clear – we understand the navigational structure, conversion and content goals – we’ll apply that vision into core pages (homepage, product/service hub pages, About Us) and designs (web, mobile and tablet devices). This is where the visual layout of your web system begins to take shape. By the way, to create wireframes, we use Balsamiq, a neat mock up tool with a high focus on usability.

“Sketchy, low-fidelity wireframes let you focus design conversations on functionality”

Creating mockups for an app feels like digital drawing…

… but with specific use-cases in mind.

5. Design aka Look-n-Feel

For a website to be effective and attractive to the visitor, it not only has to be well-structured, it needs to be modern and visually appealing. So now that we know the visual layout of the website, we turn the wireframes to our graphic designers.

The Design Process: making beautiful things happen in Photoshop. 

Designing mock-ups in Adobe Photoshop allows us to keep the design elements organized in layers that make them easily available for further slicing and coding.

A cycle of reviewing, “feedbacking” and improving the mock-ups takes place until our client is completely satisfied with the results (usually 2-3 iterations). This is the best time to make significant changes, not after the designs have been coded.

6. Back-end Development – Databases, Users and Security

Back-end development is an “invisible” element of the website. It’s responsible for databases, search engine, user authentication (login and authorization), uploads and so on. It also handles security issues. Back-end development includes all the mechanisms required to create the front-end for the visitor – aka client/server architecture. Depending on a project, we use several programming languages for this development phase – ASP, PHP, Java, C#.

Class diagram in action. 

An example of a C# code snippet.

As far as the web development process is concerned, back-end developers often work with front-end developers and designers throughout the process, learning from each other.

7. Front-end Development – It’s Coding Time

Front-end development is literally programming (coding or slicing) the visual “front” of the website. At this time, our coders will take all of the individual graphic elements from Photoshop mock-ups, and use them to create the actual website using valid XHTML and CSS, jQuery, JavaScript, current web standards, and interactive elements.

From Photoshop to HTML: Styling a Primary Navigation menu panel

 Coding complex forms

An example of a JavaScript code snippet

8. Testing

To test your website, our Quality Assurance crew works with checklists, specifications and wireframes created at the earlier stages. They will run the website through the diagnostics tools: code validators, broken-link and speed-test checkers. They will also do cross-browser check (the most recent versions of Chrome, Firefox, Internet Explorer, Safari, Opera), and mobile testing - we now operate with 30+ mobile devices for the testing purposes)

Aside from being rigorously tested, all of the properties we build is backed up using special repositories. This means we can change things and then go back to access old versions of code if required.

9. Launch

Once you give us final approval, it’s time to deliver the site. We upload the website files to your live server. Everybody’s happy now:

A company site developed on SharePoint.

10. Post Production

After your website went live, based on your feedback, visitor statistics, and new requirement we can work with you on design tweaks, SEO hacks, and even conversion rate optimization.

Make Better Use of the Web – Work with Us

DB Best will help to transform your great ideas into killer websites and web applications leveraging the latest technologies including: ASP.NET/AJAX, Microsoft Silverlight, HTML5, CSS3, JavaScript, Sharepoint and PHP. With over a decade of experience, we have helped hundreds of customers with their development projects. So when you need a set of streamlined methodologies that work effectively, our process is designed for you to produce predictable results and lower costs.

Want to learn more? Check out our YouTube channel and see why we’re the best company for your next web development project: www.youtube.com/user/dbbesttech

Related Posts:

• Our Mobile Application Development Process from Concept to Release
• How We Use SharePoint 2010 for Creating Internal and External Sites