We’re starting up the second month of 2016 and have seen many predictions for the web design scene already.

While most of these predictions make a lot of sense based on what we have seen being used lately, I’d like to dig deeper into these trends and analyze the top 7 web design trends 2016 has to offer, while providing some tools and resources in achieving the desired look.

7 graphic and web design trends

What trends you need to watch out for this year?


Table of Contents:

  1. The Latest Web Design Trends 2016
  2. Design Trends vs. Great Design
  3. Medical Websites in the Realm of Modern Design Trends
  4. Get Better User Engagement by Integrating Social Logins on Your Website
  5. Web Design Across the Globe

For every trend, I will provide you some data and research that supports the fact followed with examples of real websites utilizing it. I will also recommend some tools, resources and services for implementing the trend into your project.


 

Brave People

Brave People uses a slideshow of full-width genuine photo backgrounds that create an impression of a humanistic brand.

1. Imagery Web Design Trend: Large Background Images

Stock photos still play a major role in digital communication, whether it’s an eCommerce store, portfolio or blog. People use images to engage more with users and illustrate the message they are trying to send. For a long time, the web has been suffering from cheesy and fake looking stock photography with super happy people wearing perfect smiles and suits.

Thanks to communities, like Unsplash, Picjumbo, Death to the Stock Photo because designers now can utilize beautiful and, most importantly, natural looking photos for their web designs or blog posts. We’ve seen many websites using photos from Unsplash and it simply looks amazing.

“Users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to “jazz up” Web pages.” – Nielsen Norman Group

The Nielsen Norman Group eyetracking studies have shown that people generally ignore cheesy and artificial looking photos. However, 2016 is the year of genuine imagery and you should take advantage of using real photos to connect with your audience in a genuine way.

Examples of Large Background Images in WebDesign

Grain & Mortar

Grain & Mortar is another great example of beautiful imagery in web design.

Grain & Mortar

Natural and real photography resonates with people, instead of using cheesy stock photos. Grain & Mortar used an informal shot of their team that connects with the visitors very well.

Grovemade

Grovemade has a beautiful, product-focused approach when it comes to their website.

Grovemade

People make purchases based on their emotions. Grovemade utilizes high-quality photos of their products that definitely add a feeling of trustworthy organization and awakens a desire to buy the product.

Free Stock Photo Websites:

  • Unsplash is a great place for getting great looking photos of various objects including people, technology, nature, and more. You can use photos for personal or commercial purposes without any attribution.
  • Raumrot is a collection of free handpicked stock photos for your commercial and personal works.
  • Gratisography provides free beautiful high quality photos with a creative spin for your personal and commercial projects.
  • Life of Pix has a huge variety of natural looking stock photos that are free to use for any project without any attribution.
  • Death to the Stock Photo is an exclusive membership that sends free stock photos that you can use any way you wish to your inbox once a month .
  • Picjumbo is an ever-growing collection of free stock photos that don’t require attribution.
  • Jay Mantri exceptional quality stock photos that you can use for free for both personal and commercial projects.

Premium Stock Photo Websites:

  • Stocksy offers a tightly curated collection of high-quality stock photos to anyone seeking modern, relevant, authentic images.
  • 500px Prime provides super exclusive stock photos. Most of the photos on 500px Prime have never been used in commercial campaigns before.
  • Refe focuses on providing high-quality imagery of people interacting with technology for your projects.
  • Snapwire connects mobile photographers with businesses and brands that need creative imagery. They also have a huge database of stock photos.
  • Offset is a truly unique collection of images from award-winning artists.
Airbnb

Airbnb takes advantage of beautiful videos in order to complement their ‘Belong Anywhere’ campaign.

2. Video Background Web Design Trend

Websites generally are storytelling tools and storytelling can be more effective when visuals and motion are involved so the ideas and emotions can be transferred to the visitor easier. We’ve seen businesses implementing video in their websites. In 2016, this trend will grow even more with the endless possibilities of 3D graphics and HD quality videos to build that impression of real life experience.

According to ClickZ people love video as statistics show mind blowing numbers of video consumption online.

Users prefer content in a visual format, which explains why online content video views have finally topped 50 billion views each month.

The exponential growth of YouTube proves the fact that old school TV is dying and people prefer to choose what they want to see. SocialTimes infographic reveals surprising numbers of how US millennials are abandoning TV.

YouTube reaches more US adults aged 18–34 than any cable network. Users upload 100 hours of video to YouTube every minute.

The downside of this trend, however, is extended load time. Many websites solve this problem by beautifully designed loading screens but it doesn’t change the fact that people still have to wait for the full experience to load.

Examples of Video Backgrounds in Websites

A Bloom of Ruins

A Bloom of Ruins is a great example of subtle video being used as a full website background.

A Bloom of Ruins

A Bloom of Ruins creates a memorable experience by utilizing mysterious light and blurred imagery in the video background and loads super fast making a magical overall look and feel.

Bloomberg Media

Bloomberg Media uses video to demonstrate the diversity and capabilities of their work.

Bloomberg Media

Bloomberg Media is a media company whose focus is large amounts of information and breaking news. Utilizing video that is activated by hovering your mouse over add this feeling of being a trustworthy and technology savvy company.

3. Personal Branding Trend In WebDesign

Personal branding exists whether you focus on it or not. Your identity and your image (how you are perceived by other people) are very different. The main focus of personal branding is to align vision and mission so you are perceived as you’d like to be instead of people speculating and having different opinions about you.

“Your brand is what people say about you when you’re not in the room” – Jeff Bezos, Founder of Amazon

I highly recommend you check Neil Patel’s “The Complete Guide to Building Your Personal Brand” to better understand the importance of personal branding and actionable steps to get where you want to be.

Examples of Personal Branding in Websites

An1ken

An1ken Group website isn’t yet another faceless organization. Nicely used profile photo and a simple description says it all.

An1ken Group

Founder of An1ken, Jacques van Heerden makes sure people get to know him, his company values and what his company is all about. No hiding online – visit the website now and tell me does this company look and sound trustworthy to you? It totally does for me.

Dale Partridge

The Daily Positive is highly associated with Dale Partridge personality.

