No Designer? No Problem!

Edin Kapić

#bdc13 #nodesigner

sug.cat@ekapicwww.edinkapic.com

Edin Kapić

SharePoint Architect

Works for Spenta / Beezy in Barcelona

SharePoint Server MVP

President of Catalonian SharePoint User Group (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

NOTHING MAGIC

ABOUT IT

Sorry

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 not so important message.

This is my 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 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.

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

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, PASSION, LOVE

HARMONY, FRESHNESS, NATURE

STABILITY, CONFIDENCE, LOYALTY,

CLEANLINESS

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

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 @ekapicwww.edinkapic.com