Workshop 11: Trendy web designs & prototyping
•
1 gostou•823 visualizações
Workshop Trendy Web Designs & prototyping Presentado por los diseñadores: Jorge López, Laura Martínez y Toni Camí
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Workshop 11: Trendy web designs & prototyping
Semelhante a Workshop 11: Trendy web designs & prototyping (20)
Mais de Visual Engineering
Mais de Visual Engineering (20)
Último
Último (20)
Workshop 11: Trendy web designs & prototyping
- 1. Workshop Trendy web designs & prototyping Laura Martínez /Toni Camí / Jorge López
- 2. Web Design Trends Web design evolution Good vs. Bad
- 3. First websites 90’s TEXT-BASED SITES, ONLY HTML
- 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. End 90’s Flash! ¿?%¿$?& Bad age for web design… First PHP codes. neons colors, gradients… NO ORGANIZED INFORMATION
- 6. 2000 Welcome CSS Make it easier to control the uniform look and feel of a website.
- 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. 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. Now Big elements, First Mobile, important information at first glance, backround videos, Flat design, NO useless elements, clear content, new effects, css3...
- 11. Better Bad
- 12. Better Bad
- 13. Better Bad
- 15. Typography Fonts, sizes, colors, weight, links, line-height, titles h1 h2 h3…
- 16. Compatible fonts System fonts vs web fonts Google font Font Squirrel
- 17. Good practices in typography
- 19. JPG, PNG, GIF, SVG
- 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. 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. GIF Only for animation. NOTHING ELSE!
- 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
- 29. Corporative web Video: https://mediadistribution.espn.com/ Illustration: http://creativecruise.nl/ Illustration&History&Animation: http://makeyourmoneymatter.org/ https://es.pinterest.com/pin/321655598364731231/
- 32. Web shop online analysis
- 36. Mobile First
- 37. 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.
- 38. 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.”
- 39. 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.
- 40. 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.
- 41. 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..
- 42. 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,
- 43. 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.
- 44. 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
- 45. Capabilities Location: GPS, Beacons… Movements Sensors / Accelerometers Touch Direction / Digital compass Audio Video & Image Dual Cameras Bluetooth Proximity Ambient light NFC
- 46. Organization - Advice - ALIGN WITH MOBILE BEHAVIORS - CONTENT OVER NAVIGATION - MAINTAIN CLARITY AND FOCUS - WHERE DO WE TOUCH?
- 47. Organization - Advice - LEARN THE LANGUAGE OF TOUCH - COVER THE HOVER - MOBILE ASKS / MOBILE ANSWERS - FLUIDLY, FLEXIBLY RESPONSIVE
- 48. 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
- 49. 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/
- 50. Icons
- 52. Icons - How to export File / Save for Web / PNG-24
- 53. SVG
- 54. 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...
- 57. STYLE PROPERTIES - COLOR - SIZE - ANIMATION - GRADIENT - MASKS - FILTERS - FONT - TEXT
- 58. 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.
- 59. 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
- 60. 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
- 61. CODE
- 62. 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
- 63. Prototyping
- 64. FLINTO
- 65. FLINTO
- 66. 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/
- 67. THANKS FOR YOUR ATTENTION! Leave your questions on the comments section