The Daily Positive

Having a human behind the brand or organization makes people trust it and help them make a decisions easier. Personal photo along with a combination of  high number of followers as a social proof ensures people that it is worth following.

Tobias van Schneider

Tobias van Schneider has a very memorable portrait photo accompanied with bold typography and straightforward facts.

Tobias van Schneider

Bold, straightforward and effective. Tobias uses lots of negative space to draw attention to his personal brand and make communication clear with concise facts.

WordPress Themes Focused On Personal Branding

When designing a personal brand focused website consider including your vision or mission statement. Use personal photos, add some credibility, such as list press, interviews, published content, and achievements.

Rosemary is a light & bright blog theme, tailored to showcase your content in an effortlessly timeless style.

Rosemary is a light & bright blog theme, tailored to showcase your content in an effortlessly timeless style.

Rosemary WordPress Theme ($38)

Rosemary is a perfect blog theme for anyone willing to build a personal following. It has a clean, content-focused layout and specific widget designed to sell yourself by using your profile photo, description and all the social networks you are in.

Readme is a responsive WordPress theme focused on readability with a minimalist design and optimized for mobile.

Readme is a responsive WordPress theme focused on readability with a minimalist design and optimized for mobile.

Readme WordPress Theme ($48)

A trendy and minimalistic blog theme with a strong focus on the author, this theme offers a designated area for your photo, short elevator pitch, and call to action button.

Vanity is a recasting of the business card. Made with creative professionals in mind.

Vanity is a recasting of the business card. Made with creative professionals in mind.

Vanity Tumblr Theme ($49)

People are interested in other people. People buy from people, not from companies. This theme has been designed to help you make that human connection with other people so you can brand yourself better.

It's Nice That combines beautiful visuals and elegant typography to build a pleasant mobile reading experience.

It’s Nice That combines beautiful visuals and elegant typography to build a pleasant mobile reading experience.

4. Web Design Trend – Mobile First Websites

Web usage patterns are changing and statistics cannot be ignored if you want to succeed in today’s market. Every third website visitor now uses a mobile device and websites that do not offer mobile optimised versions are causing an unpleasant experience and eventually losses money as users tend to abandon the website if it doesn’t render well on mobile device.

“The number of people using mobile devices outstripped people on desktop computers in 2014.” – Jim Edwards, Business Insider, April 2014

Adopt a mobile first approach when designing or redesigning your website to ensure that you maximize your potential and reach more of your target audience. This means you have to be brief, focused on the content and performance which takes advantage of advanced features, like mobility, GPS, touch screen and more, that desktops aren’t able to offer. In 2016, we’ll be seeing the continuous growth of mobile web design development and spectacular innovations based on the ever changing market behavior.

Read more about Mobile First, an adaptive, future-friendly solution for website design.

Examples of Websites Built Mobile First

The Verge is a perfect example of tapable space and finger friendly buttons, read post titles with illustrations.

The Verge is a perfect example of tapable space and finger friendly buttons, (read post titles with illustrations).

The Verge

The Verge is a super visually heavy news website with lots of colors and imagery. However, they have done a great job on optimizing it for mobile devices with a clean layout and close relation to the desktop version.

Newsweek is a great example of heavy content website that looks organised and lightweight on mobile device.

Newsweek is a great example of heavy content website that looks organised and lightweight on mobile device.

Newsweek

Keep it simple is the design approach the Newsweek design team has taken to form their mobile version with loads of white space and clean typography and accompanied by relevant imagery.

Responsive and Mobile Friendly WordPress Themes

The responsive or mobile-friendly version of your website can easily double your traffic as people will be empowered to access your website any time anywhere. The themes below are suitable for various projects and are responsive already.

BeTheme is extremely advanced, customisable and responsive WordPress theme with built-in Drag&Drop tool that gives unlimited possibilities.

BeTheme is a responsive template with nice imagery and clean flat design.

BeTheme WordPress Theme ($58)

In 2016, responsive is a must, not just a nice to have.  The BeTheme is an extremely advanced, customizable and responsive WordPress theme with built-in drag & drop tool that gives unlimited possibilities.

Salient is a responsive and retina ready WordPress theme with unlimited customising possibilities that will look stunning on any size device.

Salient delivers great graphics and sleek look and feel on any screen size.

Salient WordPress Theme ($58)

When designing a content heavy website you always need to take care of how mobile devices will display it. Salient is a responsive and retina ready WordPress theme with unlimited customizing possibilities that will look stunning on any type of device.

The Blocks - iPhone App Website Template is a responsive 1 Page iPhone App HTML website template which looks great and is super easy to update and use.

Blocks looks great on both, desktop and mobile devices.

Blocks HTML Template ($20)

Most of app websites don’t require multiple pages to sell the idea. The Blocks iPhone App Website Template is a responsive 1 Page iPhone App HTML website template which looks great and is super easy to update and use.

A lot of white space combined with strict grid and rectangle shaped content blocks look very balanced and trustworthy.

A lot of white space combined with strict grid and rectangle shaped content blocks look very balanced and trustworthy.

5. Modular Design (Grid Based) WebDesign Trend

Modular or grid based design, also known as cards/tiles design approach, is not new in the web design scene, but it started to get more traction as it is reusable and very responsive-friendly with the tiles stack nicely on different screens and form a flexible layout that looks nice and clean on any screen size.

Modular design, or “modularity in design”, is a design approach that subdivides a system into smaller parts called modules or skids, that can be independently created and then used in different systems. A modular system can be characterized by functional partitioning into discrete scalable, reusable modules, rigorous use of well-defined modular interfaces, and making use of industry standards for interfaces. – Wikipedia

One of the best known examples of modular design is the Microsoft Metro style which doesn’t seem to be very successful, though. However, many web apps like Pinterest, Instagram, Designspiration are utilizing the grid based design very successfully.

Website Examples of Modular Design WebDesign Trend

A nice and clean example of how tiles are used to lay down the content of the website.

A nice and clean example of how tiles are used to lay down the content of the website.

Anthony John Group

Anthony John Group has a clean, image based grid with just enough of white space to make things look balanced and trustworthy.

