He encontrado muchas copias de los desarrolladores web final que sienten que hay mucho de misterio - incluso el esnobismo - detrás de diseño visual. Hay un montón de normas y prohibiciones para el diseño web por ahí, pero yo quería condensar algunas de las teorías detrás de diseño en un par de conceptos simples. He presentado en este BarCampChicago para que usted sepa qué buscar para entender el gran diseño próxima vez que vea. 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 seguir me on Twitter aquí.
e mech dijo,
8 de diciembre 2008 @ 6:50 pm
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 a medida que traza en todo el perímetro. Si las esquinas eran simples 1 / 4 círculos y líneas rectas de los bordes, entonces el radio de curvatura que el cambio de la radio del círculo al infinito, donde la parte curva cumple la parte recta, dando un salto no continuo.
Cambio de sentido de los seres humanos, y la curvatura se relaciona con el cambio de dirección, donde la dirección se relaciona con un cambio de posición. Eso es un poco más sutil que la escala de tamaño, pero es algo que la gente retomar muy fácilmente.
Kadavy dijo,
8 de diciembre 2008 @ 7:36 pm
Que usted, mech @ e - muy interesante! Traté de mirar hacia arriba curvatura G2 en la Wikipedia, pero no estoy muy seguro de lo entiendo todavía. Voy a tener que leer sobre él un par de veces - a menos que sepa de una mejor fuente sobre el tema?
e mech dijo,
10 de diciembre 2008 @ 8:43 pm
Aprendí acerca de este concepto en la clase .... Pero he encontrado un PDF que parece cubrir bien. Http://mfgcommunity.autodesk.com/files/blog/amy/Complex.pdf
Véase la página 4 para obtener ejemplos visuales de los G0, G1 y G2 de continuidad. Usted puede tener problemas para encontrar información, ya que es en realidad G ^ 2 y que no tiene una palabra clave muy buena (la continuidad G2 aunque funciona bien).
Kadavy dijo,
10 de diciembre 2008 @ 9:58 pm
Veo, @ e Mech, así que con la continuidad G2, "la curvatura varía suavemente entre las curvas o superficies conectadas".
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?
e mech dijo,
10 de diciembre 2008 @ 10:47 pm
La respuesta no hay curvas de Bezier (matemáticas otras construcciones similares son las curvas de Hermite y Splines). Para obtener una curva de orden 3 de Bezier hay 4 puntos de control. Ellos controlan la magnitud y dirección de los vectores tangentes en los puntos finales. O en otras palabras, a fin de ser capaces de controlar la tangencia de una curva de Bézier en cada punto final, tiene que ser para 3 o superior.
Yo no soy bueno w / Photoshop, pero un tutorial de como este puede empezar: http://www.myjanee.com/tuts/hearts/heart1.htm
Puede desplomo dos puntos utilizando la herramienta de la pluma y luego "convertir" a los dos, dando una curva de Bezier 3er orden. Este ratón arrastrando forma de hacer las matemáticas me volvería loco. Pero bueno, yo no soy diseñador gráfico. Si usted realmente quiere divertirse puede consultar las curvas de Bezier (http://en.wikipedia.org/wiki/Bezier_curves) y las constantes se conectan a algún software de gráficos de álgebra.
Para las esquinas, mi sugerencia es encontrar w / una regla de oro un poco como que tiene en su regla 0.75. Los píxeles son discretos y no continua. Así que lo que tienes trata sólo de una aproximación en el final. Usted puede encontrar que algo así como 3 píxeles verticales, horizontales 1, 2 píxeles verticales, horizontales 1, 1 vertical 1 horizontal, vertical 1, 2 horizontales, 1 vertical, horizontal 3 da una curva de aproximación que desea .. (o uno que usted no quiero?) .. Observe cómo cada vertical / horizontal efectiva par describe la pendiente de un segmento que los une. Al cambiar la relación de casi vertical a 1:1 a casi horizontal, que se aproxima una curva continua de cómo se comporta.
Con curvas de Bézier se puede ir tan loco como usted desea.
Patrick Algrim dijo,
10 de febrero 2009 @ 12:36p.m.
Me gustó mucho el video. ¡Compartimos parte de la misma mentalidad cuando se trata de las proporciones y las teorías detrás de los sistemas de la red. Voy a estar tratando de hablar sobre temas relativos en Chicago aquí en algún momento de mayo. Creo que mucho de lo que podría ayudar a la gente a entender los sistemas de la 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 pensamiento nuevo al azar o radical. Además, las redes se han convertido en una moda pasajera, que no me encanta, porque todavía no está siendo respetada como una regla general de diseño. En general, gran trabajo en la presentación de un tema muy difícil, uno que la mayoría de personas tienen dificultades para comprender o la emoción de tener.