Implementing your designs following best practices and cutting-edge techniques about responsive design, semantic markup, accessibility, and performance will help you design compelling websites and save time.
Below are examples to help you figure out how we apply some of the best practices we covered across the six steps of the prototyping guideline.
On this page, you will find a collection of layouts and components coded in HTML & CSS with different art-direction.
The layouts are available as static HTML & CSS files, so feel free to use them as a foundation for designing your next article pages.
Article templates
-
Bari Vecchia
Unleashing the Power of Precision Engineering
-
Stadio San Siro
San Siro an iconic symbol of football's rich history and passion in Milan, Italy
-
Porsche pushes the boundaries of automotive
Unleashing the Power of Precision Engineering
-
Sandy discovers London
Join Sandy as she embarks on her inaugural journey through the nocturnal wonders of London.
List person
-
Maria Designer
-
Marco Designer
-
Francesca Account manager
Industry Experts
Use this guide as a foundation to ensure that your code is optimised for good UX.
Keep your skills up-to-date following and reading materials from these industry experts: