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
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
Top Related