Embedded Files
What is a wireframe?
What is a wireframe?
A wireframe is a skeletal mockup of web page, website or app, typically used for represents the fundamental architecture of the user interface, its content, and primary functionalities.
Instead of using graphical and visual elements such as colors and typography, wireframes are monochromatic, with a focus on information and usability.
Primary elements & patterns
Primary elements & patterns
Headline
Headline
In order to ease your wireframing and help you focusing on your information architecture, we deliberately have chosen to map the different heading tags to the unic and single pattern below.
Consider headlines as an helper for organising your story telling , and make your pages more user-friendly.
Paragraph
Paragraph
That you represent them as straight lines or squiggles, this pattern will be identified as blocks of paragraph text, reflecting the placement and hierarchy of the text elements.
Image
Image
Squarish, rectangular or rounded, those are the fastest and most common way for depicting a static image on a page.
You recommend you to use them whenever the image is expected to be actually part of the content.
Button
Button
Designing buttons may seem obvious, but they can become surprisingly complex due to their graphical interpretation into the different frameworks available.
Therefore we wanted to offer you a wide variety of ways to represent them.[1]
Table
Table
Some data sets are easier to digest when presented in a structured way, such as a table. If you have a data set to be displayed on a website, the table is the right tool for the job.
Divider
Divider
Dividers are used to create a visual separation between different sections of a page, such as main content and footer for example.
Input, textfield & forms
Input, textfield & forms
To help you try out more variations, ideas and spend less time editing code and design, we have been focusing on selecting and refining specific drawing patterns thus empowering you putting meaningful forms together.
Forms on a website or app, remains an important part, if not the most prominent conversation channel with your user.
Text Input
Text Input
This pattern is mapped to a basic single-line text fields. It aims to be used to input data such as: first and last name, city or country, etc.
Number Input
Number Input
This pattern when predicted, will be rendered as an input field including a built-in validation to reject non-numerical entries.
It should be used to let the user enter a number: age, amount of product, etc.
Date Input
Date Input
This pattern will generate an input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.
The resulting value includes the year, month, and day, but will not include the time.
Select
Select
Also named dropdown menu, the select element offers in a nested form a list of option to be chosen by the user .
It can be used for selecting a product type, a different package, a color variant for a product, etc.
Many input types are still missing and might be integrated upon request along the next releases of the service
Interactive elements & Navigation
Interactive elements & Navigation
Header
Header
The default provided headers include a place older for branding to identify the site as well as an horizontal navigation.
This element should helps users identify where they are and provide a quick, organized way to navigate your website.
Hero
Hero
This element will display a section with a background image and some content inside.
Depending on the way you represent it, your hero can contain headline, paragraph and button.
Carousel
Carousel
It displays a list of images displayed one at a time, it can also be envisioned as a gallery of images .
Users can interact by hovering or clicking on the left and right arrows.
Report abuse