Enrol to start learning
Reading is open to everyone. Enrolling is free, and it is what unlocks the audio lessons, practice tests and progress tracking.
1.5.1. Step 2: Develop Ideas
Interactive Audio Lesson
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free account
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.
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free account
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.
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free accountNow, 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.
Overview
Short Summary
In this section, students learn how to develop ideas for their digital projects through sketching wireframes and storyboarding.
Medium Summary
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 Summary
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.
Reference YouTube Videos
Audio Book
Unlock the audio lesson
The script is above and free to read. A free account plays it back, in the voice you pick.
Create a free account• 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.
Unlock the audio lesson
The script is above and free to read. A free account plays it back, in the voice you pick.
Create a free account• 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
Core takeaways and short definitions to help you quickly recall the key ideas from this section.
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
Memory Aids
Interactive tools to help you remember key concepts
Stories
Memory Tools
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.