Wireframe & User Interface

User Experience (UX) e User Interface (UI)

When we talk about UI Design (acronym of User Interface Design) we mean a branch of UX design. What is the difference between User Experience and User Interface?

In reality, UI and UX are complementary but embrace two different areas of Web Design.

The user's digital experience is structured with a relationship of "trust"; in practice, the user is encouraged to browse a site that he / she feels to recognize as the result of his online search. Therefore, conceiving a good User Experience is equivalent to describing a company digitally, and the user will feel more motivated to make a specific conversion.

However, it is the interface that allows the user to navigate the site, which becomes an instrument in the hands of users who use it and exploit it.

To give an example, a button of a call-to-action is one of the parts that makes up an interface; it can contain different messages, be composed of colors of particular colors or variegated shapes. However, the button is not isolated, but is placed together with other elements in a website, all of which are part of a specific "project" aimed at bringing value to the user.

In this example, the individual elements are object of the Web Design of the User Interface, the actions that favor the interaction between user and site is the User Experience.

The Wireframe in Web Design and in Prototyping a website

A wireframe is a two-dimensional illustration of a page interface that focuses in particular on the allocation of space and on defining the priorities of the content, the available features and expected behaviors.

For these reasons, wireframes typically do not include any style, color or graphics. Wireframes also help to establish relationships between the various models of a website.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The value of wireframes

Wireframes are essentially structured in the prototyping phases of a site and are created in 4 hands by the Web Designer and the Information Architect:

they link the information architecture of the site to its visual design showing the paths between the different pages
allow you to view multiple types of information on the user interface at a glance
visually determine the amount of space in the paginated to consistently allocate all page elements