Contemporary Trends In Web Design

Caitlin BartaRaynald Mirvil leKenny Rosenberg

CONTEMPORARY TRENDS IN WEB

DESIGN

Positioning and alignment was done with HTML tables Had to use “spacer” GIFs to position content

GIF buttons used for promotional purposes http://complexify.com/buttons/

<blink>

WEB 1.0 - DESIGN ELEMENTS

<marquee>216 “web-safe” colors

Movement towards more fl exibility for designers and developers

Fewer tables, more CSS for arrangement

Near unlimited color palette due to technological advances

Larger font sizes for legibilityRounded corners, drop shadows, textures, etc.

WEB 2.0 - DESIGN ELEMENTS

Pinterest

Before

Icons as images

Textures as imagesRounded corners

and drop shadows must be part of the image

After

Icons created with CSS http://www.hongkiat.co

m/blog/coding-graphics-with-css3/

Textures in CSS http://lea.verou.me/css

3patterns/Easy to add and

change rounded corners and drop shadows on the fly

CSS3: BEFORE AND AFTER

HTML and CSS evolved, giving designers more and more control over their designs.

People started creating and sharing tools with other designers and developers.

Ex: Twitter Bootstrap: http://twitter.github.com/bootstrap/ “Recipe” or framework publically shared so you don’t

have to create from scratch As designer, need to be aware of frameworks to

understand where you can be flexible in a design Templates for icons, buttons etc which are

customizable

WHAT CHANGED? TECHNOLOGY (AND PEOPLE).

960 pixel width layoutTwo variants: 12 and 16 columns

Helpful for planningDownload includes: CSS, sketch paper,

and templates for a variety of programs, including Photoshop, Illustrator, Omnigraffl e, Visio

Download: http://960.gs/

960 GRID SYSTEM BY NATHAN SMITH

960 GRID SYSTEM:12 COLUMN

12-COLUMN SKETCH SHEET

EXAMPLES OF TRENDS

Design principles in play:- Circles are a way to give a website a less rigid feel.- Circles also have positive associations with other round objects.

Design considerations:- Circles are less effi cient for containing text than rectangles.

CIRCLES

Example: Cake Sweet Cake

CIRCLES

Example: The Boston Globe: http://bostonglobe.com

RESPONSIVE WEB DESIGN

Example: The Boston Globe

RESPONSIVE WEB DESIGN

Example: The Boston Globe

RESPONSIVE WEB DESIGN

What is it?- A page designed to change its layout on-the-fl y, based on the size of the window containing it.- This can apply to…

- Windows of diff erent sizes on a desktop- Tablets- Mobile phones

Design principles in play- No horizontal scrolling in any situation means the page is easier to use.- One responsive web design = multiple designs.

RESPONSIVE WEB DESIGN

Example: Cadbury's Joyville - http://joyville.cadbury.com.au

SCROLLING ANIMATIONS

Example: Cadbury’s Joyville

SCROLLING ANIMATIONS

Example: Cadbury’s Joyville

SCROLLING ANIMATIONS

Example: Cadbury’s Joyville

SCROLLING ANIMATIONS

Example: Cadbury’s Joyville

SCROLLING ANIMATIONS

What is it?- An animation triggered by scrolling up/down a webpage.

Design principles in play:- More immersive.

Design considerations:- This becomes less about creating good graphic designs and more about creating good animations.- Maintain unity between animation and background.- Maintain unity throughout the whole animation.- Make sure your information isn't blocked by the animation.- Provide navigation for skipping to sections of the page.

SCROLLING ANIMATIONS

TRENDS, FADS, INNOVATION, AND

INSPIRATION

Trends are longer lasting:Smaller changes over timeSometimes related to evolution of technology

Fads are short lived:Fleeting style or behaviorWhat's popular right nowPossibly a misuse of technology

LONG TERM TRENDS VS. FADS

