SlideShare una empresa de Scribd logo
1 de 56
Descargar para leer sin conexión
No Designer?
No Problem!
Edin Kapić

#bdc13
#nodesigner
Edin Kapić
 SharePoint Architect
 Works for Spenta / Beezy in
Barcelona
 SharePoint Server MVP
 President of Catalonian SharePoint
User Group (SUG.CAT)
@ekapic
www.edinkapic.com

sug.cat
What this session is
all about?
BcnDevCon13 - No Designer? No Problem!
BcnDevCon13 - No Designer? No Problem!
BcnDevCon13 - No Designer? No Problem!
My Assumptions
• You are developing a product or a service

• You need a product or service site or marketing
material
• You don’t have a designer or can’t afford one
• You want a good enough design to launch
Agenda
• Mindset Change

• The Four Basics
• How to Apply What Works
Mindset Change
Mindset Change

Us

Them
What do we start with?
• We know how to solve problems

• We know how to do iterative development
• We know how to prototype
• We know how to evaluate a software design
The Role of the Design
• We need design for our message

Good design
• Helps to find information
• Doesn’t get in the way
• Works to make users happy

Bad design
• Makes us lose visitors and potential customers
• Adds more bad karma to the web universe
“The Design Process”
• Common Sense

• Trial and Error
• Critical Thinking
• Practice and Experience
The Four Basics
The Four Basics Fantastics

• Layout
• Hierarchy
• Colour
• Typography
2. Layout
Layout
• The Organization for your
content
• Has two main roles
• Dividing the content into
sections
• Grouping of related
elements

• Plenty of well-known
conventions
Layout: Grids
• System of vertical lines that helps with the layout
Layout: Alignment
• The edges should line up
Layout: Alignment
• The width should be uniform for aligned elements
Layout: Fitting elements
• What if I have to align elements of different width
or that do not align perfectly?
• Center them on their respective column
2. Hierarchy
Hierarchy
• Order of Importance of your design elements
• A guided tour!

• End the tour on a Call to Action
Hierarchy: Size

This is my important message.
This is not so important message.

This is my
important
message.
This is not so important message.
Hierarchy: Colour

This is my important message.

This is my important message.

This is not so important message.

This is not so important message.
Hierarchy: Typography

This is my important message.
This is not so important
message.

This is not so important message.
Hierarchy: Position
• Top to Bottom
• Left to Right (usually)
Hierarchy: Spacing

This is my important message.

This is my important message lost
with all the other messages. This is
not so important message. This is
even less important. Maybe we
should rething the importance of
this text alltogether? Who knows.

This is not so important message. This is
even less important. Maybe we should
rething the importance of this text
alltogether? Who knows.
Hierarchy: Proximity
My Story
John the User
Two days ago

Today was a good day to write. I felt
really energized when I started to
write this post and I carried away
all the time it took me to finish it. It
was awesome.
23 comments
Last comment was today

My Story
By John the User, two days ago
Today was a good day to write. I felt
really energized when I started to
write this post and I carried away
all the time it took me to finish it. It
was awesome.
23 comments, last comment was
today
Exercise 1: Layout and
Hierarchy
3. Colour
Colour
• Colour is relative to other colours
• Colours should contrast well

• Colour transmits a mood
• Pick the colours depending on the message you want to
convey

ENERGY, DANGER, PA
SSION, LOVE

HARMONY, FRESHNE
SS, NATURE

STABILITY, CONFIDENC
E, LOYALTY, CLEANLINE
SS
BcnDevCon13 - No Designer? No Problem!
Colour: Contrast
This is my important message lost
with all the other messages. This is
not so important message. This is
even less important. Maybe we
should rething the importance of
this text alltogether? Who knows.
OK

This is my important message lost
with all the other messages. This is
not so important message. This is
even less important. Maybe we
should rething the importance of
this text alltogether? Who knows.
OK
Colour Combinations
• Monochromatic
• Analogous
• Complementary
• Triadic

• Free
Monochromatic
Analogous
Complementary
Triadic
Free or Nature-inspired
So, what should we do?
• Choose a main colour
• Use shades of gray for the rest

• Substitute one gray with a
different colour
• Evaluate
• Loop until you are satisfied
Exercise 2: Colour
4. Typography
Typography
• Display Fonts

• Text Fonts
Typography
Typography: Line Spacing
• Line height (spacing) should be proportional to the
font size
Typography: Line Spacing
• 1,5 em (150%) should be your rule of thumb
Pick your fonts
• One display font
• For headlines, logos
and emphasis

• One versatile text
font family
• For text
Font Combination
• Avoid pairing similar fonts or fonts that are too
strong

• Consider pairing a Serif and a Sans Serif font from
the same family
Exercise 3: Typography
How to Apply What
Works
“The Process”
Collect Ideas

Sketch a Design
Build a Prototype
Test and Fix
How to Copy (“Inspire
yourself”)
• Copy one element only

• Maintain an “inspiration scrapbook”
• 3 Easy Picks
• Color Scheme
• Layout
• Fonts
Design Checklist
• Is it readable?
• Size
• Contrast
• Spacing

• Is the hierarchy correct?
• Does it align?
• Does it feel good?
Useful Resources
• Grid Layout Design Articles
• http://www.designbygrid.com/
http://www.thegridsystem.org/

• Colour Contrast Checker
• http://www.snook.ca/technical/colour_contrast/colour.html

• Colour Scheme Designer
• http://colorschemedesigner.com/

• Gallery of Used Fonts
• http://fontsinuse.com/

• Well-designed pages
• http://www.awwwards.com/
Thank You!
Keep the conversation on

@ekapic
www.edinkapic.com

Más contenido relacionado

La actualidad más candente

Do's adn Don'ts of PowerPoints
Do's adn Don'ts of PowerPointsDo's adn Don'ts of PowerPoints
Do's adn Don'ts of PowerPointshansenmi
 
Logo Design _From Concept to Creation
Logo Design _From Concept to Creation Logo Design _From Concept to Creation
Logo Design _From Concept to Creation Mujeeb Riaz
 
Development pro forma
Development pro formaDevelopment pro forma
Development pro formaJamie Ellis
 
Lviv PMDay 2015 S Мирослав Гаврищук: “User-story, requirements і інші страшні...
Lviv PMDay 2015 S Мирослав Гаврищук: “User-story, requirements і інші страшні...Lviv PMDay 2015 S Мирослав Гаврищук: “User-story, requirements і інші страшні...
Lviv PMDay 2015 S Мирослав Гаврищук: “User-story, requirements і інші страшні...Lviv Startup Club
 

La actualidad más candente (6)

Do's adn Don'ts of PowerPoints
Do's adn Don'ts of PowerPointsDo's adn Don'ts of PowerPoints
Do's adn Don'ts of PowerPoints
 
Logo Design _From Concept to Creation
Logo Design _From Concept to Creation Logo Design _From Concept to Creation
Logo Design _From Concept to Creation
 
Peer feedback fmp
Peer feedback fmpPeer feedback fmp
Peer feedback fmp
 
Development pro forma
Development pro formaDevelopment pro forma
Development pro forma
 
Presentasi NulisBuku.com Club Palembang
Presentasi NulisBuku.com Club PalembangPresentasi NulisBuku.com Club Palembang
Presentasi NulisBuku.com Club Palembang
 
Lviv PMDay 2015 S Мирослав Гаврищук: “User-story, requirements і інші страшні...
Lviv PMDay 2015 S Мирослав Гаврищук: “User-story, requirements і інші страшні...Lviv PMDay 2015 S Мирослав Гаврищук: “User-story, requirements і інші страшні...
Lviv PMDay 2015 S Мирослав Гаврищук: “User-story, requirements і інші страшні...
 

Similar a BcnDevCon13 - No Designer? No Problem!

Habits of Effective Designers
Habits of Effective DesignersHabits of Effective Designers
Habits of Effective DesignersDUSPviz
 
Avalon's DM 101 - Design Tips and Tricks
Avalon's DM 101 - Design Tips and TricksAvalon's DM 101 - Design Tips and Tricks
Avalon's DM 101 - Design Tips and TricksAvalon Consulting
 
Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014DUSPviz
 
Becoming a Web Design Champion
Becoming a Web Design ChampionBecoming a Web Design Champion
Becoming a Web Design ChampionMeagan Fisher
 
Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)RJNithin
 
370_January 9_Professional Communication
370_January 9_Professional Communication370_January 9_Professional Communication
370_January 9_Professional CommunicationOhio University
 
How to present research on posters
How to present research on postersHow to present research on posters
How to present research on postersPhowpinyo Shimbhanao
 
Habits of Effective Designers - Handout
Habits of Effective Designers - HandoutHabits of Effective Designers - Handout
Habits of Effective Designers - HandoutDUSPviz
 
The Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for IDThe Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for IDJames Washok
 
Pitch-photography magazine
Pitch-photography magazinePitch-photography magazine
Pitch-photography magazineLouise Beadle
 
Silverpop Agent ROI: Keys to Creative Success
Silverpop Agent ROI: Keys to Creative SuccessSilverpop Agent ROI: Keys to Creative Success
Silverpop Agent ROI: Keys to Creative SuccessLitmus
 
Effective power pointseminar
Effective power pointseminarEffective power pointseminar
Effective power pointseminarmhendrix0007
 
How to Get the Most Out of Your Graphic and Website Designers Slides
How to Get the Most Out of Your Graphic and Website Designers SlidesHow to Get the Most Out of Your Graphic and Website Designers Slides
How to Get the Most Out of Your Graphic and Website Designers SlidesLERN_AC_2015
 
Tutorial of design basics
Tutorial of design basicsTutorial of design basics
Tutorial of design basicsThree Lee
 
Digital skills v2
Digital skills v2Digital skills v2
Digital skills v2Liam Heeley
 
Digital skills v2
Digital skills v2Digital skills v2
Digital skills v2Liam Heeley
 
7 habits of highly effective designers
7 habits of highly effective designers7 habits of highly effective designers
7 habits of highly effective designersgraphicarto
 

Similar a BcnDevCon13 - No Designer? No Problem! (20)

Habits of Effective Designers
Habits of Effective DesignersHabits of Effective Designers
Habits of Effective Designers
 
Avalon's DM 101 - Design Tips and Tricks
Avalon's DM 101 - Design Tips and TricksAvalon's DM 101 - Design Tips and Tricks
Avalon's DM 101 - Design Tips and Tricks
 
Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014
 
Becoming a Web Design Champion
Becoming a Web Design ChampionBecoming a Web Design Champion
Becoming a Web Design Champion
 
Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)
 
370_January 9_Professional Communication
370_January 9_Professional Communication370_January 9_Professional Communication
370_January 9_Professional Communication
 
Amine-AGT-Dubai
Amine-AGT-DubaiAmine-AGT-Dubai
Amine-AGT-Dubai
 
How to present research on posters
How to present research on postersHow to present research on posters
How to present research on posters
 
Habits of Effective Designers - Handout
Habits of Effective Designers - HandoutHabits of Effective Designers - Handout
Habits of Effective Designers - Handout
 
The Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for IDThe Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for ID
 
Visual design
Visual designVisual design
Visual design
 
Pitch-photography magazine
Pitch-photography magazinePitch-photography magazine
Pitch-photography magazine
 
Silverpop Agent ROI: Keys to Creative Success
Silverpop Agent ROI: Keys to Creative SuccessSilverpop Agent ROI: Keys to Creative Success
Silverpop Agent ROI: Keys to Creative Success
 
Effective power pointseminar
Effective power pointseminarEffective power pointseminar
Effective power pointseminar
 
