SlideShare a Scribd company logo
1 of 107
@Ben_Hall 
Ben@BenHal l .me.uk 
Blog.BenHal l .me.uk
What Developers 
Need To Know 
About Visual Design 
@Ben_Hal l 
Ben@BenHal l .me.uk 
Blog.BenHal l .me.uk
Who exactly is Ben Hall? 
I am not a designer 
Ocelot Uproar
Follow 
me 
and 
my 
drunken 
activities 
@Ben_Hall
Key Topics 
1. Layout 
2. Images & Icons 
3. Colours 
4. Typography 
5. Feedback
Why design matters?
At tract ive things work bet ter 
http://www.jnd.org/dn.mss/CH01.pdf
Emot ional react ion 
http://www.jnd.org/dn.mss/emotion_design_at.html
O p i n i o n a r e f o r m e d b e f o r e w e ’ v e e v e n r e a l i s e d 
Preconceived expectat ions
Resul t === inf luence / 
credi tabi l i ty
Sof tware Craf tsmanship 
“ R a i s i n g t h e b a r o f p r o f e s s i o n a l s o f t w a r e d e v e l o p m e n t ”
In Startup, everyone should be 
a designer
Pa t t e r n s , Pr a c t i c e s , He r e t i c s , Ru l e s , L o g i c . TDD, 
Fe e d b a c k Cy c l e s . 
Design is very simi lar to code
h t t p s : / /me d i um. c om/ t h e - y e a r - o f - t h e - l o o k i n g - 
g l a s s / j u n i o r - d e s i g n e r s -vs- s e n i o r - d e s i g n e r s - 
f b e 4 8 3 d 3 b 5 1 e 
Junior Designers vs. Senior 
Designers
Layout
The right side of the brain looks at 
visual reference as a whole then 
works its way into noticing finer 
details 
The left side first sees the 
details and puts them together 
to form the bigger picture 
http://blog.usabilla.com/how-the-left-brain-right-brain-theory-improves-the-user-experience/
whi tespace
IF EVERYTHING HAS IT, 
NOTHING DOES. 
EMPHASIS
I f e v e r y t h i n g h a s i t , n o t h i n g d o e s . 
Emphasis
I f e v e r y t h i n g h a s i t , n o t h i n g d o e s . 
Emphasis
Golden rat io 
Two quantities are in the golden ratio if their 
ratio is the same as the ratio of their sum to 
the larger of the two quantities
1.61803398875
Twi t ter as an app example
Round v square 
http://blog.benhall.me.uk/2014/05/why-do-round-avatars-look-better-than-square/
”RECENTABLES 
WITH 
CORNERS 
ARE 
EVERYWHERE!” 
Steve Jobs
Re a l l i f e i s n ’ t s q u a r e - Road 
signs
Sharp corners take our focus 
outside the rectangle
Rounded corners take our 
focus inside the rectangle
Windows 8
Sketch layouts unt i l natural
Copy / clone to learn & train 
brain.
Images & Icons 
Picture is wor th a thousand words. 
N o o n e r e a d s o n t h e i n t e r n e t s o… 
A good picture is pr iceless.
Recogni t ion
*REAL LY* imp o r t a n t o n mo b i l e 
? 
Consistency. What does the 
user expect?
Spacing and layout mat ters
Great images create Desi re 
and expression
Stock photography
Def ine colour scheme for si te 
kuler.adobe.com
Blurry images as backgrounds
DRIVE USER ATTENTION
DRIVE USER ATTENTION
Accelerators
Opt imise images for download
Responsive icons?
COLOURS
Complementary color scheme Analogous color scheme 
Triadic color scheme Split-Complementary color scheme 
Rectangle (tetradic) color scheme Square color scheme 
http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm
BUILD PASSED 
INFO: DID YOU KNOW… 
WARNING: 10 HOURS LEFT 
WHAT ARE YOU TRYING TO ACHIEVE? 
S TOP T H I N K I NG “ R E D ” A N D 
“ E R ROR ” TO C A P U T R E 
ATTENTION
Typography
Massively 
creat ive
Works of art
Mo s t imp o r t a n t a s p e c t o f d e s i g n 
" In some ways, the most di ff icul t 
par t of design process is f inding 
the ini t ial inspi rat ion to make a 
font " ~ Karen Cheng
"Typefaces, l ike people, have thei r 
own personal i ty" - Core Brand
More engaging 
and compel l ing 
content
Looks Bet ter = Works Bet ter.
Dangerous
http://www.buzzfeed.com/hnigatu/the-difference-between-serif-and-sans-serif-explained-in-one#2fnobkk
http://i.imgur.com/MPSSfXj.jpg
Font weight – not just 100-900 
https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06
WHY IS ALL CAPS 
SHOUTING?
Experiment lots
Do n ’ t u s e mo r e t h a n t h r e e
Respond to touch EVENTS
Progress bars – cloudf lare 
example
Help users make the right 
choice in the f i rst place
Undo.
Usabi l i ty tests
Ev e r y o n e wi l l s a y y e s ! ! ! Pe o p l e a r e awe s ome . 
No t a s k i n g “ d o y o u l i k e t h i s ? ”
Chance to learn. 
Ask more than you talk. 
I t ’s l i k e a d a t e
Other people SPOT mistakes 
EASIER than the creator.
“Oh y e a h , o f c o u r s e , I d i d n ’ t 
n o t i c e ”
New startup! ! !
AND FINALLY
• Layout , Images, Colours, 
Typography, Feedback 
• J u s t l i k e c o d e… C o p y, Te s t , 
I terate, Feedback, Play. 
• Sign up to. . . TBC. Ask me. 
• Tweet me for sl ides @Ben_Hal l
What Developers Need To Know About Visual Design

