The real meaning behind the term 'wireframe' is a wire structure very similar to what sculptors, ceramicists and engineers use to build upon with cladding material.
A wireframe is one of the fundamental stages of UI/UX design and represents the skeletal structure of an application or website. These simple drawings visualize important elements such as page layout, content placement and functionality, but do not deal with detailed design elements or colors. Wireframes allow designers and stakeholders to reach consensus early in a project, identify potential problems and quickly explore solutions. This speeds up the design process and is a critical step towards providing the best experience for the end user.
There are three types of wireframe frames: low, medium and high quality.
The low-quality wireframe is the first step in the UX/UI design process and precedes the prototype. Medium-quality and high-quality wireframes are the most similar to prototypes and are sometimes referred to as such, even though they are not the same.
When we think of the fields needed for a web dashboard, we can think of the header, menu, summary cards and a list of recent ideas. Mobile dashboard can proceed with a similar content, we can call it a tabbar for header, summary cards, recently added ideas and navigation. By adding the fields that make up an idea in the new idea, we can create basic wireframes by adding the header and footer fields in the web and mobile displays.
Headings and Texts: Headings are usually represented by thick lines or large font sizes. Paragraph texts are represented with thinner lines or small rectangles. Text content can be replaced with draft text such as "lorem ipsum" or simple lines.
Buttons and Action Items: Buttons are represented by rectangular shapes with short text indicating the action (e.g. "Click", "Send"). Using real text helps to clarify the purpose of the button.
Images and Icons: Image areas are indicated by rectangles with an "X" or lines drawn inside to indicate the boundaries of the image. Simple geometric shapes or generic icons can be used for icons.
Navigation and Menus: Navigation bars and menus are usually depicted with horizontal or vertical lines and short text representing menu items. Sub-menus or drop-down menus may be represented by smaller rectangles placed next to the main menu item.
Form Fields: Form elements such as text boxes, check boxes and radio buttons are represented by border lines and label texts. To make user input fields distinct, lines are drawn around the fields.
Footer Fields: Footer areas are usually indicated by horizontal lines at the bottom of the page and small blocks of text for links or text they may contain.
The real meaning behind the term 'wireframe' is a wire structure very similar to what sculptors, ceramicists and engineers use to build upon with cladding material.
A wireframe is one of the fundamental stages of UI/UX design and represents the skeletal structure of an application or website. These simple drawings visualize important elements such as page layout, content placement and functionality, but do not deal with detailed design elements or colors. Wireframes allow designers and stakeholders to reach consensus early in a project, identify potential problems and quickly explore solutions. This speeds up the design process and is a critical step towards providing the best experience for the end user.
There are three types of wireframe frames: low, medium and high quality.
The low-quality wireframe is the first step in the UX/UI design process and precedes the prototype. Medium-quality and high-quality wireframes are the most similar to prototypes and are sometimes referred to as such, even though they are not the same.
When we think of the fields needed for a web dashboard, we can think of the header, menu, summary cards and a list of recent ideas. Mobile dashboard can proceed with a similar content, we can call it a tabbar for header, summary cards, recently added ideas and navigation. By adding the fields that make up an idea in the new idea, we can create basic wireframes by adding the header and footer fields in the web and mobile displays.
Headings and Texts: Headings are usually represented by thick lines or large font sizes. Paragraph texts are represented with thinner lines or small rectangles. Text content can be replaced with draft text such as "lorem ipsum" or simple lines.
Buttons and Action Items: Buttons are represented by rectangular shapes with short text indicating the action (e.g. "Click", "Send"). Using real text helps to clarify the purpose of the button.
Images and Icons: Image areas are indicated by rectangles with an "X" or lines drawn inside to indicate the boundaries of the image. Simple geometric shapes or generic icons can be used for icons.
Navigation and Menus: Navigation bars and menus are usually depicted with horizontal or vertical lines and short text representing menu items. Sub-menus or drop-down menus may be represented by smaller rectangles placed next to the main menu item.
Form Fields: Form elements such as text boxes, check boxes and radio buttons are represented by border lines and label texts. To make user input fields distinct, lines are drawn around the fields.
Footer Fields: Footer areas are usually indicated by horizontal lines at the bottom of the page and small blocks of text for links or text they may contain.
