Latest Web Design Trends for 2014

Download Latest Web Design Trends for 2014

Post on 27-Jan-2015




1 download

Embed Size (px)


This deck is from meetup session on March 24th ( where I facilitated discussion on Latest Web Design Trends for 2014. Slideshare is making some of the links in this deck non-clickable. You may access the Google Docs version of this deck here... What other trends you see being used? Would love to hear from you in the comments section below.


<ul><li> 1. Latest Web Design Trends 2014 March 24th, 2014 - This deck may use content from 3rd party sources - I have done my best to credit those sources. </li></ul> <p> 2. March 24th: Discuss Latest Web Design Trends Agenda: 6:00pm - 6:45pm - Networking, meet &amp; greet, make friends 6:45pm - 8:30pm - Brief overview of the current state of the group - Discuss Latest Web Design Trends for 2014 Let's discuss latest web design trends for 2014 in this interactive session. We will be reviewing top 10 or 20 design trends and take a look at certain websites that utilize one or more of those trends. This session will be led by the group organizer - Ketan Kakkad, but expectation is that everyone will participate. A note about these slides: Many of the large images are hyperlinked to external sites but may not have a specific indicator to inform you about the hyperlink. When in doubt, try clicking through it. :-) 3. We are a group of professionals focusing on All Things Web Design and Web Technologies; a community built upon four pillars: Network, Engage, Share, and Learn From Each Other. Our vision is to build a strong local platform for learning and knowledge sharing among peers. December 2011 This meetup group was rescued from planned shutdown. We hit the reset button and clearly defined groups objective... 4. Why this and similar groups need to exist? Remember: Your active participation is key to this groups success! 5. I would like to request your help... Contribute your skills and time to help turn this group into an authoritative body for All Things Web Design o Suggest topics of broad interest o We all are expert at something, aren't we? Share your web design related knowledge and expertise with the group. o Volunteer your time o Make friends and help each other o Most important: Remain Engaged! o If you have a facility big enough for 75 to 100 attendees, we would love to have your offer of hosting some of our meetups at your office. Before you leave, please help make sure that we put tables and chairs back to where they belong. 6. About Your Organizer Ketan Kakkad Connect with me at Here to make new friends, and build strong partnerships within Web Design community in Minnesota. 23 Years in IT Industry 20 Years in USA 18 Years in Minnesota A technologist / architect / technology manager / CTO by profession Experience managing large, complex technology portfolios at Small, Midsize, Fortune 500 and Fortune 50 companies, and government organizations 7. Today, we will be discussing... Ubiquitous Web Outdated Web Design Trends: 2014 Latest Web Design Trends: 2014 Briefly touch base on Frontend vs. Backend 8. Ubiquitous Web 9. Outdated Web Design Trends: 2014 Mashable 10. Generic Error Pages definitely outdated! 11. Outdated? Reloading of full pages Oh, its so last decade. Use AJAX/XMLHttpRequest and JavaScript to perform asynchronous operations and reload parts of the page without having to refresh the whole page. Example: dont require users to submit the whole page to check if username is available. Use AJAX and API calls to check it without having to Submit-&gt;Reload entire page! Usability point of view: GOOD SEO point of view: BAD - dont do this for everything, specifically avoid AJAX loading of content when you want search engines to index it. Flash Intros OR Flash in general Photo Carousel / Sliders - havent we overused them already? Large Hero Images Unless done right, problematic on mobile devices 12. Outdated? Accordions? Stock Images/Photos There gotta be a better solution. Arent we all tired of seeing same photographs again and again? Animated GIFs Cool on social media sites or for creating that viral content But avoid it in a business-centric website Autoplay Videos Widely practiced, but a big turnoff for site visitors Automatic Popups (JavaScript powered or otherwise): They are so annoying and dont work on mobile phones most of the time This cant be a 21st century website of a world class institution Can it be? Dont ignore your micro-sites, specifically not when yours is a world class institution! And oh, no cufons pleeeez! web fonts are much easier to implement for developers unlike cufons, web fonts do not require any extra code unlike cufons, web fonts dont have to fallback to web-safe fonts when JavaScript is disabled web fonts uses lot lesser resources on the browser, and are far more accessible! 13. 1. Responsive design is a must-have 14. Responsive design: Examples Try resizing your browser to different sizes to see responsive design at work More Examples How to Interesting! Web Typography for Responsive Web Design 15. 2. Typography within your reach Typography is one of the fundamental design element of print and web media. However, until recently, our choices were limited to web-safe fonts while still not being certain about specific fonts availability across wide range of operating systems and browsers. While those web-safe fonts served their purpose well, now we have a wide ranging options for rendering websites that is reaching sophistication and aesthetically appealing presentation that of print media. 16. Typography Examples 47 Top Typography Tools and Resources A More Modern Scale for Web Typography For starters, one of the easiest solution: Google Web Fonts Beautiful Web Fonts NOT FREE, but worth exploring for commercial needs Typecast Cloud.Typography Some examples of web typography Interesting! Web Typography for Responsive Web Design 17. 3. Short Presentation Videos Whole lot of text and images replaced with a short presentation or explainer videos - at least on landing pages More examples 18. 4. Sticky Header / Fixed Header How to... do check out the demo 19. 5. Personal Portraits Simple portfolio websites when you want to convey a bit about yourself, where youve been, and showcase your work samples. How to... 20. 6. Grid Style Layouts This isnt something you can force into any old website. There needs to be a purpose, the user experience always comes first. In situations using thumbnail images or text updates the grid layout condenses everything into an easy-to-read format. How to... Masonry 21. 7. Hero Areas A hero area is a term borrowed from print design. Basically, this term refers to the design trend in which the top of a web page contains a large image with very little text. The idea is to grab attention, make an impression, create curiosity, and give the visitor a brief snapshot of what the website is about all in a matter of seconds. 22. Hero image is a term used in web design for a specific type of web banner. A hero image is a large banner image, prominently placed on a web page, generally in the front and center. The hero image is often the first visual a visitor encounters on the site and its purpose is to present an overview of the site's most important content. A hero image often consists of image and text, can be static or dynamic (e.g. a rotating list of images and/or topics). - wikipedia Web design has been trying to look more and more like print and hero images are a part of that. Source When done right with consideration for mobile device traffic, Hero areas provide a user experience that is similar to the front cover of a printed magazine. 7. Hero Areas 23. 8. SVG Images &amp; Icons Snap.svg is a JavaScript svg animation library that let you bring your svg to life. 24. 9. Single Page Websites Single page websites look cool and add that WOW factor for the users who are typically accustomed to multi-page websites - that is once user is on your site. If you also need to worry about driving traffic to your site through search engines, you should read this page before taking a plunge into building single page websites. 25. 10. Parallax Scrolling Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. Source: wikipedia 26. More on Parallax Scrolling They are perfect for storytelling (micro sites or sections of a website). A well designed parallax scrolling site allows user to interact with the site instead of requiring user to click through links to navigate the website. But not necessarily a good fit for all websites Its same as Single Page Websites - well, there are some workarounds too! Not SEO-friendly, poor analytics and may not render well on mobile devices Think it through long and hard before going for a parallax site as your corporate website Parallax has never been easier Examples and more examples 27. There are many more trends to discuss... But we will not be able to cover them in todays session of 1.5 hours OR fit them all in this deck. 28. source 29. Some More Fun... How A Web Design Goes Straight To Hell 8 Websites You Need To Stop Building What I want from a restaurant website 30. FRONTEND BACKEND vs. 31. Where is disconnect? Often, there is a disconnect between frontend and backend development teams. Why? Its because for both of these teams, their view of the world is very different. They mostly dont use a common metaphor or a modelling language when describing what they are trying to achieve. Do we really need a new, common vocabulary? I think, both these sides have a decent understanding of what vocabulary the other side is working with? Interesting read: I dont speak your language... 32. The Way Frontend Developers See It... Image Credit: 33. The way Backend developers see it... Image Source: Wikipedia 34. One orchestra, many roles. What binds them together? Image Source: Wikipedia 35. Frontend vs. Backend Using metaphor of a game of football... FRONTEND team could be described as members of the team in offensive positions. BACKEND team could be described as members of the team in defensive positions. As you can see, both parts of the team - frontend and backend - are crucial to your winning strategy. Both these teams have very different roles and responsibilities and require unique skillset in most situations. But that doesnt mean that player in defensive position cannot or should not play in offensive role if it becomes necessary. They are not opposing teams! Image Credit: apparently from Fox Sports 36. Frontend Backend Part of the web you can see and interact with. Consist of four parts: Visual Design using Photoshop, Fireworks, Wireframing and more Development of HTML, Forms, CSS, JavaScript, Graphics Copywriting / Content Authoring Client Browser / User Agent Part of the web you can see and interact with. Parts hidden behind the curtain Usually Consists of three parts Infrastructure (server hardware, firewalls, web server software, application server software etc.) Application - php, java/jsp, ASP.NET/C# etc. - custom developed, 3rd party components/libraries Database(s) - MySQL, Oracle, SQLServer etc. 37. User-Centered Design Process - Not a Rocket Science! The user-centered design process is composed of several methods and tasks related to website development. The type of site you are developing, your requirements, team, timeline, and the environment in which you are developing will determine the tasks you perform and the order in which you perform them. 38. Website vs. Web Application Website HTML5 CSS3 JavaScript + bunch of JavaScript libraries and frameworks Ideally, powered by a CMS Themes for CMS platforms Very likely some sort of database Social media integration Mostly intended for information delivery Very little user interaction possible Web Applications HTML5, CSS3, JavaScript + bunch of JavaScript libraries and frameworks Possibly powered by a CMS May use CMS themes, but more likely the entire user experience is designed and coded from scratch Mostly user-centric experience requiring user accounts, permissions, and logins/passwords Heavy on database and middle-tier 39. Backend Architecture This is a pretty complex topic, but if there is one point I would you to bring home, it is design API-Centric Web Applications Allows Asynchronous data exchanges (AJAX) with the server Freedom to present your data/content in any shape or form 40. Is it okay to have a wiki as a website? Definitely not when you are Yale University - an Ivy League Institution! 41. Last but not least... We were lucky to have couple of volunteers who captured some of the main discussion points from our March 24th 2014 session. </p>