Throughout design industry there is always a trend that catches the eye of many designers and then continues to be implemented into their work. Design has evolved from the good old days of simple websites using lots of boxes and words on a page, similar to this:

As you can see MSN created a website that appears to have no thought into UI & UX, as well as lacking in design. This is what an average website looked like back in 1996.

Since then, new and exciting trends have come around, from new forms of code that we can use on websites to new tools that allow designers to create something that would never have been thought of before.

Below is just one example of a trend within web design that has changed since 1996 and really shows what was possible back then and what can be achieved now.

Go Responsive or Go Home

Everyone has heard of responsive. This is when you look at a website on various screen formats and they are optimised based on the viewing screen size. The most well-known example is comparing how different websites look when viewing on a desktop and mobile. You can see this below:

In the example, you can see that Apple’s website has changed its size and format to match the relevant screen size. You can view more detail about responsive design on my Responsive Blog Post.

Responsiveness is now the norm with nearly every web page and template including responsive code to make it automatically adapt to different screen sizes. The reason for these sites becoming responsive is due to the demand on viewing web content at a high resolution on smart devices such as tablets and mobiles.

Here is a question. Do you think internet usage on a smartphone will ever overtake a desktop PC? You wouldn’t beleive me if I said the answer was YES!

In January 2014 smartphone internet usage overtook PC internet usage for the first time ever in America. Check it out here.

From the graph, we can see that mobile and tablet internet usage is continually on the rise. Therefore, it is becoming increasingly important to make websites responsive for every new device that is made.

Ghost Buttons – What are they?

Not a lot of people have heard of a ghost button but they will have seen one. It is very similar to a normal call to action button but in the form of a ghost effect. That description probably doesn’t help much!

Let me elaborate a little bit. Below you can see a ghost button in its 2 states. The idea is for the button to blend in with its surroundings and when you call for it (hover over it) it lights up to indicate this button can be pressed:

A ghost button is also used to show active and inactive states on pages. It is a simple effect to add to a website, but something that can have a maximum impact on the visual look and UX of your site.

Full Screen Images/Videos & One Page Websites

Something that I have noticed is on the rise is adding full screen images to the home or start of a page. This really grabs the user’s attention and encourages them to scroll and view the rest of the site. This is a powerful capturing tool if you can get the picture or video right for your product or service. One company that I feel perfects this is Artool.me:

If you go to their website it flows nicely and with every section of the page filling every pixel of your browser it really centres your attention to the content so your eyes aren’t drawn elsewhere.

Another trend that relates to the use of full page images and videos are one page websites. These consist of displaying all of the information onto one page in an organised and simple-to-navigate way. Trying to condense a website with 4+ pages into one page is quite difficult, but if it is planned and displayed right the outcome can be very powerful. Here is an example of a client’s website that I redesigned by condensing its original 3 pages into 1:

From the first image you can see that it looks like one page site but this page only houses the home image, services section and contact us. The features is another page with nothing but words that take up a lot of space that can be condensed. The simple solution was the use a main header image as the first image, then add the services videos together on one line rather than underneath, wasting space. Next move the long features page into a simple and compacted scroller that saves a whole page and consolidates the information in an organised manner, then include the pricing charts and resource calculator to the bottom of the page. The final result is a clean, organised and a much more resourceful website.

Flat Design

When people refer to a design as ‘flat’ they are talking about making it as plain and simple as can be. A good example of this and how it has been implemented is with Google’s Material Design. They actually use this design on their new products and services, as well as their mobile interface such as Google Maps. The way Google uses bold colours and solid shapes really shows what can be possible with a lot of negative space rather than filling it with random pieces of artwork just to fill the empty void.

Here’s an image of how flat design can impact a product by stripping unnecessary information from the user’s view:

New trends are constantly being discovered and shared with the world. As we move with the times where technology is a way of life, I feel that we are also moving with the design trends that others are using to stay both up to date and current.

Photo by Bincode on Bincode