BcnDevCon13 - No Designer? No Problem!

780 views
647 views

Published on

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

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
780
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
23
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Groupingrelateditems is likeaddingcommasandperiods in your text. Itguidesthepace.
  • BcnDevCon13 - No Designer? No Problem!

    1. 1. No Designer? No Problem! Edin Kapić #bdc13 #nodesigner
    2. 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. 3. What this session is all about?
    4. 4. 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
    5. 5. Agenda • Mindset Change • The Four Basics • How to Apply What Works
    6. 6. Mindset Change
    7. 7. Mindset Change Us Them
    8. 8. 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
    9. 9. 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
    10. 10. “The Design Process” • Common Sense • Trial and Error • Critical Thinking • Practice and Experience
    11. 11. The Four Basics
    12. 12. The Four Basics Fantastics • Layout • Hierarchy • Colour • Typography
    13. 13. 2. Layout
    14. 14. Layout • The Organization for your content • Has two main roles • Dividing the content into sections • Grouping of related elements • Plenty of well-known conventions
    15. 15. Layout: Grids • System of vertical lines that helps with the layout
    16. 16. Layout: Alignment • The edges should line up
    17. 17. Layout: Alignment • The width should be uniform for aligned elements
    18. 18. 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
    19. 19. 2. Hierarchy
    20. 20. Hierarchy • Order of Importance of your design elements • A guided tour! • End the tour on a Call to Action
    21. 21. Hierarchy: Size This is my important message. This is not so important message. This is my important message. This is not so important message.
    22. 22. Hierarchy: Colour This is my important message. This is my important message. This is not so important message. This is not so important message.
    23. 23. Hierarchy: Typography This is my important message. This is not so important message. This is not so important message.
    24. 24. Hierarchy: Position • Top to Bottom • Left to Right (usually)
    25. 25. 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.
    26. 26. 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
    27. 27. Exercise 1: Layout and Hierarchy
    28. 28. 3. Colour
    29. 29. 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
    30. 30. 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
    31. 31. Colour Combinations • Monochromatic • Analogous • Complementary • Triadic • Free
    32. 32. Monochromatic
    33. 33. Analogous
    34. 34. Complementary
    35. 35. Triadic
    36. 36. Free or Nature-inspired
    37. 37. 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
    38. 38. Exercise 2: Colour
    39. 39. 4. Typography
    40. 40. Typography • Display Fonts • Text Fonts
    41. 41. Typography
    42. 42. Typography: Line Spacing • Line height (spacing) should be proportional to the font size
    43. 43. Typography: Line Spacing • 1,5 em (150%) should be your rule of thumb
    44. 44. Pick your fonts • One display font • For headlines, logos and emphasis • One versatile text font family • For text
    45. 45. 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
    46. 46. Exercise 3: Typography
    47. 47. How to Apply What Works
    48. 48. “The Process” Collect Ideas Sketch a Design Build a Prototype Test and Fix
    49. 49. How to Copy (“Inspire yourself”) • Copy one element only • Maintain an “inspiration scrapbook” • 3 Easy Picks • Color Scheme • Layout • Fonts
    50. 50. Design Checklist • Is it readable? • Size • Contrast • Spacing • Is the hierarchy correct? • Does it align? • Does it feel good?
    51. 51. 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/
    52. 52. Thank You! Keep the conversation on @ekapic www.edinkapic.com

    ×