Well Made Studio combines pastel color palette with clearly defined cards for content pieces laid out in an organised grid.

Well Made Studio combines pastel color palette with clearly defined cards for content pieces laid out in an organized grid.

Well Made Studio

Well Made Studio has a harmonious combination of pastel color palette with authentic typeface and balanced spacing.

Grid Based WordPress Themes

Grids are great for displaying galleries but also can work well with written or multimedia content. Themes below have unique and creative take on grid based layout.

Vienu is a nicely designed magazine theme with beautifully executed modular design approach in mind.

Vienu is a nicely designed magazine theme with beautifully executed modular design approach in mind.

Vienu WordPress Theme ($43)

It is hard to find a visually appealing magazine theme as they are always overloaded with information, Vienu, however, has a balance between tiles and list blocks that simply work together creating a pleasant experience.

Trim is a notably sleek and tidy WordPress blog and portfolio theme built using grid.

Trim is a notably sleek and tidy WordPress blog and portfolio theme built using grid.

Trim WordPress Theme ($58)

Trim is an elegant theme that utilizes grid layout in a very artistic and visually appealing way. Whether you have an image based post or just text, you are covered. Everything you publish on this theme will look great.

Mindig is a flat & multipurpose ecommerce theme for WordPress that utilises the modular design approach.

Mindig is a flat & multipurpose eCommerce theme for WordPress that utilizes the modular design approach.

Mindig WordPress Theme ($63)

When building an e-commerce store you should think of ways to lay your products in a way that appeal to your potential customers. Mindig has a nice grid based layout with a professional use of white space and powerful typography.

Apple MacBook has designed a super long page to represent its new product emphasising beautiful shots of the product accompanied with smart copy. The goal is simple, convince user to buy by the end of the page.

Apple MacBook has designed a super long single page to represent its new product emphasizing beautiful shots of the product accompanied with smart copy. The goal is simple, convince user to buy by the end of the page.

6. One Page (Single Page) Web Design Trend

It simply makes more sense from the UX perspective – Rebecca Gordon’s research “Everybody Scrolls” shows that users love scrolling.

Research conducted by Huge shows that despite the layout structure nearly 90% of visitors will scroll until the bottom.

Research conducted by Huge shows that despite the layout structure nearly 90% of visitors will scroll until the bottom.

Scrolling is winning over clicking due to the changing web browsing patterns. As mentioned earlier, mobile device usage growth has influenced the way websites are designed nowadays. With smaller screens and super natural touch scrolling movement, people prefer to scroll around instead of clicking on the links and waiting for the content to appear.

One pagers gained momentum a couple of years ago but now it has started to make even more sense and people seem to enjoy it as it presents huge chunks of information at once in a nicely designed step by step flow.

Examples of Single Page Websites

One page layouts are popular among yearly reviews like Spotify's Year in Music as it allows a natural timeline of the year in an easy to browse manner.

Spotify’s Year in Music allows a natural timeline of the year in an easy to browse manner.

Spotify’s Year in Music 2014

One page layouts are popular among yearly reviews like Spotify’s Year in Music. Large amounts of data and statistics digested for mass consumption with a visual and interactive approach.

Brandon Gore is a great example of the previously discussed Personal Branding trend combined with One Page design philosophy.

Great example of the previously discussed Personal Branding trend combined with One Page design philosophy.

Brandon Gore

One page design philosophy starts to get traction among individuals building personal portfolios, Brandon Gore being one of them. He includes a personal portrait photo to better connect with the visitor and provides some essential information about himself, his work, and his contact numbers.

One Page (Single Page) WordPress Themes

As you already know, people don’t mind scrolling but loading a lot of content in one page might take longer than splitting content to different pages. However, you expose your users more to all of your content at once.

Supernova is a multi-purpose theme with innovative and state-of-art techniques and design features such as transparent menus and elements, parallax effects, motion backgrounds and more.

Supernova is a nicely designed layout that can be easily customized and used as an impressive one page website.

Supernova WordPress Theme ($45)

Supernova is a multi-purpose theme with innovative and state-of-art techniques and design features such as transparent menus and elements, parallax effects, motion backgrounds, and more.

Appster is an elegant one page WordPress theme perfect for promoting your application.

Appster is an elegant one page WordPress theme perfect for promoting your application.

Appster WordPress Theme ($43)

With an ever-growing market of mobile apps, one page app websites prove to work and produce positive results, such as getting followers and downloads. Appster is a sleek one page website layout with a focus on your app.

Obsession is a flexible and highly customisable multi & one page WordPress theme.

Obsession is a flexible and highly customizable multi & one page WordPress theme.

Obsession WordPress Theme ($43)

This theme has all the popular features a one-page website should have, a full-width slider with clean copy and clear call to action button and a customizable content area that delivers everything you may need on your website.

Strong focus on key brand color and loads of negative space with an emphasis on the product.

Strong focus on key brand color and loads of negative space with an emphasis on the product.

7. Material/Flat design Web Design Trend

Flat design was quickly adopted by designers and  big tech companies like Apple that basically killed skeumorphism very quickly.

Some of the advantages of using the new paradigm are that flat design forces designers to focus more on content, pick the right colors to help users navigate through designs, and use white space with care.

68% [of web designers] think that flat web design will still be around five years from now.

The popularity of Google Material Design philosophy is being embraced by many designers and developers that lead to cleaner and more organized digital products which can be used without the users having to learn the complex curve. Research conducted by Usabilla shows that web designers are in favor of the flat design movement.

Examples of Flat Web Design Trend Websites

Format has a lovely combination of stunning image combined with sleek flat graphics in a balanced composition.

Format has a lovely combination of stunning image combined with sleek flat graphics in a balanced composition.

Format

The main function of the flat design  is to put emphasis on content while design has to serve as a communication tool. Format has mastered flat design by combining clean type with flat color scheme and stunning imagery.

Flat design in action - clean layout with unusual color palette and loads of white space.

Flat design in action – clean layout with unusual color palette and loads of white space.

Neo

