Latest Web Design Trends for 2014
Post on 15-Jul-2015
Latest Web Design Trends 2014March 24th, 2014 - http://www.webmn.net
This deck may use content from 3rd party sources - I have done my best to credit those sources.
March 24th: Discuss Latest Web Design TrendsAgenda:6:00pm - 6:45pm - Networking, meet & 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. :-)
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...
Why this and similar groups need to exist?
Remember: Your active participation is key to this groups success!
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 Designo Suggest topics of broad interesto We all are expert at something, aren't we? Share your web
design related knowledge and expertise with the group. o Volunteer your timeo Make friends and help each othero 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.
About Your OrganizerKetan Kakkad Connect with me at http://www.linkedin.com/in/kakkad
Here to make new friends, and build strong partnerships within Web Design community in Minnesota.
23 Years in IT Industry20 Years in USA18 Years in MinnesotaA technologist / architect / technology manager / CTO by professionExperience managing large, complex technology portfolios at Small, Midsize, Fortune 500 and Fortune 50 companies, and government organizations
Today, we will be discussing...Ubiquitous Web
Outdated Web Design Trends: 2014
Latest Web Design Trends: 2014
Briefly touch base on Frontend vs. Backend
Outdated Web Design Trends: 2014
Generic Error Pages definitely outdated!
Outdated? Reloading of full pages
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->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
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
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!
disabled web fonts uses lot lesser resources on the browser, and are far more accessible!
1. Responsive design is a must-have
Responsive design: ExamplesTry resizing your browser to different sizes to see responsive design at work
How to Interesting! Web Typography for Responsive Web Design
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.
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
3. Short Presentation Videos
Whole lot of text and images replaced with a short presentation or explainer videos - at least on landing pages
4. Sticky Header / Fixed Header
How to... do check out the demo
5. Personal Portraits
Simple portfolio websites when you want to convey a bit about yourself, where youve been, and showcase your work samples.
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
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.
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).
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
8. SVG Images & Icons
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.
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
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
Parallax has never been easier
Examples and more examples
There are many more trends to discuss...
But we will not be ableto cover them in todays session
of 1.5 hours OR
fit them all in this deck.
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
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...
The Way Frontend Developers See It...
Image Credit: usability.gov
The way Backend developers see it...
Image Source: Wikipedia
One orchestra, many roles. What binds them together?
Image Source: Wikipedia
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
Frontend Backend Part of the web you can see
and interact with. Consist of four parts:
Visual Design using Photoshop, Fireworks, Wireframing and more
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.
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. usability.gov
Website vs. Web ApplicationWebsite
Backend ArchitectureThis 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 serverFreedom to present your data/content in any shape or form
Is it okay to have a wiki as a website?
Definitely not when you are Yale University - an Ivy League Institution!
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.