How to Get the Most Out of Your Graphic and Website Designers Slides
How to Get the Most Out of Your Graphic and Website Designers SlidesHow to Get the Most Out of Your Graphic and Website Designers Slides
How to Get the Most Out of Your Graphic and Website Designers Slides
 
Tutorial of design basics
Tutorial of design basicsTutorial of design basics
Tutorial of design basics
 
Digital skills v2
Digital skills v2Digital skills v2
Digital skills v2
 
Digital skills
Digital skillsDigital skills
Digital skills
 
Digital skills v2
Digital skills v2Digital skills v2
Digital skills v2
 
7 habits of highly effective designers
7 habits of highly effective designers7 habits of highly effective designers
7 habits of highly effective designers
 

Más de Edin Kapic

High-Trust Add-Ins SharePoint for On-Premises Development
High-Trust Add-Ins SharePoint for On-Premises DevelopmentHigh-Trust Add-Ins SharePoint for On-Premises Development
High-Trust Add-Ins SharePoint for On-Premises DevelopmentEdin Kapic
 
Extending Authentication and Authorization
Extending Authentication and AuthorizationExtending Authentication and Authorization
Extending Authentication and AuthorizationEdin Kapic
 
Rx la joya oculta de Net
Rx la joya oculta de NetRx la joya oculta de Net
Rx la joya oculta de NetEdin Kapic
 
ESPC15 - Extending Authentication and Authorization
ESPC15 - Extending Authentication and AuthorizationESPC15 - Extending Authentication and Authorization
ESPC15 - Extending Authentication and AuthorizationEdin Kapic
 
SPS London 2015 - IoT and Room Reservation Cloud-Style
SPS London 2015 - IoT and Room Reservation Cloud-StyleSPS London 2015 - IoT and Room Reservation Cloud-Style
SPS London 2015 - IoT and Room Reservation Cloud-StyleEdin Kapic
 
SPS Belgium 2015 - High-trust Apps for On-Premises Development
SPS Belgium 2015 -  High-trust Apps for On-Premises DevelopmentSPS Belgium 2015 -  High-trust Apps for On-Premises Development
SPS Belgium 2015 - High-trust Apps for On-Premises DevelopmentEdin Kapic
 
Personal Branding for Developers
Personal Branding for DevelopersPersonal Branding for Developers
Personal Branding for DevelopersEdin Kapic
 
SharePoint Saturday Stockholm 2015 - Building Maintainable and Testable Share...
SharePoint Saturday Stockholm 2015 - Building Maintainable and Testable Share...SharePoint Saturday Stockholm 2015 - Building Maintainable and Testable Share...
SharePoint Saturday Stockholm 2015 - Building Maintainable and Testable Share...Edin Kapic
 
ESPC14 Social Business Value Demystified
ESPC14 Social Business Value DemystifiedESPC14 Social Business Value Demystified
ESPC14 Social Business Value DemystifiedEdin Kapic
 
Maintainable Testable SharePoint Components SPSBE 2014
Maintainable Testable SharePoint Components SPSBE 2014Maintainable Testable SharePoint Components SPSBE 2014
Maintainable Testable SharePoint Components SPSBE 2014Edin Kapic
 
MVP Open Day 2014 - Hacking Human Behaviour
MVP Open Day 2014 - Hacking Human BehaviourMVP Open Day 2014 - Hacking Human Behaviour
MVP Open Day 2014 - Hacking Human BehaviourEdin Kapic
 
SPS Stockholm 7 Key Things for Building a Highly-Scalable SharePoint 2013 App
SPS Stockholm 7 Key Things for Building a Highly-Scalable SharePoint 2013 AppSPS Stockholm 7 Key Things for Building a Highly-Scalable SharePoint 2013 App
SPS Stockholm 7 Key Things for Building a Highly-Scalable SharePoint 2013 AppEdin Kapic
 
7 Key Things for Building a Highly-Scalable SharePoint 2013 App
7 Key Things for Building a Highly-Scalable SharePoint 2013 App7 Key Things for Building a Highly-Scalable SharePoint 2013 App
7 Key Things for Building a Highly-Scalable SharePoint 2013 AppEdin Kapic
 