Neo has a balanced website design with dozens of negative space that makes reading very pleasurable. Also thanks to perfectly chosen typefaces. Flat design also works very well with minimal approach. for example, Neo delivers essential information with nothing to add or remove.

Flat Design Trend WordPress Themes & Templates

Flat design is extremely trendy these days and and I’ve mentioned the reasons why above. Themes below will get you on the trend train in no time.

Rock Group is a unique and highly customisable flat design infographic style theme for WordPress.

Rock Group is a unique and highly customizable flat design infographic style theme for WordPress.

Rock Group WordPress Theme ($58)

Infographics generate 37.5% more backlinks than a standard blog post, says marketing expert Neil Patel. This theme is basically a huge interactive infographic that used with care can make wonders for your campaigns, not to mention the trendy flat look.

Beautifully designed and super clean flat admin dashboard template.

Beautifully designed and super clean flat admin dashboard template.

SlickLab Admin Dashboard Template ($21)

SlickLab admin dashboard template has a clean and clear structure with all potential widgets designed that any platform would require. White space, contrast, and typefaces all work very well together in this template.

Mies is a very clean and simple flat WordPress theme perfect for creatives.

Mies is a very clean and simple flat WordPress theme perfect for creatives.

Mies WordPress Theme ($58)

People are visual creatures – the more visual your storytelling is online, the better chances of you being remembered. Mies theme has a nice flat look and feel with oversized typography, obvious call to action buttons, and some sleek interactions.

dffd

Flat UI Pro kit offers clean pre-designed elements for quick prototyping in trendy flat style.

Flat UI Pro (from $39)

Bootstrap based UI kit with loads of pre-designed elements from buttons to forms to various multimedia assets will save you a lot of time when prototyping or designing your website in a clean and trendy manner.

Summary and Conclusion About Trends in 2016

If you’ve been following the web design scene for some time you may have felt what is coming next. There are no significant changes in 2016 but some trends that started getting traction in 2014 will continue growing and affecting more people while others will slowly fade away. However, web design is evolving very quickly and, most importantly, it adapts to people’s behavior and technology advancements.

In this article I’ve touched some trends that will be on the spotlight for the rest of the year and the resources I’ve provided will help you to quickly get into the game.

What do you think is the next big thing in web design?

We have seen what the trends are for this year and probably for a few more years to come. At this point we would like to get your focus on how trends reflect towards good design. Let’s take a look.


Design Trends vs. Great Design

It’s not so much that I believe a particular design trend is great or that one isn’t, but more so that we need to take a step back and remember that trends come and go and that one trend doesn’t make a design great. Also remember that just because a trend works for one project, doesn’t mean it works for another.


Definition of “Trend”

Dictionary.com defines trend as “the general course or prevailing tendency.” We all know what design trends are and that many of us fall into them each and every day. What many designers don’t know, or don’t realize, is that these trends will come and go and eventually you will look dated if you stay in that rut for too long. I’m not against using them at all, I use them often. It’s excellent practice and helps to mold us into the designers we will become in the future. My only problem with trends is that they can cause problems for people if not used correctly. Let’s discuss.

They Cause Complacency

Using trends can be great because they can help to push your limits to learn new things. The problem is that they can be counter-effective if you rely on them too much. What I mean is that they can make us complacent designers who never try anything else new because we already know how to design something a particular way. I have personally fallen prey to this with my corporate design background. I worked for an agency where about 90% of my design was corporate and driven by project manager requests. The company had little backbone to stand up to clients and tell them we were the experts in what they needed to be effective for their clients on the web. This led to the designers of the agency finding a “safe zone” with a particular trend and sticking with it because we knew we’d get less push-back if we didn’t step too far out of the box. Complacent designers mean less effective projects, end of story.

by fabio_ski.t

They Create Copycats

Trends also create copycats very easily. You will find this all over the internet these days. People find a designer they like and then decide they’re going to rip off designs in the portfolio for their own projects…or worse, they steal the work for themselves. Personally, I think copycats are becoming even more prominent with the rise in design related social sites such as Dribbble and Forrst. I think these sites are awesome, I am simply pointing out that they are enabling trends to prosper moreso than they have been able to in the past. So my take on this, feel free to use trends to help you along, just don’t steal other people’s stuff and remember to put your own creative twist on whatever inspiration you gather.

They Mean Less Creativity

This could probably go both ways. I can see where it could force designers to come up with a better way to do something, meaning the trend has helped us along in our quest for awesome design. But more often, I think it puts design in a box. New designers feel they can’t design something different than the “great designers” out there because it will never be accepted. They try something fresh and it never gets noticed because no one else is doing it. Of course, if it’s good enough, eventually a popular designer will pick it up and then it gets pushed through the industry like wildfire. So my point here is that we need to make sure the trends don’t limit our designs but rather cause us to come up with new ways to achieve the results we desire.

They Can Be Less Effective

Ultimately, I think we need to take into consideration that trends can end up being less effective on a project if used improperly. This is what I mean when I say that just because it works for one project, doesn’t mean it will work for another. Take a massive dropdown menu for example. It’s a trend we’ve been seeing a lot of lately and a great example is on sony.com. This works great for the design they have going on and the amount of information they want to put in front of the customer immediately. But it may or may not work for the next project you work on. Maybe they don’t need a drop menu at all or maybe there’s only a few links to drop down. Either way, just remember to assess the situation and whether what you’re using will help or hurt the usability.

by Enokson

Great Design is Usable

Great design is…well…great. It’s all the things we hope for when we start a project. It’s user-friendly. It’s pretty. It’s functional. It solves problems that sometimes the user didn’t even know they had. It creates a good experience. It establishes or furthers a brand. It just works in every sense of the word. If a design isn’t doing all these things and more, it’s not great. Great design cannot create problems and still remain great. Lets look at a few things that are encompassed in this term.

It Solves a Problem

Everyone out there has had problems using a website at some point or another. It could be something as simple as the navigation not working properly. Maybe you weren’t able to find something or came across a site that requires an updated Flash player. What great design does is solve problems, not create them. Instead of making users search for information for ten minutes before they finally stumble across it, it shows them exactly how to get there in just a few clicks. This could be an incredible new search function or a well thought out drop down menu. Keep these things in mind when designing as they will make or break your design no matter how beautiful it is.

It Invites Users to Find Information

Instead of confusing the user with a mess of content they don’t care to read, great design shows them exactly where to go to find what they want. It’s like dropping little breadcrumbs along the way to the exact content they’re looking for. Show them where to go and what they need and they will be back after having a positive experience. This is what great design is all about…keep it simple, keep it useful.

by tomt6788

It’s Beautiful

Okay so maybe it doesn’t have to be beautiful, but that certainly helps. And most of the time when I come across truly great design, it’s beautiful too because if you really know how to design, you understand usability. Most designer’s websites are a reflection of what they can do for clients so take this as a hint to work on your own if you feel inclined to do so. The visual part of a site is becoming more and more necessary anyway due to things like Google’s new search feature that pops up an image of the site upon rollover. Things like this are popping up everywhere on the net and people will slowly begin to choose the nicer looking sites over the other ones, even if it’s subconsciously. So while useable doesn’t have to equate to beautiful, it pretty much does.

It’s Effective

Ah, the notorious effective website. The website that actually does something. It’s not stagnant. It’s constantly updated. It’s never boring. It’s never useless. This is the day and age we live in. We live in a time where information is immediately at our fingertips and there’s a website or webapp to do just about anything you want. A great design is completely and utterly pointless even if it has everything else we’ve mentioned but fails to be effective. If it doesn’t get the point or convey the message it needs to very clearly, there’s something wrong. Take note of what works for you on sites and make sure to incorporate those into your designs. Push the limits of technology a bit even if you’re slowly nudging your audience to understand something new. Just make sure you don’t lose them during the process.

by Peter Kaminski

And That’s A Wrap

There’s more to say for sure but that’s all I’m covering in this article. The point was to help remind you that great design is the ultimate goal. I think design trends are awesome when used properly and when they make sense. I also think they push the industry forward and that they are vital for helping us to do just that. The important thing to remember is not to fall prey to getting stuck in the rut they can cause. Be sure to keep climbing and furthering your work. Take what you will from this, but remember the ultimate goal.

Now let’s take a look at some of the medical websites and see how they have gone with modern trends in web design.


Medical Websites in the Realm of Modern Design Trends

With design and development technologies evolving quickly it’s hard to imagine that some of the companies still have the websites designed in late 90’s or early 2000’s and do not think of creating something new and attractive. For some time and rarely meeting such oldie websites online I had no idea that the whole industry could still be keeping to the old design and development formats that’s the medical centers and hospitals websites.


There are hundreds of beautiful website showcases presented online but I have never seen any related to medical websites and so decided to give it a try.
I have browsed through all CSS galleries with zero results, made a search in Google for medical centers and even checked Google keyword suggestion tool for all the possible keywords people use to find hospitals and medical centers online… and it’s really desperate! Overall I have checked over 500 websites and just a few had a hint of modern design and the idea of the inspirational showcase post went into oblivion :)
Still, I think this will be useful for any designer working on the medical project as I’m going to analyze the structure of the websites, the important home page elements, the menu and other design aspects. At the end of this section you will find a showcase of modern medical websites, but first let’s take a look at some of the disadvantages of oldie websites.

1. Small website width and as a result:

  • No place for important info of the website home page;
  • The info is presented in a not efficient manner, the pages look cluttered;
  • The necessity to create multiple inside pages;
  • The feeling like you’re in the 90’s;
  • Loosing clients who don’t want to dive deep into the content but look for quick info on the home page before going into details.

2. Usage of small fonts and as a result:

  • Visitor non- friendliness;
  • The inability to browser through the website pages for aged people;
  • Less accent on important information.

3. Non professional/small/cut photos and images

I’m not sure if that’s really me who got used to modern creative websites, large spaces and easy access to information, but I think that the old-style websites are simply inconvenient to use. Let’s analyze what the key-points of successful medical website are and what elements I’d expect on the website home page as a regular user looking for some services or advice.

1. Something telling me not to panic.

The relaxing light color scheme and some phrase in the header saying they can help no matter what. Small flash animation showing the photos of nurses, surgeons, doctors with convincing calming phrases would be perfect.

2.Search area.

Search area is vital. That means easy access to the needed information.

3. Testimonials area.

I feel a bit scared and desperate and I want to know what others say. In other words I need someone to calm me down and tell that everything is gonna be okay.

4. A big obvious button to Request an Appointment.

Well that’s exactly the reason why I have finally come to the website of the medical center. I want to request an appointment and I’d be grateful if you could point me to the right direction right away. Comparing to other websites that’s the same calls to action, they should be big enough and obvious.

5. Phone number.

The phone number should be in big letters somewhere on top right area. If that’s an emergency I’ll definitely would like to make a call.

6. Quick links.

Quick links to women’s health, physical health, healthy living or to frequently requested patient and visitor information.

7. Big multilevel menu on top.

Big multilevel menu on top giving access to all the sections possible. This is probably one of the website types when the larger number of sub menus can’t hurt. It’s simple, if you know nothing about medicine or doctors you won’t be able to find anything on the medical website without these multiple helping links.

8. Community engagement.

Link to forum, blog or some knowledge center. People are social creatures yet afraid of doctors and all of us would probably study all the possible literature and cases before visiting the doctors. Here’s when the forum with the doctor advice would be real handy.

Making this small analysis and comparing multiple old style and more up-to-date websites I have come to conclusion that this ancient websites suck not because I miss all the modern cool elements, big buttons or cute boxes, but mostly because there’s simply no place for the information that visitors were seeking for and expected to see.

Thus, building a website for a medical center or hospital keep in mind that space is really important. Think about people who would visit the website, about their behavior and psychology, talk to your friends, parents and grand parents as in this case that might be more helpful than your 10 years of website design experience.

Below is a collection of 24 medical websites that truly stand out from the crowd. They are both for website planning and design inspiration and I’d be happy to see a website created by you or your company in this list in the near future. Stay tuned and good luck!

22 Really Nice Medical Websites

1. MedHelp

medhelp-medical-website-showcase

2. Flag Staff Medical Center

arizona-medical-website-showcase

3. Concentra

concentra-medical-website-showcase

4. Cedars Sinai

cs-medical-website-showcase

5. LexMed

lexmed-medical-website-showcase

6. BMC

bmc-medical-website-showcase

7. HolyreDeemer

hollyredeemer-medical-website-showcase

8. Health Angle

9. GapMedics

gap-medical-website-showcase

10. lrmc

lakeland-medical-website-showcase

11. Tgmc

tgmc-medical-website-showcase

12. Nutricia

nutricia-medical-website-showcase

13. Weill.Cornell

cornell-medical-website-showcase

14. Intermountain Healthcare

intermountain-medical-website-showcase

15.Jefferson Hospital

jefferson-medical-website-showcase

16. Cleveland Clinic

cleveland-medical-website-showcase

17. Mobridge Hospital

18. Valley Med

valleymed-medicine-medical-website-showcase

19. Mountnittany

mountnittany-medical-website-showcase

20. Kumed

kumed-medical-website-showcase

21. Childrens

childrens-medical-website-showcase

22. Seattle Childrens


Don’t forget to share your feed back via comments section.:)

We have look at the general trends in web design. In the next section you will find a trend that already has some history, but it’s relevant as ever. Integrating social media logins.


Get Better User Engagement by Integrating Social Logins on Your Website

Would you like more people to create a user account on your website?Most people don’t like giving up personal data to websites unless they are comfortable with them or really need what the site is offering. The solution is out there… It’s called Social Login, and in this section we are going to dig into what it is, how you can use it on your website, the benefits of doing so, and provide a few examples of sites who are using Social Login successfully.


 

What is Social Login?

Social Login options

Social Login options

Social Login is the process of letting users create accounts on your site by logging into their social media accounts. Using API calls back-end software will connect to the user’s social media account and pull in all relevant data required for your sites Registration Process. If any additional data is required by your site, but was not collected from the user’s social media account, you can display those fields, ask users to complete the form, and click a Register/Submit button. Basically this allows users to bypass a normal website registration process, simply login to their social media account, and click Register (unless extra data is required). Social Login is much less time-consuming than normal website registration process.

Integrating Social Login into Your Website

Different websites allow users to use different social media accounts to register. The key to selecting the right social media tools to use on your website starts with analyzing your target audience. What social media channels do you think most of your website traffic uses? Either that, or just go with the two biggest social media channels, Twitter and Facebook!

In order to integrate Social Login into your website you must find Social Login software to use. Here are a few that you can choose from:

Social Login software

Social Login Janrain

Websites Should Provide Both Social Login and Standard Registration Options

Social Login is a great tool for increasing the number of subscribers to your website. That said, in most cases, it shouldn’t be the only registration option. Some people don’t want to merge their social profiles with other websites. You want to give potential users the option of logging in without social media.  Some people either don’t have social media accounts on the sites that you provide as Social Login options or they don’t want to see things that they do on your website show up on their Social Media accounts. Although there are a lot of benefits of adding a Social Login option to your website, it should be an added option, not the only option.

Benefits of Using Social Login on Your Website

Adding Social Login to your website can be an extremely beneficial use of your time and/or money. Here are a few of the numerous benefits that Social Login offers website owners:

  • Add More Subscribers – Websites that have added Social Login as an option for their account registration process have increased the number of subscribers from 10% to hundreds of percent.
  • Easier Registration Process – Social Login is usually MUCH easier for users than a normal website account registration process
  • Go Viral – When users are logged in to their social media accounts from your website it’s much easier to post information from your website to their entire network. Most Social Login software already has this feature built-in. This means that for every user who creates an account on your website through Social Login, the potential for you to capture their friends as users increases dramatically over a standard registration process.

Is Social Login Safe to Use?

Social Login Privacy

Is Social Login Safe?

Image Credit

The simple answer is YES. The long answer is slightly more complicated. Social Login is typically very safe with regards to your personal data getting into the wrong hands. That said, using Social Login to sign-up for a website simply opens a user up to yet another API call that’s transferring personal data between his social network and your website. There’s always a little risk that something will happen that will either cause the API call to break and data to be leaked or for someone tapping into it and stealing data. All of this being said, there’s also safety concerns for any type of registration process whereby consumers provide their personal data to a company/website. Social Login is typically extremely safe, but it does open consumers up to just another avenue for their personal data to fall into the wrong hands. In my opinion the risk is pretty low.

Examples of Websites Using Social Login

There are hundreds of thousands to millions of websites around the web that use Social Login. Here are a few examples of websites who successfully use Social Login:

Pinterest

Pinterest currently allows users to login with either their Facebook or Twitter account. It will be interesting to see if they switch that to Facebook-only moving forward.

Social Login Twitter Facebook

Social Login Pinterest

HubSpot

HubSpot, an online marketing software company with a very large user base, allows users to login to Hubspot with their Google Account.

Social Login Google

Social Login HubSpot

iVillage.com

iVillage.com provides the most flexible of all of the sites that we are going to review in this article. They offer a standard registration process whereby they collect Email, Username, and Password. iVillage.com also lets users register and login via Social Login. Users can choose from a variety of social networks to connect to their iVillage.com account, from Facebook and Twitter to Yahoo! and AOL.

Social Login

Social Login iVillage.com

ESPN.com

ESPN.com provides users with both a standard registration process and Social Login registration process in order to create an account on ESPN.com. ESPN have decided that most of their website traffic is on Facebook, thus they have gone with the Facebook Connect Social Login option.

Social Login Facebook Connect

Social Login ESPN.com

Adding Social Login to Your Website

Will you add Social Login to your website? Depending on your needs, integrating Social Login into your website will either be pretty quick and easy (think WordPress plugin), or a little more time-consuming and/or expensive. That said, no matter how the integration process plays out for you, one thing is pretty clear, your users will appreciate it and more people will sign-up for an account on your website. Let us know if you are currently using Social Login and what you think about it by leaving a comment below. If you aren’t currently using Social Login, do you think you’ll look into integrating it into your website?

now we want to show you how web design trends are in different countries across the globe. How they merge their culture in these trends. Hope you are hipped as we are!


