Principles

Hopes&Fears is an online publication exploring life and culture through thematic, visually-oriented international coverage and commentary.

We pay special attention to quality of visuals, layout and the way how story is told from design perspective.

We constantly keep THESE 4 PRINCIPLES in mind when making design decisions at H&F and we encourage you to adopt them as well.

Give the content center stage in article layout. Nothing should prevent from reading and understanding information. Design helps to tell story in most interesting and beautiful way and shouldn't be distractive.

Don't overuse a lot of font styles, colors and other design elements without reason. Try to find elegant, beautiful solution with minimum tools without wasting time and meaning.

Create familiarity for users and readers by applying the same solution to the same problem. Drive consistency and integration in the experience to keep the reading seamless, familiar and harmonious.

Freight MIcro Pro Book

Using in bylines, preambles, rarely another headlines

Merri
wheather

Primary text font

Too many font styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

These sizes and styles were developed to balance content density and reading comfort under typical usage conditions. Type sizes are specified with sp (scaleable pixels) to enable large type modes for accessibility.

Refrase

Who I am: New New Yorker

My punk vest was actually
a really good version of 
a photographer's vest. It has the standard outside vest pockets that are great for batteries, but 
I had the inner pockets added that are great for a water bottle or even a flash.

I only use waterproof bags. It has a very slim profile and is extremely good for quick access, I can swing it around my body and get it open very easily.
At a crowded concert I will often start with it in front of me so it's a bit of a buffer from people banging into me. Sometimes when you're climbing, you need to be able to shift your bag to be able to clear something. A lot of very serious photographers have these very ugly, usually beige, photographer vests. My punk vest was actually a really good version of a photographer's vest. It has the standard outside vest pockets that are great for batteries, but I had the inner pockets added that are great for a water bottle or even a flash.

I only use waterproof bags. It has a very slim profile and is extremely good for quick access,
I can swing it around my body and get it open very easily. At a crowded concert I will often start with it in front of me so it's a bit of a buffer from people banging into me. Sometimes when you're climbing, you need to be able to shift your bag to be able to clear something.

A lot of very serious photographers have these very ugly, usually beige, photographer vests. My punk vest was actually a really good version of a photographer's vest. It has the standard outside vest pockets that are great for batteries, but I had the inner pockets added that are great for a water bottle or even a flash.

I only use waterproof bags. It has a very slim profile and is extremely good for quick access, I can swing it around my body and get it open very easily. At a crowded concert I will often start with it in front of me so it's a bit of a buffer from people banging into me. Sometimes when you're climbing, you need to be able to shift your bag to be able to clear something.

A lot of very serious photographers have these very ugly, usually beige, photographer vests. My punk vest was actually a really good version of a photographer's vest. It has the standard outside vest pockets that are great for batteries, but I had the inner pockets added that are great for a water bottle or even a flash.

I can't have something binding me up when I'm trying to climb a wall.
I stick with pants that have some spandex give and a slimmer cut because I don't have to worry about getting caught in a bicycle chain.

Common uses are covering my face when it's cold to circulate my breath or to avoid detection or recognition. Sometimes you just really need to clean your hands and it's way nicer to have something to do that with so you can get back to shooting.

I only use waterproof bags. It has a very slim profile and is extremely good for quick access, I can swing it around my body and get it open very easily. At a crowded concert I will often start with it in front of me so it's a bit of a buffer from people banging into me. Sometimes when you're climbing, you need to be able to shift your bag to be able to clear something.

A lot of very serious photographers have these very ugly, usually beige, photographer vests. My punk vest was actually a really good version of a photographer's vest. It has the standard outside vest pockets that are great for batteries, but I had the inner pockets added that are great for a water bottle or even a flash.

I can't have something binding me up when I'm trying to climb a wall. 
I stick with pants that have some spandex give and a slimmer cut because I don't have to worry about getting caught in a bicycle chain. 

