Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Workshop 11: Trendy web designs & prototyping

678 Aufrufe

Veröffentlicht am

Workshop Trendy Web Designs & prototyping

Presentado por los diseñadores: Jorge López, Laura Martínez y Toni Camí

Veröffentlicht in: Design
  • Login to see the comments

Workshop 11: Trendy web designs & prototyping

  1. 1. Workshop Trendy web designs & prototyping Laura Martínez /Toni Camí / Jorge López
  2. 2. Web Design Trends Web design evolution Good vs. Bad
  3. 3. First websites 90’s TEXT-BASED SITES, ONLY HTML
  4. 4. The mid 90’s Table-based sites, multiple columns, background images, text animations, hit counters, animated gifs… princples of design web, so far still… 1994 born Netscape and Opera. IE in 1995
  5. 5. End 90’s Flash! ¿?%¿$?& Bad age for web design… First PHP codes. neons colors, gradients… NO ORGANIZED INFORMATION
  6. 6. 2000 Welcome CSS Make it easier to control the uniform look and feel of a website.
  7. 7. Mid 2000 Semantic web Web design movement aimed at allowed allowed machines understand human requests. ¡IMPORTANT! Start the main principle of web desig: Don’t make me think
  8. 8. The late 2000 Web 2.0 Interactive content that change without refresh, design applicated to elements, gradients, colours, shadows and other visual elements well applied.
  9. 9. Now Big elements, First Mobile, important information at first glance, backround videos, Flat design, NO useless elements, clear content, new effects, css3...
  10. 10. Visual design evolution
  11. 11. Better Bad
  12. 12. Better Bad
  13. 13. Better Bad
  14. 14. Links https://www.creativefreedom.co.uk/icon-designers-blog/44-inspirational-almost-flat-icon-designs/ http://www.amazon.es/hagas-pensar-aproximaci%C3%B3n-usabilidad-Cuadernos/dp/8483222868 https://blog.kissmetrics.com/evolution-of-web-design/?wide=1 https://thenounproject.com/ http://fltdsgn.com/ https://unsplash.com/ https://www.google.com/fonts http://www.fontsquirrel.com/
  15. 15. Typography Fonts, sizes, colors, weight, links, line-height, titles h1 h2 h3…
  16. 16. Compatible fonts System fonts vs web fonts Google font Font Squirrel
  17. 17. Good practices in typography
  18. 18. Titular, paragraph
  19. 19. JPG, PNG, GIF, SVG
  20. 20. JPG Good for images with a lot of colors, less size on photos. Bad for icons, photos or image with less colours. Never make bigger. JPG 100% 557kb JPG 10% 44kb
  21. 21. PNG Good for flat images, less colours. Always use PNG24 for icons with transparent background. Bad for photos. Never make bigger. JPG 50% 80kbPNG24 90kb
  22. 22. GIF Only for animation. NOTHING ELSE!
  23. 23. SVG Best practice for icons. Transparent background. You can change the colour with code, apply animations and you can make it as big as you want. SVG 4kb
  24. 24. Web Design Analysis
  25. 25. Web App http://www.docady.com/ http://momentsapp.com/
  26. 26. Web App http://musical.ly/ https://www.snapchat.com/
  27. 27. Corporative web https://mixpanel.com http://kekselias.com
  28. 28. Corporative web https://www.virginamerica.com/vxne wlook http://elburro.no
  29. 29. Corporative web Video: https://mediadistribution.espn.com/ Illustration: http://creativecruise.nl/ Illustration&History&Animation: http://makeyourmoneymatter.org/ https://es.pinterest.com/pin/321655598364731231/
  30. 30. Portfolios http://admirhadzic.com http://www.vanschneider.com
  31. 31. Portfolios http://mathiashnormark.dk http://antonandirene.com
  32. 32. Web shop online analysis
  33. 33. Mobile First
  34. 34. Why mobile first? • Prepares you for the explosive growth and new opportunities emerging on mobile today. • Forces you to focus and prioritize your products by embracing the constraints inherent in mobile design. • Allows you to deliver innovative experiences by building on new capabilities native to mobile devices and modes of use.
  35. 35. Why mobile first? Smartphones have a disproportionate amount of web and data usage. According to Cisco, smartphones represented only 29% of total global handsets in use in 2014, but represented 69% of total traffic global handset traffic. (Fuente) With each new volley of devices, smartphones are getting more and more affordable. What previously cost several hundred dollars is now approaching $100 and below; this opens up a huge new market of users. So it’s not outlandish to suggest that today’s smartphone will simply be tomorrow’s “phone.”
  36. 36. Native applications Native mobile applications: - Give you robust access to hardware capabilities that you currently can’t get through mobile web browsers. - Core features like access to the address book, SMS, camera, audio inputs, and other built-in sensors are mostly unavailable. - Also absent is the ability to run processes in the background - Easily monetize through mobile app stores or in-app purchases. - Non-native applications can’t get into a native app store and have a much harder time getting on the home screen of people’s mobile devices, which can negatively impact discovery and ongoing usage.
  37. 37. Native applications So if your mobile product or business requires deeper hardware access, background processes, app or in-app sales, or more integrated placement on mobile devices to be viable, you may need a native solution. But that doesn’t mean you don’t need a mobile web solution, too. ---- Mobile web experiences also don’t require users to download updates (a fix on the server is a fix on the site), and they enable you to do frequent A/B (or bucket) testing of multiple design options. If either of those considerations is of vital importance to you, a mobile web application can make more sense.
  38. 38. Constraints SIZE: Losing that much screen space forces teams to focus. You have to make sure that what stays on the screen is the most important set of features for your customers and your business. There simply isn’t room for any interface debris or content of questionable value. You need to know what matters PERFORMANCE: Though people try to use their mobile devices just about everywhere (yes, there too!), mobile networks aren’t always there to support them..
  39. 39. Constraints TIME & PLACE Since mobile devices are (just about) always with their owners, location and time play a big role in how they are used. And that context has a big impact on design. When you design for mobile you are designing something that can be used anywhere and anytime. - 84% use them at home - 80% use them during miscellaneous downtime throughout the day, - 74% use them while waiting in lines or waiting for appointments,
  40. 40. Constraints TIME & PLACE - 69% use them while shopping - 64% use them at work, - 62% use them while watching TV (a different study claims 84%) - 47% use them during their commute.
  41. 41. Constraints This chart does a nice job of illustrating that people often use their mobile devices in shorter bursts (that’s why the peaks are sharper) throughout the day. “The desktop is “diving” while mobile is “snorkeling” Rachel Hinman at Nokia
  42. 42. Capabilities Location: GPS, Beacons… Movements Sensors / Accelerometers Touch Direction / Digital compass Audio Video & Image Dual Cameras Bluetooth Proximity Ambient light NFC
  43. 43. Organization - Advice - ALIGN WITH MOBILE BEHAVIORS - CONTENT OVER NAVIGATION - MAINTAIN CLARITY AND FOCUS - WHERE DO WE TOUCH?
  44. 44. Organization - Advice - LEARN THE LANGUAGE OF TOUCH - COVER THE HOVER - MOBILE ASKS / MOBILE ANSWERS - FLUIDLY, FLEXIBLY RESPONSIVE
  45. 45. Media Queries CSS It uses the @media rule to include a block of CSS properties only if a certain condition is true. https://developer.mozilla.org/es/docs/CSS/Media_queries
  46. 46. Tools 1. Test with real devices 2. Web developer Chrome - Mobile view 3. Webs: https://www.google.com/webmasters/tools/mobile-friendly/ http://ami.responsivedesign.is/# REFERENCES: http://alistapart.com/ https://abookapart.com/
  47. 47. Icons
  48. 48. Icons - Download https://thenounproject.com/ http://www.flaticon.com/ http://freepik.com/
  49. 49. Icons - How to export File / Save for Web / PNG-24
  50. 50. SVG
  51. 51. DEFINITION Scalable Vector Graphics are based in XML format, so it’s text-based and uses attributes to describe the image (instead of pixels). It can be re styled with CSS. It needs a declaration statement, root element and namespace. So, you’ve better know HTML and basic XML...
  52. 52. SVG <path d="M1071.564,595.128c-6.937-97.452-53.58-319.44-55.561- 328.836L1012.992,252H911.088l33.24-144H1050c9.936,0,18-8.052,18-18s-8.064- 18-18-18H915.684L874.14,252H707.088C697.956,151.236,613.104,72,510,72c- 109.176,0-198,88.824-198,198c0,86.232,54.852,161.22,135.312,187.872c- 8.797,51.396-16.393,102.324-18.864,137.256c- 5.652,79.548,22.416,156.828,79.044,217.632C565.716,875.256,646.716,912.84,732, 917.496V1092H570c-9.948,0-18,8.064-18,18s8.052,18,18,18h360c9.936,0,18- 8.064,18-18s-8.064-18-18-18H768V917.484c85.271-4.656,166.271-42.229,224.496- 104.736C1049.136,751.968,1077.216,674.676,1071.564,595.128z"/>
  53. 53. SVG <path style="fill:#FFC648;" d="M1071.564,595.128c-6.937-97.452-53.58-319.44- 55.561-328.836L1012.992,252H911.088l33.24-144H1050c9.936,0,18-8.052,18-18s- 8.064-18-18- 18H915.684L874.14,252H707.088C697.956,151.236,613.104,72,510,72c-109.176,0- 198,88.824-198,198c0,86.232,54.852,161.22,135.312,187.872c-8.797,51.396- 16.393,102.324-18.864,137.256c- 5.652,79.548,22.416,156.828,79.044,217.632C565.716,875.256,646.716,912.84,732, 917.496V1092H570c-9.948,0-18,8.064-18,18s8.052,18,18,18h360c9.936,0,18- 8.064,18-18s-8.064-18-18-18H768V917.484c85.271-4.656,166.271-42.229,224.496- 104.736C1049.136,751.968,1077.216,674.676,1071.564,595.128z"/>
  54. 54. STYLE PROPERTIES - COLOR - SIZE - ANIMATION - GRADIENT - MASKS - FILTERS - FONT - TEXT
  55. 55. WEB SUPPORT 1 Partial support in Android 3 & 4 refers to not supporting masking. 2 IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.
  56. 56. EXAMPLES LAMP GROWING TREE MOBILE APP GAME LOGO GOOGLE http://codepen.io/ihatetomatoes/pen/PPwqMN?editors=0010 COFFEE http://codepen.io/alxmrtnz/pen/jWZbey MAP http://www.routecraft.com/mapwidget2016/ STAR WARS http://codepen.io/chrisgannon/pen/zrEPVV?editors=1000
  57. 57. 1. Draw with a vector drawing program: Adobe Illustrator Inkscape (free) Corel Draw 2. Export it as an SVG file: File / Save as / SVG / SVG 1.1 How to create SVG files
  58. 58. CODE
  59. 59. EXTERNAL LINKS Basic information: http://webdesign.about.com/od/svg/a/what-is-svg.htm http://webdesign.about.com/od/svg/a/svg-advantages.htm Animations: http://www.hongkiat.com/blog/svg-animations/ http://www.vandelaydesign.com/svg-animation-trends/ Web support: http://caniuse.com/#feat=svg
  60. 60. Prototyping
  61. 61. FLINTO
  62. 62. FLINTO
  63. 63. Tools http://prototypingtools.co/ FRAMERJS (+ Animation, See examples) http://framerjs.com/ INVISIONAPP http://www.invisionapp.com/ Developed by FB https://facebook.github.io/origami/ “Like Adobe Flash” http://principleformac.com/
  64. 64. THANKS FOR YOUR ATTENTION! Leave your questions on the comments section

×