Web Design Across the Globe

Web design is perhaps one of the most universal forms of art in the modern times. Using the Internet as a giant canvas that continues to expand more and more, web designers try make something beautiful and useful to people. Have you noticed the patterns at how web designers create pages? Have you identified how web designs are influenced by the designer’s and the target audience’s culture? It gives that nice uniqueness to it.


South America

South America is known for its grand and festive feel. Going to Brazil, Argentina, Chile, Peru or Venezuela means that you are looking for a one-of-a kind festive experience.

In South America, this is also reflected in most web designs. Beautiful as they are, South American websites have a seemingly recurring pattern emulating its festive mood.

Web design from South America commonly have:

  •         Bright and bold colors
  •         Colorful illustrations
  •         Huge background images
  •         Festive typography

Let’s take a look at Born To Be On.

South-America-1

This website is teeming with bright colors. This website surely gives off a South-American feel.

  • With the shades of red as the main color scheme and a simple background pattern, this website gives off a funky feel.
  • It also used several types in its vertical navigation area
  • It did a great job with the main typography.

Paseo Itaigara’s website, on the other hand, did not use a single shade in its color scheme. Nonetheless, it displays a very festive feel in the design.

  • It displayed multiple complementary colors of slightly desaturated blue, yellow and red.
  • The use of diamonds and triangles added to the South American touch as it mimics the famous banderitas (flags) during fiestas (feasts).

South-America-2

Same is true for Interativa. The website also showcased a very festive mood as it used #7a1f7f, #01b5e2 ,#e94492, #fbb911 and #0abcb5.

South-America-3

Meanwhile Creative House combines its illustrations with bright and bold colors. This creative and colorful doodle of a house that seemingly overflows with ideas and output gives a very powerful message of what the company really is.

With the websites that we have looked at, we come to an understanding that the South American web market really wants to reflect their jovial and warm culture to the rest of the world. And they do it boldly: using bright colors, lively illustrations and loud typography.

South-America-4

North America

If South America is known to be festive and warm, North American web designs may be characterized as cold and laid back. Websites designed in the United States and Canada reflect such a pattern. The cold and composed nature somehow mimics how the culture of North America is. With its focus on business and professionalism, these designs are commonly known to have:

  •         Big background (or sometimes banner) images commonly filtered and desaturated.
  •         Simple typography
  •         Enhancements like loading and scroll animations
  •         Minimalist approach

Tool embodies a perfect example of how a North American website is designed. It uses a large video background that occupies the whole page screen. However, despite the presence of such element, the beautiful typography is not at all hindered by the video.

The reason for this is that the video is desaturated at a level where the text has enough contrast against its background.

North America 1

Also, note that tool’s navigation area has a separate placeholder so that the user can easily recognize it as a navigation bar. In addition, the website gives off a minimalist feel to the design because it gave a lot of white spaces between the texts.

Clouds over Cuba agrees to the design style of Tool. It also uses a video background and desaturated colors, making black and gray stand out the most. Aside from that, the website also has great typography.

North America 2

On the other hand, Nike’s website made its big background image saturated. However, it still possesses the recurring elements like its minimalist approach and typography. What makes Nike a nice North American web design is that it focuses on making images big that it takes up the whole screen. This adds the beauty to what has already been a great design.

North America 3

Truly, North American web design relies on images and clean typography. That is its advantage. Because most North-American web designs are clean-looking and minimalist, the user can easily facilitate the information being fed to him.

It’s like the lukewarm of designs where you can enjoy the message being sent without being distracted by the design itself.

Europe

Europe somehow sits between the coldness of North America and the warmth of the South. Europe presents a fusion of brightness and the lack of of festivity and business-mindedness. It just tells us how culturally rich Europe is and how web designers view their work as something that mixes seriousness with a pinch of fun.

Normally, European-designed websites have:

  •         Big background images
  •         Bold colors
  •         Loading effects and other interactive elements
  •         Minimalist influence
  •         Simple typography

Let’s take a look at Volkswagen.fr. As soon as the page loads, you are welcomed by a dark-themed welcome animation. They commonly start with loading animations.

Volkswagen

When the website fully loads, you’ll readily see the dark-themed design fully loaded with a swipe-enabled interactive menu. Most websites in the continent follow the pattern where the user can actually make the most out of the interface.

This is what sets the brand for the designers in Europe- they are able to create very interactive websites with great class! Cheers for that.

This also goes true with the Swedish-designed website for the Hobbit. The same pattern was followed. A sleek-looking loading animation and interactivity.

Europe

While in the first two examples, dark colors were used, Pharrell Williams’ website deviates from this pattern as it uses bright colors. However, this doesn’t really venture off with the flow with the recurring pattern.

The website also uses a very simple loading animation as you wait for the interactive video-embedded main page. It greatly mixes interactive elements such as video control buttons with the other elements and made it really synergistic with the video background.

pahrellwilliams

Black Negative follows the same pattern as it uses a loading effect (although it took some time to finally load it up) as it had extra features like sound and swipe ability.

blacknegative

The European style in web design is all about mixing professionalism and fun. It’s best at providing great flow of information without giving up creativity.

Truly, gazing upon European web design is like looking at Louvre. You will see art up close.

Asia

And now, we go to Asia. The biggest continent and certainly one of the most colorful ones. Asian web design is generally as flexible and as diverse as the culture in the continent is.

Understanding a certain feel with the Asian web design would be very difficult as the continent houses very different cultures.

For the purpose of understanding the style of Asian web design, I took the liberty to divide the styles into two units: design from the Middle East (Arabic) and the Orient.

The Arabic Web Design

Arabia is often perceived with sand, beautiful Islamic tapestry, luxurious and rich history, camels and arabesque art. It’s commonly seen as a world full of magical surprises, especially to someone who has the privilege to visit this beautiful land.

However, the Arabic web design lacks maturity even if its region is teeming with history.

Smashing Magazine labels Arabic web design to have “a wealth of history” but considers web design as immature. Smashing Magazine may have remarked this way because its typographic design, in particular, does not reflect the richness of the Arabic language. The language heavily relied on Arabic script-based handwriting, which has not been supported for a long time.

