Category Archives: design

Web Design Trends for 2014

Responsive design for all media.

Responsive design for all media.

There does not seem to be as many different articles discussing web design trends for 2014 as there was for 2013 a year ago. From that I gather that trends have not changed all that much; they have simply been solidified and have become “more so”. In summary here is a list of the trends most discussed:

  1. Flat design – cut back on those drop shadows and gradients. Notice how app interface design is influencing site design.
  2. Simple colour schemes – cut back to one or two colours only.
  3. Large, striking, interesting typography.
  4. Focus on mobile with responsive web design.
  5. Long scrolling sites – on condition that the content is well organised.
  6. Minimise distractions (drop the side bar) and make the reading experience pleasant.
  7. Simplified content – cut words back to cope with shorter attention span of readers.
  8. Use short videos and animations in the place of text, for quick story-telling.
  9. Creative use of images and large hero areas (intro image with little text) at the top of the home page.
  10. Some quirky stuff like parallax scrolling and animations with HTML5.
  11. Navigation: on-demand menus (hamburger menus), sticky navigation and fixed headers that follow you as you scroll.

For more detail, have a look at these articles:

http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/

http://www.pinterest.com/pin/161285230379233519/

http://www.forbes.com/sites/stevecooper/2013/11/30/designing-a-website-for-2014/

http://www.designworklife.com/2013/12/31/digital-design-trends-to-look-forward-to-in-2014/

https://widgetware.com/news/a-closer-look-at-the-2014-web-design-trends/

Web Design Trends for 2013

Here are a selection of articles from knowledgeable authors predicting web design trends for 2013. Do a search and you’ll find many more, but they are all saying basically the same thing.

Keep an Eye on These Web Design Trends in 2013  http://mashable.com/2013/01/04/web-design-trends-2013/

Web design trends to look forward to in 2013  http://designhash.com/web-design-trends-to-look-forward-to-in-2013/

Six Expected Web Design Trends for 2013 http://smashinghub.com/web-design-trends-in-2013.htm

10 Web design trends you can expect to see in 2013  http://thenextweb.com/dd/2012/12/30/10-new-web-design-trends-you-can-expect-to-see-in-2013/

Web Design: 20 Hottest Trends To Watch Out For in 2013  http://www.hongkiat.com/blog/web-design-trend-2013/

Short summary:

The importance of topography was predicted for last year as well, so it is interesting to see it is still up there with responsive design for mobile to desktop sized screens, large images and more white space. Look out for softer colours and larger buttons!  And it’s all basically happening in HTML 5, CSS 3 and social integration. Adobe Flash is dead. HTML5 can create dynamic layouts without  the bugs and delays that often accompany Flash.

Parallax scrolling

ParallaxParallax is a displacement in the apparent position of an object viewed along two different lines of sight, and is measured by the angle  of inclination between those two lines of sight.  Nearby objects have a larger parallax than more distant objects when observed from different positions.

In early graphical applications a scene was constructed of independent layers that were scrolled at different speeds in a simulated parallax motion effect when the cursor moved. Parallax scrolling has also been adapted to website design generally implemented using javascript and modern web standards.  As the user scrolls down, the image essentially scrolls sideways. The technique has since appeared in many different forms and variations on virtually thousands of websites. Source: Wikipedia

On websites this gives a near 3D-look that is very cool and funky, but in my experience these websites load very slowly. For this reason the technique should only be implemented in situations where the target audience or user group reside in a region with fast internet connections.

For some good examples of websites with parallax scrolling, have a look at 30 Awesome Parallax Scrolling Effect in Web Design by Ali Qayyum posted in Smashing Hub in April 2012.

Call to action: Contact us

Contact Us button.

Contact Us button image - don't push this one!

When does a contact form on a website get results? Understandably, businesses are keen to get potential clients (and returning clients) to contact them, but the contact form on your website may actually be a barrier rather than elicit the action you desire.

During the design phase of a new website the first step is to analyse the business processes. This helps to define the target audience and the purpose of the website. The business owner will say: “I need potential clients to contact me so I can sell stuff to them. I need their first name, last name, company name, position at their company, postal address, physical address, telephone number (land line and mobile), email address, gender and age before I can do business with them.”

Oh dear. So the website developer goes away and designs a beautiful contact form with all those fields to be completed, and adds validations so that the form data cannot be sent untill all the fields have been completed. He even adds a beautiful privacy policy to ensure website visitors that their contact details will be kept private and secure.

The website visitor/potential client comes along, looks at this lot and says: “WTF? Why? I’m not wanting to get married!” And he goes away!

You see what happened here? The business owner had only his needs in mind; he did not think of the website visitor’s needs at all. So how do we get the website visitor to fill in that contact form?

We do it with VIUP.

V is for VISIBLE

The contact form must be really easy and quick to find on the website. Ideally, place it on the home page, ‘above the fold’. If that is not possible, have a prominent graphic on the home page that links to the contact form page. We need to set up that ‘funnel’ that will take the visitor to the contact form.

I is for INVITING

Invite the visitor to contact the business. Tell him, in as few words as possible, why he should contact you. What’s the benefit to the visitor? Give him a good reason to fill out that form. Make the form look pretty and inviting. Implement some interesting formatting or graphics. The ‘send’ or ‘submit’ button must be labelled appropriately. ‘Send’ and ‘submit’ labels are old school. Why not label the button something more inviting? Use your imagination. What you label the button will depend on the business, but it should still be clear that the button will send the form data.

U is for USABILITY

While we want the form to look interesting and inviting, we need to make sure that it is easy to use. Field labels must be clear and easy to read. Gather as little information as possible at the first contact, for example, have a name, email address and message field. Make only the email address field mandatory. You can then follow up with the client to get the other details later, if he decides to do business with you.

P is for PRIVACY

Even if you don’t collect much information from the visitor, you still need a privacy policy that you abide by in your business. Preferably have a small link to your privacy policy in close proximity to the contact form. Even if the visitor does not click through to read the privacy policy, just knowing there is one will give some peace of mind.

And, just in case the visitor does not like using contact forms at all, provide other means of contacting you, like a telephone number or an email address, and ensure this information is easy to find on your website. It’s all about removing barriers that might stop the visitor from making that first contact with you!