BcnDevCon13 - No Designer? No Problem!
Upcoming SlideShare
Loading in...5
×
 

BcnDevCon13 - No Designer? No Problem!

on

  • 569 views

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 ...

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

Statistics

Views

Total Views
569
Views on SlideShare
558
Embed Views
11

Actions

Likes
5
Downloads
17
Comments
0

3 Embeds 11

https://twitter.com 9
http://eventifier.com 1
http://www.eventifier.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Groupingrelateditems is likeaddingcommasandperiods in your text. Itguidesthepace.

BcnDevCon13 - No Designer? No Problem! BcnDevCon13 - No Designer? No Problem! Presentation Transcript

  • 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?
  • 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
  • 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