This article has been contributed by Helga Moreno.
The Web design community never gets tired of discussing previous, current and future trends… JUST Creative even posted a 2014 web design trends article a few months ago. But trends change like pictures in fashion magazines, so let’s take another look with a different approach.
sponsored message
Trends we would like to see LESS of:
Senseless scrolling
Users scroll with particular purpose – to see what’s next on your site. They scroll for information. However, sometimes web developers are taken away by unbelievable scrolling effects, so the process losses its practical sense or even slows down the user, which is inadmissible in today’s realities when everything is focused around quick content consumption.
Always responsive
The general tendency to be entirely responsive across all mobile, tablet and desktop devices. We are not trying to convince you that website responsiveness is a dreck, on the contrary, it is a must have for most of the modern sites. Still, there always exist several exceptions from any common rule. Many great websites are not responsive because they simply don’t need the feature.
Does your website have massive background images, heavy, dynamic content, HTML5 animations, and complicated navigation bars? Then it may be better to redirect your users to the mobile version, save their time and efforts, don’t spoil their onsite experience with tardiness and non-perfect display. Here is more info on how to choose if you have a separate mobile site or a responsive site.
Browser compatibility
Your website doesn’t need to work in all browser versions (IE, Chrome, Safari, Opera, Android and so on). To find out what browser your clients prefer is easy – just check Google analytics report and you’ll have the idea. Why is it important? You’ll save an extra dollar on website development and have more time to focus elsewhere.
sponsored message
Flash websites and intros
They’re being on deathbed for a couple of years already and we sincerely hope that 2014 will let them RIP at last.
Captcha forms
We hope that 2014 will become the year when we stop proving the obvious – we are not bots, but just human beings surfing the web.
Editor’s note: Yes, this site uses a Captcha – other spam plugins have fallen short. Open to suggestions!
Forms with labels inside the text boxes
What is the goal of a form field? To make the users fill it with their information. So why do you do this instead of them? You have the space outside the box to explain what you are waiting for, so don’t interrupt the conversation and put superfluous barriers between people and their goals.
More trends we would like to see less of:
- Content carousels;
- Overly large hero images;
- Overused stock photos;
- Autoplay videos;
- Automated popups;
- Advertising sidebars;
- “Hello world” blog posts;
- Reloading pages;
- Modal windows with hidden or tiny close commands;
- Loading screens;
- Small font sizes;
- Long shadows;
- Hipster icons and logos.
Now, when we, like respectable Italians have thrown away all the things we wouldn’t need this year, it’s time to replace the vacuum with something new, fresh, out-of-the-box.
Hottest Web Design Trends of 2014: Updated
Content first
sponsored message
2014 web designs have become even more content centered. No distracting elements – focus all your efforts on better content presentation. The website below encourages the users to explore further with the help of simple, yet uncommon triangle navigation.
Interactive Exploring
Carmen lets you into her apartment and you can see and touch her personal belongings to navigate the site. See this post for some other websites with unusual navigation.
Love Carmen Rose
Big content blocks
It’s not a big secret that people perceive and process information delivered with the help of graphic aids (like tables, schemes, diagrams) easier. Big content blocks are great both for responsive web design and storytelling. They focus readers’ attention on one statement at a time. When combined with bold web fonts, lots of whitespace, separated with colors, matched with pictures – big content blocks become even more powerful.
Bold typography
Just look at these huge words. You even don’t need to strain your eyes to read the message.
Fresh colors
Pantone designers have identified ten trendiest colors of the coming season. Here they are:
- Placid Blue – a light blue pastel shade. The hue of the sky, associated with peace and serenity. Excellently goes with any pastel shades and classic colors.
- Violet Tulip – a lavender shade. Romantic and vintage hue that evokes nostalgic memories. Very feminine.
- Hemlock – light green, almost pistachio, with an oriental touch. It differs much from the trendy mint and emerald hues with its tenderness. All three of these shades perfectly combine with each other and with brighter colors.
- Sand – beige, a color of coffee with milk. The shade will look great with Hemlock green.
- Paloma – a gray shade. Due to its neutral nature, the hue will look perfect either as standalone or in combination with other colors.
- Cayenne or coral red brings some vibe to the tranquility of neutral and pastel shades. Perfectly complements each of them.
- Freesia or a bright sunny blazing yellow still holds its positions.
- Celosia Orange – a bright, neon shade of orange. Pantone designers advise to combine it with Violet Tulip.
- Radiant Orchid is another shade of purple palette. It’s a little pinker than Violet Tulip, closer to the shade of fuchsia. Looks good with neutral shades.
- Dazzling Blue – a stronger, darker and brighter than pastel Placid Blue hue.
High-quality pictures and videos
Crisp HD photos make the website look professional, attractive and help to convey the main idea better.
One-page websites
One-pagers are usually scrolled to the end so, your content has more chance to be read from cover to cover.
Fluger Design
HTML5
sponsored message
HTML5 markup language will stay a core technology for structuring and presenting content for the web. HTML5 sites will be long and narrative with a strong focus on storytelling, similar to online magazines.
Flat design
Flat design and a focus on simplicity and clarity will help websites get rid of their excess clutter and focus on the content and overall user experience.
Daniel Moon
Parallax Scrolling
2014 will see even more bold experiments and innovation with parallax scrolling. Scroll the site below and see its fantastic effects with your own eyes!
Minimal icons
Neat, minimal icons perfectly fit into clean, flat web designs but also help bring together a page in an easily digestible visual manner.
Sticky or fixed position headers & navigation
The main purpose of the technique is to keep navigation bar constantly visible for the users as they scroll down. Below you can observe a sticky menu, sign up arrow and contact us block.
Minimalist
Designers continue to hone their skills developing websites with large images, white space and minimal text which focuses users’ attention.
Prominent Social Icons
Prominent, easily accessible social media icons. It’s an undeniable fact that social media websites are becoming more popular each day. According to the Experian Marketing Services study, Internet users in the US spend 27% of their online time on social networking. Social media blocks are used to enhance usability and boost popularity of posts, thus generating traffic. Make them easy to notice and this will help your bottom line.
Retina graphics support
Websites that don’t support retina graphics can look blurry on devices with high pixel densities. The trend has seen an uplift of universal font-face glyphs craze and renewed interest in SVGs (scalable vector graphic).
Infinite scroll loading
Infinite scrolling (the technique when more images load up as the user scrolls down the page) has become a standard for image-heavy websites like Pinterest and Google+ photos. This happens because Internet is becoming more and more visual. While content still rules, pictures attract users’ attention. Most image-oriented websites on the web use infinite scroll to provide better user experience.
Mobile Design Patterns
Mobile will continue to gain even more popularity. We will see this in continuous growth of mobile first methodology and large amount of innovation for mobile design patterns.
Carlsberg
Rapid user interaction / fewer clicks
If it’s impossible to book, purchase or order your product or service in a few clicks – you will lose your potential sales. Swift interactions are crucial not only for small screens, but desktop ones as well.
Mundita
e-Commerce 2014 Web Design Trends
Who rules the world of e-commerce? It’s the customer of course. That is the reason why online merchants are ready to do the impossible to enhance the customer’s online shopping experience. This desire combined with technological innovations, website application development & design tools, will give help improve sales.
Customization and personalization options
In the current year we hope to see more e-commerce projects offering customization options to end users, that is, allowing buyers to customize the products according to their needs. For instance, you will be able to decide what type of graphics you want on your body when you try on the clothes in a virtual dressing-room.
Track user’s behavioral patterns
In addition to customization, developers will also employ technologies to track users’ behavioral patterns onsite and suggest the products they may need. Amazon would be a perfect example of this.
A Gentle Reminder
Instead of a conclusion, we would like to remind you that a decent design should serve both practical and aesthetic purposes. Design for the user’s needs and apply best practices. Don’t follow trends for the sake of it.
Do you have any updated 2014 web design trends to add?
—
Helga Moreno is a learning junkie, requiring a new dose of fresh information every day. She diligently puts down all her thoughts in order to share the most interesting of them with web community in general and TemplateMonster’s readers in particular. Want to know more about her? Visit her Google+ profile.
c’mon man, captcha required to leave a comment? Pretty sure I just read about how much you wish that would go away… and cliché stock photo that has no meaningful connection to the content of this article? I’m pretty sure you wrote about that too. You can do better…Best of luck, but I think we’re done here…
Kevin,
I’ve been trialing a few spam plugins and so far the captcha one has been the best for my site. I hate them just as much as the next person but they work. The blowing of the kiss is meant to relate to the “kissing good bye of trends” but have since removed.
I love the trendy new colors and will incorporate into our my website!
Thank you for the article.
Regarding this: Advertising sidebars;
Then what do you think is the best place for advertising?
Reem,
I think having more targeted, focused advertising is the way to go – not dozens of ads down the side of the page. Too much choice, leads to less eyes and less clicks.
I thought loading screens are the trend. I am increasingly watching this feature in Themeforest. And what about the captcha feature you have enabled? 😉
Manuel,
This is a trend we would like to see less of, pages are getting getting more bloat especially with all the larger images. “According to the HTTP Archive, the average top 1,000 web page is 1246 KB, compared to 828 KB in May 2012.” http://www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
See my comment above to Kevin re captcha.
Amazing update to an already good article.
About the captcha and in defense of this blog, it’s the best way to avoid spam by bots, I hope we will see this year a efficient alternative to captchas.
Keep up the good work Jacob.
It’s actually an entirely new article with a new showcase, but got the drift, thanks!
Guys, thanks to all of you for this discussion, I absolutely love such active readers!
I would like to see one simple thing that I nearly never do. When I am filling out an order form, typing and tabbing between fields, I am almost invariably brought to a halt by a dropdown which insists I grab the mouse and choose my state from a list of 50+. This irritates me beyond all reason. First, I have proven my typing prowess by all the information I have previously entered, and I am certainly capable of typing two freaking letters. Give me that option. Second, I have usually typed in a US zip code already, so for the love of all that’s holy, go ahead and prefill the state field based on that.
This seems like a minor nit to pick, but I just cannot believe after all these years I still have to interrupt my efficient data entry to pull down a ridiculous list like a preschooler.
There are some major UX flaws with the Love Carmen Rose website. Yes, it’s interesting and unique to click her personal belongings as navigation, but this means I can’t scan the navigation items to find what I’m looking for. I have to click the tiny dot once to see where it will take me, then click again if I guessed correctly. Minimum of two clicks to get where I want to go — a lot more if I didn’t choose the right dot.
I also don’t agree with the Soyuz Coffee Roasting site as being a good design trend. Sure it’s a fun effect, but it’s incredibly distracting from a reader’s perspective. Subtle parallax is very nice to add a bit of depth to a site (e.g. Spotify), but things flying all over the place is just a javascript version of bad Flash sites. I would like to see a lot less of this.
Hi Dan,
After checking the Love Carmen Rose site I agree with you about it being a bit hard to find exactly what you’re after. I think a good solve for this would be to have clearer markers and having some text come up on hover.
Parallax scrolling such as the Soyuz Coffee site is certainly a big trend and yes it can be distracting at times. This one borders on it, but I think it is still interesting enough (with the different navigation) that it makes you keep exploring.
Hi,
All of these latest trends are very useful for the website design industry because all these trends create a new, attractive and eye-catching graphics for websites. These trends increase web traffic because websites support all the devices and compatible with all the browsers.
“FORMS WITH LABELS INSIDE THE TEXT BOXES”. PLEASE, fellow web devs & designers take note – make this go away! It’s a nightmare for users (pssst, this form uses it).
It may not be that bad for a simple comment form such as this since the amount of data being collected is small, and it’s easy to tell what each input field is looking for once you fill it out. However, forms that gather more complex data, especially when there are many fields can confuse users. One example of this I experienced recently was on a client’s site.
There was an ability to add staff members to a business and later on edit that staff member. When you add a staff member it gathers information such as first and last names, years employed, years of experience in field, and job position, and some other data. When editing the staff member’s information though at a later date, with no labels, and the input field filled out – you have no idea which of the numerical fields are which, especially if you were not the original person who filled out the staff member’s information in the first place.
I had to rally very hard to have this changed. The client liked the “cleaner” effect of the labels/placeholders being contained within the inputs, even if it meant that users may have no idea what the fields were 😐
Hi, great article.
re. Captcha, have you guy’s tried the ‘SweetCaptcha’? at SweetCaptcha.com
More creative! (I’m not promoting, I promise; I have Captcha on my sites and am looking to translate).
Great list!
I think the #1 trend we would all like to see is better Usability. This is everything – people know how to browse content now – the faster they can achieve their “goal” and get on with their lives – the better. Usability, content and short page depth is everything. I agree that interactive exploring is cool and unique – but it will never beat out a user-friendly website experience.
Great Post Jacob, Liked all the points you covered in it, Thanks for sharing it.
Loved this article. 🙂
It is just awesome. I really liked it. I have visited all the site links you shared as examples. We are also a Web design & development company in Sydney , Australia. I am going to follow these trends for the development of our site, as well as for my running clients projects.
Thanks for this blog.
Good writing article, I like it. Thanks for it.
Quite informative post. If you are creating a new website or a redesigning an existing one, then you need to be aware of the latest and hottest web design trends to improve your website’s visibility and its popularity.
Great article indeed. Here is a similar blog that offers the latest trends about web designing.
http://starscontest.com/blog/
Thank you for the post it’s a good one
This is really great collection jacob.
Really amazed with fluger design. 🙂
These are some great and influential designs… Do you have seen Web Designs using Web 2.0 Technology? See this: http://howfreelance.com/blog/best-web-design-inspiration-using-web-20-technologies/.. These are some awesome designed websites and are mind blowing to take on..
Interesting read but there are a few contradictions from the trends you would like to see less of and the trends of 2014. I would also highly disagree about the browser capability. You need to know your audience but you should never exclude a group of potential customers.
Lot of people has different queries Like: hotmail account
hacked, hotmail accounts has been blocked, hotmail account is blocked, hotmail account locked, Here in our tech support center hotmail customer or tech support representative are qualified for fixing any hotmail problem.
I completely agree with your responsive website point. Although responsive websites are nowadays considered must but still they are not perfect choice for every business. It varies upon the business. Sometimes having a separate mobile website is better option than having a responsive website.
Always responsive?
I don’t think there is an argument for separate mobile site any more if you do responsive sites properly.
The constant redirects to mobile subdomain, duplication on development and reduced usability are a few reasons to keep things responsive.
Very nice website thanks for nice posting it is very trully and great information we are also talented web designer in Sri Lanka and welcome you to visit our website. Thanks again.
Thanks for your very nice information it is trully and informative post we are also in the same business and we have own website for Web Designing in Sri Lanka for other information please visit our website. Thanks again…….
Nice post. Its really helpful who are into Web Designing and want to make their carrier bright in this field.
Great Post! These updated trends of Website Design are amazing because these trends make the website eye catching and will help in increasing its traffic. Thank you for sharing this informative stuff.
I’ve been finding a number of creative 3D animations in more websites over this past year. These are often built into the page for animated image galleries, navigation menus, and elements. The 3D effects can be created using jQuery although CSS3 has been catching up.
Naturally the animations aren’t fully supported in all browsers, and designers should be wary of using too many animations on one page.
Thanks for sharing this extensive article, very nice overview!
These latest trends are vital for the development of the website design industry because all these new trends help make attractive and user engaging websites.
When some one searches for his essential thing, so he/she desires to be available that in detail, therefore that
thing is maintained over here.
tnx a lot
tnx a lot..
This is really good article and thanks for sharing. When any one will be search in Google “web designing latest update” then it is showing on First . Thanks Jacob…
Regards
Webzesty
I know the colors are popular, but please, please, PLEASE, designers, think a little about those of us who are over 40! I am getting so tired of squinting until I have a headache, just to see what the text of a hot link is, when the text is a very thin, san serif font in a light blue or green color. Low contrast on websites is about to blind me! Another trend that drives me nuts is text boxes that have no, or a very thin, light colored border. I have to run my mouse over half the page to find the box. Try to think beyond your own circumstances. Otherwise, I will have to abandon your beautiful designs and turn on accessibility settings. Then your entire design will go to waste!
Excellent, what a website it is! This web site presents useful data to us, keep it up.
I actually enjoyed your post. The way you delivered your view/opinion, was very insightful. Your contribution to this community will be very fruitful to us.
The long-awaited new era was introduced painlessly and smoothly.
Unfortunately, I could find precious few locations in the oral arguments where judicial
clarity was matched by attorney clarity. To me, obfuscation abounded, and probably intentionally so.
All are awesome! I really like the “Wanda Print”. They have a great creativity and done a fabulous work there.