10. Front End Web Design Wireframing

Question 1

Perché usare i wireframes?

Answer 1

Per convigliare le ‘energie’ nella direzione giusta quando sviluppi un progetto

Question 2

Cos’è un wireframe?

Answer 2

Wireframes are blueprints that help communication between
designers and programmers about the structure of the website
or app they are developing.
Wireframes represent the beginning of putting information
architecture into practice.

Question 3

Come se ne crea uno?

Answer 3

The activity of
wireframing indicates
the process of creating
basic sketches of a
website or application’s
interface to demonstrate
its structure and
layout.

Question 4

Quanti tipi di wireframes ci sono?

Answer 4

2
Low fidelity
high fidelity

Question 5

Cos’è l’adaptability?

Answer 5

Adaptability in UX design is an umbrella term and refers to
the ability of a design to adjust and respond to different
user needs, contexts, skills, and preferences.
Usually, it covers the notions of:
● Responsive design
● Accessibility

Question 6

Cos’è il responsive design?

Answer 6

Responsive design comes to help as a method of designing and
coding web pages, apps, etc., to adapt to the size and resolution
of different devices.

Question 7

Le tecniche del responsive design

Answer 7

Flexible grid: A flexible grid allows elements to adjust to
the size of the screen. This can be achieved in many ways,
depending on the framework you are using.
Flexible images: Make images scale and adjust to the size of
the screen.
Media queries & breakpoints: Allows different styles to be
applied based on the characteristics of the device.
Mobile first, graceful degradation

Question 8

Parla un po dell’Adaptive UX

Answer 8

Together with collaborative
filtering, content-based
filtering is another
possibility, but it is not
based on the users, rather on
the contents themselves.

Question 9

Accessibility in UXD

Answer 9

Web
Content Accessibility Guidelines (WCAG) by the W3C, which is
a set of guidelines for making web content more accessible
to people with disabilities.

Question 10

WAG best practises?

Answer 10

Some examples of accessibility best practices are:
● Text alternatives for non-text content (e.g, images, icons, graphs)
● Captions and other alternatives for multimedia (e.g, subtitles on videos)
● Content can be presented in different ways (e.g., provide different layout
possibilities, enlarge, read aloud, different colors)
● Content is easier to see and hear (e.g., font size, background color)
● Users can use different input modalities beyond keyboard (consider other
input modalities)
● Users can easily navigate, find content, and determine where they are
(have a clear information architecture and organize well the content!)

Question 11

Cosa sono i Wireflow?

Answer 11

Wireflows further express a flowchart by using wireframes
instead of abstract descriptions.