Contact

NIépce: online magazine about the art of photography

Graphic, Photography, Web, UI Design

Mar 2022

Team

personal project

My Role

Graphic, Web,
UI Design

Time

3 weeks

NIépce is an online magazine about photography. I created the branding and a desktop design for their website.

Brainstorming session

Heliograph on pewter plate by Joseph Nicéphore Niépce, taken at Le Gras, France. 1827

Joseph Nicéphore Niépce.
French inventor, usually credited as the inventor of photography and a pioneer in that field.

about the mag

Niepce is an online magazine named after Joseph Nicéphore Niépce, a French inventor, usually credited with the invention of photography.

This is a place to get inspired or to learn more about the art of photography. You wouldn't go here to know which camera to buy. But if you want to know how exactly the picture appears on the film or what makes the works of Annie Leibovitz so special, then Niepce is exactly what you are looking for.

Brainstorming sessionBrainstorming session

#1A160D

The look and feel for Niepce branding is based on analog photography. The colors were taken from a film strip. Black is never pure black, instead it's a dark shade of brown. That makes everything a little "faded", which is exactly the feeling you get from analog photography.

Throughout the whole website only black and white colors are used for text and card elements. The accent color for the identity is a gradient which is also heavily inspired by artefacts on a film strip.

Brainstorming sessionBrainstorming sessionBrainstorming session

ligatures and fancy letters

For the typeface I chose Gooper from Very Cool Studio in thin. It has a lot of cool ligatures and alternate glyphs with swashes which adds so much character to the identity. The bold versions don't really fit the general look and feel of Niepce, that's why I mostly make use of Light or Thin and only for headings.

For the body copy I chose TT Norms Pro from Type Type . It's a very well made sans-serif font which works great for long chunks of text in the articles. It's not very special at a glance, but if you go deeper, you'll notice that it also has a lot of alternate glyphs which lets you play around with it. These two work very nicely together keeping the balance between readability and expressiveness.

Brainstorming session

Photography

Creating rules for photography treatment was rather simple. Since that's a photography-related magazine, it's very important that we let photography really stand out on its own without any interruptions. The main rule is to give them as much space and attention as possible.

That's why the images would never use any kinds of color overlays on top. The only exeption for that is text. That's the only thing that can appear on top of an image and only if it's a cover of an article.

Brainstorming sessionBrainstorming session
Brainstorming sessionBrainstorming session
Brainstorming sessionBrainstorming session
Brainstorming sessionBrainstorming session

Home page

The layout of the homepage is built in such a way, that when you land on it, you'd be exposed to an almost fullscreen gallery with featured articles.

Lower you'd find sections with latest articles and the main section with all the articles available on Niepce. The layout has a lot of white space thanks to light typography on headers and spacings between cards. There's room to breath and to focus on photos.

The background with the gradient keeps referring to that film strip that the whole branding is based on. It doesn't distract too much yet maintains the look and feel.

Same goes for the footer. It's very minimal with small text, big spacings and an inverted version of the gradient.

Brainstorming session

Full-size home page

Regular Article Template

The next thing to design was a template for an article. It should fit all kinds of articles and be easy to re-use.

Most of the space on the hero section would be taken by the cover image with the title and secondary information on the left. The text would slightly overlap the image to immerse the photo into the layout a little more.

The body copy would always be on the right side of the page and all kinds of images, videos, quotes or other content would be either on the left column or would cut through the body copy and take up full width of the screen.

One of the decisions that I took here is to make use of the swashes not only in the title and the lead-in copy, but also in the body text in the form of dropped capitals. This makes the two different fonts match even more and maintain the look and feel even in plain text.

The article would be followed by suggestions of other reads and the global footer.

Brainstorming sessionBrainstorming sessionBrainstorming session

Full-size regular article template

Hero for regular articles

Brainstorming session

Featured Article

As well as regular articles Niepce would also have long-read stories which would take significantly more time to write and research. That's why it would only make sense to design and build more unique pages for these articles. The one I chose to design is about how light actually works and how we can capture it on film.

The article is quite heavy on physics and chemistry, so the main goal is to make all of the science easy to understand for people. I think that explaining all the concepts from the study is way easier using interactions and animations. So that was exactly the approach.

Wall installation 3d concept render

Prototype of a cover image for "How Light Really Works" long-read article.

The cover is a very simple animation of a beam of light which bends, splits, disperses. As you scroll, all the separate beams would come together into one single beam. The study has multiple sections and the first one is about camera obscura. Here the animation shows how the light and the perceived image actually turns upside-down inside of the camera.

Prototype for interactive parts of the article.

Wall installation 3d concept render

The next sections is about focal length and focus. This part is quite difficult to understand in words, so that's where I decided to make it interactive. It's a little game where you can switch the places of the prisms inside a camera and see how it affects the beams of light. Depending on the types of prisms and their order you would either get a blurry or a stable picture. This simple interaction makes the concepts of the articles so much easier to comprehend.

In the article there are so many more chapters and the rest of them would be designed with the same approach. The outro of the article would be a grid of most famous and important photos of our time with the final thoughts and conclusion.

Brainstorming session

The end of the long-read article.

Brainstorming session

Sep 9, 2022

Next Project

DIGITAL SURFACES: MIXING PHYSICAL TEXTURES WITH DIGITAL ART

Read