The following guidelines are only useful accompanied by intuition, common sense and reasonable courage. These simple rules can
only improve the speed of decision making, but can barely replace any step of day-to-day design job.
Sergii Rodionov
Art-director of H&F
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.
1. Focus on content
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.
2. Less is more
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.
3. Keep consistency
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.
4. Useful should be beautiful
Make aesthetically pleasing design decisions, that carry a consistent meaning in their form and function.
BASICS
Typography
Basic fonts
There are three fonts in basis of site typography: extra-bold sans-serif type Franklin Gothic Heavy (headlines), slab-serif type Freight Micro Pro Book (contrast in headlines) and serif typefont Merriwheather Regular (body text).
You can find all fonts that we use for print and banner propose in team's Dropbox.
→ DROPBOX / H&F / 3.Fonts
Franklin Gothic URW Heavy
Primary font in the design language system. Using for headlines and typography accents.
Freight MIcro Pro Book
Using in bylines, preambles, rarely another headlines
Merri
wheather
Primary text font
Styles
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
Heading Grand
REGULAR
Freight Pro Micro
161/150
ITALIC
Adobe Text Pro Italic
155/150
BOLD
Franklin Gothic URW Heawy 150/150
USING: typography
accents, headlines, letters
Who I am: New New Yorker
Heading Large
REGULAR
Freight Pro Micro
54/50
ITALIC
Adobe Text Pro Italic
54/50
BOLD
Franklin Gothic URW Heawy 50/50
USING: titles, quotes
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.
Heading Medium
REGULAR
Freight Pro Micro
35/40
ITALIC
Adobe Text Pro Italic
38/40
BOLD
Franklin Gothic URW Heawy 31/40
USING: subtitles, quotes
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.
Heading Small
REGULAR
Freight Pro Micro
28/30
ITALIC
Adobe Text Pro Italic
29/30
BOLD
Franklin Gothic URW Heawy 27/30
USING: subtitles, quotes
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.
Heading XSmall
REGULAR
Freight Pro Micro
19/21
ITALIC
Adobe Text Pro Italic
21/21
BOLD
Font: Franklin Gothic URW Heawy
18/21
USING: subtitles, pullquotes, sidebars
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.
Body Standart
REGULAR
Freight Pro Micro
17/27
ITALIC
Adobe Text Pro Italic
21/27
BOLD
Franklin Gothic URW Heawy CAPS
15/27
USING: body text
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.
Body
Small
REGULAR
Freight Pro Micro
14/27
ITALIC
Adobe Text Pro Italic
15/17
BOLD
Franklin Gothic URW Heawy CAPS
13/17
USING: captions text, sidebars
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.
Vertical margins
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:
Heading Large x Body Standart / Heading XSmall x Body Small
Line breaking
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.
Line length
Too wide line enght – if the user's eye's hard to focus on the text. From another side, with too short lenght eyes jump from line to line very fast, that breaking the reader's rhythm.
E. Ruder wrote, that optimal line length for body text is considered to be 50-60 characters per line, other sources suggest that ideal lenght is 60-75 characters (1,2).
Line length in H&F is specified with gc (grid columns), 1 gc=140px.
Body Small (& Heading XSmall)
1GC/140px
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 photog's
vest.
✔︎ Works only for short text (up to 10 lines). Check line breaking.
2GC/300px
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.
✔︎ Ideal length for Body Small
3GC/460px
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.
✔︎ Normal readable length for Body Small
4GC/620px
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.
✔︎ Only for short text and secondary captions
5GC/760px
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.
✗ Too-wide
6GC/940px
✗ Too-wide
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.
Body Standart
1GC/140px
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 photog's
vest.
✗ Too-narrow
2GC/300px
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.
✗ Too-narrow
3GC/460px
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.
✔︎ Works only for short text. Check line breaking.
4GC/620px
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.
✔︎ Ideal
5GC/760px
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.
✗ Too-wide
6GC/940px
✗ Too-wide
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.
Recommendations:
1.1. Use Italic for proper names in text, BOLD (Capitals) for the first words of new paragraph (if accent needed to draw reader’s attention). Don't overuse them. Keep balance and harmony on page.
1.2. Too many font styles at once can wreck your layout. Good typography looks unnoticed. When type is set well, the user can focus on what you are trying to say rather than how you are saying it.
DON'T: Too many accents, large line gaps and orphants
DO: 4 logical steps: block title, lead, body text and caption
1.3. Use font colors and opacities (black/grey) to set accents and depth.
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
BASICS
Colors
H&F colors are inspired by New York City environvent: cooper and light grey interior deyails, yellow taxi, blue sky, brownstones, street signs, modern architecture. Colors are bright, vibrant and optimistic.
There are 9 primary colors in our palette. Do use them as basics in site interface elements, illustrations and photography. Don't use too many colors in one post. Ideally, it should be 3-4 colors in total.
Download color swatches:
↓ 0,4mb (ase)
How to LOAD SWATCHES TO PHOTOSHOP
Go into Swatch window on right of workplace in the little square setting box and click- you will see option to load swatches.
Examples
Interface
Infographics
“Question” Illustartion
Photosession of Yacht in studio
Turkey Red is the key color, taken from primary palette
BASICS
Grid
The goal of H&F grid is to bring order and consistency to a layout, enabling a designer to place content efficiently. Column grid – is universal tool of organizing visual space in our site, helps structurize all information and adapts elements for the mobile version. We use 6 column grid, 140 px width each separated with 20px gutters. Vertical margins are 10,20,30,40,60,80 px.
Tables are very important tool to design article elements over vertical grid.
For example: one of the most common 4-2 table means two columns: 300px/620px width.
visuals
Imagery
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.
Recommendations
Use original photography or illustration
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.
Stay away from stock
For specific articles or branded content, use specific imagery. For more abstract content, be interpretive. Photographic stock and clipart is neither specific nor interpretive.
Stock images feel inauthentic
For specific representations, use specific imagery
Have a point of focus
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
Place the most important objects and eye-catchers in center of lead image. We have automatic crop on the mobile with text overlay on the bottom.
Lead images
Sizing: 1880x984 px
Formats: JPG (mostly), PNG (vectors and few colors)
Follow technical requirments
Upload all images in JPG format. Exception – light vector illusatrations (PNG).
For the lead images upload the same JPG 1880x984 to the cover, badge and open graph boxes. Exception – superfeatures.
On the picture below we have the most useful image formats. Use the same aspect ratio and size images in one logical block.
Keep mobile layout on mind
Upload 300px width block images in 2x size (600px). It looks better on retina mobile screens. Check mobile layout synchronously with desctop.
VISUALS
Photography
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.
H&F Photostyle
We define H&F photostyle with contemporary, actual, graphic and story based photography with natural colors and tones. Here is some well recognizable approaches:
✔︎ Portraits: Natural environment, eye contact, observation, daylight
✔︎ Static object: Studio shot, plain-color background, soft shadows
✔︎ set of objects: pattern-like composition, graphic, geometrical
✔︎ architecture: Straight verticals and horisontals, daylight, geometry
✔︎ COMPOSITION: optical illusion
✔︎ PHOTOREPORT: object in action
✔︎ STATIC OBJECT: POV perspective, hands
✔︎ PHOTOREPORT: pattern-like composition
✔︎ PORTRAITS: Studio, experiments with light and colors, original poses with reason
✔︎ STATIC OBJECT: scan + cross-section
✔︎ food: human touch, hands
✔︎ Landscape/architecture: top view, geometry
✔︎ Still life: highlighting with paint
✔︎ STILL LIFE: unusual materials in context, unexpected combinations
✔︎ PHOTOREPORT: object in action, clean natural background, cold shadows, dynamic effect, observation
5.2. Commisionined photography
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. Pick-up
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. All photography
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”
5.5. Retouch
5.5.1. The colors should be natural, the object should look like in reality. Avoid excessive retouching, filters, film.
5.5.2. Each styling (B & W, sepia, film filters) should have a reasonable cause and logic.
5.5.3. Photos should be bright and contrasting. Avoid empty spaces in curves hystogram.
visuals
Illustration
Illustartions are important part of publication's visuals. They are effective for representing concepts and metaphors where specific photography might be alienating.
Illustartions should be original, stylish add significant value to the story and are self-sufficient to stand alone. Illustrations as lead images should reinforce archetypes/expectations or disrupt them. The meaning of large images should be understandable independently from the text. Small images function as transitions and correlate to the text near it.
LAYOUT
Front page layout
Front page looks like a feed with vertically aligned covers. There are 5 cover options
Super
feature A
The most important posts on site
Frequency:
Ideally 1 superfeature per 10 posts. Based on publishing schedule.
LOOK: custom designed cover
ideal for: illustartions and photos mixed with typography composition (for example in this cover of this post)
Micro
formats
(Numbers/Quotes/
Charts/Photos/Blogs)
FREQUENCY: daily
OPTIONS: standart wide covers on grey background
Super
feature B
The most important posts on site
FREQUENCY:
Ideally 1 superfeature per 5 posts. Based on publishing schedule.
LOOK: wide image with headline on overlay
IDEAL FOR:
photos with clean background without many details
Articles
Features, shows, news based posts and other articles have got covers with white edges
FREQUENCY: daily
OPTIONS: covers with narrow image or without it
Post covers on front page are the same with covers of article inside the post.
Exception
We can use diferent crops (first) or images (when it's resonable) only for superfeatures
Recommendations:
6.1. Do not overuse wide covers. Contrast between them and simple covers with white edges helps to set accents on front page. 1 wide cover per 5-10 simple covers.
6.2. Do not overuse illustrations, it makes the whole main page flat and dull. Allways mix illustrations with photos: 1 illustaration per 2 photos
minimum.
6.3. Pay attention to the colors. Do not publish two posts with yellow background in row, for example.
Let's check the basic elements of post:
Structure
Lay out mobile and screen together in one time
Design elements:
1) Flow and other post information
2) Headline
3) Cover image
4) Preamble
5) Sharing buttons
6) Intro
7) Body text
8) Author block
9) Caption to the cover image
10) Sidebar with bio of hero (usually for interviews)
11) Sidebars (numbers, facts, other)
12) Photos, illustrations and other embeds
13) Captions to the photographs and illustartions
14) Wide info blocks
14) Captions on the end
15) Banners
7.1. There are 2 basic layout templates:
Based on 4-2 table-grid with wide column on the left and narrow on the right for special notes and numbers (sidebars).
Based on 1-4-1 table-grid with wide column on the center and sidebars on narrow right column.
Recommendations:
1) Author block is located on right side beside Intro. Use ‘Reverse order’ table parameter to appear authors before Intro on mobile.
2) In most situations author block looks good left-aligned on 2 column-cell.
3) Editorial vertical banner is required in each post in second browser frame scrolling from top . Exceptions: superfeatures, where banner breaks design concept and no way to embed it.
Balance in layout
1) Layers-based design should be logical, and layers shouldn’t looks like stripes
2) Balance ‘text-illustartion-text’. Illusatrtions should be evenly lay out
Layout templates
Layout formats: Microformats (special blocks) – Shows (consistent design) – Formats and other arcticles (general directions to design + special blocks) – Superfeatures (general directions to design + special blocks+creativity)
Microformats
Number of the Day
Reference – ‘3,000 train delays occurred each month this year in NYC because of sick passengers’
Pay attention to the caption size. Ideally it should be 2-3 lines.
OG image – https://www.dropbox.com/s/kzy62s5x386mn83/number_of_the_day.psd?dl=0
Sharing – take screengrab of the cover
Quote of the Day
Reference – ‘It’s all charade’
Pay attention to the quote size. Ideally it should be 5-8 lines.
Portrait (300x300, PNG) – https://www.dropbox.com/s/6j9rb4fupe8u34m/quote_of_the_day_portrait.psd?dl=0
OG
https://www.dropbox.com/s/99uwpaxmg04ktkh/cover.psd?dl=0
Sharing image – take screengrab of the cover
Don’t hesitate to contact us if you haveany questions or comments: