The Story

LENS is aimed at pho­tog­ra­phers or pho­tog­ra­phy agen­cies main­ly, but not restrict­ed to this. It is a very visu­al theme so it is aimed at any cre­ative that wants to show­case his/her visu­al cre­ations. With this in mind, let me walk you through the main ideas that were behind design­ing LENS.

First of we want­ed a style that was both min­i­mal and flat but at the same time focused on typog­ra­phy (white space, pro­por­tions, grids, and all these). In the image bel­low you can see the style guide that high­lights how these con­cepts were mate­ri­al­ized into LENS:


On top of this typog­ra­phy con­cept, we’ve over­laid our vision for por­tray­ing a visu­al sto­ry in a web con­text. This led us to the ver­ti­cal menu/sidebar on the left and the full-width right sec­tion that plays with grids, columns, text and much more.

Start­ing from these gen­er­al con­cepts, let’s go a lit­tle deep­er into each cus­tom tem­plate we’ve designed and brought to the screen.

Your Work

This is where most of our efforts were con­cen­trat­ed because we real­ly like pho­tog­ra­phy and the sto­ries behind it. We have opt­ed to pro­vide 2 dif­fer­ent ways to show­case your work: Gal­leries and Projects. While they share sim­i­lar­i­ties in terms of the grid that is used to dis­play their archive pages (these are both Word­Press Cus­tom Post Types), this is where the paths diverge.

The Gal­leries are aimed at an all visu­al expe­ri­ence: you sim­ply cre­ate a new Gallery and add pho­tos (plus some option­al small cap­tions), order them and you are good to go. You can dis­play each indi­vid­ual gallery in 3 ways: in the shape of a grid gallery, a full-width slid­er (the left side­bar remains vis­i­ble) or, for an even more immer­sive expe­ri­ence, a full-screen slid­er (with only the logo and menu being vis­i­ble – trans­par­ent).

The Projects, on the oth­er hand, are focused on pro­vid­ing you with the tools to tell a more detailed sto­ry of your shots. This is achieved through mul­ti­ple sin­gle project tem­plates that com­bine text with image gal­leries (slid­ers or sim­ple image grids). The archive page for projects is pret­ty much sim­i­lar to the one of the Gal­leries, with some extra info on hov­er (title, cat­e­go­ry, and likes). When it comes to indi­vid­ual projects, you get to choose from 3 tem­plates:

  • Full-Width Project – with a full-width image slid­er at the top show­cas­ing the project’s gallery, and the main con­tent sec­tion bel­low con­sist­ing of: con­tent, meta info, cat­e­gories, like and share but­tons;
  • Project With Right Side­bar – use this to dis­play your projects in a more relaxed fash­ion, with the image gallery in the cen­ter, and the con­tent, meta info, like and share but­tons on the right side. This will give you a more bal­anced visu­al effect;
  • Clas­sic Project – this project tem­plate tries to deliv­er a more old school atmos­phere to your site by using a sin­gle col­umn with the title and con­tent at the top, fol­lowed by the image gallery and the like and share but­tons.

On any of these tem­plates, you can opt to show relat­ed projects at the bot­tom using the famous and wide­ly used YARPP Word­Press Plu­g­in. A nice­ly inte­grat­ed image grid with relat­ed projects will appear under the main con­tent areas.

Your Thoughts

For you thoughts and point-of-views (or any­thing in between for what mat­ters), we have envi­sioned the design of the Jour­nal  a more fan­cy way of nam­ing the blog :) with light and bal­anced archive and sin­gle posts pages, con­sis­tent with the rest of the site.

The archives (main archive, search, cat­e­go­ry, tags, dates, etc) fea­ture a care­ful­ly bal­anced mason­ry posts grid with all the ele­ments need­ed to get your vis­i­tors engaged. It is all about blend­ing beau­ti­ful typog­ra­phy with nice visu­als.

The sin­gle post pages are quite con­ser­v­a­tive in lay­out (main con­tent and right side­bar in addi­tion to the all present left side­bar) allow­ing you to focus on com­pos­ing your well-thought posts with images, quotes, and oth­ers. We’ve tried to strip away all that would focus atten­tion else­where than on your con­tent, with­out los­ing func­tion­al­i­ty of course.

If you are in for Post For­mats, we’ve got that cov­ered with Video, Audio, Gallery and Quote post for­mats cus­tom designed.

The Homepage?!?

What?! No home­page tem­plate?! Yep. We felt that it would be a shame to deliv­er you a fixed home­page view when you have so many to choose from.

Why not make the Gal­leries or the Projects archive pages your home page and sur­prise your view­ers with your work. Or would you rather let words speak first? We believe the blog main archive would be a suit­able can­di­date with its mason­ry mag­ic. Still search­ing? Why not make a cus­tom page using some care­ful­ly writ­ten text, some inter­est­ing visu­als, and some short­code mag­ic (see our Pix­Codes plu­g­in).

Some Fairy Dust

Because fairies do exist (no, real­ly) we’ve come to sprin­kle fast and smooth page tran­si­tions here and there, tak­ing advan­tage of our awe­some knowl­edge of CSS3 and oth­er recent tricks (fair­ly mod­est­ly speak­ing). Now joke aside, no pho­tog­ra­ph­er sees it works sta­t­ic (with very rare excep­tions). In his mind, they are all mov­ing. This is why we’ve decid­ed to add an ele­ment of sur­prise and dynamism to the whole site brows­ing by using dynam­ic (AJAX) load­ing and ani­mat­ed in and outs for pages. Each page tem­plate has its own log­ic of com­ing and exit­ing the spot­light, as it should be since each aims at a dif­fer­ent facet of the artist.

This pret­ty much wraps it in terms of why we did what we did. We hope you can relate to our deci­sions and make LENS work for and with you.

Addi­tion­al Read­ings:

This article applies to Lens, as they share the same underlying structure.

Updated on April 20, 2017

Was this article helpful?