Design Trends

What’s out there?

Did a bit of research on the different design styles and trends being used for website image galleries and sliders. Below are a few examples from what I discovered… beforehand a list of some of the styles that are featured on websites.

  • Minimal Style
  • Scattered Photos
  • Image based Navigation
  • Grid-based Designs
  • Horizontal Image Content Slider
  • Grungy look
  • Interactive 3D Interfaces
  • Photos behind typography
  • Carousel Photo Gallery
  • Down Scrolling
  • Center Focused Layout
  • Modal or Light boxes

Arnaud Beelen

Art direction and Graphic design firm Arnaud Beelen used a creative spin for their website image gallery. Rather than using the traditional square shape or usual card design they opted for parallelogram thumbnail shapes. This gives them a unique innovative and intuitive competitive edge over all the other square-based galleries since it stands out.

Screen Shot 2015-07-29 at 12.45.28 PM                                                             http://www.arnaudbeelen.be/


 

Gallerific

This uses a jQuery plugin that is for high volumes of photos while conserving bandwidth.

Screen Shot 2015-07-29 at 1.49.39 PM


Free Faces

This website showcases the highest quality free fonts. An emphasis is placed on the text through the extreme close-up of symbols and letters that display the fonts in colourful icons. It’s a creative and artistic way to show the different fonts that communicate the websites context whilst being aesthetically pleasing.

Screen Shot 2015-07-29 at 12.34.34 PM

http://freefaces.simonfosterdesign.com/ 


 

Full sized Image

 

Screen Shot 2015-07-29 at 1.49.18 PM


Exposure

Exposure is another jQuery plugin which I can’t use but looking at the design, it features a large image with the other images in the gallery on the side. Another feature to consider

Screen Shot 2015-07-29 at 1.50.44 PM


 

Damian Watracz Design

Similar to Arnaud Beelen this website has strayed away from using square or circle shaped icons. As well as the icon shape being different there is a hover over effect that changes the image from black and white to colour and rotates the image. Screen Shot 2015-07-29 at 12.33.10 PMhttp://watracz.com/


Horizontal

Features a horizontal image slider with arrows that control the navigation between the images.

Screen Shot 2015-07-29 at 1.48.44 PM


Slider Gallery

Screen Shot 2015-07-29 at 1.49.47 PM

References

http://www.webdesignerdepot.com/2013/02/15-inspiring-galleries/

http://blog.entheosweb.com/ideas/100-creative-examples-of-sliders-galleries-in-web-design

http://blog.templatemonster.com/2010/09/28/design-trends-online-photo-galleries/

http://www.webdesignburn.com/2011/07/03/19-beautiful-jquery-image-galleryslideshow-tutorials-and-plugins/

http://code.tutsplus.com/articles/50-excellent-image-galleries-you-can-use-today–net-4063

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s