More Related Content

What's hot

Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014Patrick McNeil
 
Prototype Apps in No Time
Prototype Apps in No TimePrototype Apps in No Time
Prototype Apps in No TimeTony Wang
 
2. production techniques evaluation pro forma(1) (1)
2. production techniques evaluation pro forma(1) (1)2. production techniques evaluation pro forma(1) (1)
2. production techniques evaluation pro forma(1) (1)greenj1123
 
The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...
The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...
The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...Codemotion
 
Ten Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileTen Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileVicke Cheung
 
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)JenRobbins
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overviewJenni Leder
 
Community and Github: 7/27/2011
Community and Github: 7/27/2011Community and Github: 7/27/2011
Community and Github: 7/27/2011Andy Lester
 
Project 1 production techniques evaluation
Project 1 production techniques evaluationProject 1 production techniques evaluation
Project 1 production techniques evaluationbenmcfadyen2
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignCheryl Platz
 
Brain Sketching
Brain SketchingBrain Sketching
Brain SketchingRob Keefer
 
Copywriting for UX
Copywriting for UXCopywriting for UX
Copywriting for UXTalisa Chang
 
Better. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC DesignBetter. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC Designjennifer gergen
 
Build better mobile apps and become a better person
Build better mobile apps and become a better personBuild better mobile apps and become a better person
Build better mobile apps and become a better personWillem Meints
 
proper care and feeding for your junior developer
proper care and feeding for your junior developerproper care and feeding for your junior developer
proper care and feeding for your junior developerEric St
 
2. production techniques evaluation pro forma(1)
2. production techniques evaluation pro forma(1)2. production techniques evaluation pro forma(1)
2. production techniques evaluation pro forma(1)jack edwards
 

What's hot (19)

Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014
 
Prototype Apps in No Time
Prototype Apps in No TimePrototype Apps in No Time
Prototype Apps in No Time
 
2. production techniques evaluation pro forma(1) (1)
2. production techniques evaluation pro forma(1) (1)2. production techniques evaluation pro forma(1) (1)
2. production techniques evaluation pro forma(1) (1)
 
