MODULE 3
Chapter 1
Design Production
DETAILED DESIGN
• In Conceptual design, ideas are generated and explored to create the
foundation for a project. This stage focuses on understanding the problem,
brainstorming solutions, and outlining the key features and functions of the
final product.
• Detailed design is the phase of the design process that follows conceptual
design.
• During this phase, the broad outlines and key features identified in the
conceptual design are developed into detailed specifications and plans.
• The goal of the detailed design phase is to create a complete set of
specifications that can be used to produce the final product without further
interpretation.
• This phase often involves collaboration between designers, engineers, and
other stakeholders to ensure that all aspects of the design are feasible and
Key activities in the detailed design phase include:
• Detailed Specifications: Defining all aspects of the design in detail, including
dimensions, materials etc.
• Engineering Drawings: Creating accurate and detailed drawings that specify
the exact requirements for manufacturing and assembly.
• Prototyping: Building and testing prototypes to validate the design and
identify any issues that need to be addressed.
• Component Selection: Choosing specific components, materials, and
technologies that will be used in the final product.
• Design for Manufacturability: Ensuring that the design can be efficiently and
cost-effectively manufactured, assembled, and maintained.
• Documentation: Producing comprehensive documentation, including
assembly instructions, user manuals, and maintenance guides.
Visual Design and Visual Comps
• Visual design is concerned with how a product looks, including elements like
colors, fonts and images.
• A visual designer who has been involved in ideation, sketching, and conceptual
design now produces visual comps, meaning comprehensive or composite layout.
• A visual comp is a pixel-perfect mockup of the graphical “skin,” including objects,
colors, sizes, shapes, fonts, spacing, and location.
• Composite layout is the page layout of a proposed design as initially presented by
the designer to a client, showing the relative positions of text before the final
content of those elements has been decided upon.
• The comp thus serves as a draft of the final layout, and (if approved) is used as
guide for further design changes and, ultimately, production.
WIREFRAMES
• Wireframes have long been the choice in the field for documenting, communicating,
and prototyping interaction designs.
• Wireframes, a major bread-and-butter tool of interaction designers, are a form of
prototype, popular in industry practice.
• A wireframe is a basic, two-dimensional visual representation of a web page, app
interface, or product layout.
• Wireframes comprise lines and outlines of boxes and other shapes to represent
emerging interaction designs.
• They are schematic diagrams and sketches that define a Web page or screen content
and navigational flow.
• Wireframes can be built using any drawing or word processing software package that
supports creating and manipulating shapes, such as iWork Pages, Keynote, Microsoft
PowerPoint, or Word
• The drawing aspects of wireframes are often simple, offering mainly the use of
rectangular objects that can be labeled, moved, and resized.
• Wireframes often have unfinished looking during early stages of design.
• They usually do not contain much visual content, such as finished graphics, colors,
or font choices. The idea is to create design representations quickly and
inexpensively by just drawing boxes, lines, and other shapes
• They are used to illustrate high-level concepts, approximate
visual layout, behavior, and sometimes even look and feel for an
interaction design.
• The design concept depicted in figure is comprised of a three-
column pattern for a photo manipulation application.
• A primary navigation pane (the “nav bar”) on the left-hand side
is intended to show a list of all the user’s photo collections.
• The center column is the main content display area for details,
thumbnail images and individual photos, from the collection
selected in the left pane.
• The column on the right is envisioned to show related
contextual information for the selected collection
• Note how a simple wireframe using just boxes, lines, and
a little text can be effective in describing a broad
interaction conceptual design pattern.