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/1hrvhad

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

9. Mindset Change

10. Mindset Change
Us
Them

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

14. The Four Basics

15. The Four Basics Fantastics
• Layout
• Hierarchy
• Colour
• Typography

16. 2. Layout

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

22. 2. Hierarchy

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

31. 3. Colour

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

36. Monochromatic

37. Analogous

38. Complementary

39. Triadic

40. Free or Nature-inspired

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

42. Exercise 2: Colour

43. 4. Typography

44. Typography
• Display Fonts
• Text Fonts

45. Typography

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

50. Exercise 3: Typography

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