7.2 - Phase 2: Developing Ideas

You've not yet enrolled in this course. Please enroll for free to listen to audio lessons, classroom podcasts and take mock test.

Interactive Audio Lesson

Listen to a student-teacher conversation explaining the topic in a relatable way.

Mood Board Creation

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

Today, we're diving into how to create a mood board. Can anyone tell me what a mood board is and its purpose?

Student 1
Student 1

Isn't it just a collage of images?

Teacher
Teacher

Great start! A mood board is indeed a collection of images, but it serves a deeper purposeโ€”it visually communicates the desired direction and feelings of your design. It should include color palettes, fonts, and inspirational imagery that relate back to your design brief. Who can tell me one element that should definitely be included on a mood board?

Student 2
Student 2

Colors! They influence how people feel about the design, right?

Teacher
Teacher

Exactly! Colors evoke emotions. For example, blue is often associated with trust. Remember the acronym **CPE**: Color, Palette, Emotion. It can help you focus on how your choices affect perception. Letโ€™s list some potential colors for different feelings. What colors would you choose for warmth?

Student 3
Student 3

Maybe orange or yellow? They make me feel happy.

Teacher
Teacher

Spot on! Now, think about how to combine these elements meaningfully. Remember that each image or font choice should tell a part of your brandโ€™s story. Letโ€™s summarize: A mood board includes colors, fonts, and images, all chosen for their emotional impact.

Sketching and Concept Generation

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

Next, weโ€™ll discuss sketching. Why do you think sketching is important in the design process?

Student 4
Student 4

It lets us try out different ideas quickly, right?

Teacher
Teacher

Exactly! Sketching is about quantity over quality initially. Aim for 10 to 15 sketches! Each should be an exploration of shapes and concepts. Remember the mnemonic **DIVE**: Diverse Ideas Visualized Easily. What happens if we focus on only one idea at the start?

Student 1
Student 1

We might miss out on better ideas!

Teacher
Teacher

Right! Each sketch also needs annotations. These explain your thought process. Can anyone give me an example of what to include in an annotation?

Student 2
Student 2

Maybe the idea behind using a certain shape?

Teacher
Teacher

Correct! Annotations can clarify choices and connect your sketches back to your design brief. So, remember to sketch more, annotate well and we keep the door open for creativity.

Digital Wireframes

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

Now letโ€™s talk about how to turn those sketches into digital wireframes. Who knows what a wireframe is?

Student 2
Student 2

Isnโ€™t it a rough layout of the design?

Teacher
Teacher

Exactly! Wireframes focus on layout, content placement, and visual hierarchy. Think of them as the *blueprint* of your identity. A simple way to remember is **LUCY**: Layout, User flow, Content, and Your vision. Why is it beneficial to create a wireframe?

Student 3
Student 3

It helps organize how our design will look and feel before finalizing!

Teacher
Teacher

Fantastic! And remember, after creating wireframes, seek peer feedback. Whatโ€™s a key aspect of constructive feedback?

Student 4
Student 4

Being specific and focusing on how it relates to the design brief?

Teacher
Teacher

Absolutely! So as you progress, aim to refine your designs and keep improving them with feedback and iteration. To recap: Digital wireframes are blueprints, they help visualize layout, and always seek peer feedback.

Choosing and Justifying Concepts

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

Finally, letโ€™s explore how to select and justify the best concept. Why do you think justification is important in design?

Student 1
Student 1

It shows why a design works and aligns with the brief!

Teacher
Teacher

Exactly! Every element of your concept should link back to your original research and design brief. Remember the **DICE**: Design, Insights, Choices, and Evidence methodology. How could someone justify choosing one sketch over another?

Student 2
Student 2

By explaining how it fits the target audience's needs?

Teacher
Teacher

Perfect! Make sure you detail the strengths of the chosen design in terms of visual communication and emotional impact. Letโ€™s summarize: Choose a strong concept, justify it with respect to your design brief, and support your choice with evidence.

Introduction & Overview

Read a summary of the section's main ideas. Choose from Basic, Medium, or Detailed.

Quick Overview

This section focuses on the ideation phase of digital design, emphasizing the importance of generating various concepts, refining them, and selecting the most effective design solutions.

Standard

In this phase, students are encouraged to explore a wide range of design ideas through sketching and annotations. They will transition from research insights to concept development by creating mood boards, sketches, and digital wireframes, ultimately selecting and justifying their preferred design concept.

