Me he encontrado muchas de back-end desarrolladores web que sienten que hay mucho de misterio - incluso esnobismo - detrás del diseño visual. Hay un montón de reglas de hacer y no hacer de diseño de páginas web por ahí, pero yo quería condensar algunas de las teorías detrás de diseño en un conceptos simples. Presenté esta en BarCampChicago para que usted sepa qué buscar para entender el gran diseño de próxima vez que veas. Descubra la gran vídeo de la presentación que hizo mi sombra:
O, si usted no tiene 20 minutos de sobra, aquí está una versión SlideShare, con resumió los comentarios:
- - -Usted debe seguirme en Twitter aquí.
mech e dijo,
08 de diciembre 2008 @ 18:50
El diseño del iPod es un poco más complejo que los factores de escala (las proporciones, como usted dice). Los puntos atienden el lado con lo que se conoce como la continuidad G2. Eso significa que el radio de curvatura es continua mientras se trace una línea alrededor del perímetro. Si las esquinas eran simples 1 / 4 círculos y los bordes de líneas rectas, entonces el radio de curvatura pasaría de la radio del círculo hasta el infinito en la parte curva cumple con la parte recta, dando un salto discontinuo.
Los seres humanos cambian sentido, y la curvatura se relaciona con el cambio de dirección, donde la dirección tiene que ver con un cambio de posición. Eso es un poco más sutil que la ampliación de su tamaño, sin embargo, es algo que la gente retomar con mucha facilidad.
Kadavy dijo:
08 de diciembre 2008 @ 19:36
mech que tú, @ e - muy interesante! Traté de mirar hacia arriba curvatura G2 en Wikipedia, pero no estoy muy seguro de lo entiendo todavía. Voy a tener que leer sobre ella un par de veces - a menos que sepa de una mejor fuente sobre el tema?
mech e dijo,
10 de diciembre 2008 @ 20:43
Aprendí acerca de este concepto en la clase .... Pero encontré un PDF que parece cubrirlo bien. http://mfgcommunity.autodesk.com/files/blog/amy/Complex.pdf
Véase la página 4 para obtener ejemplos visuales de G0, G1, G2 y la continuidad. Es posible que tenga problemas para encontrar información, ya que es en realidad G ^ 2 y eso no lo hace para una palabra clave muy buena (la continuidad G2 funciona bien sin embargo).
Kadavy dijo:
10 de diciembre 2008 @ 21:58
Veo, @ e mech, así que con la continuidad G2 ", la curvatura varía suavemente entre las curvas conectadas o superficies."
Sé que a menudo tratan de experimentar para añadir algo de carácter a la todo-demasiado-común "esquinas redondeadas" en el diseño web. Me pregunto si hay algún método eficiente y repetible en la que para crear esquinas biseladas con continuidad G2 en Illustrator y Photoshop. Pensamientos?
mech e dijo,
10 de diciembre 2008 @ 22:47
La respuesta no hay curvas Bezier (matemáticas similares construcciones son las curvas de Hermite y splines). Por una orden tercera curva de Bézier hay 4 puntos de control. Ellos controlan la magnitud y dirección de los vectores tangentes en los puntos extremos. O en otras palabras, con el fin de poder controlar la tangencia de una curva Bézier en cada punto final, tiene que ser tercera orden o superior.
No soy buena w / photoshop, pero un tutorial de este tipo pueden empezar: http://www.myjanee.com/tuts/hearts/heart1.htm
Puede plop por dos puntos con la herramienta pluma y luego en "convertir" a los dos, te da una curva bezier para tercero. Este ratón arrastrando forma de hacer matemáticas me vuelven loco. Pero bueno, yo no soy diseñador gráfico. Si usted realmente quiere tener la diversión que usted puede mirar para arriba las curvas de Bezier ( http://en.wikipedia.org/wiki/Bezier_curves ) y las constantes se conectan a algún software de graficación álgebra.
Para las esquinas, mi sugerencia es encontrar w / una regla del pulgar un poco como si tuviera en su 0,75 regla. Los píxeles son discretas y no continuas. Así que lo que tengas será sólo una aproximación al final. Es posible que algo así como 3 píxeles verticales, horizontales 1, 2 píxeles verticales, horizontales 1, 1 vertical una horizontal, una vertical, dos horizontales, una horizontal vertical 3 da una curva aproximada que desea .. (o uno que usted no no quiero?) .. Nótese cómo cada vertical / horizontal par efectivamente describe la pendiente de un segmento de conectarlos. Al cambiar la relación de casi 1:1 a vertical a casi horizontal, que se aproxima una curva continua cómo se comporta.
Con curvas de Bezier se puede ir tan loco como usted desea.
Patrick Algrim dijo:
10 de febrero 2009 @ 24:36
Me gustó mucho el video. Compartimos algunos de la misma mentalidad cuando se trata de las proporciones y las teorías detrás de los sistemas de cuadrícula. Estaré tratando de hablar sobre temas relativos en Chicago aquí en algún momento en mayo. Creo que mucho de lo que podría ayudar a la gente a entender los sistemas de red y proporciones mejor, es una comprensión más sólida de su historia. De lo contrario, los incrédulos pueden asumir que es un nuevo pensamiento al azar o radical. Además, las redes se han convertido en una moda, que no me amas de veras, porque todavía no se respetan como regla general de diseño. En general, gran trabajo es presentar un tema muy difícil, uno que la mayoría de la gente tiene dificultades para comprender o tener emoción para.