The document discusses the ideate stage of the design thinking process, emphasizing its non-linear and iterative nature through five key stages: empathize, define, ideate, prototype, and test. It details the activities involved in ideation, including creating information architectures, wireframes, design systems, and high-fidelity designs. The importance of these components for consistent and user-friendly web design is highlighted.

2. Design Thinking -
Ideate
21 January 2023

3. “When you want to give up look at
back and then see how far you have
climbed to reach your goals”
Speakers
Arya Widya H.
// (C&D)
https://www.linkedin.com/in/arya-wh/
Letakkan foto

4. Agenda
1. Ideate

5. 01
Ideate

6. Stages of Design Thinking process
Empathize Define Ideate
Design Thinking has 5 stages
a non-linear & iterative process.
Prototype Test

7. “Stages based on problems and
solutions in the form of visual design”
What is “Ideate”?

8. 1. Information Architecture
2. Wireframe
3. Design System
4. High Fidelity
What to do at ideate?

9. 1. Information Architecture
2. Wireframe
3. Design System
4. High Fidelity
What to do at ideate?

10. Information Architecture
An overview of the
flow of activity on
the website that we
make

11. Information Architecture
Create flows that are easy for users to
remember and can be implemented by
programmers

12. 1. Information Architecture
2. Wireframe
3. Design System
4. High Fidelity
What to do at ideate?

13. Wireframe
The initial concept of the website to
be developed, the main focus is the
initial appearance of the website, data
placement, menu placement and
others

14. Wireframe

15. 1. Information Architecture
2. Wireframe
3. Design System
4. High Fidelity
What to do at ideate?

16. Preface
Know Legos?

17. Preface
Lego can be analogized as a design system, making a
shape from the smallest shape

18. Design System
Design system is a component that can
be used repeatedly in the design design
so that the designs made can be
consistent

19. Design System

20. 1. Information Architecture
2. Wireframe
3. Design System
4. High Fidelity (HiFi)
What to do at ideate?

21. High Fidelity
High Fidelity (Hifi) is a design with a 1:1
ratio with the desired design, including
color, spacing, text and others.

22. High Fidelity

23. Thank you