Web design and development workflow

  1. Home
  2. /
  3. Websites
  4. /
  5. Web design and development workflow
Web development methodology

My web design and development workflow process

The process I use to create websites and web applications. I began this process when I was in high school, in an attempt to speed up my work and be more efficient. It's evolved into something that works for me and most clients, and using web development tools that are the most useful for the specific tasks involved in each step of the process.

This workflow is what I’ve found works better for most projects, but every web developer and/or web design agency has its own methodology. When I've taught or managed other web developers, I always use this same workflow. (If you’re a web designer, agency, web developer or project manager, feel free to use my method).

process 1
number 1

Branding and identity

Before creating a single line of code, the first step is to craft your company's brand and identity. You'll want to decide what mood you wish to create with your designs and how best to convey that feeling through color schemes and imagery. Choose the right tone, that reflects your company culture and values. By doing this early on, you can make your website more cohesive from start to finish.

process 2
circle 2

Content creation

You need to decide what elements to use to tell your brand story. This means creating and/or choosing the written content (the copy), the images and other visual elements. This is an area where many designers get bogged down because they don't know how to write really good, readable text. If this is you, hire someone who can do it for you or make sure that a member of the team has content creation skills.

process 3
circle 3

Wireframing

The next step is wireframing with Balsamiq Mockups or XD for interface elements and storyboarding them with Adobe Illustrator. This gives everyone a good idea of what needs to be done before you can tackle building it. You may also do some brainstorming on plain paper making sure the content you generated on step 2 is correctly placed in the layout. Make sure to use the right layouts that keep your users engaged.

process 4
circle 4

Mockups and/or interactive demo

My favorite part of the design process is creating mockups because is the part of the process where everything starts coming up together. After the wireframes are approved, I add colors, styles and fonts to have an almost finished website. The client is able to see how the site will look when finished. Optionally, I can create an interactive prototype (in the case of web applications and mobile apps).

process 5
circle 5

Coding

After the mockups and demo are approved, I start developing the website or application. I like to use GitHub for version control, but other integrated source control services like Beanstalk can be used depending on team preferences. The framework we use to develop projects will depend on the requirements of the project. We've used WordPress, jQuery, Backbone.js, Angular Js and Node.js with great success.

process 6
circle 6

Testing & QA

After the first version of the website is published, I create a list of bugs and corrections that need to be made. Once all unit tests pass and the application has been thoroughly tested by QA to remove any bugs we submit the project for final approval and then push it live to our clients preferred domain or host. This can be done with the page published or in a private access where only the client is able to see it.

process 7
circle 7

Launching

Once we launch to production and make sure all SEO tags and other metadata is correct, we start to promote the new website. This will involve sharing it on our blog and social advertising networks like Facebook, Twitter and others. At this point, the website is completely finished and ready to be visited by the users, processing orders and accepting contact requests.

The following is a description of the method I use to create websites, web applications, prototypes, mobile apps and software in general.

If you’re an aspiring programmer, project manager, or currently a programmer, study the following workflow and apply to your projects to get a

Branding

The first step is

Content

Wireframes

Mockups

Prototype

Development

Testing

Launch