Detailed

Developing Ideas in Digital Design

This section delves into the crucial second phase of the Design Cycle, where concepts generated during the inquiry and analysis phase are refined and developed into feasible design solutions. The process begins with mood board creation, which visually synthesizes the aesthetic direction based on research insights into color, typography, and imagery, guiding the overall look and feel of the digital identity.

Following this, students engage in sketching and concept generation, where they are challenged to produce a diverse range of hand-drawn ideas. This encourages creative flow and exploration without the constraints of digital tools. Each sketch should be annotated, offering explanations for the design choices made and how they reference the studentโ€™s design brief.

The next step involves digital wireframing, where the strongest concepts are translated into basic digital layouts to define visual hierarchy and structure. This is often accompanied by structured peer feedback, enabling students to receive constructive criticism on their designs.

Finally, students select their most compelling design concept for further development, rigorously justifying their choice through detailed alignment with their initial research and design brief. The focus on iterative sketching, peer feedback, and justifying design choices fosters critical thinking and enhances creative outcomes in the digital identity project.

Audio Book

Dive deep into the subject with an immersive audiobook experience.

Task 2.1: Mood Board Creation

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

Students will create a comprehensive digital mood board (using tools like Pinterest, Milanote, PureRef, or a presentation software slide) that visually represents the complete aesthetic and emotional direction of their digital identity. This should be more than just a collection of images; it's a curated visual story. It must include:

  • Precise color palettes (with hex codes).
  • Specific font examples (font names, weights, and sample text).
  • Inspirational images/photography (that capture the desired mood or style).
  • Examples of logos or graphic styles they admire and wish to emulate the feeling of.
  • Textures or patterns that resonate with their brand.
  • Keywords and descriptive adjectives.
  • Detailed Annotations: Each element must be clearly annotated, explaining why it was chosen and how it contributes to the overall mood, tone, and message of the digital identity, linking back to the design brief.

Detailed Explanation

In Task 2.1, students are required to create a mood board. This is a visual collection that helps them express the aesthetic and emotional aspects of their digital identity. A mood board serves as a thematic guide for the design process. When creating this board, they should select colors, fonts, inspiring images, logos, textures, and relevant keywords that effectively represent their brand personality. Each component on the board should have annotations, explaining its significance and relevance to their overall design goals, ensuring it ties back to the design brief.

Examples & Analogies

Think of a mood board like a vision board for a project. Just as someone might cut out pictures from magazines to represent their hopes and dreams, a student gathers images and colors that embody the essence of their personal brand. For instance, if a student wants to convey a creative and energetic identity, their mood board might include vibrant colors like bright yellow and orange, dynamic typography, and images of creative works that inspire them. This 'visual recipe' helps them maintain focus on their core message throughout the design process.

Task 2.2: Sketching and Concept Generation

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

Initial Sketches (Quantity & Diversity): Students will generate a substantial number (at least 10-15) of distinct hand-drawn sketches for their digital identity concepts. These sketches should explore a wide range of visual metaphors, abstract representations, layouts, and stylistic approaches for a potential logo, profile picture, or header design. Focus on exploring diverse ideas, not perfection. Include sketches of different logo types (e.g., wordmark, logomark, combination mark) if applicable.

Annotation for Each Sketch: Every sketch must be meticulously annotated. These annotations are crucial for explaining the underlying design choices, the elements used, the intended message, and how each concept aligns with specific aspects of the design brief (e.g., "Sketch 3 uses strong diagonal lines to convey dynamism, aligning with the 'energetic' persona in the brief. The circular element here suggests community.").

Detailed Explanation

In Task 2.2, students must create a variety of hand-drawn sketches representing different ideas for their digital identity. The goal is to explore as many concepts as possible (at least 10-15), emphasizing creativity instead of perfection. Each sketch should convey various visual approaches, such as different layouts or styles for a logo, profile picture, or header. Each sketch is also accompanied by annotations that explain its purpose, design choices, and how it relates back to the design brief. This not only helps in refining their ideas but also ensures clarity in their design intent.

Examples & Analogies

Imagine a chef brainstorming different recipes before deciding on a final dish. Just like the chef sketches various ideas for meals, students here are 'cooking up' different designs through sketches. For example, one sketch might show a logo inspired by nature, using flowing lines to represent a river, while another sketch might have sharp angles to symbolize modernity. Each sketch represents a potential 'dish' for their identity, with annotations acting like the ingredients list explaining what makes each concept unique.