Despite this, there is no denying that Arabic web design is as unique and mystic as the region is. With its beautiful appreciation for calligraphy, the Middle East has given birth to a one-of-a-kind design brand.

Arabic Web Design commonly has:

  •         Semi-skeumorphic design
  •         Arabesque feel
  •         Uses bright colors
  •         Image-heavy design

We take GlueTube as the first example. This website has all the tell-tale signs of skeumorphism. It uses realistic elements rather than flat ones. It has elements like the hand illustration that seemed to follow the mouse pointer. It also embodies bright colors with its # fab500 background color. Aside from the jQuery slider, this website pretty much looked like pre-Flat design.

gluetube

Massa is pretty much ‘cleaner’ than Glue Tube as it uses the minimalist design. However, its overall look is mainly reeled towards skeuomorphism. After clicking through the homepage, you will be brought to the product-menu page, which, interestingly enough, follows up to the minimalist feel of the design.

massa

Overall, the Arabic web design is still untapped. Smashing Magazine says this is due to the lack of acceptance in the Arabic community with freelancing. However, it’s still not too late for the web design to flourish in the Arab world. It can develop into something unique, given a few more time.

Oriental Web Design

The likes of China, Singapore, the Philippines and Japan (and a few more countries) make up Oriental web design. The Orient is commonly seen as the land of spice and flavor. Truly, the designs in this region commonly reflect what the culture is.

Oriental web design is anchored on simplicity yet it gives off a very different kick. Normally, designs from Oriental countries are:

  •         Dominated by the color white (or composed of bright and warm colors)
  •         Don’t focus much on the typography
  •         Designs are focused on the basic elements

Let’s take some websites from the Orient and see what they really have in common.

First off the list is Solaire’s website. This resort-casino website focuses more on the content rather than design, particularly with typography. The website also is not a fan of minimalism as it compresses a lot of elements in the page. It’s just a basic website. No fancy animations or interactive elements.

solaire

Same is true with dingzhou’s portfolio. This website focused on an all-white design, which uses a single font face and does not embody great typography.

Simplicity is the cornerstone of its look. It also did not contain a lot of images and effects like jQuery sliders, animations and more.

ding

While  Browser QQ and Dentsu uses parallax scrolling effects, one cannot deny that they are truly Asian-made because the design is mainly focused in simplicity. These two websites generally used white and warm colors in their design.

qq current

Asia truly is unique, as their web design style is. It stamps its own flavor, kick and mysticism to its designs, making each of them truly unique and hauntingly beautiful.

Wrap it up!

Web design is truly unique and differs from person to person and from culture to culture. However, that should not be the reason for web designers to become scared of designing for a culture that they are not familiar with.

It’s just a matter of understanding the factors that surround their web design industry and accepting them to make a better design.

Which web region do you belong? Do you agree with what the points in this article? Let’s talk about it.

Written by Tomas Laurinavicius

Tomas Laurinavicius is a web designer, developer and blogger from Lithuania. Currently studying in Aarhus, Denmark. You can follow him on Twitter. Get in touch with him if you have interesting projects you want to collaborate on.

13 Comments

  1. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks

    Reply

  2. Great post! Design is something that should be creative, follow current trends and here you explained all aspects of design trends that designer can follow to make attractive websites.

    Reply

  3. Hi there,
    “Make your backgrounds big” is the single most important rule of web designing today.

    Especially, when the background is a video.
    I used ‘mb.YT Player’ plugin in my website, but nothing happened. Can anybody tell how to use it.
    Thanks for your professional support in advance!

    Reply

  4. Thank you for posting the latest trends in 2015. I’ve been searching for new ways to improve visuals on my websites. I have been looking into some new ideas for graphic design and have discovered a 3D design software called DAZ Studio (http://www.daz3d.com). The 3D art on their website is so realistic, I feel like I could use something like this in place of actual photographs, as I’m not the greatest with a camera and can’t always find the stock photography I’m looking for. I’m wondering if you have heard of it? And also, what are your thoughts on using 3D graphics on websites? Thanks again. :)

    Reply

    1. In case you haven’ come across these before, check out d3JS and three.js libraries. They allow you to use 3D content on a webpage and the results are quite incredible.

      Reply

  5. Sabeeh ul Hassan May 29, 2015 at 08:00

    I can not disagree with any of your points because 2015 is a year of design trending. Lot of new things are in. Mobile friendly design is going to work perfectly.

    Reply

  6. Nice Post & good trends mentioned.
    I surely believe that certain trends are being adopted more than the rest. Like Flat UI & Large backgrounds are used more. The large backgrounds if properly given thought about, are used well for branding. And today, responsive web-design becomes a must not only from search engines (Google) perspective but end users these days being mainly mobile users.

    Also, I like the fact that this post being about latest trends, you have pointed out related helpful resources as well. The stock photos links would be really helpful. I am not a wordpress developer, but a drupal developer, so that hurts a bit here with regards to the themes you pointed out. :P

    Again, Thanks Andreas.

    Reply

  7. Good Article for web designing. Thanks for sharing some new trends. it will help me a lot while making new websites. I like video background technique. your post is inspire me a lot.

    Reply

  8. Was googling a lot about latest trends in designs since i found this post. Great one. Final destination for my search. Thank You James

    Reply

  9. Humayun kabir April 8, 2015 at 09:35

    Really ,nice post for New web design concept for 2015.I think video background and personal portfolio web design will be demand full for the year of 2015.

    Reply

  10. I’ve been watching web design scene very closely for the last couple of years and these predictions are purely based on my own experience. What are your predictions for trends in 2015?

    Reply

  11. I just want to point out that this website doesn’t look good on mobile. On my iPhone 5 it is too wide and I have to scroll horizontally to see some content. Also the items in the header wrap weird. Additionally, these form fields are not wide enough.

    Reply

    1. Dainis Graveris April 3, 2015 at 18:59

      Can you show screenshot about content issue? I disabled Hellobar, it seems like it’s not mobile friendly..sadly. Form fields because you cannot see everything you have written?

      Reply

Leave a Reply