A lot of front-end workflow articles tend to focus on the techniques and tools being used, which is actually just a part of the workflow, the coding part. This is the common pitfall of any application development, let's start coding and any requirements, planning, documentation will reveal itself or we will make it up along the way.

Methodology

The stages described in this document try to be independent from any (software or application) development methodology being used.

Briefing

A briefing can take on different forms, from a single JIRA task to an interdisciplinary meeting that presents all of the required information.

The following has to be part of the briefing:

• (Interaction design) Interface design.
  This will visualize functionality, incorporate any UI behaviour and give context to the deliverable.
• Visual design.
  It will add some presentation if needed.
• Development.
  To set some requirements and/or constraints.

If any of the above ingredients is not included, no alternative is provided, the quality is under par or a general accepted exception is applicable, the quality of the front-end deliverables is at risk. At this stage there needs to be consensus about the nature of the deliverables and delivery method.

> Output

• Front-end deliverable and delivery method requirements.
  What and where to deliver the goods.
• Documentation requirements.
  This can include a changelog and product documentation.

~ The quality of the briefing and its information is fine and complete.

Analysis

During this stage the provided information from the briefing is checked. When it becomes apparent during this analysis that any of the information provided at the briefing stage is insufficient or the quality is below par, this information should be updated and enhanced. Research is done about the task at hand, so the best fit solution is chosen.
This stage could result in creating specific front-end JIRA tasks or updating already existing ones with a good description, proposed solution(s) and quote(s) for time estimate(s).

> Output

• Breakdown.
  A concrete breakdown of the tasks (A single tasks should not take up more than a day's work, which is effectively 6 hours).
• Description.
  A brief description of the task(s).
• Quote on tasks for time estimate(s).
  A time quote for every task (Remember that this quote not only incorporates the next stage: Coding. But all stages beyond that: Review, Delivery&Debrief and Documentation).

~ Once the task(s) have been planned, work can commence.

Coding

This is the actual production part.
Best practices, standards and ensuring the overall quality of this part is extensively covered in the front-end coding standards and best practices. Some of the basic tools can be found also be found in that part.

> Output

• Deliverable.
  Nature or requirement of the deliverable is set during the Briefing.

~ Front-end developer finished the task and is satisfied with the result.

Review

When a front-end task is completed the code should be reviewed by a peer.
Front-end code reviewing is also covered in the Unit4 Front-end Coding and Best practices reviewing section.

> Output

• Rapport.
  Communicate any findings from the review. Results may require updating the deliverable.

~Peer reviewer is satisfied with the result.

Delivery & Debrief

All the disciplines that provided input during the Briefing stage (Interaction design, Visual design & Development) should now review the front-end deliverables based on their own criteria and the requirements set at the Briefing.

> Output

• Delivery.
  Put the front-end deliverable(s) in or at its place as agreed on during the Briefing stage
• Communication.
  Let it be known that the front-end deliverable is in place.
• Presentation.
  Optionally a presentation of the created front-end deliverable can be staged.

~ The deliverables are accepted and will be implemented and released.

Document

The requirements for documentation can differ from project to project and the scale or specific task you've worked on. These are agreed upon and set during the briefing stage by the actors that require them.

> Output

• Documentation.
  Documentation of the deliverable and its context and relation to other elements.

~Documentation is finished.

• Responsive Design Workflow - Stephen Hay

• Agile alliance