Example
## Chapter title
### Key concepts
### Questions, concepts to explore
### Chapter summary
Design 101 Crash Course: Learn UX/UI Design, Figma
Sketching
Key concepts
- Low detail ideas => wireframes => high detail components
- Two step process:
- Generate the idea => Sketch (repeat)
- Add detail => Refine (repeat)
Generate as many ideas you can, just basic sketch with low details. Slowly refine by adding details and creating wireframes with more UI elements. As wireframe becomes more detailed you can focus on certain elements or exact components. Start thinking more about how user interacts with the UI.
Questions, concepts to explore
- Wireframe creation
Chapter summary
Sketching process
Key concepts
Sketch in phases:
- prepare your tools, don't brake the state of flow.
- who is your audience, think about them first. what are your goals?
- give yourself time limits. don't waste time on details.
- draw device frame to guide your sketch.
- start with simple elements like footer or header from bigger picture.
- move to more detailed interactions but keep them simple. squares, circles, rectangles... all you need is 1 or 2 different shapes.
- annotate your sketches, attach explanations for your future self.
- keep going, sketch as many as you can.
- share and comment with others, listen the feedback
- start refining and build upon those basic ideas.
- add titles and annotate often, add numbers and arrows to visualize flow.
Questions, concepts to explore
Chapter summary
Sketching user flows
Key concepts
Questions, concepts to explore
Chapter summary
Additional resources
- youtube.com/video - "Learn web design for beginnes - Full Course" by Flux Academy
- youtube.com/video - "Figma Tutorial for Beginners (2024): Website Design" by Flux Academy