Task 2.3: Digital Wireframes/Rough Layouts & Peer Feedback

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

Translate at least 3-5 of the strongest hand-drawn sketches (chosen based on initial self-reflection and alignment with the brief) into rough digital wireframes or basic layouts using their chosen design software. At this stage, focus on fundamental placement, scale, and visual hierarchy rather than intricate detail. Use simple shapes and placeholder text/images.

Structured Peer Feedback: Students will present these digital wireframes/layouts to a small group of peers for structured, constructive feedback. They will provide a brief overview of their design brief and ask specific, targeted questions (e.g., "Does this layout guide your eye effectively? Does the logo feel balanced? What message do you get from this color combination?"). Students must meticulously document all feedback received, noting common themes, surprising insights, and actionable suggestions.

Detailed Explanation

In Task 2.3, students take their best hand-drawn sketches and translate them into digital wireframes using graphic design software. These wireframes focus on the layout and organization of their designs, ensuring elements are correctly placed and sized, while the visual hierarchy conveys importance. After creating these wireframes, students will share their work with peers for feedback. This structured feedback process allows them to gain insights and suggestions, helping them refine and improve their concepts based on the perceptions of others.

Examples & Analogies

Think of this process like an architect creating a blueprint for a building. The wireframes serve as a basic outline that lays the groundwork for the final design, just as blueprints outline the structure of a building before construction begins. For example, if one student's wireframe for a logo uses too many colors, peer feedback might suggest simplifying to two colors for better brand recognition. This feedback is invaluable, like an architect adjusting their plans based on critiques to ensure a solid construction.

Task 2.4: Chosen Design & Comprehensive Justification

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

Students will carefully review all their generated concepts and documented peer feedback. They will then select the single strongest digital identity concept for further development, rigorously justifying their choice.

Comprehensive Justification: This justification must be exhaustive, explicitly and directly linking every significant design decision of the chosen concept back to the detailed design brief, specifications, and insights from their research and feedback. For example: "I selected Concept #7 (the combination mark with the abstract 'wave' icon and sans-serif wordmark) as it most effectively fulfills the design brief's requirement for a 'modern yet approachable' identity. The wave icon, inspired by my research into dynamic natural forms, conveys fluidity and innovation (key value), while the use of the Open Sans Light font for the wordmark aligns with the 'minimalist and clean' aesthetic specified in the brief. Peer feedback also confirmed this concept was the most memorable and communicated the intended 'calm yet creative' message, which directly addresses the target audience's desire for authenticity." Students should also articulate why other strong concepts were not chosen, explaining their perceived weaknesses or how they fell short of certain specifications.

Detailed Explanation

In Task 2.4, students must make a decisive choice about which design concept to take forward for development. After reviewing all their sketches and the feedback received, they will select the one they believe best meets their design objectives. They need to justify their choice thoroughly, ensuring every aspect of the selected design connects back to their initial brief and specifications. This process ensures that students are not only choosing what they like aesthetically but are making informed decisions based on research and peer insights.

Examples & Analogies

Consider how a movie director selects the most compelling script among several drafts. Similarly, students are evaluating their sketchesโ€”like scriptsโ€”and choosing the one that tells the best story about their identity. For instance, if one concept shows strong alignment with their personal values of creativity and professionalism, and peer feedback supports this designโ€™s effectiveness, it becomes the 'chosen script' they will develop further, reflecting the director's selection process in film.

Task 2.5: Detailed Design Specifications (Refined & Technical)

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