The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...
The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...
The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...
 
Pixel Perfect Guide
Pixel Perfect GuidePixel Perfect Guide
Pixel Perfect Guide
 
Ten Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileTen Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for Mobile
 
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overview
 
Community and Github: 7/27/2011
Community and Github: 7/27/2011Community and Github: 7/27/2011
Community and Github: 7/27/2011
 
Project 1 production techniques evaluation
Project 1 production techniques evaluationProject 1 production techniques evaluation
Project 1 production techniques evaluation
 
UX Work Shop
UX Work ShopUX Work Shop
UX Work Shop
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction Design
 
Brain Sketching
Brain SketchingBrain Sketching
Brain Sketching
 
Ppp2
Ppp2Ppp2
Ppp2
 
Copywriting for UX
Copywriting for UXCopywriting for UX
Copywriting for UX
 
Better. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC DesignBetter. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC Design
 
Build better mobile apps and become a better person
Build better mobile apps and become a better personBuild better mobile apps and become a better person
Build better mobile apps and become a better person
 
proper care and feeding for your junior developer
proper care and feeding for your junior developerproper care and feeding for your junior developer
proper care and feeding for your junior developer
 
2. production techniques evaluation pro forma(1)
2. production techniques evaluation pro forma(1)2. production techniques evaluation pro forma(1)
2. production techniques evaluation pro forma(1)
 

Viewers also liked

Learning to think "The Designer Way"
Learning to think "The Designer Way"Learning to think "The Designer Way"
Learning to think "The Designer Way"Ben Hall
 
Running Docker in Development & Production (DevSum 2015)
Running Docker in Development & Production (DevSum 2015)Running Docker in Development & Production (DevSum 2015)
Running Docker in Development & Production (DevSum 2015)Ben Hall
 
