Web Design Trends in 2013 - a Year of Responsive design
•Transferir como PPTX, PDF•
1 gostou•487 visualizações
Design trend is constantly changing day by day. It is quite obvious that there are 2 things that concerns dynamic entrepreneurs the most at this moment: The “Simple is Better” concept; and the rapid increase for portable devices. Savvycom JSC. P/F: +84 4 2221 4039 W: www.savvycomsoftware.com E: contact@savvycom.vn F: www.facebook.com/savvycom L: www.linkedin.com/company/savvycom
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (14)
Último
Último (20)
Web Design Trends in 2013 - a Year of Responsive design
- 1. Web Design
- 2. 2013 Trendy Designs Focus
- 3. Responsive Design (1) 1 design – any sizes Contents distribute differently based on the device size
- 4. Responsive Design (2) No need for mobile-specific version = less developing time Nice experience for users with any kinds of devices Css3 @media query Twitter Bootstrap is a good start
- 5. Performance issues No compatibility for old browser Complexity in design Responsive Design (2) Shortcoming ….
- 6. Flat Design • Focus on color scheme, typography • Less gradient, box shadow • Easy backward compability
- 7. Minimal Design ބ Minimal contents ބ Keep things simple; focus on the core ބ Good typography + cool illustrations
- 9. Fixed Header Better UX – easy navigation Work with any layouts (mostly)
- 10. Infinite Scrolling P r o s Faster browsing Touch-friendly Greater content exposure C o n s More Javascript Navigation issue
- 11. Sliding Panels Dynamic page contents Multiple static pages merged into once Sliding effect triggered via navigation items
- 12. 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
- 13. Savvycom JSC. A: No. 309, N09-B1 Building Dich Vong new urban area Hanoi, Vietnam P/F: +84 4 2221 4039 W: www.savvycomsoftware.com E: contact@savvycom.vn F: www.facebook.com/savvycom L: http://www.linkedin.com/company/savvycom
Notas do Editor
- The road ahead…
- 4 key points that trendy designs this year focus on:Mobile friendly: more accessibility & better experience for mobile users. E.g. inf. scrolling, responsive designSimplicity: contents = most important stuffs. E.g. flat design, no skeuomorphism, minimalismCool visual effects: more visual effects to capture user’s interest. E.g. parallax, large bg, sliding panelBetter UX: better & smoother experience for users – less waiting time, less interactions required for 1 task. E.g. fixed navigation elements, inf. scrolling, sliding panel
- 1 design for any kind of devices – phones, tablets, desktop, even anything released in the futureContents show up differently depending on the current device size. Resize the browser windows on desktop, or change the orientation on mobile devices to see the differences.
- Major advantages:Site with only 1 version but can satisfies all kinds of users: from mobile users, tablet users, to desktop usersNo extra mobile version, so basically, it’ll cost less time to developHow to make it:- Use css3 @media query to target different size ranges, specifying how an element should display, behave for each range
- Slower: redundant scripts, stylesheets, images are also loaded on mobile devices. Mobile-optimized sites are always faster.Compatibility: ie8– doesn’t support @media query – either (1) drop older browser user-base or (2) use javascript as a workaroundhttp://html.adobe.comhttp://spektrummedia.com
- Keep things simple, clean, minimalisticEasy backward compatibility. Plain color blocks, no drop shadow = work perfectly on ancient browsers, no need for css2Harder to design: it takes time to figure out good color schemes & typographyhttp://www.microsoft.com/en-us/default.aspx
- Another content-focusing style:A simple page with very little contents, but all focus on the message that the page owner wants to deliverUsually a combination of good, clean, easy to read typography with nice images for illustrative purposes No wall of text + good illustrations = less time consumption better UXhttp://pictopro.com/
- Capture user’s attention Unique feeling, custom brandinghttps://squareup.com/
- Use css position: fixed to keep the header/navigation elements stationaryUser could navigate easily no matter which part they are viewing: just look to the top or sometimes the left side of the pageLook pretty good and can pair with most layoutshttps://www.facebook.comtwitter.github.io/bootstrap/javascript.html
- Contents are continually fetched as you scroll down the page. Pagination is no longer necessary.Pros:Faster browsing: clicking from page-to-page and waiting for the results to be loaded is time consuming. Infinite scrolling provides smoother UXTouch-friendly: increasing popularity of mobile devicesGreater content exposure: with large volumes of contents, people hardly goes beyond the 3rd page. Seamless experience from scrolling encourages users to see more contentsCons:More javascript could be a pain for performanceNavigating back is irritating. Bookmarking & anchors might be necessary.http://pinterest.com/search/pins/?q=web+designhttp://www.tumblr.com/tagged/pokemon
- - www.numidia.it