Students will meticulously refine and expand the specifications for their chosen design. This will be a highly technical document, serving as a blueprint for the creation phase. It is significantly more detailed than A.iv.

  • Precise Color Values: Reconfirm Hex, RGB, and CMYK values for all brand colors, including tints, shades, and specific rules for their application (e.g., "Primary Blue (#007BFF) for main headings and interactive elements; Secondary Grey (#4A4A4A) for body text; Accent Orange (#FF7F00) for call-to-actions only.").
  • Exact Typography System: Specify exact font files, weights, styles (e.g., Italic), and precise sizes for every typographic application (e.g., "H1: Roboto Bold, 36pt, Leading 42pt, Tracking -0.02em; Body: Open Sans Regular, 14pt, Leading 20pt, Tracking 0em"). Include rules for line length and paragraph spacing.
  • Logo Construction Details: Provide precise instructions for the logo's construction, including vector path outlines, specific geometric measurements (e.g., "icon built on a 100x100px grid with a 10px outer stroke"), corner radii, minimum clear space requirements, and exact ratios for its components. Include guidelines for usage on different color backgrounds (e.g., "white logo on dark backgrounds, color logo on light backgrounds").
  • Visual Hierarchy Instructions: Detailed directives on how elements should be sized, positioned, and contrasted to effectively guide the viewer's eye through the design and convey relative importance of information.
  • Layout Grid System: If applicable, define a specific grid system for digital assets (e.g., "All banners and web elements to adhere to an 8-column grid with 20px gutters and 40px left/right margins").
  • Imagery Style Guide: Highly specific guidelines for any imagery (e.g., "All photographic elements must be desaturated by 30% and have a warm color overlay of #FFD700 at 10% opacity," "Illustrations must utilize a limited palette of brand colors and feature thick outlines").
  • Comprehensive Usage Guidelines (Brand Guidelines Snippet): Strict rules for how the identity elements should (and should not) be used to maintain consistency and integrity (e.g., "Do not alter the proportions of the logo," "Do not use non-brand colors within the identity," "Minimum clear space around logo must be maintained," "Do not place logo on photographic backgrounds that lack sufficient contrast").
  • File Naming & Organization Conventions: Establish a clear system for naming and organizing all final design files and source files.

Detailed Explanation

Task 2.5 requires students to develop detailed and technical design specifications for their selected identity concept. This comprehensive blueprint outlines every element that will be used in the design process, ensuring consistency and clarity in implementation. Students will specify color values, typography details, logo construction measurements, visual hierarchy instructions, and even layout grids. Additionally, they will create guidelines for the imagery style and rules on how their brand elements should be used correctly to maintain visual integrity across all platforms.

Examples & Analogies

This process is akin to an engineer drafting a thorough set of blueprints for a construction project. Just as blueprints include measurements, material specifications, and design guidelines to ensure every element is executed correctly, studentsโ€™ specifications serve the same purpose for their design. For instance, specifying that the logo must be scalable and constructed within certain measurements ensures that when itโ€™s used, it will fit seamlessly in any application, much like ensuring a built structure is sound and fits within its intended space.

Definitions & Key Concepts

Learn essential terms and foundational ideas that form the basis of the topic.

Key Concepts

  • Mood Board: A visual tool for conveying the emotional direction of a design.

  • Sketching: The technique used to quickly explore ideas and concepts.

  • Wireframe: An outline or blueprint of a digital design's layout.

  • Peer Feedback: Valuable insights gained from classmates aimed at improving designs.

  • Justification: The reasons and rationale behind design decisions.

Examples & Real-Life Applications

See how the concepts apply in real-world scenarios to understand their practical implications.

Examples

  • Creating a mood board for a personal brand might include colors that represent trust and creativity, such as blue and orange, along with images that convey professionalism.

  • Sketching different logo concepts that explore various typographic and graphical combinations enables diverse creative options for a brand identity.

Memory Aids

Use mnemonics, acronyms, or visual cues to help remember key information more easily.

๐ŸŽต Rhymes Time

  • To create a mood board, don't ignore, colors, images, ideas galore!

๐Ÿง  Other Memory Gems

  • DIVE stands for Diverse Ideas Visualized Easily in sketches.

๐Ÿ“– Fascinating Stories

  • Imagine a designer embarking on a journey, gathering colors and images that speak to their soul, creating a mood board that becomes their compass in design.

๐ŸŽฏ Super Acronyms

LUCY

  • Layout
  • User flow
  • Content
  • Your vision for wireframes.

Flash Cards

Review key concepts with flashcards.

Glossary of Terms

Review the Definitions for terms.

  • Term: Mood Board

    Definition:

    A visual collection of images, colors, and typography that conveys the emotional and aesthetic direction of a design.

  • Term: Sketching

    Definition:

    The act of creating quick, rough drawings to explore ideas and concepts in the early stages of the design process.

  • Term: Wireframe

    Definition:

    A skeletal version of a digital design that outlines basic layout and structure without detailed visual elements.

  • Term: Peer Feedback

    Definition:

    Constructive criticism and insights gained from colleagues to refine and enhance design concepts.

  • Term: Justification

    Definition:

    The rationale behind design choices, explaining why certain elements are selected and how they align with project goals.