Phases of the design process

Phases of the design process

Unit II. Creative design process

sTART

Eng. Juan Antonio Domínguez Juárez

Design process

Concept

The creative design process is a multidimensional journey that begins with understanding client requirements and ends with delivering stunning designs. Within each step of the process, including research, ideation, concept development, design execution, and presentation, your team should always be working harmoniously towards a shared vision.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

Development Phase

Analytical Phase

Creative Phase

Anaytical phase

Analytical Phase

Design process

Importance

Dev phases

Sketch

• Understanding the project requirements and objectives.
• Conducting research and gathering necessary information.

• Analyzing the target audience and their preferences.
• Defining the scope and constraints of the project.
• Creating a project brief or design brief.

Wireframe

Mockup

Prototype

DESIGN PROCESS

CREATIVE PHASE

Creative Phase

Design process

Importance

Dev phases

• Experimenting with different design elements (colors, typography, layouts, etc.)
• Refining and selecting the most promising design concepts.

Sketch

• Ideation and brainstorming sessions.
• Concept development and exploration of design ideas.
• Sketching and creating rough drafts or mockups.

Wireframe

Mockup

Prototype

ANALYTICAL PHASE

DEVELOPMENT PHASE

Development Phase

Design process

Importance

Dev phases

Sketch

• Finalizing the chosen design concept.
• Creating detailed designs and layouts.
• Preparing production-ready files (e.g., vector graphics, images, layouts)

• Incorporating feedback and making necessary revisions.
• Testing and quality assurance.
• Final delivery of the design project.

Wireframe

Mockup

Prototype

Creative phase

Importance

The design process is fundamental to any creative project, providing a structure and systematic approach to address and solve design challenges efficiently and effectively.

• Clarity and focus
• User research and understanding
• Ideation and exploration
• Iteration and refinement
• Collaboration and effective communication

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

Phases of development of a website or application

In the development of products and/or applications, whether for the web or other types of computer applications, there are a series of phases that should be followed, although many professionals, depending on the type of project, may omit some or may place more or less emphasis on some phase.

• Creation of a sketch,
• Creation of a wireframe,
• A mockup,
• And finally to make a prototype.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

Sketch

Sketch as a first sketch that we make for a digital project we want to create. They are our first strokes on a sheet of paper. Currently we spend much of our time in front of a monitor, however in the midst of this digital era, the best allies of a web designer or application designer are much simpler and common tools, we refer to pencil and paper, a part of the creative process that other “non-digital” designers have been using since forever, drawing.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

The sketch has to reflect

The Sketch has to reflect the general ideas about the project...

The Sketch has to reflect the general ideas about the project, it has to answer among other questions:

Design process

• Where we will place the most characteristic elements such as logos, etc.
• Where the navigation area will be
• Where the help systems for users will be loaded.
• Where social networking services will be added
• What content areas and what service we want to present in the project

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

SKETCH

SOME TIPS

Some tips when creating a sketch

• Define the objectives and scope of the web project clearly before you start sketching. This will help you focus your sketches.
• Research and analyze examples from other similar websites to get inspiration and see what design patterns are effective.
• Start sketching on freehand paper. They are quick, easy to iterate and allow you to explore ideas freely.
• Include annotations and notes on key functionality for each section.

• Make sketches of the different main layouts: home page, internal pages, content templates, etc.
• Consider the navigation flow and how the different pages will be connected.
• Explore various options for structure, visual hierarchy and layout.
• Once you have some initial sketches, share them and get feedback from the client/team.
• Continue to refine and iterate your sketches based on the feedback.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

THE SKETCH HAS TO REFLECT

examples

Examples

Design process

Importance

Dev phases

Sketch

Wireframes

Mockup

Prototype

SOME TIPS

Wireframe

What is Wifreframe? Wireframe is a two-dimensional illustration of the interface of a page or application that focuses specifically on the allocation of space and prioritization of content, available functionality, and desired behaviors. For these reasons, wireframes usually lack typographic style, color or graphic applications, as their main focus is on functionality, behavior and content hierarchy.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

THE WIREFRAME CONNECTS...

The wireframe connects...

The wireframe connects the conceptual structure, or information architecture, with the visual design of the website or application. They help establish the functionality, and the relationships between the different screen templates. It focuses on “what the screen does, not how it looks”. Wireframes also help us to establish relationships between the different templates of a website or application.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

WIREFRAME

WIREFRAMES PURPOSES

Wireframes serve multiple purposes, helping to:

• Prioritize content by determining how much space to allocate to a given element and where that element is located.
• Connecting site information architecture for visual design, showing the connections between pages.
• Clarify the spaces and forms for displaying certain types of information on the user interface.
• Determine the intended functionality of the interface, the number of available functions, or the effect of different scenarios on the screen.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

THE WIREFRAME TO CONNECTS

SOME TIPS

Some tips when creating a Wireframe

It is important to keep in mind that wireframes are guides to the main navigation and content elements of your page or application and that the objective is not to represent the visual design, therefore;

Design process

• Use only a generic typography, although you can play with different sizes to indicate different headers and changes in the hierarchy of text information on the page.

• Do not use colors. It is recommended to use different shades of gray if we want to make distinctions between different elements.
• Do not use images or iconography. Images distract from the task of a wireframe.

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

wireframes purposes

Basis elements

Basic Wireframe Elements

Although wireframes differ from one to another, the following elements are common when creating a wireframe for a web page.

• Logo.
• Search field.
• Headers, including page title such as H1 and H2, subtitles...
• Navigation systems, including global navigation and local navigation.
• Body content.
• Share buttons.
• Contact information.
• Footer

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

