SlideShare a Scribd company logo
UI practical advices
Or why it’s important to make it look “brilliant”
binary-studio.com
Why UI first?
Quick detection of weak layout
Aesthetic
pleasure
Or enjoy yourself
Show more code less
Squared wheels
More paddings
Statistic. Small.
Alignment
Grid
Colors
Hues
Working with fonts and spacing
Working with fonts and spacing
Blocks and tiles
Ubuntu
Open Sans
Lato
Bebas Neue
Montserrat
Raleway
Hovers & pointers

More Related Content

Viewers also liked

Presentacion real madrid trabajo
Presentacion real madrid trabajoPresentacion real madrid trabajo
Presentacion real madrid trabajoKiwiwiLau
 
Barra los cruzados
Barra los cruzadosBarra los cruzados
Barra los cruzadosdizaquintana
 
119 Più sicuri grazie al satellite - Fieldbus & Networks N. 88 – Settembre 20...
119 Più sicuri grazie al satellite - Fieldbus & Networks N. 88 – Settembre 20...119 Più sicuri grazie al satellite - Fieldbus & Networks N. 88 – Settembre 20...
119 Più sicuri grazie al satellite - Fieldbus & Networks N. 88 – Settembre 20...Cristian Randieri PhD
 
BEA 2015 Generating Metadata by Machine Final
BEA 2015 Generating Metadata by Machine FinalBEA 2015 Generating Metadata by Machine Final
BEA 2015 Generating Metadata by Machine FinalS. M. Hassan Zaidi
 
Secuencia didáctica weigum
Secuencia didáctica   weigumSecuencia didáctica   weigum
Secuencia didáctica weigumCarolina Weigum
 
Tarea3 comp comunic_tecnol_luis alirio lombo e.
Tarea3  comp comunic_tecnol_luis alirio lombo e.Tarea3  comp comunic_tecnol_luis alirio lombo e.
Tarea3 comp comunic_tecnol_luis alirio lombo e.lomborugo
 
Didactic sequence weigum 2016
Didactic sequence   weigum 2016Didactic sequence   weigum 2016
Didactic sequence weigum 2016Carolina Weigum
 

Viewers also liked (14)

Natália correia
Natália correiaNatália correia
Natália correia
 
Presentacion real madrid trabajo
Presentacion real madrid trabajoPresentacion real madrid trabajo
Presentacion real madrid trabajo
 
Barra los cruzados
Barra los cruzadosBarra los cruzados
Barra los cruzados
 
Applitools
ApplitoolsApplitools
Applitools
 
119 Più sicuri grazie al satellite - Fieldbus & Networks N. 88 – Settembre 20...
119 Più sicuri grazie al satellite - Fieldbus & Networks N. 88 – Settembre 20...119 Più sicuri grazie al satellite - Fieldbus & Networks N. 88 – Settembre 20...
119 Più sicuri grazie al satellite - Fieldbus & Networks N. 88 – Settembre 20...
 
BEA 2015 Generating Metadata by Machine Final
BEA 2015 Generating Metadata by Machine FinalBEA 2015 Generating Metadata by Machine Final
BEA 2015 Generating Metadata by Machine Final
 
Asthma oct 2016
Asthma oct 2016Asthma oct 2016
Asthma oct 2016
 
Matheus lópez vélez
Matheus lópez vélezMatheus lópez vélez
Matheus lópez vélez
 
Secuencia didáctica weigum
Secuencia didáctica   weigumSecuencia didáctica   weigum
Secuencia didáctica weigum
 
Idioma
IdiomaIdioma
Idioma
 
Tarea3 comp comunic_tecnol_luis alirio lombo e.
Tarea3  comp comunic_tecnol_luis alirio lombo e.Tarea3  comp comunic_tecnol_luis alirio lombo e.
Tarea3 comp comunic_tecnol_luis alirio lombo e.
 
Trabajo de informática
Trabajo de informáticaTrabajo de informática
Trabajo de informática
 
Didactic sequence weigum 2016
Didactic sequence   weigum 2016Didactic sequence   weigum 2016
Didactic sequence weigum 2016
 
Los totalitarismos
Los totalitarismosLos totalitarismos
Los totalitarismos
 

More from Binary Studio

Academy PRO: D3, part 3
Academy PRO: D3, part 3Academy PRO: D3, part 3
Academy PRO: D3, part 3Binary Studio
 
Academy PRO: D3, part 1
Academy PRO: D3, part 1Academy PRO: D3, part 1
Academy PRO: D3, part 1Binary Studio
 
Academy PRO: Cryptography 3
Academy PRO: Cryptography 3Academy PRO: Cryptography 3
Academy PRO: Cryptography 3Binary Studio
 
