Web design has evolved from Web 1.0 to now based on technological advances. Some key trends discussed include responsive design, use of CSS instead of images for elements like rounded corners, and scrolling animations. The document cautions that fads are short-lived styles while trends have a longer lasting impact. It provides examples of both and emphasizes finding a balance between following trends and innovating with inspiration from other designs.
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Contemporary Trends In Web Design
1. CONTEMPORARY Caitlin Bar ta
Raynald Mir ville
TRENDS IN WEB DESIGN Kenny Rosenberg
2. WEB 1.0 - DESIGN ELEMENTS
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>
<marquee>
216 “web-safe” colors
3. WEB 2.0 - DESIGN ELEMENTS
Movement towards more flexibility for designers and
developers
Fewer tables, more CSS for arrangement
Pinterest
Near unlimited color palette due to technological advances
Larger font sizes for legibility
Rounded corners, drop shadows, textures, etc.
4. CSS3: BEFORE AND AFTER
Before After
Icons as images Icons created with CSS
http://www.hongkiat.com/
Textures as images blog/coding-graphics-with-
Rounded corners and css3/
drop shadows must be Textures in CSS
part of the image http://lea.verou.me/css3p
atterns/
Easy to add and change
rounded corners and
drop shadows on the fly
5. WHAT CHANGED?
TECHNOLOGY (AND PEOPLE).
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
6. 960 GRID SYSTEM BY NATHAN SMITH
960 pixel width layout
Two variants: 12 and 16 columns
Helpful for planning
Download includes: CSS, sketch paper, and
templates for a variety of programs, including
Photoshop, Illustrator, Omnigraffle, Visio
Download: http://960.gs/
10. CIRCLES
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 ef ficient for containing text than
rectangles.
15. RESPONSIVE WEB DESIGN
What is it?
- A page designed to change its layout on-the-fly, based on the
size of the window containing it .
- This can apply to…
- Windows of dif ferent 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.
21. 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 .
23. LONG TERM TRENDS VS. FADS
Trends are longer lasting:
Smaller changes over time
Sometimes related to evolution of technology
Fads are short lived:
Fleeting style or behavior
What's popular right now
Possibly a misuse of technology
24. 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?
37. CONCLUSION
History and technology drivers of trends
Examples of trends:
Circles
Responsive Design
Scrolling Animations
Fads vs. Trends
How to innovate through inspiration