bcndevcon13 - no designer? no problem!
DESCRIPTION
The User Experience (UX) and design work are usually done by skilled professionals or by the developers themselves. The first option is almost always satisfactory but it puts the bottleneck on the designer and it is usually done hiring a designer, adding to your project costs. The second option is cheaper and immediate but, sincerely, most of the design done by developers is "less then stellar" (in kind words). However, you don't have to pursue a designer carreer to successfully make a design for your next project. By applying time-proven knowledge and reusing great designs, you can have the best of both worlds. Your design won't play in Champions League (some things are best done by professionals) but it will surely be more than a match for your needs. Learn the basic design concepts, essentials and recipes, without the boring stuff. Your next project will be glad you did. BONUS: Get HubSpot scrapbook of brilliant homepage designs! http://bit.ly/1hrvhadTRANSCRIPT
![Page 1: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/1.jpg)
No Designer? No Problem!
Edin Kapić
#bdc13 #nodesigner
![Page 2: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/2.jpg)
Edin Kapić
SharePoint Architect
Works for Spenta / Beezy in Barcelona
SharePoint Server MVP
President of Catalonian SharePoint User Group (SUG.CAT)
![Page 3: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/3.jpg)
What this session is all about?
![Page 4: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/4.jpg)
![Page 5: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/5.jpg)
![Page 6: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/6.jpg)
![Page 7: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/7.jpg)
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
![Page 8: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/8.jpg)
Agenda
• Mindset Change
• The Four Basics
• How to Apply What Works
![Page 9: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/9.jpg)
Mindset Change
![Page 10: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/10.jpg)
Mindset Change
Us Them
![Page 11: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/11.jpg)
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
![Page 12: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/12.jpg)
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
![Page 13: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/13.jpg)
“The Design Process”
• Common Sense
• Trial and Error
• Critical Thinking
• Practice and Experience
NOTHING MAGIC
ABOUT IT
Sorry
![Page 14: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/14.jpg)
The Four Basics
![Page 15: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/15.jpg)
The Four Basics Fantastics
• Layout• Hierarchy• Colour• Typography
![Page 16: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/16.jpg)
2. Layout
![Page 17: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/17.jpg)
Layout
• The Organization for your content
• Has two main roles• Dividing the content into
sections• Grouping of related elements
• Plenty of well-known conventions
![Page 18: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/18.jpg)
Layout: Grids
• System of vertical lines that helps with the layout
![Page 19: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/19.jpg)
Layout: Alignment
• The edges should line up
![Page 20: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/20.jpg)
Layout: Alignment
• The width should be uniform for aligned elements
![Page 21: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/21.jpg)
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
![Page 22: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/22.jpg)
2. Hierarchy
![Page 23: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/23.jpg)
Hierarchy
• Order of Importance of your design elements• A guided tour!
• End the tour on a Call to Action
![Page 24: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/24.jpg)
Hierarchy: Size
This is my important message.
This is not so important message.
This is my important message.
This is not so important message.
![Page 25: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/25.jpg)
Hierarchy: Colour
This is my important message.
This is not so important message.
This is my important message.
This is not so important message.
![Page 26: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/26.jpg)
Hierarchy: Typography
This is my important message.
This is not so important message. This is not so important message.
![Page 27: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/27.jpg)
Hierarchy: Position
• Top to Bottom• Left to Right (usually)
![Page 28: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/28.jpg)
Hierarchy: Spacing
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 my important message.
This is not so important message. This is even less important. Maybe we should rething the importance of this text alltogether? Who knows.
![Page 29: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/29.jpg)
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 StoryBy 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
![Page 30: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/30.jpg)
Exercise 1: Layout and Hierarchy
![Page 31: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/31.jpg)
3. Colour
![Page 32: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/32.jpg)
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, PASSION, LOVE
HARMONY, FRESHNESS, NATURE
STABILITY, CONFIDENCE, LOYALTY,
CLEANLINESS
![Page 33: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/33.jpg)
![Page 34: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/34.jpg)
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.
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 OK
![Page 35: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/35.jpg)
Colour Combinations
• Monochromatic• Analogous• Complementary• Triadic
• Free
![Page 36: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/36.jpg)
Monochromatic
![Page 37: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/37.jpg)
Analogous
![Page 38: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/38.jpg)
Complementary
![Page 39: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/39.jpg)
Triadic
![Page 40: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/40.jpg)
Free or Nature-inspired
![Page 41: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/41.jpg)
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
![Page 42: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/42.jpg)
Exercise 2: Colour
![Page 43: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/43.jpg)
4. Typography
![Page 44: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/44.jpg)
Typography
• Display Fonts
• Text Fonts
![Page 45: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/45.jpg)
Typography
![Page 46: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/46.jpg)
Typography: Line Spacing
• Line height (spacing) should be proportional to the font size
![Page 47: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/47.jpg)
Typography: Line Spacing
• 1,5 em (150%) should be your rule of thumb
![Page 48: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/48.jpg)
Pick your fonts
• One display font• For headlines, logos
and emphasis
• One versatile text font family
• For text
![Page 49: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/49.jpg)
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
![Page 50: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/50.jpg)
Exercise 3: Typography
![Page 51: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/51.jpg)
How to Apply What Works
![Page 52: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/52.jpg)
“The Process”
Collect Ideas
Sketch a Design
Build a Prototype
Test and Fix
![Page 53: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/53.jpg)
How to Copy (“Inspire yourself”)• Copy one element only
• Maintain an “inspiration scrapbook”
• 3 Easy Picks• Color Scheme• Layout• Fonts
![Page 54: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/54.jpg)
Design Checklist
• Is it readable? • Size• Contrast• Spacing
• Is the hierarchy correct?
• Does it align?
• Does it feel good?
![Page 55: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/55.jpg)
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/
![Page 56: BcnDevCon13 - No Designer? No Problem!](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c85b424a795910408b4611/html5/thumbnails/56.jpg)
Thank You!
Keep the conversation on @ekapicwww.edinkapic.com