Academy PRO: Cryptography 1
Academy PRO: Cryptography 1Academy PRO: Cryptography 1
Academy PRO: Cryptography 1Binary Studio
 
Academy PRO: Advanced React Ecosystem. MobX
Academy PRO: Advanced React Ecosystem. MobXAcademy PRO: Advanced React Ecosystem. MobX
Academy PRO: Advanced React Ecosystem. MobXBinary Studio
 
Academy PRO: Docker. Part 4
Academy PRO: Docker. Part 4Academy PRO: Docker. Part 4
Academy PRO: Docker. Part 4Binary Studio
 
Academy PRO: Docker. Part 2
Academy PRO: Docker. Part 2Academy PRO: Docker. Part 2
Academy PRO: Docker. Part 2Binary Studio
 
Academy PRO: Docker. Part 1
Academy PRO: Docker. Part 1Academy PRO: Docker. Part 1
Academy PRO: Docker. Part 1Binary Studio
 
Binary Studio Academy 2017: JS team project - Orderly
Binary Studio Academy 2017: JS team project - OrderlyBinary Studio Academy 2017: JS team project - Orderly
Binary Studio Academy 2017: JS team project - OrderlyBinary Studio
 
Binary Studio Academy 2017: .NET team project - Unicorn
Binary Studio Academy 2017: .NET team project - UnicornBinary Studio Academy 2017: .NET team project - Unicorn
Binary Studio Academy 2017: .NET team project - UnicornBinary Studio
 
Academy PRO: React native - miscellaneous
Academy PRO: React native - miscellaneousAcademy PRO: React native - miscellaneous
Academy PRO: React native - miscellaneousBinary Studio
 
Academy PRO: React native - publish
Academy PRO: React native - publishAcademy PRO: React native - publish
Academy PRO: React native - publishBinary Studio
 
Academy PRO: React native - navigation
Academy PRO: React native - navigationAcademy PRO: React native - navigation
Academy PRO: React native - navigationBinary Studio
 
Academy PRO: React native - building first scenes
Academy PRO: React native - building first scenesAcademy PRO: React native - building first scenes
Academy PRO: React native - building first scenesBinary Studio
 
Academy PRO: React Native - introduction
Academy PRO: React Native - introductionAcademy PRO: React Native - introduction
Academy PRO: React Native - introductionBinary Studio
 
Academy PRO: Push notifications. Denis Beketsky
Academy PRO: Push notifications. Denis BeketskyAcademy PRO: Push notifications. Denis Beketsky
Academy PRO: Push notifications. Denis BeketskyBinary Studio
 
Academy PRO: Docker. Lecture 4
Academy PRO: Docker. Lecture 4Academy PRO: Docker. Lecture 4
Academy PRO: Docker. Lecture 4Binary Studio
 
Academy PRO: Docker. Lecture 3
Academy PRO: Docker. Lecture 3Academy PRO: Docker. Lecture 3
Academy PRO: Docker. Lecture 3Binary Studio
 
Academy PRO: Docker. Lecture 2
Academy PRO: Docker. Lecture 2Academy PRO: Docker. Lecture 2
Academy PRO: Docker. Lecture 2Binary Studio
 
Academy PRO: Docker. Lecture 1
Academy PRO: Docker. Lecture 1Academy PRO: Docker. Lecture 1
Academy PRO: Docker. Lecture 1Binary Studio
 

More from Binary Studio (20)

Academy PRO: D3, part 3
Academy PRO: D3, part 3Academy PRO: D3, part 3
Academy PRO: D3, part 3
 
Academy PRO: D3, part 1
Academy PRO: D3, part 1Academy PRO: D3, part 1
Academy PRO: D3, part 1
 
Academy PRO: Cryptography 3
Academy PRO: Cryptography 3Academy PRO: Cryptography 3
Academy PRO: Cryptography 3
 
Academy PRO: Cryptography 1
Academy PRO: Cryptography 1Academy PRO: Cryptography 1
Academy PRO: Cryptography 1
 
Academy PRO: Advanced React Ecosystem. MobX
Academy PRO: Advanced React Ecosystem. MobXAcademy PRO: Advanced React Ecosystem. MobX
Academy PRO: Advanced React Ecosystem. MobX
 
Academy PRO: Docker. Part 4
Academy PRO: Docker. Part 4Academy PRO: Docker. Part 4
Academy PRO: Docker. Part 4
 
Academy PRO: Docker. Part 2
Academy PRO: Docker. Part 2Academy PRO: Docker. Part 2
Academy PRO: Docker. Part 2
 
Academy PRO: Docker. Part 1
Academy PRO: Docker. Part 1Academy PRO: Docker. Part 1
Academy PRO: Docker. Part 1
 
