Specification and Design

Planning for Development

Overview

Try to decide the specifications and design direction of your product before starting development. By taking care of these two things first, it's possible to cut back on having to go back and rework certain elements on the work being done.

Specifications are a summary that describe the development goals and objectives of a project. More simply, what the product is trying to accomplish or the functions it's going to perform. They do things like decide the system performance needed to withstand loads and what the user is capable of achieving with the use of the product.

A design document is a detailed report describing how to implement the specifications of the product. There are two levels to design, known as outline design and detailed design. Outline design documents include the scope of what the user will see, like screens, UI, and other functions. Detailed design documents cover the necessary tools for developers such as the various functions from modular structures to data structures.

Let's take a minute to think about the design and specifications for the development of an application that shares images among a group. For this case, examples of specifications are "general users can upload/post images and view them in a feed" or "admin users can approve and manage sign up users".

An outline design document for these specifications could have "layout for the image uploading page and list page" or "list of functions for general users and admins". An example for a detailed design document could be "details for user sign up and user admin functions", "details for the image upload function" or "structure of image table".

Specification and Design

Learning Objectives

It will become possible for each member of the team to visualize how users could use the application if the specifications are shared among everyone in the team.

Taking it a step further, if the design documents are also done, the project as a whole can move forward with a minimal amount of reworks because it's clear what functions are going to be implemented and how those implementations can and will be achieved. Essentially, it allows everyone to stay the course.

On the other hand, if the implementation process starts with incomplete specifications and designs, numerous instances of issues that need to be reworked may arise. Which could potentially lead to an application being unable to be completed. To keep that from happening, it is a must to attain the skills of knowing what needs to be decided with the specifications and what falls under design decisions and documentation.

Learn from Here

Here, we'll introduce the objective in creating a screen transition diagram for web pages, using a design tool known as Figma. It's recommended to start with keeping in mind the arrangement of the general layout and page structure.

  • Making a Screen Transition Diagram for Web Pages

    Determine the Functions and Elements Required for a Web Page

    Decide on the Web Page Structure

    Decide on the Layout for Each Page

    Make the Screen Transition Diagram Using Figma

Recommended Materials

  1. Design, prototype, and gather feedback all in one place with Figma

Share what you learn today!