Showcasing High-Res Photography: Design Tips & Tricks

Categories Articles

Instagram, Flickr, Pinterest, Tumblr… the advent of photo-heavy apps and social networking sites reinvigorated an interest in great photography at a time when advances in digital photography have significantly reduced the cost to access high-quality photography tools. Smartphones come standard with cameras, and enterprising amateur photographers can even invest in lenses for these devices, and complete simple, straightforward editing projects using web-based apps and programs.

All of these improvements in photography have largely coincided with improvements in web design, from responsive coding to parallax and other opportunities to display rich, high-quality and high-resolution images. For those wanting to digitally display photos, this is great news, and we’re going to highlight some of the best and cutting-edge methods to use web design to beautifully showcase stunning photography.

If you’re using Drupal or WordPress, there are hundreds of high-quality photography plugins available for you to easily maximize photos on your website, from sliders to  hover-over effects to full-screen coverage. But if you’re wanting to take full control, the following tutorials will help you incorporate high-impact elements with your photo display.

Ghost Buttons

Since 2015, it’s been an increasingly popular trend to use massive high-definition, high-impact photos on home pages. But for home pages with buttons or links, those buttons would often interfere with the visual capital of the image, ruining an otherwise jaw-dropping photo with a pop of unnecessary color. Ghost buttons have no fill color or shadow, allowing minimal interruption of the photo. This leverages the high-impact visual content behind the button, and for savvy designers, provides an optimal user experience by still permitting easy foreground navigation without sacrificing good design.

To begin making your ghost button with CSS, first create a “ghost button” a class. To make a standard white ghost button, your CSS information for that class should look something like the example below:

.ghost-button {

  display: inline-block;

  width: 300px;

  padding: 10px;

  color: #fff;

  border: 1px solid #fff;

  text-align: center;

  outline: none;

  text-decoration: none;

}

It’s easy to modify the properties above to adjust the look and feel of the ghost button. Examples of easy adjustments include rounded corners, color-fill hover-over effects, transitions, and thicker borders.

Touch Content Sliders

More and more web-users are viewing websites from mobile devices, or from computers with touch-enabled interfaces. A great designer should always incorporate ‘prev’ and ‘next’ buttons or arrows for traditional computer users, but there’s an increasing benefit to considering touch users.

To add touch capabilities to a slider or gallery, begin with a simply HTML page, style sheet, sample images, and JQuery and SwipeJS folders. The first priority will be to set up your SwipeJS folders.

Begin by making an ID’d div tag which will wrap the slide.

<div id=’homeslider’ class=’touchswipe’>

  <div class=’touchswipe-wrap’>

    <div><img src=”img/01.jpg” width=”1200″ height=”600″></div>

    <div><img src=”img/02.jpg” width=”1200″ height=”600″></div>

    <div><img src=”img/03.jpg” width=”1200″ height=”600″></div>

    <div><img src=”img/04.jpg” width=”1200″ height=”600″></div>

    <div><img src=”img/05.jpg” width=”1200″ height=”600″></div>

  </div>

</div>

Now, you’ll need to define your “touchswipe” rules, which will help to instruct your page on the optimal size of your slider.

.touchswipe {

  overflow: hidden;

  position: relative;

  max-width: 1200px;

  width: 100%;

  height: 600px;

  margin: 80px auto 0;

}

.touchswipe-wrap {

  overflow: hidden;

  position: relative;

}

.touchswipe-wrap > div {

  float: left;

  width: 100%;

  position: relative;

}

Once that’s done, you can either add the script at the bottom of the page – ensuring the entire document is loaded before the script – or you can add jQuery ready text, like the following:

$(document).ready(function(){

  // Slider = $(‘#homeslider’).touchswipe().data(‘touchswipe’);

});

This should allow the slider which loads to be easily manipulated using touch screens, whether from a tablet, smartphone, or touch-capable computer.

The Bottom Line

Designing great portfolio websites, or even impressive photography-heavy splash pages, can be difficult for beginners and those unfamiliar with JS and jQuery techniques. But these simple tutorials should demonstrate how to correctly incorporate high-impact design and UX elements which can decrease visual clutter on photos and improve the user’s overall experience.

header image courtesy of  stocksnap

Catalin is the founder of Mostash - a social marketing boutique - and he's always happy to share his passion for graphic design & social media.