FHG News

School newspaper of my grammar school

After the student newspaper of the Franz-Haniel-Gymnasium called FHG News had published four printed editions from June 2017 to July 2018, the editorial team decided to publish their articles more regularly online from now on. For this purpose, I developed a WordPress website with blog function and information pages by September 2018. I implemented all the required functionalities myself in a custom theme, so no further external plugins were needed.

Project details

Services Concept, UI Design, Web Development
Tools Adobe Illustrator, Adobe XD, WordPress
Year 2018
Preview fhgnews.de

Idea

The idea

The problem

Publishing print issues with mostly 32 pages requires editors to write many articles within 3 months and to finish them all at the same time. Due to lack of time, this solution proved to be rather deficient in the long run.

That's why the editorial team decided in summer 2018 to switch to an online website from now on. This enables better organization of the articles, as individual articles can be published regularly by ever-changing editors. In this way, the editors have more time to complete their articles and there are no breaks after a successful publication. In addition, issues no longer have to be sold to students and teachers over several days for 50 cents each. Instead, articles can be viewed online for free whenever desired.

The solution

The resulting website efficiently solves the problems of print publishing by allowing editors to log in online and continue writing their articles in a user-friendly editor. On the back end of the site, editors can view and modify their organizational schedule, ensuring that everyone always knows when which articles will be published. For the readership, the website provides an overview of all posts at the front end. These can be liked and commented on, so that the editorial team is in direct contact with its readers.

The new blog is based on the content management system WordPress. For this I developed a precisely customized theme, which combines all the required functionalities and of course the design in one pack. So no additional extensions from external providers are needed and the code can be adjusted at any time if necessary.

Concept

The concept

Editorial

The editorial team gets new possibilities to write articles through the website. They are now no longer limited to text and images, but can also exploit videos, podcasts, polls and other interactive formats. To allow editors to incorporate this into a post, I decided to use the Gutenberg editor. This offers an easy to understand interface to be able to use the previously modest formats without needing a lot of prior knowledge.

Flow Chart

Readership

Readers can access all articles free of charge at any time. The online presence of the school newspaper also gives them new opportunities for co-determination. They can use likes to show what they enjoy and what they would like to see more of, and comments allow for exchange and discussion on a particular topic.

To stay up to date, readers can authorize the website to send them notifications of new publications. The website can also be installed as a WebApp and accessed offline. Previously viewed articles can thus be read even without an internet connection.

Target group

The target group

Primary target group

Predominantly students and teachers are to be reached and informed with the contributions of the school newspaper. The online newspaper can also be used for teaching and teachers can have projects of their students published. The articles can be viewed not only at school during breaks, but also at home.

Secondary target group

Parents of Franz-Haniel-Gymnasium students or other interested parties can also learn more about the school through the website. In this way, parents whose child will soon be attending a secondary school can gain an insight into the school atmosphere and everyday school life, making it easier for them to decide on the right school.

Design

The design

User Interface

Use of the material design

  • Quick comprehensibility
  • Good user experience
  • Suitable for young target group

Action Button

App Bar

Icon Button

Card

Fixed Footer

Colors

As the main color, a light blue provides accents. This blue was already used in the print editions as a recognition feature. The other four colors stand for different categories of articles and are used exclusively in this context.

#428ECC

#673AB7

#F44336

#3F51B5

#FF9800

Typography

The Roboto font is not only the standard font of the Material Design, but was also used in the printed editions of the school newspaper and ensures a good reading flow due to its simplicity.

Roboto

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz , . ! ? / 0 1 2 3 4 5 6 7 8 9

Visit website

Result

The result