Scottish Financial News

Project type:
Web Redesign
Services:
Web design,
UI/UX
Client:
Scottish Financial News is the leading daily online news service for Scotland's community of accountants, auditors, finance directors and insolvency practitioners. They publish a free daily email newsletter which is sent directly to the inboxes of thousands of Scottish citizens working in the many diverse areas of the profession.
Project goals
The client contacted me with a request to do a redesign of few of their websites. They are running both Irish and Scottish legal and financial news websites which had very similar structure, so they basically needed a modern news website design template, which they could reuse and just change color nuances and logos for the different markets. The challenge here was to come up with a design that could fit many niches but still have some character. Another goal for this project was to bring more awareness to their social networks as well as their weekly/daily newsletters which are of great benefit to their readers. We've also had to include a directory with events and jobs for users to search from.
The client had a logotype based on a serif font so we discussed that this could be a good start for creative direction. I've crafted a moodboard to agree on the overall look and feel incorporating the font they've used and it fit perfectly with the newspaper feeling we were looking for the project. The text-heavy nature of the website made me go for a light and spacey style to enhance readability.

Approach
After agreeing on the style I've continued with wireframing. I chose 4 column grid for most of the pages where the layout would alternate between 1-column articles and big 2-column news containing a photo. The navigation was decided to be two levels deep respectively on a separate rows. The website counts on advertising to fund itself so I had to make space for different size banners too.
For the articles page I've gone with the 5 column grid in order to use the bigger part of the space - the 3 middle columns for displaying the main content centred for best reading experience. The other two columns contained floating elements like share buttons and author's information.


Mobile version

For the mobile version I had to come up with a reduced size typography for most of the headings. The navigation was hidden behind a hamburger menu so that only the "subscribe" button which is important for the readers will be always visible. The layout was also reduced to two column grid and headliners we made full width.
