12 Giugno 2013
Senior Quality Assurance
"Man had landed on the moon and
young people wanted to change the world;
we all wanted to make a diﬀerence.
I wanted to make people smile.”
— Hartmut Esslinger, 1969
design changed the world
Our legacy in craftsmanship
brings form to our clients'
Our technological expertise
inspires and validates our
We deliver ideas to market
with the speed and ﬁdelity
our clients need to succeed.
We help our clients generate
ideas through insights and
We combine research, strategy, design, and engineering
to link insights to ideas and bring ideas to markets.
We uncover market insights
and craft strategies to
We shape brands by building
the brand story into the
products we create.
We understand consumer
behavior by immersing
ourselves in their world.
We create design for all of the
platforms, unifying them into a
single, consistent experience.
• Text, controls and images are aligned
• Hover and selection states highlight
and color changes
• Suitable clickable area
Understand what is possible to transfer from the design to the developed
• Color, shading, and gradient are consistent with comps.
• Check for correct padding around the edges
• Text, images, controls, and frames do not run into the edges of
• Font size, style and color are consistent for each
type of text
• Typed text (data entry) scrolls and displays
Responsive Web Design - Di cosa si tratta
This approach will simplify Web Site Design to obtain an adaptable
version for diﬀerent platforms such as desktop, tablet or
smartphone, keeping the focus on the most important elements.
Pages should be
readable on all
Never visualize the
horizontal bar in the
‘important’ need to be
visible in all
Each breakpoint requires an adaptation of the layout, with modules that change their position and
rules. Another possibility is to have a ﬂuid layout, with text and images that ﬁt proportionately in
relation to the width of the page.
Focus on the system and on the rules of the modules.
Keep the ﬂuidity of
No visual lock on the
Check that all items
carry the resize
Content need to be visible on all the
diﬀerent sizes and resolutions
• Text alignment
• Text size
• Max characters number
• End of the sentence with 3 dots
Tablet – First/Design version
Tablet – Fixed/Developed Version
OS and Browser support
It’s not realistic to think we can promise all designs will work perfectly on all devices and on all
We need to deﬁne a Gradual Support and some speciﬁc Reference Device.
Testing on the Desktop with various resolutions is an important step for understanding how the Web
Site will look on a device and help save time in testing for each device.
Chrome – Window Resizer
Guidelines outlining a Responsive Website
focus on the speciﬁc rules of the various
Each module needs to have a dedicated,
detailed section that explains the
functionality and the adaptation rules for
-Colors and fonts
-Space inside and
Make a recap…
Breakpoints And Fluidity Modules
Browser Support and OS Documentation
Most important things to
remember are the System and
testing on Real devices