Web Page Diagram

Help|Tutorials|Diagrams|Diagramming| 11 April 2022 | Dusan Rodina - softwareideas.net
The web page diagram is used for the web page structure design. It is a wireframing diagram type that depicts the layout of important parts. The set of web page diagrams allows you to describe the website architecture.

The Web Page Diagram describes the main and emphasized elements in the website design. Using wireframing techniques, you can separate the design from the code. The diagram allows you to focus on the web page structure and abstract it from the graphical design.

When designing your website or web application, you should define the layout of individual sections and important pages using a series of web page diagrams. The diagrams should document the key concepts and ideas within your project.

The Web Page Diagram provides plenty of tools for various web page components: Web Browser, Video, Pager, Titled Panel, Breadcrumbs, Button Group, Tabs, Alert, Slider, Search Box, Panel, Area, Paragraph, Label, Button, Check Box, On/Off Button, Radio Button, Text Box, Numeric Box, Scrollbar, List Box, Tree, Combo Box, Progress Bar, Grid, Menu, Tab Control, Group Box, Track Bar, Field List, Expansion Table, Expansion Detail, Login, Accordion Menu, Checked List Box, Thumbnail View, Map, Rating Bar, Ruler, Alphabet Bar and Loading Spinner.

Web Page Diagram
Web Page Diagram

Multi-Item Components

A multi-item component includes several items or parts within a single element. It makes the editing of a series of items easy.

The Web Page diagram offers these multi-item components:

  • Breadcrumbs
  • Button Group
  • Tabs

To edit a multi-item component double-click (or click - depending on your settings) on it. The edit box will contain names of all items separated with pipes "|" for button groups and tabs or with greater than symbol ">" for breadcrumbs.

List Components

A list component can contain other items, but it is not required. The content can be edited by clicking in the area with items that cover most part of the component.

These list components are available:

  • Checked List Box
  • List Box
  • Tree

It is possible to choose from various types of menus for the web page.

  • Accordion Menu - contains grouped items
  • Menu - a several-level menu where the first level of items is horizontal and the other levels are vertical.

Form Components

The Web Page diagram allows you to design the forms for your web pages. It includes a set of elements that can be used on forms and questionnaires:

  • Label - provides a caption for a form field.
  • Button - can be used for Submit, Reset button, or any other button in your form.
  • Check Box - allows you to add a choice to your form. It supports checked, unchecked, and indeterminate states.
  • Radio Button - supports the checked and unchecked state. Only one radio button in a group should be checked.
  • On/Off Button - supports on and off state.
  • Text Box - provides a field for entering a text value.
  • Numeric Box - a field that restricts the entered value only on numbers.
  • Combo Box - offers multiple options for choice in a collapsed list.
  • Field List - a set of various unspecified fields or a set of fields defined by a UML class.

Caption Type

A lot of web page components support the caption kind setting. It allows you to choose between defined specific texts for the component captions and vague captions.

There are these options available:

  • Custom Text - specified texts.
  • Schematic Waves - regular waves are displayed instead of texts.
  • Schematic Lines - filled rectangles are displayed instead of texts.

Download Website Diagram Software

If you are new here, you can continue by downloading our website diagram tool here:

Download the website diagram tool Software Ideas Modeler for free

New Comment

Comment