Vectorizing Free-Form Sketches Into Website Navigation Structures

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Non-programmers face challenges in designing and structuring complex websites without requiring programming knowledge, as existing methods require translating pen-and-paper designs into electronic formats, which is time-consuming and requires technical expertise.

Innovation Solution

A computer-implemented method that vectorizes free-form site navigation structure sketches created with drawing tools into a predefined representation, such as XML, allowing for automatic translation into a web portal site structure without needing programming knowledge.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If non-programmers use traditional website design tools, then they can create web-pages, but they cannot design complex website structures without programming knowledge

Engineering Contradiction:

Improvewebsite structure design capabilityVSAvoidoperational simplicity

Core Design Contradiction:

Adaptability or versatilityVSEase of operation

Solution Approach 1:

The system captures a photograph or image of a pen-and-paper website structure sketch and automatically converts it into a digital website structure. This copying approach allows non-programmers to use their familiar paper-based design method while automatically obtaining a functional digital structure, eliminating the need to learn complex design tools.

Inventive Principle:

Principle #26Copying

2Ease of operation

If pen-and-paper design methods are used for website structures, then collaboration is facilitated, but translation into electronic form requires competencies and time

Engineering Contradiction:

Improvecollaboration easeVSAvoidtranslation time

Core Design Contradiction:

Ease of operationVSLoss of time

Solution Approach 1:

The manual mechanical process of translating paper sketches into electronic website structures is replaced by an automated image recognition and processing system. The system uses computer vision algorithms to analyze the photographed sketch, identify website structure elements, and automatically generate the corresponding electronic representation, eliminating the time-consuming manual translation process.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

3Manufacturing precision

If programming competencies are required for website structure design, then precise control is achieved, but accessibility to non-programmers is reduced

Engineering Contradiction:

Improvedesign precisionVSAvoiduser accessibility

Core Design Contradiction:

Manufacturing precisionVSEase of operation

Solution Approach 1:

The system performs self-service by automatically analyzing the photographed website sketch, identifying structural elements, and generating the electronic website structure without requiring user intervention or programming knowledge. The non-programmer simply needs to photograph their paper design, and the system handles all the complex processing and structure generation autonomously.

Inventive Principle:

Principle #25Self-service

Data Source

PatentUS9996511B2Free form website structure design

Publication Date: 2018.06.12 INTERNATIONAL BUSINESS MACHINE CORPORATION

AI summary

Website structure creation. A site navigation structure sketch is created by a free-form drawing using a drawing tool being executed on a computing device. The site navigation structure sketch is stored in pixel form, and processed by transforming the site navigation structure sketch by vectorizing the sketch into a predefined structured representation. A site navigation structure is created based on the predefined structured representation, and the site navigation structure is integrated into a web portal site structure.