Lesson 1.4: The Web Design Workflow

Contextualize your topicwith a subtitle

Start

Lesson 1.4:The Web Design Workflow

Closure

Interactive questions

Activity w/ Workflow

Importance of Workflow

The Web Design "Workflow"

Introduction

What is "Workflow"?

Index

Objectives

Understand the concept of a workflow and its importance in web design. Familiarize students with the key phases of the web design workflow. Apply the concept of workflow to everyday tasks to develop organizational skills.

Objectives

Workflow is an organized and repeatable set of activities that help people get things done.

What is Workflow?

01

Workflow ensures efficiency and consistency in achieving goals, collaborate more effectively, reduces errors, and streamlines operations by clarifying roles, deadlines, and steps needed to complete tasks. This leads to improved productivity, better time management, and a clearer path to achieving desired outcomes.

Introduction

+

Did you know that automated workflows can reduce errors by 50% to 70%?

of the average workweek is spent on tasks related to managing emails, searching for information, and communication.

28%

+

i

i

Handoff

Step 5.

Feedback & Testing

i

Step 4.

Design

Step 3.

i

i

Research & Planning

Step 2.

Debriefing

Step 1.

The Web Design Workflow

Ask a lot of questions so everyone is clear on the end goal for the project.

All about the customer, or client, and whatever it is they’re ordering.

Workflow starts with debriefing phase.

Debriefing

Conduct research into anything we need further clarification on including our clients, the products they offer, our client’s competition, latest design trends.

After the debriefing phase

Research & Planning:

Deliverables of Design

Preparation of deliverables the client is requesting.

After the research & planning phase

Design

Mockups

Wireframes

Sitemaps

Deliverables of Design

visual outlines that act as a blueprint to help define website structure. They help us understand the web pages we need, how they’ll be connected to one another, and the overall hierarchy for the website content.

Wireframes are used to create design structure and rather than using actual imagery and graphics they’re replaced with simple shapes and icons with varying shades of gray.

incorporate color and imagery so our designs resemble what the actual finished website would look like. Mockups are typically made after the client has approved the wireframes.

Testing refers to having individuals who would represent our client’s target audience look at our designs and give us feedback.

Important to balance between confidence in our own design decisions and having the openness to change our designs based on feedback.

Seek feedback from a variety of sources such as our peers, clients, and any other relevant parties.

Feedback & Testing

Manage Expectations

3.

Save Time

Organization

+

+

+

+

Consistency

2.

1.

4.

Feedback & Testing

Ideally we have a satisfied client with our designs, and then hand them over to the client or any other relevant department.

End of the workflow

Handoff

Interactive question

• Divide into small groups or pairs of no more than 4.

• Pick a task card and, as a group, create a workflow for completing the task.
• Consider the different phases of the web design workflow as a model for their task. Discuss and outline the steps they need to complete the task successfully.

Activity with Workflow

• What is a workflow, and why is it important in web design?
• Name the three key parts of the "Design" phase in a web design workflow.
• How does a workflow help with time management and consistency in a project?

Exit Questions

answer the following questions on a blank piece of paper

Thank you!

Interactivity and animation can be your best allies for making content fun.

Write an awesome title

We can understand images from millions of years ago, even from other cultures.

visualbeings

Interactivity and animation can be your best allies for making content fun.

Write an awesome title

We tell thousands and thousands of stories. ⅔ of our conversationsare stories.

Narrative beings

We tell thousands and thousands of stories. ⅔ of our conversationsare stories.

Narrative beings

We need to interact with one another. We learn in a collaborative way.

Socialbeings