Social Business Value Demystified: Real-World Experiences
Social Business Value Demystified: Real-World ExperiencesSocial Business Value Demystified: Real-World Experiences
Social Business Value Demystified: Real-World ExperiencesEdin Kapic
 
BcnDevCon12 - Una vuelta por Orchard CMS
BcnDevCon12 - Una vuelta por Orchard CMSBcnDevCon12 - Una vuelta por Orchard CMS
BcnDevCon12 - Una vuelta por Orchard CMSEdin Kapic
 
BcnDevCon12 - CQRS explicado a mi compañero arquitecto
BcnDevCon12 - CQRS explicado a mi compañero arquitectoBcnDevCon12 - CQRS explicado a mi compañero arquitecto
BcnDevCon12 - CQRS explicado a mi compañero arquitectoEdin Kapic
 
Modelos de madurez de SharePoint
Modelos de madurez de SharePointModelos de madurez de SharePoint
Modelos de madurez de SharePointEdin Kapic
 
SharePoint 2013 Novedades y más allá (Introducción de SUG.CAT)
SharePoint 2013 Novedades y más allá (Introducción de SUG.CAT)SharePoint 2013 Novedades y más allá (Introducción de SUG.CAT)
SharePoint 2013 Novedades y más allá (Introducción de SUG.CAT)Edin Kapic
 
SUG.CAT First Monday Noviembre 2012
SUG.CAT First Monday Noviembre 2012SUG.CAT First Monday Noviembre 2012
SUG.CAT First Monday Noviembre 2012Edin Kapic
 
JavaScript per a desenvolupadors de C#
JavaScript per a desenvolupadors de C#JavaScript per a desenvolupadors de C#
JavaScript per a desenvolupadors de C#Edin Kapic
 

Más de Edin Kapic (20)

High-Trust Add-Ins SharePoint for On-Premises Development
High-Trust Add-Ins SharePoint for On-Premises DevelopmentHigh-Trust Add-Ins SharePoint for On-Premises Development
High-Trust Add-Ins SharePoint for On-Premises Development
 
Extending Authentication and Authorization
Extending Authentication and AuthorizationExtending Authentication and Authorization
Extending Authentication and Authorization
 
Rx la joya oculta de Net
Rx la joya oculta de NetRx la joya oculta de Net
Rx la joya oculta de Net
 
ESPC15 - Extending Authentication and Authorization
ESPC15 - Extending Authentication and AuthorizationESPC15 - Extending Authentication and Authorization
ESPC15 - Extending Authentication and Authorization
 
SPS London 2015 - IoT and Room Reservation Cloud-Style
SPS London 2015 - IoT and Room Reservation Cloud-StyleSPS London 2015 - IoT and Room Reservation Cloud-Style
SPS London 2015 - IoT and Room Reservation Cloud-Style
 
SPS Belgium 2015 - High-trust Apps for On-Premises Development
SPS Belgium 2015 -  High-trust Apps for On-Premises DevelopmentSPS Belgium 2015 -  High-trust Apps for On-Premises Development
SPS Belgium 2015 - High-trust Apps for On-Premises Development
 
Personal Branding for Developers
Personal Branding for DevelopersPersonal Branding for Developers
Personal Branding for Developers
 
SharePoint Saturday Stockholm 2015 - Building Maintainable and Testable Share...
SharePoint Saturday Stockholm 2015 - Building Maintainable and Testable Share...SharePoint Saturday Stockholm 2015 - Building Maintainable and Testable Share...
SharePoint Saturday Stockholm 2015 - Building Maintainable and Testable Share...
 
ESPC14 Social Business Value Demystified
ESPC14 Social Business Value DemystifiedESPC14 Social Business Value Demystified
ESPC14 Social Business Value Demystified
 
