Search the courses, subjects, tracks, games and features, or jump straight to a page.
Learn it your way
A short class with Sarah and her students. The other ways are under More.
Sign up free to listen. Transcripts are free to read.
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.
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.
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.
The process of refining and expressing concepts for digital projects through sketches and storyboards.
Basic visual layouts that outline the structure and components of an application.
Visual representations of user interactions and their journey through an app or site.
Focus on how users interact with digital products, aiming to enhance satisfaction.
Wireframes are plain, but their function is clear, helping us see how layouts will appear.
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.
W for Wireframe, Simple but Key; S for Storyboard, showing the user spree—think of traveling, planning to see!
WSS: Wireframe, Sketch, Storyboard – each step simplifies how we plan and portray.
Term
Wireframe
Click to flip
Term
Storyboard
Click to flip
Term
Idea Development
Click to flip
A basic visual guide outlining the layout and interface elements of a digital product.
A sequence of drawings representing the interactions and flow of user actions within an application.
The overall experience a user has when interacting with a product or service, focusing on usability and functionality.
The design and layout that users interact with, including buttons, icons, and menus.
In this section, students learn how to develop ideas for their digital projects through sketching wireframes and storyboarding.
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.
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.