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