Maintainable Testable SharePoint Components SPSBE 2014
Maintainable Testable SharePoint Components SPSBE 2014Maintainable Testable SharePoint Components SPSBE 2014
Maintainable Testable SharePoint Components SPSBE 2014
 
MVP Open Day 2014 - Hacking Human Behaviour
MVP Open Day 2014 - Hacking Human BehaviourMVP Open Day 2014 - Hacking Human Behaviour
MVP Open Day 2014 - Hacking Human Behaviour
 
SPS Stockholm 7 Key Things for Building a Highly-Scalable SharePoint 2013 App
SPS Stockholm 7 Key Things for Building a Highly-Scalable SharePoint 2013 AppSPS Stockholm 7 Key Things for Building a Highly-Scalable SharePoint 2013 App
SPS Stockholm 7 Key Things for Building a Highly-Scalable SharePoint 2013 App
 
7 Key Things for Building a Highly-Scalable SharePoint 2013 App
7 Key Things for Building a Highly-Scalable SharePoint 2013 App7 Key Things for Building a Highly-Scalable SharePoint 2013 App
7 Key Things for Building a Highly-Scalable SharePoint 2013 App
 
Social Business Value Demystified: Real-World Experiences
Social Business Value Demystified: Real-World ExperiencesSocial Business Value Demystified: Real-World Experiences
Social Business Value Demystified: Real-World Experiences
 
BcnDevCon12 - Una vuelta por Orchard CMS
BcnDevCon12 - Una vuelta por Orchard CMSBcnDevCon12 - Una vuelta por Orchard CMS
BcnDevCon12 - Una vuelta por Orchard CMS
 
BcnDevCon12 - CQRS explicado a mi compañero arquitecto
BcnDevCon12 - CQRS explicado a mi compañero arquitectoBcnDevCon12 - CQRS explicado a mi compañero arquitecto
BcnDevCon12 - CQRS explicado a mi compañero arquitecto
 
Modelos de madurez de SharePoint
Modelos de madurez de SharePointModelos de madurez de SharePoint
Modelos de madurez de SharePoint
 
SharePoint 2013 Novedades y más allá (Introducción de SUG.CAT)
SharePoint 2013 Novedades y más allá (Introducción de SUG.CAT)SharePoint 2013 Novedades y más allá (Introducción de SUG.CAT)
SharePoint 2013 Novedades y más allá (Introducción de SUG.CAT)
 
SUG.CAT First Monday Noviembre 2012
SUG.CAT First Monday Noviembre 2012SUG.CAT First Monday Noviembre 2012
SUG.CAT First Monday Noviembre 2012
 
JavaScript per a desenvolupadors de C#
JavaScript per a desenvolupadors de C#JavaScript per a desenvolupadors de C#
JavaScript per a desenvolupadors de C#
 

Último

Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 

Último (20)

Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 

