Content design with featured panels

An effective way to promote courses, facilities and research is by telling 'stories', crafted for your audience. Using panels in Site Editor to do this allows you to highlight key elements of your marketing message and encourages users to navigate to more detail.

Image and video panels are widely used for feature content such as profiles, news stories and events.

Telling stories is fundamentally human, one of our most ancient communication methods. Good stories have the power to change our attitudes, beliefs, and behaviors - they are motivating, immersive and build empathy.

You need a clear understanding why you are creating a story (or any content) in the first place. Who is it for? What does it aim to achieve?

Write a user story first to help clarify this.

An example user story

It may seem obvious, but writing it down helps you to focus and clarify the intent from a user’s point of view

Once you have a valid case for a story (it serves a business and a user need), then consider the best way to present the content.

Quality images, videos and editorial are needed to give your content the impact and punch it deserves.

These need to be maintained at a high level as part of the agreement in using the new template. This shows that we care about the people consuming the content and protects our professional image.

Learn more about choosing impactful images and creating video.

Profiles make for irresistible featured content. Humans naturally focus on faces, interpreting their expressions. Is this person interested or bored? Relaxed or anxious? Confident or hesitant? Friendly or distant? It only takes a moment to assess a person’s state of mind and their situation. And that, in itself, can tell a story.

Pull-out quotes provide another storytelling opportunity. Ideally these should not be too generic. A comment that sounds fresh and genuine is always more interesting and convincing to the user.. Profiles can also:

• help with ‘fit’ - if prospective students relates to a person’s profile, this aspiration helps them to picture themselves here
• carry credibility – these are stories about real people sharing their experience in their own words
• bring dry information to life by providing real-life examples
• inspire a deeper level of interest – we’re are inherently curious about other people
• portray a sense of community, for instance within a School.

• This example links to a standard course profile
• A strong, professional photo creates an approachable, friendly atmosphere. She is clearly in a lab setting, relevant to her course and the School's facilities.
• The image works well within the feature panel design - the block head design element doesn't overlap important subject matter in the photo.
• The subject's face is not too zoomed in or too distant.
• The short quote sells an important aspect of the school.
• You feel encouraged to learn more about Olyvia and her experiences studying her course.

• An excellent image, this sets out a strong story to pique your curiosity. The subject is interacting with someone and something and looks genuinely interested in the conversation.
• The image works well within the design of the feature panel.

• A good example of a standard course profile.
• A excellent image that clearly portrays a story. It has character and atmosphere. Some spot colour adds some interest.
• Nicely positioned within the feature panel.

Video is powerful content. 'Talking head' videos work well alongside a strong profile picture.

• A good example of a "talking head" video.
• A strong image - slightly more serious and challenging, but still approachable.
• The image works well within the design of the feature panel.

• A good example of a 'talking head' video.
• The image tells a story. What is happening? How does this relate to career opportunities?

Use Think Kent videos to showcase our excellent staff.

• A good example of a profile image for a Think Kent video.
• The chosen image fits in well within the feature panel.
• It feels friendly and gives you a sense of the character of the speaker.

• An example of a Think Kent video presented in a different way.
• The image relates to the topic of the lecture and tells a story. What is this person doing? Where is he? What is this about? The image is interesting and pulls you into the content.
• The photograph was not taken for Kent but is a royalty free image. Some sites allow to use an image for free. Don't compromise on quality; if you cannot find the right image for free, consider using an image libary such as istock.

Although a specific topic may be in focus for news or events, they always revolve around a person or people. They contain the same elements that makes a profiles effective. Indeed a profile can equally link to a good story that involves that person.

• A good example of a profile which leads a news story.
• The image creates a warm and inviting atmosphere.
• The reflections in the glass add colour and interest.
• The high standard of the image – taken by a photographer – helps to convey quality and professionalism.

• An example of a news article story.
• This is a powerful image that has lots of energy.
• It works well with the feature panel dimensions.
• The image and the copy are working in tandem.
• The image is a paid-for image from istock. It may be worth investing in a good quality stock image for a specific topic.

• An example of a news article story.
• The image tells a story and is positioned carefully to work within the constraints of the design.
• This is a royalty free image.

• An example of an event using a call-to-action feature panel.
• A strong image which is overlayed with text.
• The image is positioned sympathetically to the text.

• An example of an event using a feature panel.
• A high, impact, quality images draws your attention. It sets an atmosphere.

Sometimes you want to feature standard pages such as an about or facilities page.

• An example of a standard page (about) being promoted using a standard feature panel.

Specifications for a feature panel.

Topic heading

• Displays the topic heading.
• Use a short heading, try stick to two lines on desktop - max 25 characters.
• Positioned left by default, but can be positioned right. Position with consideration to the subject of the image.

Topic description

• Keep short and concise, about 4 lines on desktop - max 200 characters.

Story heading

• Links to a specific story.
• Keep the title text short - max 60 characters.
• Try keep the heading shorter that the description text below it.

Story standfirst

• Intro to the story with a 'hook'.
• Keep the description text short - max 100 characters.
• Don't use a full stop at the end of the description.

Image attribution

• Using the use the right licences and attributions for your images.

Keep your content relevant by planning ahead.

Quality content design is work - it requires good imagery, videos and editorial. It needs to be thought about and planned for strategically.

Using a poor image or video due to last-minute urgency can undermine the quality of your entire site and perception of the University. Your site needs to maintain a standard.

When to update images

If a page is serving its purpose well it may not need to be regularly updated. The frequency depends on the type of content that you have displayed.

Some new stories, even though they are old - are still valuable stories to promote.

Profiles do eventually age, and it's helpful to have a fresh pool to swap in and use.

Upcoming events, often determined by the academic calendar, need to be kept up to date. They should be publicised beforehand to increase attendance and taken down (or rewritten as a retrospective news story) after they have finished. For event photography aim to catch people mid-activity rather than put them in a posed position for the camera. This usually requires the reportage skills of a professional photographer who can capture atmosphere and activity.

Editorial calendar

An editorial calendar helps you see the academic year ahead and gives you a chance to plan your content.

Build up your photography stock

Having a budget set aside to have a photoshoot each year can help immensely. A good pool of quality photos will help save you time and frustration for when you need them. When planning content, try to think of a interesting angle: are there visual ways to convey what a researcher or student does, whether it be curating an art exhibition or solving an equation?

Learn more about choosing images.

Plan ahead for videos

We recommend using a professional service, such as some of the providers we have worked with.

Learn more about creating videos.