The Tendency of Web Design in 2013
-
Upload
savvycom-jsc -
Category
Design
-
view
2.780 -
download
0
description
Transcript of The Tendency of Web Design in 2013
![Page 1: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/1.jpg)
Web Design
![Page 2: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/2.jpg)
2013 Trendy Designs Focus
Mobile friendl
yBetter
UX
Simpli-city
Content
first
Cool imag
es
Great effect
s
![Page 3: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/3.jpg)
Responsive Design (1)
1 design – any sizes Contents distribute differently based on the device size
![Page 4: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/4.jpg)
Responsive Design (2)
No need for mobile-specific version = less developing time
Nice experience for users with any kinds of devices
Why? Css3 @media
query
Twitter Bootstrap is a good start
How?
![Page 5: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/5.jpg)
Performance issues
No compatibility
for old browser
Complexity in design
Responsive Design (2)
Shortcoming….
![Page 6: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/6.jpg)
Flat Design
• Focus on color scheme, typography
• Less gradient, box shadow
• Easy backward compability
![Page 7: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/7.jpg)
Minimal Design
ބ Minimal contents
ބ Keep things simple; focus on the core
ބ Good typography + cool illustrations
![Page 8: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/8.jpg)
Large Photo Backgrounds
![Page 9: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/9.jpg)
Fixed Header
Better UX – easy navigation
Work with any layouts (mostly)
![Page 10: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/10.jpg)
Infinite Scrolling
ProsFaster browsingTouch-friendlyGreater content exposure
ConsMore Javascript
Navigation issue
![Page 11: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/11.jpg)
Sliding Panels
Dynamic page contentsMultiple static pages
merged into onceSliding effect triggered
via navigation items
![Page 12: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/12.jpg)
To sum up Trends are temporal & vary, but: Be user-centered!
• Less is more• Don’t make ‘em think (or wait)• Entertain ‘em• Go mobile
![Page 13: The Tendency of Web Design in 2013](https://reader034.fdocuments.us/reader034/viewer/2022051815/53f010c78d7f72104c8b45ba/html5/thumbnails/13.jpg)
Savvycom JSC.A: No. 309, N09-B1 Building
Dich Vong new urban areaHanoi, Vietnam
P/F: +84 4 2221 4039W: www.savvycomsoftware.comE: [email protected] F: www.facebook.com/savvycomL: http://www.linkedin.com/company/savvycom