How can you detect a fad?Think about purpose and principles behind the design Just trying to “be cool” or does it have a timeless

quality?

FADS

FAD: GLOSSY BUTTONS AND LOGOS

FAD: SPLASH PAGES

FAD: SOCIAL MEDIA OVERLOAD

Innovation is elusive and subjective especially in design.

Can we be simultaneously current with the trends and innovative?

INNOVATION

Sites dedicated to finding inspiration:

Dribbble (dribbble.com)

Discover Usabilla (discover.usabilla.com)

Little Big Details (littlebigdetails.com)

INSPIRATION

INSPIRATION

For Illustrative Purposes Only

INSPIRATION

For Illustrative Purposes Only

INSPIRATION

INSPIRATION

INSPIRATION

INNOVATION

For Illustrative Purposes Only

INNOVATION

For Illustrative Purposes Only

History and technology drivers of trendsExamples of trends:

Circles Responsive Design Scrolling Animations

Fads vs. TrendsHow to innovate through inspiration

CONCLUSION

h t tp : / / e n .w i k i pe d i a . o rg / w i k i / We b_ 1 .0 h t tp : / / compute r. how s tuff w orks . com/ w e b - 101 .h tm h t tp : / / e n .w i k i pe d i a . o rg / w i k i / We b_ co l o r s h t tp : / / w w w.w e bde s ign f romsc ra t ch . com/ w e b - de s i gn / w e b - 2 - 0 - de s i gn - s t y l e - gu ide / h t tp : / / comp lex i fy. com/ bu t tons / h t tp : / / w w w.hongk i a t . com/ b l og / cod ing - g raph i cs - w i th - cs s3 / h t tp : / / l e a . v e rou .me / css3pa t t e rns/ h t tp : / / e n .w i k i pe d i a . o rg / w i k i / We b_ 1 .0 h t tp : / / compute r. how s tuff w orks . com/ w e b - 101 .h tm h t tp : / / e n .w i k i pe d i a . o rg / w i k i / We b_ co l o r s h t tp : / / w w w.w e bde s ign f romsc ra t ch . com/ w e b - de s i gn / w e b - 2 - 0 - de s i gn - s t y l e - gu ide / h t tp : / / comp lex i fy. com/ bu t tons / h t tp : / / w w w.hongk i a t . com/ b l og / cod ing - g raph i cs - w i th - cs s3 / h t tp : / / l e a . v e rou .me / css3pa t t e rns/ h t tp: / / bos t ong lobe . com h t tp: / / w w w.cadbu ry da i rym i l k . co .uk h t tp: / / w e bde s ign l e dge r. com/ t i p s / w e b - de s i gn - t re nds - i n - 2012 h t tp: / / ux de s i gn . smash i ngmagaz ine . com/ 2012 / 03 / 15 / sy mptoms - o f- e p ide mic - w e b - de s i gn - t re nds h t tp: / / w w w.aw w w ards . com/ 30 - g re a t - w e bs i t e s - w i th - pa ra l l ax -s c ro l l i ng .h t m l h t tp: / / 99de s igns . com/ de s igne r- b l og / 2012 / 06 / 01 / 6 - w e b - de s i gn - t re nds - tha t - a re - he re - t o - s tay/ h t tp : / / ux de s i gn . smash ingmagaz ine . com/ 2007 / 10 / 11 / sp l ash - page s - do - w e - re a l l y - ne e d - the m/ h t tp : / / w w w.pub l i sh . com/ c / a / We b - De s ign / Be w are - the -We b - Fads - o f-Ye s te ry e a r h t tp

: / / t he nex tw e b . com/ dd / 2012 / 04 / 23 / se a rch ing - f o r- de s i gn - i n sp i ra t i on - he re s - 97 - o f- t he - be s t - p l ace s - t oo - look/

h t tp : / / d i s cov e r.u sab i l l a . com h t tp : / /w w w.d r i bbb le . com

RESOURCES