Workshop Trendy Web Designs & prototyping Presentado por los diseñadores: Jorge López, Laura Martínez y Toni Camí

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...

10. Visual design evolution

11. Better Bad

12. Better Bad

13. Better Bad

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. 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

18. Titular, paragraph

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

24. Web Design Analysis

25. Web App
http://www.docady.com/ http://momentsapp.com/

26. Web App
http://musical.ly/ https://www.snapchat.com/

27. Corporative web
https://mixpanel.com http://kekselias.com

28. Corporative web
https://www.virginamerica.com/vxne
wlook
http://elburro.no

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. Portfolios
http://admirhadzic.com http://www.vanschneider.com

31. Portfolios
http://mathiashnormark.dk http://antonandirene.com

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

51. Icons - Download
https://thenounproject.com/
http://www.flaticon.com/
http://freepik.com/

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...

55. 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"/>

56. 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"/>

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