那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2

  • View
    2.647

  • Download
    9

Embed Size (px)

DESCRIPTION

那些設計時容易忽略的事情 - 經驗分享

Text of 那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2

  • Front-End Developers Taiwan Party - 2 2013/10/29 @Changee
  • Weihan Hung magic PhD., Technology Painter @Fourdesire
  • Image via centralasian, CC License.
  • Ideas Composition Make it happen Image via centralasian, CC License.
  • Fourdesire 2012 Aug - Present Desiring Clicks Plant Nanny Doggii Grids First Launch Beer Nanny Change Taipei NTU YouTube EDU
  • Application & Web screenshots of bloglovin Image via Mike Rohde, CC License.
  • Page-based Application
  • Behave like Applications
  • ?
  • Before asking what or which, lets ask WHY.
  • Graphic Design
  • Interaction Form Follow Function
  • Application Service Game Branding
  • Side Menu vs Tab Bar
  • Image via Kent Want, CC License. Image via Adrian Askew, CC License
  • Different Platforms
  • Different Platforms
  • There is no essential difference between the artist and the craftsman. The artist is an exalted craftsman. Walter Gropius, Bauhaus Manifesto and Program (1919)
  • Engineer as Designer Engineers design materials, structures, and systems while considering the limitations imposed by practicality, regulation, safety, and cost. A designer is an agent that specifies the structural properties of a design object. Bureau of Labor Statistics, U.S. Department of Labor (2006). "Engineers". Occupational Outlook Handbook, 2006-07 Edition. Retrieved 2006-09-21. Ralph, P. and Wand, Y. (2009). A proposal for a formal definition of the design concept. In Lyytinen, K., Loucopoulos, P., Mylopoulos, J., and Robinson, W., editors, Design Requirements Workshop (LNBIP 14), pp. 103136. Springer-Verlag, p. 110
  • It means something Image via Ronald Sarayudej, CC License.
  • http://dribbble.com/shots/1286277-Dashboard http://dribbble.com/shots/584188-Mobile-Coach http://dribbble.com/shots/1059004-close-web?list=searches&tag=web http://dribbble.com/shots/576957-Revised-Coach-Card
  • Attractive Things Work Better Norman, D. A. (2002)
  • To be truly beautiful, wondrous, and pleasurable, the product has to fulfill a useful function, work well, and be usable and understandable. Norman, D. A. (2002)
  • http://www.flickr.com/photos/battlecreekcvb/
  • Pixel Fighter
  • Image via qmnonic, CC License.
  • 1)
  • Tap to switch Tap to switch Plant Selection Tutorial Check if need download resource from server Flowerpot Selection Tutorial Finish Input plants name
  • http://dribbble.com/shots/1240564-Wireframes
  • First Launch App Launch
  • Path Premium
  • Path Premium
  • Path Premium
  • Path Premium
  • Path Premium
  • Line
  • Droplr
  • Droplr
  • 2)
  • !
  • (Blank Slate)
  • (Blank Slate) Why How What
  • (Blank Slate)
  • (Blank Slate)
  • ? pt
  • 3)
  • http://www.behance.net/gallery/NomNom/11351281
  • http://www.behance.net/gallery/Moti-Concept/10703931
  • Doggii
  • Doggii
  • Doggii
  • Doggii
  • What I learned Justify
  • Park Guides
  • Design by considering normal contents.
  • ... !
  • 4)
  • Instagram
  • Information Identifier Title Description Progress Identifier Completed Percentage
  • iCloud Yes Is iCloud available? First launch No Yes Overwrite cloud Is there data on cloud? No Sync with cloud Yes Enable iCloud? No Data available Local
  • iCloud Yes Is iCloud available? First launch No Yes Overwrite cloud Is there data on cloud? No Sync with cloud Yes Enable iCloud? No Data available Local
  • 5)
  • Shadow with Radius Transparent Elements
  • Text
  • Text
  • Text Changed
  • Text Changed
  • Text Changed
  • Text Changed
  • Text opaque = YES
  • Text Changed opaque = YES
  • 1 1 2 3 4 5 6 7 2 2 3 3 4 4 5 5 6 6 7 7
  • Shadow with no radius
  • http://www.w3.org/TR/SVGCompositing/
  • Sketching http://www.flickr.com/photos/purecaffeine/
  • Learning by doing 75% Retention Rate http://www.flickr.com/photos/wwworks/
  • Teaching Others 90% Retention Rate http://www.flickr.com/photos/bobnrenee/
  • Enjoy it!
  • Email: magic@fourdesire.com Facebook: Weihan Hung