Running Docker in Development & Production (#ndcoslo 2015)
Running Docker in Development & Production (#ndcoslo 2015)Running Docker in Development & Production (#ndcoslo 2015)
Running Docker in Development & Production (#ndcoslo 2015)Ben Hall
 
Tips on solving E_TOO_MANY_THINGS_TO_LEARN with Kubernetes
Tips on solving E_TOO_MANY_THINGS_TO_LEARN with KubernetesTips on solving E_TOO_MANY_THINGS_TO_LEARN with Kubernetes
Tips on solving E_TOO_MANY_THINGS_TO_LEARN with KubernetesBen Hall
 
Architecting .NET Applications for Docker and Container Based Deployments
Architecting .NET Applications for Docker and Container Based DeploymentsArchitecting .NET Applications for Docker and Container Based Deployments
Architecting .NET Applications for Docker and Container Based DeploymentsBen Hall
 
Running .NET on Docker
Running .NET on DockerRunning .NET on Docker
Running .NET on DockerBen Hall
 

Viewers also liked (6)

Learning to think "The Designer Way"
Learning to think "The Designer Way"Learning to think "The Designer Way"
Learning to think "The Designer Way"
 
Running Docker in Development & Production (DevSum 2015)
Running Docker in Development & Production (DevSum 2015)Running Docker in Development & Production (DevSum 2015)
Running Docker in Development & Production (DevSum 2015)
 
Running Docker in Development & Production (#ndcoslo 2015)
Running Docker in Development & Production (#ndcoslo 2015)Running Docker in Development & Production (#ndcoslo 2015)
Running Docker in Development & Production (#ndcoslo 2015)
 
Tips on solving E_TOO_MANY_THINGS_TO_LEARN with Kubernetes
Tips on solving E_TOO_MANY_THINGS_TO_LEARN with KubernetesTips on solving E_TOO_MANY_THINGS_TO_LEARN with Kubernetes
Tips on solving E_TOO_MANY_THINGS_TO_LEARN with Kubernetes
 
Architecting .NET Applications for Docker and Container Based Deployments
Architecting .NET Applications for Docker and Container Based DeploymentsArchitecting .NET Applications for Docker and Container Based Deployments
Architecting .NET Applications for Docker and Container Based Deployments
 
Running .NET on Docker
Running .NET on DockerRunning .NET on Docker
Running .NET on Docker
 

Similar to What Developers Need To Know About Visual Design

What Designs Need To Know About Visual Design
What Designs Need To Know About Visual DesignWhat Designs Need To Know About Visual Design
What Designs Need To Know About Visual DesignBen Hall
 
Design "user experience" centric applications
Design "user experience" centric applicationsDesign "user experience" centric applications
Design "user experience" centric applicationsLuca Foppiano
 
Knowing How Your Business Works Makes Your Design Work
Knowing How Your Business Works Makes Your Design WorkKnowing How Your Business Works Makes Your Design Work
Knowing How Your Business Works Makes Your Design WorkMelissa Ng
 
Becoming a Better Programmer (2013)
Becoming a Better Programmer (2013)Becoming a Better Programmer (2013)
Becoming a Better Programmer (2013)Pete Goodliffe
 
Faster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypesFaster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypesOSCON Byrum
 
Listening to Data
Listening to DataListening to Data
Listening to DataKaarin Hoff
 
Collaborative Design: Lessons & Observations
Collaborative Design: Lessons & ObservationsCollaborative Design: Lessons & Observations
Collaborative Design: Lessons & ObservationsAdam Connor
 
Serendipity by Design - IxD S. America 13
Serendipity by Design - IxD S. America 13Serendipity by Design - IxD S. America 13
Serendipity by Design - IxD S. America 13Dave Malouf
 
Do We Need Better Presentations
Do We Need Better PresentationsDo We Need Better Presentations
Do We Need Better PresentationsJose Ramon Macias
 
How to Present Results to Get Results
How to Present Results to Get ResultsHow to Present Results to Get Results
How to Present Results to Get ResultsInfoTrust LLC
 
Cfa institute magazine_wow_clients_influence_colleagues
Cfa institute magazine_wow_clients_influence_colleaguesCfa institute magazine_wow_clients_influence_colleagues
Cfa institute magazine_wow_clients_influence_colleaguesChester Santos
 
EXPLORA x Pepperclip - Visualization
EXPLORA x Pepperclip - VisualizationEXPLORA x Pepperclip - Visualization
EXPLORA x Pepperclip - VisualizationDorian Dawance
 
Arts and bots
Arts and botsArts and bots
Arts and botscolbert6
 
Rookie Mistakes and Resources AARP TUG
Rookie Mistakes and Resources AARP TUGRookie Mistakes and Resources AARP TUG
Rookie Mistakes and Resources AARP TUGEmily Kund
 
Who is Doing the Work? Designing for AI across modes of interaction.
Who is Doing the Work? Designing for AI across modes of interaction.Who is Doing the Work? Designing for AI across modes of interaction.
Who is Doing the Work? Designing for AI across modes of interaction.ChrisNoessel
 
Social Media 101 for Nonprofits with Adobe Spark
Social Media 101 for Nonprofits with Adobe SparkSocial Media 101 for Nonprofits with Adobe Spark
Social Media 101 for Nonprofits with Adobe SparkTechSoup
 
Artificial Intelligence and Machine Learning
Artificial Intelligence and Machine LearningArtificial Intelligence and Machine Learning
Artificial Intelligence and Machine LearningAbhishek Sharma
 

Similar to What Developers Need To Know About Visual Design (20)

What Designs Need To Know About Visual Design
What Designs Need To Know About Visual DesignWhat Designs Need To Know About Visual Design
What Designs Need To Know About Visual Design
 
Progressing and enhancing
Progressing and enhancingProgressing and enhancing
Progressing and enhancing
 
Design "user experience" centric applications
Design "user experience" centric applicationsDesign "user experience" centric applications
Design "user experience" centric applications
 
Knowing How Your Business Works Makes Your Design Work
Knowing How Your Business Works Makes Your Design WorkKnowing How Your Business Works Makes Your Design Work
Knowing How Your Business Works Makes Your Design Work
 
Becoming a Better Programmer (2013)
Becoming a Better Programmer (2013)Becoming a Better Programmer (2013)
Becoming a Better Programmer (2013)
 
Faster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypesFaster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypes
 
Listening to Data
Listening to DataListening to Data
Listening to Data
 
Collaborative Design: Lessons & Observations
Collaborative Design: Lessons & ObservationsCollaborative Design: Lessons & Observations
Collaborative Design: Lessons & Observations
 
Serendipity by Design - IxD S. America 13
Serendipity by Design - IxD S. America 13Serendipity by Design - IxD S. America 13
Serendipity by Design - IxD S. America 13
 
Do We Need Better Presentations
Do We Need Better PresentationsDo We Need Better Presentations
Do We Need Better Presentations
 
How to Present Results to Get Results
How to Present Results to Get ResultsHow to Present Results to Get Results
How to Present Results to Get Results
 
The Art of Creativity
The Art of CreativityThe Art of Creativity
The Art of Creativity
 
Cfa institute magazine_wow_clients_influence_colleagues
Cfa institute magazine_wow_clients_influence_colleaguesCfa institute magazine_wow_clients_influence_colleagues
Cfa institute magazine_wow_clients_influence_colleagues
 
EXPLORA x Pepperclip - Visualization
EXPLORA x Pepperclip - VisualizationEXPLORA x Pepperclip - Visualization
EXPLORA x Pepperclip - Visualization
 
Arts and bots
Arts and botsArts and bots
Arts and bots
 
Rookie Mistakes and Resources AARP TUG
Rookie Mistakes and Resources AARP TUGRookie Mistakes and Resources AARP TUG
Rookie Mistakes and Resources AARP TUG
 
Cognitive Load Theory for PPT
Cognitive Load Theory for PPT Cognitive Load Theory for PPT
Cognitive Load Theory for PPT
 
Who is Doing the Work? Designing for AI across modes of interaction.
Who is Doing the Work? Designing for AI across modes of interaction.Who is Doing the Work? Designing for AI across modes of interaction.
Who is Doing the Work? Designing for AI across modes of interaction.
 
Social Media 101 for Nonprofits with Adobe Spark
Social Media 101 for Nonprofits with Adobe SparkSocial Media 101 for Nonprofits with Adobe Spark
Social Media 101 for Nonprofits with Adobe Spark
 
Artificial Intelligence and Machine Learning
Artificial Intelligence and Machine LearningArtificial Intelligence and Machine Learning
Artificial Intelligence and Machine Learning
 

More from Ben Hall

The Art Of Documentation - NDC Porto 2022
The Art Of Documentation - NDC Porto 2022The Art Of Documentation - NDC Porto 2022
The Art Of Documentation - NDC Porto 2022Ben Hall
 
The Art Of Documentation for Open Source Projects
The Art Of Documentation for Open Source ProjectsThe Art Of Documentation for Open Source Projects
The Art Of Documentation for Open Source ProjectsBen Hall
 
Three Years of Lessons Running Potentially Malicious Code Inside Containers
Three Years of Lessons Running Potentially Malicious Code Inside ContainersThree Years of Lessons Running Potentially Malicious Code Inside Containers
Three Years of Lessons Running Potentially Malicious Code Inside ContainersBen Hall
 
Containers without docker
Containers without dockerContainers without docker
Containers without dockerBen Hall
 
Deploying windows containers with kubernetes
Deploying windows containers with kubernetesDeploying windows containers with kubernetes
Deploying windows containers with kubernetesBen Hall
 
The Art of Documentation and Readme.md for Open Source Projects
The Art of Documentation and Readme.md for Open Source ProjectsThe Art of Documentation and Readme.md for Open Source Projects
The Art of Documentation and Readme.md for Open Source ProjectsBen Hall
 
How Secure Are Docker Containers?
How Secure Are Docker Containers?How Secure Are Docker Containers?
How Secure Are Docker Containers?Ben Hall
 
The Challenges of Becoming Cloud Native
The Challenges of Becoming Cloud NativeThe Challenges of Becoming Cloud Native
The Challenges of Becoming Cloud NativeBen Hall
 
Scaling Docker Containers using Kubernetes and Azure Container Service
Scaling Docker Containers using Kubernetes and Azure Container ServiceScaling Docker Containers using Kubernetes and Azure Container Service
Scaling Docker Containers using Kubernetes and Azure Container ServiceBen Hall
 
The art of documentation and readme.md
The art of documentation and readme.mdThe art of documentation and readme.md
The art of documentation and readme.mdBen Hall
 
Experimenting and Learning Kubernetes and Tensorflow
Experimenting and Learning Kubernetes and TensorflowExperimenting and Learning Kubernetes and Tensorflow
Experimenting and Learning Kubernetes and TensorflowBen Hall
 
Real World Lessons on the Pain Points of Node.JS Application
Real World Lessons on the Pain Points of Node.JS ApplicationReal World Lessons on the Pain Points of Node.JS Application
Real World Lessons on the Pain Points of Node.JS ApplicationBen Hall
 
Deploying applications to Windows Server 2016 and Windows Containers
Deploying applications to Windows Server 2016 and Windows ContainersDeploying applications to Windows Server 2016 and Windows Containers
Deploying applications to Windows Server 2016 and Windows ContainersBen Hall
 
The How and Why of Windows containers
The How and Why of Windows containersThe How and Why of Windows containers
The How and Why of Windows containersBen Hall
 
Lessons from running potentially malicious code inside containers
Lessons from running potentially malicious code inside containersLessons from running potentially malicious code inside containers
Lessons from running potentially malicious code inside containersBen Hall
 
Deploying Windows Containers on Windows Server 2016
Deploying Windows Containers on Windows Server 2016Deploying Windows Containers on Windows Server 2016
Deploying Windows Containers on Windows Server 2016Ben Hall
 
Learning Patterns for the Overworked Developer
Learning Patterns for the Overworked DeveloperLearning Patterns for the Overworked Developer
Learning Patterns for the Overworked DeveloperBen Hall
 
Real World Lessons on the Pain Points of Node.js Applications
Real World Lessons on the Pain Points of Node.js ApplicationsReal World Lessons on the Pain Points of Node.js Applications
Real World Lessons on the Pain Points of Node.js ApplicationsBen Hall
 
Implementing Google's Material Design Guidelines
Implementing Google's Material Design GuidelinesImplementing Google's Material Design Guidelines
Implementing Google's Material Design GuidelinesBen Hall
 
Real World Experience of Running Docker in Development and Production
Real World Experience of Running Docker in Development and ProductionReal World Experience of Running Docker in Development and Production
Real World Experience of Running Docker in Development and ProductionBen Hall
 

More from Ben Hall (20)

The Art Of Documentation - NDC Porto 2022
The Art Of Documentation - NDC Porto 2022The Art Of Documentation - NDC Porto 2022
The Art Of Documentation - NDC Porto 2022
 
The Art Of Documentation for Open Source Projects
The Art Of Documentation for Open Source ProjectsThe Art Of Documentation for Open Source Projects
The Art Of Documentation for Open Source Projects
 
Three Years of Lessons Running Potentially Malicious Code Inside Containers
Three Years of Lessons Running Potentially Malicious Code Inside ContainersThree Years of Lessons Running Potentially Malicious Code Inside Containers
Three Years of Lessons Running Potentially Malicious Code Inside Containers
 
Containers without docker
Containers without dockerContainers without docker
Containers without docker
 
Deploying windows containers with kubernetes
Deploying windows containers with kubernetesDeploying windows containers with kubernetes
Deploying windows containers with kubernetes
 
The Art of Documentation and Readme.md for Open Source Projects
The Art of Documentation and Readme.md for Open Source ProjectsThe Art of Documentation and Readme.md for Open Source Projects
The Art of Documentation and Readme.md for Open Source Projects
 
How Secure Are Docker Containers?
How Secure Are Docker Containers?How Secure Are Docker Containers?
How Secure Are Docker Containers?
 
The Challenges of Becoming Cloud Native
The Challenges of Becoming Cloud NativeThe Challenges of Becoming Cloud Native
The Challenges of Becoming Cloud Native
 
Scaling Docker Containers using Kubernetes and Azure Container Service
Scaling Docker Containers using Kubernetes and Azure Container ServiceScaling Docker Containers using Kubernetes and Azure Container Service
Scaling Docker Containers using Kubernetes and Azure Container Service
 
The art of documentation and readme.md
The art of documentation and readme.mdThe art of documentation and readme.md
The art of documentation and readme.md
 
Experimenting and Learning Kubernetes and Tensorflow
Experimenting and Learning Kubernetes and TensorflowExperimenting and Learning Kubernetes and Tensorflow
Experimenting and Learning Kubernetes and Tensorflow
 
Real World Lessons on the Pain Points of Node.JS Application
Real World Lessons on the Pain Points of Node.JS ApplicationReal World Lessons on the Pain Points of Node.JS Application
Real World Lessons on the Pain Points of Node.JS Application
 
Deploying applications to Windows Server 2016 and Windows Containers
Deploying applications to Windows Server 2016 and Windows ContainersDeploying applications to Windows Server 2016 and Windows Containers
Deploying applications to Windows Server 2016 and Windows Containers
 
The How and Why of Windows containers
The How and Why of Windows containersThe How and Why of Windows containers
The How and Why of Windows containers
 
Lessons from running potentially malicious code inside containers
Lessons from running potentially malicious code inside containersLessons from running potentially malicious code inside containers
Lessons from running potentially malicious code inside containers
 
Deploying Windows Containers on Windows Server 2016
Deploying Windows Containers on Windows Server 2016Deploying Windows Containers on Windows Server 2016
Deploying Windows Containers on Windows Server 2016
 
Learning Patterns for the Overworked Developer
Learning Patterns for the Overworked DeveloperLearning Patterns for the Overworked Developer
Learning Patterns for the Overworked Developer
 
Real World Lessons on the Pain Points of Node.js Applications
Real World Lessons on the Pain Points of Node.js ApplicationsReal World Lessons on the Pain Points of Node.js Applications
Real World Lessons on the Pain Points of Node.js Applications
 
Implementing Google's Material Design Guidelines
Implementing Google's Material Design GuidelinesImplementing Google's Material Design Guidelines
Implementing Google's Material Design Guidelines
 
Real World Experience of Running Docker in Development and Production
Real World Experience of Running Docker in Development and ProductionReal World Experience of Running Docker in Development and Production
Real World Experience of Running Docker in Development and Production
 

Recently uploaded

General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy ysrajece
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 

Recently uploaded (20)

General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy y
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 

What Developers Need To Know About Visual Design

Editor's Notes

  1. www2.warnerbros.com/spacejam/movie/jam.htm 1996
  2. As children we’re told that corners hurt…
  3. Steve jobs hated corners
  4. Sadly no-one told Microsoft
  5. Enhance other content on your page
  6. Valentica
  7. Works of art
  8. This is because the serif make the individual letters more distincitve and easier for our brains to recognise easier. Without the serif, the brain has to spend longer identifying the letter because the shape is less distinctive
  9. Different font weights will render typefaces specifically created for that weight, unlike the old days where bold could be just an algorithm to fatten a typeface. Obvious uses the numerical value of font-weight to enable the best representation of a typeface.
  10. Harder to read…
  11. Giving feedback
  12. Progress bars are key… make them interactive with a video too
  13. Error messages should be helpful
  14. Getting feedback