Your SlideShare is downloading. ×
0
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Design Fundamentals for Developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design Fundamentals for Developers

7,094

Published on

There are many resources on development for designers but what about design for developers? It shows how to create an effective layout, which fonts to choose, and how to make proper color choices. …

There are many resources on development for designers but what about design for developers? It shows how to create an effective layout, which fonts to choose, and how to make proper color choices. Skills that can be used in any graphic presentation.
(Presentation was given at the Heartland Developer Conference.)

0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,094
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
581
Comments
0
Likes
32
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.
  • In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.
  • In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.
  • First things first, I am not going to be able to teach you how to be a stellar designer in 50 minutes. That comes with time, training.However, although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into. As well as give you some fundamental tips when you do get thrown into the design world.
  • There are many tutorials on how to program but hardly nothing on how to be a good designer.First things first, I am not going to be able to teach you how to be a stellar designer in 50 minutes. That comes with time, training.avoid the major pitfalls I sometimes see developers fall into.
  • First things first, I am not going to be able to teach you how to be a stellar designer in 50 minutes. That comes with time, training.However, although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into. As well as give you some fundamental tips when you do get thrown into the design world.
  • (inform, sell, create)
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • http://www.useit.com/alertbox/reading_pattern.html
  • http://www.useit.com/alertbox/reading_pattern.html
  • http://www.useit.com/alertbox/reading_pattern.html
  • http://www.useit.com/alertbox/reading_pattern.html
  • http://www.useit.com/alertbox/reading_pattern.html
  • http://www.lipsum.com/
  • Each section of an index finger, from the tip to the base of the wrist, is larger than the preceding one by about 1.618, fitting the Fibonacci numbers 2, 3, 5 and 8.The Fibonacci numbers and golden section are widely found in the plant kingdom. In nearly all flowers, the number of petals is a Fibonacci number. For instance, lilies have 3 petals, buttercups have 5, many delphiniums have 8, marigolds have 13, asters have 21, and daisies commonly have 13, 21, 34, 55 or 89. http://davidpratt.info/pattern1.htm
  • Each section of an index finger, from the tip to the base of the wrist, is larger than the preceding one by about 1.618, fitting the Fibonacci numbers 2, 3, 5 and 8.The Fibonacci numbers and golden section are widely found in the plant kingdom. In nearly all flowers, the number of petals is a Fibonacci number. For instance, lilies have 3 petals, buttercups have 5, many delphiniums have 8, marigolds have 13, asters have 21, and daisies commonly have 13, 21, 34, 55 or 89. http://davidpratt.info/pattern1.htm
  • Each section of an index finger, from the tip to the base of the wrist, is larger than the preceding one by about 1.618, fitting the Fibonacci numbers 2, 3, 5 and 8.The Fibonacci numbers and golden section are widely found in the plant kingdom. In nearly all flowers, the number of petals is a Fibonacci number. For instance, lilies have 3 petals, buttercups have 5, many delphiniums have 8, marigolds have 13, asters have 21, and daisies commonly have 13, 21, 34, 55 or 89. http://www.intmath.com/Numbers/mathOfBeauty.phphttp://davidpratt.info/pattern1.htmhttp://discovermagazine.com/2007/jun/blinded-by-science
  • http://www.useit.com/alertbox/reading_pattern.html
  • http://www.useit.com/alertbox/reading_pattern.html
  • http://www.lipsum.com/
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • “It’s complete not when there’s nothing left to add, but when there’s nothing left to take away. One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another. Arranging elements so that no one part of a work overpowers, or seems heavier than any other part. The three different kinds of balance are symmetrical, asymmetrical, and mosaic.Grid-based design.
  • If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  • If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  • If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  • If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  • If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  • If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  • If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Groupings, calls to action, important stuff. Disassociated from other items.The differences which give a design visual and conceptual interest: notably use of contrast, emphasis, difference in size and color.
  • One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • Joan MiróiFerrà (1893-1983; was a Catalan/Spanishpainter, sculptor, and ceramist born in Barcelona.Earning international acclaim, his work has been interpreted as Surrealism, a sandbox for the subconscious mind, a re-creation of the childlike, and a manifestation of Catalan pride. In numerous interviews dating from the 1930s onwards, Miró expressed contempt for conventional painting methods as a way of supporting bourgeois society, and famously declared an "assassination of painting" in favour of upsetting the visual elements of established painting.
  • At the forefront of the ‘large bkgd’ trend which has become very popular. Variety b/t floral illustrations and tactile paper creates both a divide and a balance
  • Pop quiz: why is this design unsuccessful?
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • A well designed page/slide has a clear starting point (helped by a clear dominance) and guides the viewer through the design. What is most important, less important, and the least important parts of the design can be clearly expressed by having a clear hierarchy. You can achieve clear hierarchy of elements by clearly separating the most important element on the page and group more closely together other less important elements. You can use the same color or shape of similar elements to guide a reader or viewer down the page. In general, according to White, having more than three levels of hierarchy in a single design leads to confusion for the reader.
  • Having more than three levels of hierarchy in a single design leads to confusion.A well designed page/slide has a clear starting point (helped by a clear dominance) and guides the viewer through the design. What is most important, less important, and the least important parts of the design can be clearly expressed by having a clear hierarchy. You can achieve clear hierarchy of elements by clearly separating the most important element on the page and group more closely together other less important elements. You can use the same color or shape of similar elements to guide a reader or viewer down the page. In general, according to White, having more than three levels of hierarchy in a single design leads to confusion for the reader.
  • Having more than three levels of hierarchy in a single design leads to confusion.A well designed page/slide has a clear starting point (helped by a clear dominance) and guides the viewer through the design. What is most important, less important, and the least important parts of the design can be clearly expressed by having a clear hierarchy. You can achieve clear hierarchy of elements by clearly separating the most important element on the page and group more closely together other less important elements. You can use the same color or shape of similar elements to guide a reader or viewer down the page. In general, according to White, having more than three levels of hierarchy in a single design leads to confusion for the reader.
  • Your turn, show me how direction is used here. The black threads subconsciously lead your eye around
  • Your turn, show me how direction is used here. The black threads subconsciously lead your eye around
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • http://lab.arc90.com/experiments/readability/ http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/ http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ http://ilovetypography.com/2008/04/04/on-choosing-type/
  • http://lab.arc90.com/experiments/readability/ http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/ http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ http://ilovetypography.com/2008/04/04/on-choosing-type/
  • http://lab.arc90.com/experiments/readability/ http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/ http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ http://ilovetypography.com/2008/04/04/on-choosing-type/
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Conservative example.
  • Fun example.
  • Using an elegant font does not make a site elegant.
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer's eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  • The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer's eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  • The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer's eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  • The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer's eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  • The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer's eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.
  • Transcript

    • 1. Design fundamentals
      for Developers
      The fundamentals of graphic design for screens
      Paul Traniptrani@adobe.comwww.paultrani.com@paultrani
    • 2. Paul trani
      Ride
      Work
      Live
      Love
      Play
      • Adobe Flash Platform Evangelist
      • 3. Lynda.com and Layers Magazine author
      • 4. Adobe Certified Instructor
      • 5. Art school graduate
    • “There are only 10 kinds of people in the world. Those that know binary and those that don't.”
    • 6. “5 out of 4 designers have a problem with fractions.”
    • 7. Agenda
      Understand the fundamentals of graphic design for screens
    • 8. Why should I care?
      Understanding design will help you be a better developer
      Developers with design skills are in demand
    • 9. Do’s and don’ts
      Design Don’ts
      http://bouncebargainrentals.com
      http://www.html5zombo.com
      Inspiration
      http://www.designmeltdown.com
      http://www.mobileawesomeness.com
      http://www.thefwa.com
      http://patterntap.com
      http://quince.infragistics.com
      http://www.designupdate.com
    • 10. planning
      First, define what you’re trying to do.
    • 11. planning
      First, define what you’re trying to do.
      bEtsy, we want to sell you stuff you don’t need.
    • 12.
    • 13. planning
      Next, determine your audience.
    • 14. planning
      Next, determine your audience.
      Men and women between 18-35.
      Unique individuals that crave attention and have money to burn.
    • 15.
    • 16. planning
      The audience determines what needs to be created.
    • 17. planning
      The audience determines what needs to be created.
      Audience has a laptop and a mobile phone.
    • 18.
    • 19. Two rules before designing
    • 20. Rule 1
      Don’t use design programs.
    • 21.
    • 22. Rule 2
      It’s all about leading the eye.
    • 23. Rule 3
      There are no hard and fast rules.
    • 24. Design fundamentals
      Layout
      Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction
      Typography
      Serif vs. Sans
      Color
      Color Wheel, Color Choices, Meaning
    • 25. Design fundamentals
      Layout
      Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction
      Typography
      Serif vs. Sans
      Color
      Color Wheel, Color Choices, Meaning
    • 26. GRID
      Start with a
    • 27. Rule of Thirds
      Dividing a page into 3 rows and 3 columns
      The eye naturally follows this “F” shape
    • 28.
    • 29. Layout Design AIR App:
      www.paultrani.com
    • 30.
    • 31.
    • 32. Mobile = one column
    • 33. betsy
    • 34. The
      Golden ratio
    • 35. The golden ratio
      Proportion defined as 1.618
      Found in nature, art and architecture
      1
      1.618
    • 36. Fibonacci Numbers
    • 37. The golden ratio in Layout
      Overall Width / 1.618 = Content Block
      Overall Width – Content Block = Sidebar Block
      Overall Width
      Sidebar Block
      1
      Content Block
      1.618
    • 38.
    • 39.
    • 40. betsy
    • 41. Elements of a good layout
    • 42. Space
      Implies importance, elegance, and professionalism.
    • 43. Space
      “Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away”
      Antoine de Saint-Exupery
      Don’t try to be great, try to be invisible
    • 44. Space
      WalMart
      Target
    • 45. http://www.kennethcole.com
    • 46.
    • 47.
    • 48. betsy
    • 49. Balancegives a clear, unified message.
    • 50. Symmetrical balance
      Salvador Dali – The Last Supper
    • 51. http://www.cnn.com
    • 52. http://www.mobilewebbook.com
    • 53. http://www.bbc.co.uk
    • 54.
    • 55. http://www.hbo.com
    • 56.
    • 57. betsy
    • 58. Variety VarietyVariety VARIETYVARIETY VarietyVARIETYVarietyvariety variety variety variety variety Variety
    • 59. variety
      “Variety is the spice of life.”
      Gives visual and conceptual interest
      Too much and the design will appear amateurish
      Too little and the design will appear boring
    • 60. Joan Miro– Blue II (surrealism)
    • 61. http://www.webdesignerwall.com
    • 62. http://www.hawkart.com
    • 63. betsy
    • 64. A well designed project has
      Hierarchy
    • 65. Heirarchy
      “Heirarchy does not refer to upper management.”
      A clear starting point that guides the viewer through the design
      Separate the most important element
      Group the less important elements
    • 66.
    • 67. http://www.semisture.com
    • 68.
    • 69. betsy
    • 70. Design fundamentals
      Layout
      Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction
      Typography
      Serif vs. Sans
      Color
      Color Wheel, Color Choices, Meaning
    • 71. typography
      “Typography has one plain duty before it and that’s to convey information in writing.”
      Emil Ruder, Founder of Basel School of Design
      Choose a font that fits the subject
      Don’t use more than three
      @font-face
    • 72. Choosing a font
      Two main types:
      Serif fonts have short finishing lines on strokes
      Sans-serif lack Serifs and and are considered modern as a result.
    • 73. Make it legible
      Contrast
      Size
      Hierarchy
    • 74. font structure
      There are different type classifications,
      Understand type anatomy
      Understand typemeasurements.
      Use the Font Picker.
    • 75. http://www.westin.com
    • 76. http://www.toysrus.com
    • 77.
    • 78. betsy
    • 79. Design fundamentals
      Layout
      Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction
      Typography
      Serif vs. Sans
      Color
      Color Wheel, Color Choices, Meaning
    • 80. Color
      “Use color to emphasize importance, not decorate a page.”
      Alexander White
      Use color to create hierarchy, dominance, and balance.
      Consistent use of a few colors makes a more cohesive design.
    • 81. Color
      The Color Wheel
      Warm colors bring elements forward.
      Cool colors move elements back.
      Kuler
    • 82. Dong Kingman
    • 83.
    • 84.
    • 85. In action
    • 86. Thank you
      http://www.designmeltdown.com
      http://www.mobileawesomeness.com
      http://patterntap.com
      http://quince.infragistics.com
      http://www.designupdate.com
      Paul Traniptrani@adobe.comwww.paultrani.com@paultrani

    ×