Workshop Trendy web

designs & prototyping

Laura Martínez /Toni Camí /

Jorge López

Web Design Trends

Web design evolution

Good vs. Bad

First websites 90’sTEXT-BASED SITES, ONLY HTML

The mid 90’sTable-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

End 90’sFlash! ¿?%¿$?& Bad age for web design… First PHP codes. neons colors, gradients… NO ORGANIZED INFORMATION

2000 Welcome CSSMake it easier to control the uniform look and feel of a website.

Mid 2000 Semantic webWeb design movement aimed at allowed allowed machines understand human requests.

¡IMPORTANT! Start the main principle of web desig: Don’t make me think

The late 2000 Web 2.0Interactive content that change without refresh, design applicated to elements, gradients, colours,

shadows and other visual elements well applied.

NowBig elements, First Mobile, important information at first glance, backround videos, Flat design, NO

useless elements, clear content, new effects, css3...

Visual design evolution

Better Bad

Better Bad

Better Bad

Linkshttps://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/

Typography

Fonts, sizes, colors, weight, links, line-height, titles h1 h2

h3…

Compatible fontsSystem fonts vs web fonts

Google font Font Squirrel

Good practices in typography

Titular, paragraph

JPG, PNG, GIF, SVG

JPGGood 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

PNGGood for flat images, less colours. Always use PNG24 for icons with transparent background. Bad for

photos. Never make bigger.

JPG 50% 80kbPNG24 90kb

GIFOnly for animation.

NOTHING ELSE!

SVGBest 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

Web Design Analysis

Web App

http://www.docady.com/ http://momentsapp.com/

Web App

http://musical.ly/ https://www.snapchat.com/

Corporative web

https://mixpanel.com http://kekselias.com

Corporative web

https://www.virginamerica.com/vxne

wlook

http://elburro.no

Corporative web

Video: https://mediadistribution.espn.com/

Illustration: http://creativecruise.nl/

Illustration&History&Animation: http://makeyourmoneymatter.org/

https://es.pinterest.com/pin/321655598364731231/

Portfolios

http://admirhadzic.com http://www.vanschneider.com

Portfolios

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

Web shop online analysis

Mobile First

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.

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

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.

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.

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

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,

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.

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

Capabilities

Location: GPS, Beacons…

Movements Sensors / Accelerometers

Touch

Direction / Digital compass

Audio

Video & Image

Dual Cameras

Bluetooth

Proximity

Ambient light

NFC

Organization - Advice

- ALIGN WITH MOBILE BEHAVIORS

- CONTENT OVER NAVIGATION

- MAINTAIN CLARITY AND FOCUS

- WHERE DO WE TOUCH?

Organization - Advice

- LEARN THE LANGUAGE OF TOUCH

- COVER THE HOVER

- MOBILE ASKS / MOBILE ANSWERS

- FLUIDLY, FLEXIBLY RESPONSIVE

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

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/

Icons

Icons - Download

https://thenounproject.com/

http://www.flaticon.com/

http://freepik.com/

Icons - How to export

File / Save for Web / PNG-24

SVG

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

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

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

STYLE PROPERTIES

- COLOR

- SIZE

- ANIMATION

- GRADIENT

- MASKS

- FILTERS

- FONT

- TEXT

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.

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

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

CODE

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

Prototyping

FLINTO

FLINTO

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/

THANKS FOR YOUR ATTENTION!

Leave your questions on the comments section