BcnDevCon13 - No Designer? No Problem!

  • 1. No Designer? No Problem! Edin Kapić #bdc13 #nodesigner
  • 2. Edin Kapić  SharePoint Architect  Works for Spenta / Beezy in Barcelona  SharePoint Server MVP  President of Catalonian SharePoint User Group (SUG.CAT) @ekapic www.edinkapic.com sug.cat
  • 3. What this session is all about?
  • 7. My Assumptions • You are developing a product or a service • You need a product or service site or marketing material • You don’t have a designer or can’t afford one • You want a good enough design to launch
  • 8. Agenda • Mindset Change • The Four Basics • How to Apply What Works
  • 11. What do we start with? • We know how to solve problems • We know how to do iterative development • We know how to prototype • We know how to evaluate a software design
  • 12. The Role of the Design • We need design for our message Good design • Helps to find information • Doesn’t get in the way • Works to make users happy Bad design • Makes us lose visitors and potential customers • Adds more bad karma to the web universe
  • 13. “The Design Process” • Common Sense • Trial and Error • Critical Thinking • Practice and Experience
  • 15. The Four Basics Fantastics • Layout • Hierarchy • Colour • Typography
  • 17. Layout • The Organization for your content • Has two main roles • Dividing the content into sections • Grouping of related elements • Plenty of well-known conventions
  • 18. Layout: Grids • System of vertical lines that helps with the layout
  • 19. Layout: Alignment • The edges should line up
  • 20. Layout: Alignment • The width should be uniform for aligned elements
  • 21. Layout: Fitting elements • What if I have to align elements of different width or that do not align perfectly? • Center them on their respective column
  • 23. Hierarchy • Order of Importance of your design elements • A guided tour! • End the tour on a Call to Action
  • 24. Hierarchy: Size This is my important message. This is not so important message. This is my important message. This is not so important message.
  • 25. Hierarchy: Colour This is my important message. This is my important message. This is not so important message. This is not so important message.
  • 26. Hierarchy: Typography This is my important message. This is not so important message. This is not so important message.
  • 27. Hierarchy: Position • Top to Bottom • Left to Right (usually)
  • 28. Hierarchy: Spacing This is my important message. This is my important message lost with all the other messages. This is not so important message. This is even less important. Maybe we should rething the importance of this text alltogether? Who knows. This is not so important message. This is even less important. Maybe we should rething the importance of this text alltogether? Who knows.
  • 29. Hierarchy: Proximity My Story John the User Two days ago Today was a good day to write. I felt really energized when I started to write this post and I carried away all the time it took me to finish it. It was awesome. 23 comments Last comment was today My Story By John the User, two days ago Today was a good day to write. I felt really energized when I started to write this post and I carried away all the time it took me to finish it. It was awesome. 23 comments, last comment was today
  • 30. Exercise 1: Layout and Hierarchy
  • 32. Colour • Colour is relative to other colours • Colours should contrast well • Colour transmits a mood • Pick the colours depending on the message you want to convey ENERGY, DANGER, PA SSION, LOVE HARMONY, FRESHNE SS, NATURE STABILITY, CONFIDENC E, LOYALTY, CLEANLINE SS
  • 34. Colour: Contrast This is my important message lost with all the other messages. This is not so important message. This is even less important. Maybe we should rething the importance of this text alltogether? Who knows. OK This is my important message lost with all the other messages. This is not so important message. This is even less important. Maybe we should rething the importance of this text alltogether? Who knows. OK
  • 35. Colour Combinations • Monochromatic • Analogous • Complementary • Triadic • Free
  • 41. So, what should we do? • Choose a main colour • Use shades of gray for the rest • Substitute one gray with a different colour • Evaluate • Loop until you are satisfied
  • 46. Typography: Line Spacing • Line height (spacing) should be proportional to the font size
  • 47. Typography: Line Spacing • 1,5 em (150%) should be your rule of thumb
  • 48. Pick your fonts • One display font • For headlines, logos and emphasis • One versatile text font family • For text
  • 49. Font Combination • Avoid pairing similar fonts or fonts that are too strong • Consider pairing a Serif and a Sans Serif font from the same family
  • 51. How to Apply What Works
  • 52. “The Process” Collect Ideas Sketch a Design Build a Prototype Test and Fix
  • 53. How to Copy (“Inspire yourself”) • Copy one element only • Maintain an “inspiration scrapbook” • 3 Easy Picks • Color Scheme • Layout • Fonts
  • 54. Design Checklist • Is it readable? • Size • Contrast • Spacing • Is the hierarchy correct? • Does it align? • Does it feel good?
  • 55. Useful Resources • Grid Layout Design Articles • http://www.designbygrid.com/ http://www.thegridsystem.org/ • Colour Contrast Checker • http://www.snook.ca/technical/colour_contrast/colour.html • Colour Scheme Designer • http://colorschemedesigner.com/ • Gallery of Used Fonts • http://fontsinuse.com/ • Well-designed pages • http://www.awwwards.com/
  • 56. Thank You! Keep the conversation on @ekapic www.edinkapic.com

Notas del editor

  1. Groupingrelateditems is likeaddingcommasandperiods in your text. Itguidesthepace.