Lesson 1.4: The Web Design Workflow
Jasmine
Created on September 4, 2024
Over 30 million people build interactive content in Genially.
Check out what others have designed:
Transcript
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