Part two of our Web Trends 2013 blog continues...

Large photo backgrounds

A trend that would normally be used for fields such as photography or design is now being used for a variety of professions. Photography is always a great draw card to entice your viewers however there’s a noticeable difference between real photos and stock so you need to be careful with the quality particularly if the photo is the background image to your site.

The best way to approach a background image is to keep it relevant to what you do or tie it into a marketing message with clever copywriting. There’s nothing worse than viewing a site for the first time and thinking ‘I don’t get it’. It’s so important to have a strong visual in order to get your message across otherwise people will leave the page if it’s not instantly identified.

Some examples of Full page image backgrounds

ChicagolShirts (http://www.chicagolshirts.com)             

b2ap3_thumbnail_11-Photo-BG-1.jpg

Ian Wharton ( http://www.Ianwharton.com/)

b2ap3_thumbnail_12-Photo-BG-2.jpg

The Great Discontent      (http://thegreatdiscontent.com)            

b2ap3_thumbnail_13-Photo-BG-3.jpg

Helmandafgn  (http://www.helmandafgn.com)     

b2ap3_thumbnail_14-Photo-BG-4.jpg

 

Typography

In recent times there has been more emphasis on typography in order to create less clutter and simply provide all that the user needs to see - content.

With such a variety of available web fonts thanks to google fonts and typekit designers can choose their fonts wisely and ensure that sites are built with rich text effects using CSS3 properties.

A great example of using content to engage your audience is demonstrated in this website ‘Rule of three’. The first thing you see when you enter the site is a lovely typographic layout that you are engaged to read before doing anything. When you click down on the arrow a menu appears as well as a link to read their story. The story has been treated in a movie credit style where once you click on the link it then automatically scrolls through with a small amount of support graphics. This technique is clever to push users through the content as you feel compelled to read the text before it disappears.

Rule of three
(http://rule-of-three.co.uk/)

 b2ap3_thumbnail_15-Typography-1.jpg

Some other great examples of Typography sites

Denise Chandler (http://www.denisechandler.com)

b2ap3_thumbnail_16-Typography-2.jpg

War Child ( http://www.warchild.org.uk)

b2ap3_thumbnail_17-Typography-3.jpg

Whiteboard (http://whiteboard.is)

b2ap3_thumbnail_19-Typography-5.jpg

Rangus ( http://rangus.co.uk/-videos.html)     

b2ap3_thumbnail_18-Typography-4.jpg

 

Mobile navigation toggle

One of the most difficult decisions when building a website is deciding what content you want users to see when they preview your site on a mobile device. Ideally what you want is to provide the same content access as your desktop site without flooding the page and making it unreadable. A great approach to keep the design neat and tidy is to keep your responsive navigation hidden away until it’s needed.

The Next Web is a great example site that compresses the navigation when you resize for mobile.

The Next Web (http://thenextweb.com/)

b2ap3_thumbnail_20-Mobile-toggle-1.jpg

If you’re a regular mobile user you may have noticed another navigation style where the menu slides out from the left or right. The mobile apps for Facebook and Nike are both great examples of this navigation style.
Nike

b2ap3_thumbnail_21-Mobile-toggle-2.jpg
Facebook
b2ap3_thumbnail_22-Mobile-toggle-3.jpg

Toggled navigation can be designed in various forms so designers will have many options to play with while UI experiments continue to evolve this year.
Lack of space in mobile designs has created a second language of iconography. This is clearly seen in the creation of the menu icon (three stacked lines), which is fast becoming a standard icon, along with two interlocking gears for “settings”. It’s a fascinating development in the way we communicate online, and one that transcends spoken and “written” language.

 

Infinite Scrolling

Infinite scrolling is something we’re likely to see more of this year. Pinterest adopted this technique for their website design and it works perfectly to view images. Other sites that are similar to Pinterest such as Piccsy, Instagram and CSS line all showcase images and the use of infinite scrolling (a great way to get users to stay on the page!)

Pinterest (http://www.pinterest.com)

b2ap3_thumbnail_23-Infinite-scrolling-1.jpg

Piccsy (http://piccsy.com)

b2ap3_thumbnail_23-Infinite-scrolling-2.jpg

CSS Line (http://cssline.com)

b2ap3_thumbnail_24-Infinite-scrolling-3.jpg

 

The wrap up

Some industries are driven more heavily by trends than others, part of our job is to pick up on the emerging trends and ensure that we create work to the same standard (or even become trend setters ourselves).

Of course we would all love to be trendsetters but the truth is you can be successful by emulating others and by putting your own spin on it. There’s nothing wrong with basing your idea off something you have seen done well. Emulating others is nothing new for creatives, think back to the different art periods where different styles were defined for example – art deco, modernism, pop art to name a few. It’s exactly the same today, we identify trends and jump on what we like, (only difference is we work with computers and browsers, not with canvas and paint brushes). So next time you come across any form of online media that totally blows you away, stop and think how much thought and consideration would of gone into it in order to achieve it!

Go back to Trends