Binary Studio Academy 2017: JS team project - Orderly
Binary Studio Academy 2017: JS team project - OrderlyBinary Studio Academy 2017: JS team project - Orderly
Binary Studio Academy 2017: JS team project - Orderly
 
Binary Studio Academy 2017: .NET team project - Unicorn
Binary Studio Academy 2017: .NET team project - UnicornBinary Studio Academy 2017: .NET team project - Unicorn
Binary Studio Academy 2017: .NET team project - Unicorn
 
Academy PRO: React native - miscellaneous
Academy PRO: React native - miscellaneousAcademy PRO: React native - miscellaneous
Academy PRO: React native - miscellaneous
 
Academy PRO: React native - publish
Academy PRO: React native - publishAcademy PRO: React native - publish
Academy PRO: React native - publish
 
Academy PRO: React native - navigation
Academy PRO: React native - navigationAcademy PRO: React native - navigation
Academy PRO: React native - navigation
 
Academy PRO: React native - building first scenes
Academy PRO: React native - building first scenesAcademy PRO: React native - building first scenes
Academy PRO: React native - building first scenes
 
Academy PRO: React Native - introduction
Academy PRO: React Native - introductionAcademy PRO: React Native - introduction
Academy PRO: React Native - introduction
 
Academy PRO: Push notifications. Denis Beketsky
Academy PRO: Push notifications. Denis BeketskyAcademy PRO: Push notifications. Denis Beketsky
Academy PRO: Push notifications. Denis Beketsky
 
Academy PRO: Docker. Lecture 4
Academy PRO: Docker. Lecture 4Academy PRO: Docker. Lecture 4
Academy PRO: Docker. Lecture 4
 
Academy PRO: Docker. Lecture 3
Academy PRO: Docker. Lecture 3Academy PRO: Docker. Lecture 3
Academy PRO: Docker. Lecture 3
 
Academy PRO: Docker. Lecture 2
Academy PRO: Docker. Lecture 2Academy PRO: Docker. Lecture 2
Academy PRO: Docker. Lecture 2
 
Academy PRO: Docker. Lecture 1
Academy PRO: Docker. Lecture 1Academy PRO: Docker. Lecture 1
Academy PRO: Docker. Lecture 1
 

Recently uploaded

Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
 
First Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User EndpointsFirst Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User EndpointsGlobus
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyanic lab
 
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamOpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamtakuyayamamoto1800
 
AI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning FrameworkAI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning FrameworkAlluxio, Inc.
 
AI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in MichelangeloAI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in MichelangeloAlluxio, Inc.
 
Studiovity film pre-production and screenwriting software
Studiovity film pre-production and screenwriting softwareStudiovity film pre-production and screenwriting software
Studiovity film pre-production and screenwriting softwareinfo611746
 
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Globus
 
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...Abortion Clinic
 
A Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdfA Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdfkalichargn70th171
 
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Globus
 
De mooiste recreatieve routes ontdekken met RouteYou en FME
De mooiste recreatieve routes ontdekken met RouteYou en FMEDe mooiste recreatieve routes ontdekken met RouteYou en FME
De mooiste recreatieve routes ontdekken met RouteYou en FMEJelle | Nordend
 
Using IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New ZealandUsing IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New ZealandIES VE
 
SOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar
 
GlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote sessionGlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote sessionGlobus
 
Advanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should KnowAdvanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should KnowPeter Caitens
 
top nidhi software solution freedownload
top nidhi software solution freedownloadtop nidhi software solution freedownload
top nidhi software solution freedownloadvrstrong314
 
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.ILBeyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.ILNatan Silnitsky
 
Accelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with PlatformlessAccelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with PlatformlessWSO2
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTier1 app
 

Recently uploaded (20)

Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024
 
First Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User EndpointsFirst Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User Endpoints
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
 
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamOpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
 
AI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning FrameworkAI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning Framework
 
AI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in MichelangeloAI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in Michelangelo
 
Studiovity film pre-production and screenwriting software
Studiovity film pre-production and screenwriting softwareStudiovity film pre-production and screenwriting software
Studiovity film pre-production and screenwriting software
 
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
 
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
 
A Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdfA Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdf
 
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...
 
De mooiste recreatieve routes ontdekken met RouteYou en FME
De mooiste recreatieve routes ontdekken met RouteYou en FMEDe mooiste recreatieve routes ontdekken met RouteYou en FME
De mooiste recreatieve routes ontdekken met RouteYou en FME
 
Using IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New ZealandUsing IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New Zealand
 
SOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBroker
 
GlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote sessionGlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote session
 
Advanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should KnowAdvanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should Know
 
top nidhi software solution freedownload
top nidhi software solution freedownloadtop nidhi software solution freedownload
top nidhi software solution freedownload
 
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.ILBeyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
 
Accelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with PlatformlessAccelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with Platformless
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
 

Academy PRO: UI practical advices