SOME TIPS

logo en positivo y negativo

Wireframe and grids

In the context of graphic design, a wireframe, grid or grid is a tool for arranging graphic elements such as text and images. A grid is developed from the size of the page or our design, its function is to subdivide the space into fields and intervals, and its objective is to maintain a correct placement of the elements within the page, giving a sense of orderly structure.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

SOME TIPS

wireframe and grids

Wireframe and grids

In web design the use of the 960px grid with 12 columns has become so popular that some of the most important frameworks for responsive web development such as Twitter Bootstrap or 960 GRID system use this configuration of columns and in many of the programs to create wireframes you will find the option to design with this type of grid.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

wireframe and grids

Box Design

Box design

Wireframes have, among others, the function of structuring and hierarchizing the contents. Let's think then about the order of the information that we would like to present to the visitors, from top to bottom is the easiest, and secondly from left to right. In addition, in the case of web pages, a very common basic structure is to divide the page into three zones, header, body, and footer.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

wireframe and grids

Example

Example

Example with multiple containers for different types of content such as advertising, different services, etc. perfectly organized.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

BOX DESIGN

EXAMPLE

Example

Design process

Example with multiple containers for different types of content such as advertising, different services, etc. perfectly organized.

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

BOX DESIGN

EXAMPLE

Define hierarchy information with typography.

When we have already defined the structure with our boxes perfectly positioned, we have to see if we have correctly structured the information. The basic rule to keep in mind is that the information you want to offer to the public has to be clear, even in a black and white metal structure. Using different font sizes, bold, and/or underlining is a good formula to differentiate between the different levels of information.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

EeXAMPLE

EXAMPLE

Wireframes and responsive web.

Responsive or adaptive web design is a web design technique that seeks the correct display of the same page on different devices. Now we have to design and think responsive. Our designs, our pages or applications have to fit correctly on the device that the user is using. The responsive design reduces development time, avoids duplicate content, and increases the virality of the content as it allows to share it in a much faster and natural way.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

eXAMPLE

Tools

Tools to create wireframes

There are many free or paid tools to create wireframes, many of them also allow you to create MockUps.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

WIREFRAMES AND RESPONSIVE WEB

What is a MockUp?

The MockUp is a more advanced representation of the graphic and communicative design of a project. Generally speaking, it is a complete graphic composition that has used the wireframe as a template by introducing all the graphic and visual elements, thus becoming a scale model of a product that is used to demonstrate and test a design.

Design process

Importance

Dev process

Sketch

Wireframe

Mockup

Prototype

What is a mockup?

What is a MockUp?

Mockups include the visual details, such as colors, typography, etc., and are generally static. By looking at a mockup, you should have a good idea of what the final product will look like and a rough idea of how it might work (even if the features have not yet been developed).

Design process

Importance

Dev process

Sketch

Wireframe

Mockup

Prototype

what is a mockup?

MOCKUP ELEMENTS

Mockup elements

Elements are integrated in greater detail, we visualize an approximation of:

• Contents (they can be generic images and texts that are not going to be finally used in the development).
• Color palette, taking as reference the institutional, mission and target audience of the project.
• CSS declarations
• Dimensions of content areas and services
• Iconography

Design process

Importance

Dev process

Sketch

Wireframe

Mockup

Prototype

WHAT IS A MOCKUP?

A MOCKUP

A Mockup...

• Allows to know what information exists and where it goes;
• Can be used for design implementation;
• It is more accurate for developers.
• It is a flexible tool;
• It is easier to present to non-designers.
• It can serve as part of our budget proposal.

Design process

Importance

Dev process

Sketch

Wireframe

Mockup

Prototype

MOCKUP ELEMENTS

Some things to keep in mind.

Some things to keep in mind.

There are some mistakes that can be made when we make a design and that we must take into account when creating our mockup;

• Too many effects and details:
• Not using grids and not aligning the elements correctly:
• If you are making a website, do not make a mockup for responsive web.
• Not using a color scheme:
• The client does not understand the design concept in the first moments.
• It is difficult to read

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

A MOCKUP...

Tools

Tools for making MockUps

There are many tools that help us to create our MockUps, we can use any drawing program, either vector c or programs more oriented to image retouching.

Design process

Importance

Dev phases

Sketch

Wireframe

Mockup

Prototype

A MOCKUP...

What is a prototype?

• A prototype is an easily extendable and modifiable model (representation, demonstration or simulation) of a planned system, probably including its interface and its input/output functionality.

• The prototype is a highly detailed representation of a digital project.

Design process

Importance

Dev process

Sketch

Wireframe

Mockup

Prototype

What is a prototype?

What is a prototype?

The prototypes are navigable, sothey are used to test interaction elements such as states "on top" of buttons, form validation, icons, or any element with which the user interacts.In it you can identify and operate

• Navigation systems
• Color palette applied
• Iconography
• User experience
• Help services, search, interaction.

Design process

Importance

Dev process

Sketch

Wireframe

Mockup

Prototype

wHAT IS A PROTOTYPE?

SOME TIPS

Some tips when creating a prototype

Each section of a website has an objective and this should be clear when viewing the prototype.

• Depending on the type of prototype, whether it is a website or a multimedia application, the prototype should be more or less complete.

• It is convenient that the design team also participates in the creation of the prototype. Although it can be considered a work more related to the development teams.

• Design at actual size, respect the size of the images and contents and include the navigation structure.

Design process

Importance

Dev process

Sketch

Wireframe

Mockup

Prototype

wHAT IS A PROTOTYPE?