Step 2: Develop Ideas
Enroll to start learning
You’ve not yet enrolled in this course. Please enroll for free to listen to audio lessons, classroom podcasts and take practice test.
Interactive Audio Lesson
Listen to a student-teacher conversation explaining the topic in a relatable way.
The Importance of Developing Ideas
🔒 Unlock Audio Lesson
Sign up and enroll to listen to this audio lesson
Today, we are going to explore how developing ideas is essential in our design projects. Can anyone tell me why this step is crucial?
I think it helps us figure out what we want to create?
Exactly! Developing ideas helps us articulate our vision. We plan through sketches and storyboards, making our ideas tangible before creating the actual solutions!
So, are wireframes like rough sketches of how our app will look?
Yes, wireframes allow us to focus on layout and functionality without getting lost in details. Remember, we can call it the 'W for Wireframe' mnemonic to keep this concept in mind.
And storyboards help us visualize the user's journey, right?
Correct! Storyboarding captures how users interact with our apps. It’s crucial for understanding their experience.
In summary, developing ideas through sketches and storyboards allows us to express our visions and prepares us for the next steps.
Creating Wireframes
🔒 Unlock Audio Lesson
Sign up and enroll to listen to this audio lesson
Now, let's dive deeper into wireframes. What elements do you think should be included in a wireframe?
I guess we need to mark where buttons, images, and text will go?
Exactly! A wireframe provides a basic layout, showing where elements will be positioned. Keep in mind the 'F for Functionality' — wireframes help ensure that all elements are working harmoniously.
How detailed should they be?
Great question! They should be detailed enough to convey your layout but not overly complicated—just the essentials to clarify your concept. Use the mnemonic 'S for Simple' to remember this!
To summarize, effective wireframes focus on layout and element positioning while remaining simple and functional.
Understanding Storyboarding
🔒 Unlock Audio Lesson
Sign up and enroll to listen to this audio lesson
Now, let’s talk about storyboarding. How many of you have heard about it before?
I think it’s like drawing a comic strip for our apps!
Yes! Storyboarding visualizes the user's interaction with your app. You can remember this with the mnemonic 'C for Comic'!
What kind of details do we include in each storyboard frame?
Good point! Each frame should show key actions, user emotions, and interactions so we can understand the user experience fully. Think 'A for Actions.'
In summary, storyboarding is like creating a visual narrative that illustrates the user's journey through your app.
Introduction & Overview
Read summaries of the section's main ideas at different levels of detail.
Quick Overview
Standard
The Develop Ideas stage of the MYP Design Cycle emphasizes creative thinking through sketching wireframes and storyboarding to visualize applications. Engaging with this process helps students communicate concepts and functionalities before creating their final solutions.
Detailed
Detailed Summary
In this section, we delve into the crucial phase of Develop Ideas in the MYP Design Cycle, part of the Digital Design chapter. This phase is aimed at cultivating creativity and strategic thinking in students as they prepare to convert their concepts into functional digital solutions. Key activities in this phase include:
- Sketching Wireframes: This involves creating visual blueprints that outline the basic layout and structure of their applications or websites. This step is crucial for planning the user interface and understanding navigation flow.
- Storyboarding: Students create storyboards that help visualize how users will interact with their apps or websites. This approach can also assist in planning the functionality and features that need to be developed.
These techniques are designed to enhance the students' ability to express their ideas visually, enabling them to clarify concepts, anticipate user experience, and prepare for the subsequent stages of the design cycle—creating and evaluating their solutions. By actively engaging in this process, students can develop strong foundational skills that will serve them throughout their creative and technical journeys.
Youtube Videos
Audio Book
Dive deep into the subject with an immersive audiobook experience.
Sketching Ideas
Chapter 1 of 2
🔒 Unlock Audio Chapter
Sign up and enroll to access the full audio experience
Chapter Content
• Sketch ideas (use Figma or paper).
Detailed Explanation
In this step of the design cycle, you start to bring ideas to life by sketching them out. This could be done on paper or using digital tools like Figma. The purpose of sketching is to visualize your thoughts, allowing you to see how different components of your app or design might fit together. This is where you can experiment with layouts and features without spending a lot of time or resources.
Examples & Analogies
Imagine planning a new garden. Before planting, you might sketch the layout, deciding where to place the flowers, trees, and paths. Similarly, sketching your app helps you figure out where everything goes before you start building.
Planning Structure
Chapter 2 of 2
🔒 Unlock Audio Chapter
Sign up and enroll to access the full audio experience
Chapter Content
• Plan structure (wireframes, flowcharts).
Detailed Explanation
After sketching your ideas, the next step is to plan the structure of your app. This often involves creating wireframes, which are basic blueprints of your app's layout, showing where elements like buttons and menus will be. Flowcharts can also be helpful to outline how users will navigate through your app, showing the pathways they can take based on their choices.
Examples & Analogies
Think of planning a road trip. You wouldn’t just drive without a map; you’d plan your route, identifying stops along the way. Creating a wireframe or flowchart for your app is like mapping out the best route for users to take when navigating through your app.
Key Concepts
-
Idea Development: The process of refining and expressing concepts for digital projects through sketches and storyboards.
-
Wireframes: Basic visual layouts that outline the structure and components of an application.
-
Storyboards: Visual representations of user interactions and their journey through an app or site.
-
User Experience (UX): Focus on how users interact with digital products, aiming to enhance satisfaction.
Examples & Applications
Sketching a wireframe for a food delivery app that shows where the menu, cart, and order button will be.
Creating a storyboard illustrating the steps a user takes to order food online, from selecting a meal to payment.
Memory Aids
Interactive tools to help you remember key concepts
Rhymes
Wireframes are plain, but their function is clear, helping us see how layouts will appear.
Stories
Imagine a traveler plotting their journey. They draw the path, noting each stop (like wireframes) and telling friends how the adventure unfolds (storyboarding), ensuring no detail is forgotten.
Memory Tools
W for Wireframe, Simple but Key; S for Storyboard, showing the user spree—think of traveling, planning to see!
Acronyms
WSS
Wireframe
Sketch
Storyboard – each step simplifies how we plan and portray.
Flash Cards
Glossary
- Wireframe
A basic visual guide outlining the layout and interface elements of a digital product.
- Storyboard
A sequence of drawings representing the interactions and flow of user actions within an application.
- User Experience (UX)
The overall experience a user has when interacting with a product or service, focusing on usability and functionality.
- User Interface (UI)
The design and layout that users interact with, including buttons, icons, and menus.
Reference links
Supplementary resources to enhance your learning experience.