ProjectsAboutBlog
  1. +
  2. +
  3. +
  4. +

A professional web development workflow in a small team?

Published: 2020-11-16

Are you new to web development and want to know more about, what a professional workflow looks like? Maybe you're a client looking for a way to plan your new web application with the team you've hired? or maybe you are here for other reasons?

There are almost as many ways to plan a web development strategy as there are web development agencies, so that is why I wanted to give you some insights into how we plan and execute our workflow here in Kodex.

Table of contents

  • Shortly about Kodex
  • Web development tools we use at Kodex
  • First meeting with a client
  • Gather as much data as possible
  • Start sketching your application
  • Designing the custom backend
  • Fullstack development
  • Testing the website functionalities and specs.

Shortly about Kodex

To begin with, I want to state, that Kodex exists of our Creative Director Frederik Launborg being in charge of doing mock-ups, logos, prototypes, UX design to name a few. I'm myself is an educated web developer, primarily in charge of developing and optimizing web applications to fit the newest standards. Since the team only consists of two people we're not as bound to general design principles as most other companies - for example, we like to involve our clients in the design phase as much as possible, to find provide them with the website that fits their need exactly. Other companies rarely include their customers much in the decision making about what their web page should contain and how it should be structured since their workflow and organization is bound to strict company-related values and principles that rarely can be bend.

In short terms: We want to provide our customers with the web application they need - and therefore we value their input.

Web development tools we use at Kodex

Before we get into talking about how we arrange our workflow, I would like to list all the tools we use in throughout the journey from sketch to finished product.

Adobe Cloud

For all our graphical content we use Adobe Creative Cloud here's a list of what we use the individual applications for:

  • For logo design and general vector drawings, we use Adobe Illustrator.
  • For mockups and web prototypes we use Adobe XD.
  • For photo-editing, we use Adobe Photoshop and occasionally Adobe Lightroom for basic photo editing.

Coding languages

All coding is done in Visual Studio code and here's a list of what languages and frameworks we are familiar with:

  • HTML
  • CSS
  • SCSS
  • Javascript
  • PHP
  • React.js
  • Gatsby.js
  • Next.js

Other tools that make our life easier

Here are some additional tools that are primarily used for planning and optimizing our workflow.

  • Google Hangouts for video meetings
  • G-Suite for mail
  • Google Drive for sharing files
  • Google Lighthouse for general testing of our web application.
  • Netlify/Vercel for deployment and testing of websites
  • Sanity for custom-tailored backend solutions.

Step 1: First meeting with a client

First meeting with your client. Kodex

The first meeting you have with a client is probably the most important meeting you will have with them throughout the entire process of building their web application. This is the meeting where you really want to know as much as possible about the client, their company/services and of course their needs. Even if you aren't necessarily intriqued by the kind of task they are offering, just try to stay open-minded and try to think about how you can make this assignment more interesting for you. Even though the client can seem very determined about what they want - you're are the expert and if you act that way you can easily give them new ideas to how they can improve on their already existing design ideas.

However, most clients don't seem to know much about what they want, other than a website that's user-friendly, fast, and appealing to their customers. If this is the case, we usually give the client a little task until we meet next time, and that is to find inspiration in some of the website they visit and try to notice what works and what don't (In their opinion). Next time you meet, they will probably have a better grasp of what they want their web application to look like.

Step 2: Gather as much data as possible

Gather as much data about your client as possible | Kodex

At Kodex we've found that gathering as much data from your client is very crucial in order to design their website. If they have some existing web content like company descriptions, blog-post, etc. Grab it and save it. You can use it in the prototype and show your client what their website would look like with their previous content. Preferably, you also want your client to send you a logo, previous style guide, images of employees, contact information, and whatever they might have on hand. If they have no data, you should ask them to start creating some content, so you can use it in the mockup. From what we've experienced, clients' needs start to change when as soon as they start to think about what they want on their website - and this is why you really want them to begin on this as early in the process as possible. This step is time-consuming for both parts, but the more planning and data collection you do, the more time you'll save in the end.

Step 3: Start sketching your application

What does a professional mockup of a website / web application look like | Kodex

At Kodex we want to sketch out as much as possible to make sure that we come up with the design that will satisfy our client. Generally, Frederik will start out by finding and defining font-types, font-sizes as well as general layout-components such as buttons, quotation-boxes, forms, and much more. Next, he'll sketch a responsive layout that works for phones as well as desktop. Usually, Frederik and I will have ongoing team meetings about what's possible within the planned bugdet.

Step 4: Designing the custom backend

Sanity | Kodex we design custom backends

We really like the idea of giving our clients the most user-friendly experience, and therefore we enjoy working with the backend framework Sanity. This gives us the freedom not only to give our customers a fully customized front-end solution - but to provide them with a tailor-made backend as well.

By looking at the mockups I plan how the back-end structure should look like. Before I start developing it, I'll consult the client to ask them if they have any specific requirements.

Step 5: Fullstack development

Fullstack development in react

Next, I'll fetch the data from the backend and start designing the front end. This process usually takes 2-3 weeks depending on how many pages the website consists of. Notice that this step also includes Search engine optimization, which has become one of the most important aspects of web development. I usually work page by page and component by component, making sure that everything is looking correct. I work by the principle of "mobile-first", where I'm styling everything in the mobile layout first and then systematically increases the screen size. For most developers, this is the easiest and most professional way.

Step 6: Testing the website functionalities and specs.

Testing the website functionalities and specs

When the coding part is finished, it's time for testing. We'll deploy the website on either Netlify or Vercel and both Frederik and I will go through all the pages systematically on both mobile and desktop devices to see if any errors occur. Next I run some more advanced tests to see if we can improve on the speed or SEO aspects of the web application.

Finally, we deliver the product back to the client and sends them an invoice.

More Insights

  1. Published at: 2020-11-17

  2. Published at: 2020-11-12

  3. Published at: 2020-04-20

  4. Published at: 2020-04-13

  5. Published at: 2020-04-11

  6. Published at: 2020-04-10

  7. Published at: 2020-04-09

  8. Published at: 2020-04-09

  9. Published at: 2020-04-08

  10. Published at: 2020-04-07

Author

Morgan Grage

Full-stack developer