I ONLY USE WATERPROOF BAGS. It has a very slim profile and is extremely good for quick access, I can swing it around my body and get it open very easily. At a crowded concert I will often start with it in front of me so it's a bit of a buffer from people banging into me. Sometimes when you're climbing, you need to be able to shift your bag to be able to clear something.

A lot of very serious photographers have these very ugly, usually beige, photographer vests. My punk vest was actually a really good version of a photographer's vest. It has the standard outside vest pockets that are great for batteries, but I had the inner pockets added that are great for a water bottle or even a flash.

I can't have something binding me up when I'm trying to climb a wall. I stick with pants that have some spandex give and a slimmer cut because I don't have to worry about getting caught in a bicycle chain. 

In layout we use system of 7 vertical margins (10,20,30,40,60 and 80 px). Set margins between text blocks depending line spacing of up-standing text-block to achieve proper readability and appropriate pacing. Here are some common examples from our practice:

Avoid leaving large gaps and orphans on a line in headlines, sidebars and pullquotes. Try not to leave very short words such as prepositions at the end of a line. Use non-breaking spaces and shift-enter to fix this issues, and both layouts – mobile and desctop. 

DON'T: Too many accents, large line gaps and orphants

DO: 4 logical steps: block title, lead, body text and caption

1.4. Use reasonably other fonts and letterings in titles and letters in superfeatures. For example, cover of this guide.

→ Read also: How to design Superfeature 

We percieve images faster than text. We remember articles from their pictures and visual images. Bold, smart, graphic, and intentional imagery helps to engage reader to the post and get more views.

Each feature should have original, shareable visuals (photography or illustartion) which add significant value to the story and are self-sufficient to stand alone. Photography automatically implies a degree of specificity and should be used to showcase specific entities and stories (for example, interview with people). Illustration is effective for representing concepts and metaphors where specific photography might be alienating.

Do not overuse illustrations for the covers, it makes the whole main page flat and dull. Allways mix illustrations with photos: 
1 illustration per 2 PHOTOS minimum.

For specific articles or branded content, use specific imagery. For more abstract content, be interpretive. Photographic stock and clipart is neither specific nor interpretive.

Focus ranges from a single entity to an overarching composition. Ensure that a clear concept is conveyed to the user in a memorable way.

Too many details, looks messy, there aren't obvious eye-catcher

Original photography is the basis of visual storytelling on Hopes&Fears. All photos must have a function, not just a look. Photos must drive the story forward and provide insight and details that text, illustration, and data cannot.

We define H&F photostyle with contemporary, actual, graphic and story based photography with natural colors and tones. Here is some well recognizable approaches:

5.2.1. Whenever possible, commission original photography

5.2.2. Whenever possible, shoot on location (outside of the studio)

— In studio is for product photography and for logistical purposes when the subject does not need to be in their environment

— Portrait photography has no unnecessary stylization 

5.2.3. Photographers must be commissioned based on interest first, aesthetic second. The story should have some relation to their past editorial work and/or personal projects. Look for photographers who are the best within their particular aesthetic pursuit that we can afford.

5.2.4. Use of unusual or extreme aesthetics must have a function that furthers the story or exist as a formal metaphor for the tone of the story.

5.3.1. Pick up photos and existing photo projects only if unpublished or not widely seen online.

5.3.2. Wire service first, commons second

5.3.3. Wikipedia’s rights are not reliable and often false

5.3.4. Less is more: only use images that actually are needed to tell the story

5.3.5. Fair use policy: one-time single-image use sans permission or licensing agreement permitted if the image(s) itself is the subject of the story, not just illustrative of the story. Credit and source whenever possible.

NEWS: Whenever possible, avoid use of photos in the Creative Commons, i.e. Flickr, Wikipedia, etc. (Too recognizable.)

5.4.1. All photos must have a function, not just a look. Photos must drive the story forward and provide insight and details that text, illustration, and data cannot. No filler. Less is more.

5.4.2. Photo editors must be able to articulate the logic behind every sequence decision and lead image selection. 

5.4.3. All photos must stand alone with just a caption.

5.4.4. Site credits for original photography should read “TKName for Hopes&Fears”