If you’re not sure what web direction entails, or if you’re a front-end developer who has never done web direction, this is a sample flow of how a front-end engineer can handle web direction. (The flow may vary depending on the company, industry, project details, and situation.)
* This example assumes web direction for creating an official company website with about 30 pages.
Web Direction Flow
The general flow is as follows:
- Requirement Definition and Proposal
- Client Hearing
- Requirement Organization
- Budget Estimation
- Proposal
- Design and Planning
- Wireframe Creation
- Website Design
- Rough Design Proposals
- CMS System Design
- Production and Development
- Design Creation
- Coding
- System Development
- Testing
- Launch
- Operation and Maintenance
- Site Updates
- Server and Security Maintenance
- Conclusion
Requirement Definition and Proposal
The details of “Requirement Definition and Proposal” are as follows:
* This is different from the requirement definition in web service projects where system development is the main focus.
Client Hearing
First, a meeting with the client is held, which also serves as an introduction. The content of the hearing includes:
- What the client wants to achieve
- Current issues
- The purpose of the website
- Design direction
- Content and materials for the site
- Server and domain status
- Supported browsers and devices
- Budget
- Deadlines and schedule
This information forms the basis for determining the overall approach moving forward.
Requirement Organization
Based on the hearing, identify what is needed to create the website:
- What is the main objective? (e.g., increase inquiries, provide information, or enhance visual appeal for sales)
- What can be done within the budget?
- How many pages will the site have?
- Is CMS or any system needed?
- Is photography required?
- Is interviewing or copywriting necessary?
- Is server environment setup required?
- Can deadlines and schedules be met?
- Design direction
Budget Estimation
Based on the organized requirements:
- Direction and progress management
- Design and planning
- Design work
- Server costs
- Coding and development
- Testing
- External partners (e.g., photographers, designers, system companies)
Sometimes, estimates from external partners are necessary depending on the scale of the project.
Proposal
Proposals include documents outlining concepts, designs, CMS features, schedules, and cost estimates, which are presented to the client. If the client has already decided to proceed, a proposal document might not be necessary.
Design and Planning
Once the proposal is accepted, the project moves to design and planning, with confirmation from the client to ensure there are no issues.
Wireframe Creation
Create wireframes and site maps that outline the layout and content of key pages, deciding their roles, presentation, and effects.
CMS System Design
Decide which pages should be easily updated through the CMS and whether to use a custom-built CMS or open-source options like WordPress.
Production and Development
Based on the design, proceed with production and development. Ensure materials such as text and photo assets are prepared by this stage to avoid delays.
Design Creation
The designer creates the main page designs based on the approved drafts.
Coding
The developer codes the site using HTML, CSS, and JavaScript based on the designs.
Testing
Once the site is complete, test across various browsers, devices, and versions, and address any issues found.
Launch
If there are no issues during testing, the site is launched. Any unforeseen issues are addressed post-launch.
Operation and Maintenance
Post-launch, ongoing operation and maintenance are carried out as needed. Tasks include:
Site Updates
Propose and implement updates based on client requests or changes in content over time.
Server and Security Maintenance
Ensure the server and CMS are updated to address vulnerabilities and maintain security.
Conclusion
The above flow is just an example based on my past projects. The exact process may vary depending on the company, industry, and project details. Being a web director requires balancing technical knowledge, communication skills, and foresight to manage schedules and respond proactively.
I hope this serves as a helpful example for those aspiring to become web directors.
* Please use this flow at your own discretion for work-related purposes.
